.dashboard-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;

    width: var(--sidebar-width);
    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 20px 14px 16px;

    color: var(--sidebar-text);

    background:
        linear-gradient(
            180deg,
            #071d2b 0%,
            var(--sidebar-bg) 58%,
            #071a27 100%
        );

    overflow-y: auto;
    overscroll-behavior: contain;
}


/* =========================================================
   MOBILE VARIANT
   ========================================================= */

.dashboard-sidebar--mobile {
    display: none;
}


/* =========================================================
   BRAND
   ========================================================= */

.sidebar-brand {
    padding: 12px 10px 14px;
}


.sidebar-brand__mark {
    display: flex;
    align-items: center;

    gap: 9px;

    color: inherit;

    text-decoration: none;
}


/*
 * Neutral platform brand mark.
 *
 * IMPORTANT:
 * Uses --brand-green legacy variable names,
 * but those variables now represent the platform's
 * neutral blue UI accent.
 *
 * JLP electoral colour must use --party-jlp instead.
 */

.sidebar-brand__icon {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    color: var(--text-inverse);

    background:
        linear-gradient(
            145deg,
            var(--brand-green),
            var(--brand-green-hover)
        );

    box-shadow:
        0 7px 20px
        rgba(0, 0, 0, 0.18);

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
}


/* Small brand accent */

.sidebar-brand__icon::before {
    content: "";

    position: absolute;

    top: 5px;
    right: 5px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #f4d419;
}


.sidebar-brand__copy {
    display: block;

    min-width: 0;
}


.sidebar-brand__title {
    display: block;

    color: var(--text-inverse);

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.05;

    letter-spacing: -0.015em;

    white-space: nowrap;
}


.sidebar-brand__subtitle {
    display: block;

    margin-top: 3px;

    color: var(--sidebar-text-muted);

    font-size: 0.69rem;
    line-height: 1.2;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.sidebar-section + .sidebar-section {
    margin-top: 22px;
}


.sidebar-section__label {
    padding: 0 10px 7px;

    color: var(--sidebar-text-muted);

    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.105em;

    text-transform: uppercase;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sidebar-nav {
    display: grid;

    gap: 4px;
}


.sidebar-nav__link {
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 9px 10px;

    border-radius: var(--radius-md);

    color: var(--sidebar-text);

    font-size: 0.82rem;
    font-weight: 550;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}


.sidebar-nav__link:hover {
    color: var(--text-inverse);

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );
}


.sidebar-nav__link:active {
    transform: translateY(1px);
}


/*
 * Active navigation state.
 *
 * --sidebar-active should remain a neutral UI colour.
 * It must not use --party-jlp.
 */

.sidebar-nav__link[aria-current="page"] {
    color: var(--text-inverse);

    background: var(--sidebar-active);

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.14);
}


/* =========================================================
   NAVIGATION ICON
   ========================================================= */

.sidebar-nav__icon {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    font-size: 0.95rem;
    line-height: 1;
}


/* =========================================================
   FOOTER
   ========================================================= */

.sidebar-footer {
    margin-top: auto;

    padding-top: 24px;
}


.sidebar-divider {
    height: 1px;

    margin: 0 8px 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );
}


/* =========================================================
   THEME CONTROL
   ========================================================= */

.theme-control {
    padding: 0 8px;
}


.theme-control__label {
    display: block;

    margin-bottom: 8px;

    color: var(--sidebar-text-muted);

    font-size: 0.69rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   THEME SWITCH
   ========================================================= */

.theme-switch {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    padding: 3px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );
}


.theme-switch__button {
    min-height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 5px 7px;

    border: 0;

    border-radius: 6px;

    color: var(--sidebar-text-muted);

    background: transparent;

    cursor: pointer;

    font: inherit;

    font-size: 0.72rem;
    font-weight: 650;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}


.theme-switch__button:hover {
    color: var(--text-inverse);
}


.theme-switch__button.is-active {
    color: var(--text-inverse);

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}


/* =========================================================
   CREDIT
   ========================================================= */

.sidebar-credit {
    padding: 18px 8px 2px;

    color: var(--sidebar-text-muted);

    font-size: 0.7rem;
    line-height: 1.45;
}


.sidebar-credit strong {
    display: block;

    color: var(--sidebar-text);

    font-size: 0.74rem;
}


/* =========================================================
   MOBILE SUPPORT
   ========================================================= */

.mobile-sidebar-backdrop {
    display: none;
}


.sidebar-mobile-header {
    display: none;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px) {

    .dashboard-sidebar--desktop {
        display: none;
    }


    .dashboard-sidebar--mobile {
        display: flex;

        z-index: 100;

        transform:
            translateX(
                -105%
            );

        box-shadow:
            var(--shadow-lg);

        transition:
            transform
            var(--transition-normal);
    }


    body.is-mobile-nav-open
    .dashboard-sidebar--mobile {
        transform:
            translateX(
                0
            );
    }


    .mobile-sidebar-backdrop {
        position: fixed;

        inset: 0;

        z-index: 90;

        display: block;

        visibility: hidden;

        opacity: 0;

        background:
            rgba(
                2,
                12,
                20,
                0.58
            );

        backdrop-filter:
            blur(
                2px
            );

        transition:
            opacity
            var(--transition-normal),
            visibility
            var(--transition-normal);
    }


    body.is-mobile-nav-open
    .mobile-sidebar-backdrop {
        visibility: visible;

        opacity: 1;
    }


    body.is-mobile-nav-open {
        overflow: hidden;
    }


    .sidebar-mobile-header {
        display: flex;

        justify-content: flex-end;

        margin-bottom: 4px;
    }


    .sidebar-mobile-close {
        width: 36px;
        height: 36px;

        display: grid;
        place-items: center;

        padding: 0;

        border: 0;

        border-radius: 9px;

        color: var(--text-inverse);

        background:
            rgba(
                255,
                255,
                255,
                0.07
            );

        cursor: pointer;

        font: inherit;

        font-size: 1.3rem;

        transition:
            background-color
            var(--transition-fast);
    }


    .sidebar-mobile-close:hover {
        background:
            rgba(
                255,
                255,
                255,
                0.12
            );
    }

}