/**
 * sidebar_universal_fix.css  v8.1 — PORTABLE
 *
 * Drop-in sidebar expand/collapse styles. Works in any project using:
 *   - <header class="headerWd">
 *   - <button class="mobileMenu"> OR <*id="mobileMenu"> as the toggle
 *   - <div class="pageAreaWd"> as the main content area
 *   - Menu HTML from the shared menu API (.navECMenu__list, .navECMenu_MenuName, .menu-icon)
 *
 * Pairs with sidebar_toggle.js which manages body.sidebar-collapsed
 * and body.sidebar-expanded classes.
 *
 * Load order in <head>:
 *   <link rel="stylesheet" href="~/assets/css/spice_global_style.css" />
 *   <link rel="stylesheet" href="~/assets/css/sidebar_universal_fix.css" />
 */

/* ─────────────────────────────────────────────────────────────
   BASE — always applies
   ───────────────────────────────────────────────────────────── */

.headerWd {
    transition: width 0.25s ease, min-width 0.25s ease !important;
    overflow: hidden !important;
}

.pageAreaWd {
    transition: padding-left 0.25s ease !important;
}

/* Hamburger — always visible. Supports both .mobileMenu class and #mobileMenu id.
   Styled inside each state block below so it sits correctly in both widths. */
.mobileMenu,
#mobileMenu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1001 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Hamburger is a mobile-only control. On desktop (>= 1367px) the full
   logo + menu names are already visible, so hide it entirely. */
@media screen and (min-width: 1367px) {
    .mobileMenu,
    #mobileMenu {
        display: none !important;
    }
}

/* Icons — always visible in both states */
.headerWd .menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   COLLAPSED  (body.sidebar-collapsed)
   Icons ONLY, perfectly centered on a 75px rail.
   ───────────────────────────────────────────────────────────── */

body.sidebar-collapsed .headerWd {
    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;
    overflow: hidden !important;
}

body.sidebar-collapsed .pageAreaWd {
    padding-left: 75px !important;
}

/* Reserve a 60px top "header zone" in the collapsed rail for the hamburger.
   Push the menu list down so it doesn't overlap the hamburger. */
body.sidebar-collapsed .headerWd nav,
body.sidebar-collapsed .headerWd .navECMenu__list,
body.sidebar-collapsed .headerWd nav > ul {
    padding-top: 60px !important;
    margin-top: 0 !important;
}

/* Hamburger: centered horizontally in the 75px rail, fixed at the top. */
body.sidebar-collapsed .mobileMenu,
body.sidebar-collapsed #mobileMenu {
    position: absolute !important;
    top: 15px !important;
    left: 0 !important;
    right: 0 !important;
    width: 75px !important;
    height: 40px !important;
    margin: 0 auto !important;
    font-size: 22px !important;
}

/* Hide brand/top logo */
body.sidebar-collapsed .headerWd > h1,
body.sidebar-collapsed .headerWd > h2,
body.sidebar-collapsed .BrandLogo {
    display: none !important;
}

/* Force-hide all menu name text — belt + braces + suspenders
   over the inline style="display:none" from the menu API. */
body.sidebar-collapsed .navECMenu_MenuName,
body.sidebar-collapsed .navECMenu_MenuName *,
body.sidebar-collapsed .navECMenu_MenuName a {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
}

/* Box-sizing border-box on everything in the rail so widths are predictable. */
body.sidebar-collapsed .headerWd,
body.sidebar-collapsed .headerWd * {
    box-sizing: border-box !important;
}

/* Rail itself: no padding, centered text. */
body.sidebar-collapsed .headerWd {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

    /* Kill all horizontal padding/margin/indent on structural elements
   so nothing shifts icons off-center. */
    body.sidebar-collapsed .headerWd ul,
    body.sidebar-collapsed .headerWd ol,
    body.sidebar-collapsed .headerWd li,
    body.sidebar-collapsed .headerWd label,
    body.sidebar-collapsed .headerWd a,
    body.sidebar-collapsed .headerWd div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-indent: 0 !important;
        text-align: center !important;
    }

    body.sidebar-collapsed .headerWd ul,
    body.sidebar-collapsed .headerWd ol {
        list-style: none !important;
    }

/* Each menu row fills the rail so centering has a known frame. */
body.sidebar-collapsed .navECMenu__list > li,
body.sidebar-collapsed .navECMenu__list > li > label,
body.sidebar-collapsed .navECMenu__list > li > a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* THE KEY LINE: .menu-icon fills the row width and centers its SVG
   via text-align. Bypasses any flex/inline-flex quirks. */
