:root {
    --sb-bg: #E5EBF6;
    --sb-text: #5367A0;
    --sb-text-strong: #1F3A7A; /* derived from mockup (active / profile title) */
    --sb-border: #C5D0E8; /* derived from mockup (dividers / dropdown border) */
    --sb-expanded-bg: #47639F;
    --sb-expanded-header: #3A558D;
    --sb-active-bg: #D6E4FB;
    --sb-active-indicator: #1A5BEF;
    --sb-sub-selected: #5A78B5;
    --sb-sub-indicator: #75A9F0;
    --sb-profile-bg: #D9E3F6;
    --sb-dropdown-bg: #FFFFFF;
}

/* ---------- Container ---------- */
.leftside,
.leftside .sideTop,
.leftside .sideNav,
.leftside .sideNav .side-menu-wrapper {
    background: var(--sb-bg); /* removes the dark #404040 header, logo stays */
}

    .leftside .sideNav .side-menu-wrapper {
        display: flex;
        flex-direction: column;
        overflow: hidden; /* only #primary-menu scrolls */
        padding: 0;
    }

    .leftside .side-menu-wrapper a.menu-close {
        color: var(--sb-text);
    }

@media (min-width: 992px) {
    .leftside {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 320px;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

        .leftside .sideTop {
            flex: 0 0 auto;
            height: auto;
            padding: 16px 0 0;
        }

        .leftside .sideNav {
            flex: 1 1 auto;
            min-height: 0; /* lets the menu shrink and scroll */
            height: auto;
        }

            .leftside .sideNav .side-menu-wrapper {
                position: relative;
                top: 0;
                left: 0;
                height: 100%;
            }
}



/* ---------- Switch Community ---------- */
.sidebar-switch {
    flex: 0 0 auto;
    padding: 24px 20px 8px;
}

.sidebar-switch-label {
    display: block;
    margin: 0 0 8px 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sb-text);
}

.sidebar-switch-select {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: var(--sb-dropdown-bg);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: var(--sb-text-strong);
    cursor: pointer;
}

    .sidebar-switch-select span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-switch-select:focus-visible {
        outline: 2px solid var(--sb-active-indicator);
        outline-offset: 2px;
    }

/* ---------- Main navigation (scrolls independently) ---------- */
.leftside #primary-menu {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: 100%;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .leftside #primary-menu li.menu-item-has-children {
        background: none; /* removes arrow.png */
    }

    .leftside #primary-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        margin: 0 8px;
        padding: 16px 16px;
        border-radius: 8px;
        background: transparent;
        color: var(--sb-text);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
    }

    .leftside #primary-menu > li:hover > a {
        background: rgba(83, 103, 160, .10);
        color: var(--sb-text);
    }

    .leftside #primary-menu .menu-arrow-icon {
        margin: 0 0 0 12px;
        font-size: 18px;
        transition: transform .2s ease;
    }

    .leftside #primary-menu li.currentdrop > a .menu-arrow-icon {
        transform: rotate(90deg);
    }

    /* Active page (top-level item) */
    .leftside #primary-menu > li.is-active > a,
    .leftside #primary-menu > li.is-active:hover > a {
        background: var(--sb-active-bg);
        color: var(--sb-text-strong);
        font-weight: 700;
    }

        .leftside #primary-menu > li.is-active > a::before {
            content: "";
            position: absolute;
            left: -8px;
            top: 6px;
            bottom: 6px;
            width: 5px;
            border-radius: 3px;
            background: var(--sb-active-indicator);
        }

    /* Expanded parent */
    .leftside #primary-menu > li.menu-item-has-children.currentdrop {
        margin: 4px 0;
        background: var(--sb-expanded-bg);
        border-radius: 8px;
        overflow: hidden;
    }

        .leftside #primary-menu > li.menu-item-has-children.currentdrop > a,
        .leftside #primary-menu > li.menu-item-has-children.currentdrop:hover > a {
            margin: 0;
            padding: 18px 24px;
            border-radius: 0;
            background: var(--sb-expanded-header);
            color: #fff;
            font-weight: 700;
        }

    .leftside #primary-menu li.currentdrop > .sub-menu {
        display: block;
        padding: 8px 0 12px;
        background: var(--sb-expanded-bg);
    }

    /* Submenu items */
    .leftside #primary-menu .sub-menu li a,
    .leftside #primary-menu .sub-menu li:hover a {
        position: relative;
        display: block;
        margin: 2px 12px;
        padding: 12px 16px 12px 28px;
        border-radius: 8px;
        background: transparent;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
    }

    .leftside #primary-menu .sub-menu li:hover a {
        background: rgba(255, 255, 255, .08);
    }

    /* Selected submenu (current page) */
    .leftside #primary-menu .sub-menu li.is-active > a,
    .leftside #primary-menu .sub-menu li.is-active:hover > a {
        background: var(--sb-sub-selected);
    }

        .leftside #primary-menu .sub-menu li.is-active > a::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 4px;
            border-radius: 3px;
            background: var(--sb-sub-indicator);
        }