body.sidebar-collapsed .headerWd .menu-icon {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    text-align: center !important;
    float: none !important;
    position: static !important;
}

    body.sidebar-collapsed .headerWd .menu-icon > svg,
    body.sidebar-collapsed .headerWd .menu-icon > img,
    body.sidebar-collapsed .headerWd .menu-icon > i {
        display: inline-block !important;
        margin: 0 auto !important;
        float: none !important;
        vertical-align: middle !important;
    }

/* Hide submenus and bottom logo */
body.sidebar-collapsed .submenu,
body.sidebar-collapsed .group-list {
    display: none !important;
}

body.sidebar-collapsed .sidebar-logo {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   EXPANDED  (body.sidebar-expanded)
   Icon + name flex-centered vertically.
   ───────────────────────────────────────────────────────────── */

body.sidebar-expanded .headerWd {
    width: 266px !important;
    min-width: 266px !important;
    max-width: 266px !important;
    overflow-y: auto !important;
}

body.sidebar-expanded .pageAreaWd {
    padding-left: 270px !important;
}

/* On mobile, when the user expands the sidebar, pin the hamburger to the
   top-right next to the logo so they can tap it again to collapse back.
   The @media wrapper keeps this rule from applying on desktop (where the
   hamburger is hidden altogether by the min-width: 1367px rule above). */
@media screen and (max-width: 1366px) {
    body.sidebar-expanded .mobileMenu,
    body.sidebar-expanded #mobileMenu {
        position: absolute !important;
        top: 25px !important;
        right: 15px !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        font-size: 22px !important;
    }
}

/* Show brand logo */
body.sidebar-expanded .headerWd > h1,
body.sidebar-expanded .headerWd > h2,
body.sidebar-expanded .BrandLogo {
    display: block !important;
}

    body.sidebar-expanded .BrandLogo h1,
    body.sidebar-expanded .BrandLogo h2 {
        display: block !important;
    }

/* Make each menu row a flex container — this is what vertically
   centers the label against its icon. */
body.sidebar-expanded .navECMenu__list > li > label,
body.sidebar-expanded .navECMenu__list > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    line-height: 1 !important;
}

/* Show menu name text — !important beats inline style="display:none" */
body.sidebar-expanded .navECMenu_MenuName {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    flex: 1 1 auto !important;
}

    body.sidebar-expanded .navECMenu_MenuName a {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }

body.sidebar-expanded .headerWd .menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

body.sidebar-expanded .submenu,
body.sidebar-expanded .group-list {
    display: block !important;
}

body.sidebar-expanded .sidebar-logo {
    display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   PAGE OFFSET fallback
   ───────────────────────────────────────────────────────────── */

.pageAreaWd {
    padding-left: 75px !important;
}

/* ─────────────────────────────────────────────────────────────
   PRE-JS MEDIA QUERY DEFAULTS
   Correct appearance on first paint before sidebar_toggle.js
   has set the body class. No visual jump.
   ───────────────────────────────────────────────────────────── */

@media screen and (max-width: 1366px) {
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd {
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
        overflow: hidden !important;
    }

        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd > h1,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd > h2,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .BrandLogo,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .sidebar-logo {
            display: none !important;
        }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu_MenuName,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu_MenuName *,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu_MenuName a {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        font-size: 0 !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd * {
        box-sizing: border-box !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd ul,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd ol,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd li,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd label,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd a,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd div {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-indent: 0 !important;
            text-align: center !important;
        }

        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd ul,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd ol {
            list-style: none !important;
        }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list > li,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list > li > label,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list > li > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd .menu-icon {
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 8px 0 !important;
        text-align: center !important;
        float: none !important;
        position: static !important;
    }

        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd .menu-icon > svg,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd .menu-icon > img,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd .menu-icon > i {
            display: inline-block !important;
            margin: 0 auto !important;
            float: none !important;
            vertical-align: middle !important;
        }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .pageAreaWd {
        padding-left: 75px !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd nav,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd .navECMenu__list,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd nav > ul {
        padding-top: 60px !important;
        margin-top: 0 !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .mobileMenu,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) #mobileMenu {
        position: absolute !important;
        top: 15px !important;
        left: 0 !important;
        right: 0 !important;
        width: 75px !important;
        height: 40px !important;
        margin: 0 auto !important;
        font-size: 22px !important;
    }
}

@media screen and (min-width: 1367px) {
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd {
        width: 266px !important;
        min-width: 266px !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list > li > label,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        line-height: 1 !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu_MenuName,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu_MenuName a {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .submenu,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .group-list {
        display: block !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .pageAreaWd {
        padding-left: 270px !important;
    }

    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd > h1,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .headerWd > h2,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .BrandLogo {
        display: block !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   SIDEBAR SCROLLBAR
   ───────────────────────────────────────────────────────────── */
.headerWd::-webkit-scrollbar {
    width: 3px;
}

.headerWd::-webkit-scrollbar-track {
    background: transparent;
}

.headerWd::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}