/* ---------- My Profile (anchored bottom) ---------- */
.sidebar-profile {
    flex: 0 0 auto;
    padding: 0 12px 16px;
}

    .sidebar-profile::before {
        content: "";
        display: block;
        height: 1px;
        margin: 0 12px 12px;
        background: var(--sb-border);
    }

.sidebar-profile-box {
    background: var(--sb-profile-bg);
    border-radius: 10px;
    overflow: hidden;
}

.sidebar-profile-menu {
    display: none;
    padding: 8px 8px 0;
}

.sidebar-profile.is-open .sidebar-profile-menu {
    display: block;
}

.sidebar-profile-user {
    padding: 4px 12px 8px;
    font-size: 13px;
    color: var(--sb-text);
}

.sidebar-profile-link {
    display: block;
    padding: 12px 12px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--sb-text);
}

    .sidebar-profile-link:hover {
        background: rgba(83, 103, 160, .12);
        color: var(--sb-text-strong);
    }

.sidebar-profile-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 20px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--sb-text);
}

    .sidebar-profile-toggle strong {
        display: block;
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--sb-text-strong);
    }

    .sidebar-profile-toggle small {
        display: block;
        margin-top: 4px;
        font-size: 13px;
    }

    .sidebar-profile-toggle .fa-angle-down {
        font-size: 20px;
        transition: transform .2s ease;
    }

.sidebar-profile.is-open .sidebar-profile-toggle .fa-angle-down {
    transform: rotate(180deg);
}

/* Active My Account / Logout link */
.sidebar-profile-link {
    position: relative;
}

    .sidebar-profile-link.is-active,
    .sidebar-profile-link.is-active:hover {
        background: var(--sb-active-bg);
        color: var(--sb-text-strong);
        font-weight: 700;
    }

        .sidebar-profile-link.is-active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 4px;
            border-radius: 3px;
            background: var(--sb-active-indicator);
        }

/* If the user collapses the panel while My Account is the current page, keep a cue on the header */
.sidebar-profile.has-active:not(.is-open) .sidebar-profile-toggle strong {
    color: var(--sb-active-indicator);
}

/* ---------- Login (guest) ---------- */
.sidebar-login {
    display: block;
    margin: 24px 20px 8px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--sb-text);
    color: #fff;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
}

/* =====================================================================
   MOBILE (keep this block LAST so it overrides the base rules above)
   ===================================================================== */
@media (max-width: 991.98px) {
    .leftside {
        height: 85px;
    }

        .leftside .sideTop {
            height: 100%;
        }

        .leftside .slide-menu-open {
            background: var(--sb-text);
        }

        /* Drawer: sized to the real visible height; the whole drawer scrolls */
        .leftside .sideNav .side-menu-wrapper {
            top: 0;
            bottom: auto;
            height: var(--sidebar-vh, 100dvh);
            max-height: var(--sidebar-vh, 100dvh);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding: 48px 0 0; /* clears the × button */
        }

        /* The drawer scrolls as a whole, so the menu doesn't scroll separately */
        .leftside #primary-menu {
            flex: 0 0 auto;
            min-height: auto;
            overflow: visible;
        }

        /* My Profile follows the menu on mobile so it is always reachable by scrolling */
        .leftside .sidebar-profile {
            flex: 0 0 auto;
            margin-top: 16px;
            position: static;
            padding: 0 12px calc(24px + env(safe-area-inset-bottom, 0px));
        }
}