/**
 * 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-x: hidden !important;
    overflow-y: auto !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.
   width: 100% ensures nav/ul fills the 75px rail regardless of any
   inherited width from the base stylesheet — otherwise icons can end
   up clipped off-screen or positioned outside the visible rail. */
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;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
}

/* Belt + braces: ensure nav itself isn't hidden by any inherited rule. */
body.sidebar-collapsed .headerWd nav {
    visibility: visible !important;
    opacity: 1 !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;
    }

    /* Belt + braces: ensure the nav is visible and fills the expanded
       266px rail on mobile. Some base stylesheets hide or constrain
       nav width outside of a specific range. */
    body.sidebar-expanded .headerWd nav,
    body.sidebar-expanded .headerWd .navECMenu__list,
    body.sidebar-expanded .headerWd nav > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !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;
    }

/* Desktop-expanded row layout.
   Small 12px left padding — icons hug the left edge to match the
   SpiceWeb / SpiceTrade reference (not the 20px overshoot of v8.1).
   text-align: left explicitly cancels any inherited center-alignment
   from the base stylesheet (otherwise submenu text shows centered). */
@media screen and (min-width: 1367px) {
    body.sidebar-expanded .navECMenu__list,
    body.sidebar-expanded .navECMenu__list > li,
    body.sidebar-expanded .navECMenu__list .submenu,
    body.sidebar-expanded .navECMenu__list .group-list,
    body.sidebar-expanded .navECMenu__list .submenu li,
    body.sidebar-expanded .navECMenu__list .group-list li {
        text-align: left !important;
    }

        body.sidebar-expanded .navECMenu__list > li > label,
        body.sidebar-expanded .navECMenu__list > li > a {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            line-height: 1 !important;
            padding-left: 12px !important;
            text-align: left !important;
        }

        /* Sub-menu items (e.g. "View Catalog" under "Orders") — indented
       just enough to sit visibly nested under the parent, NOT pushed
       to the center. 45px ≈ parent padding + icon + gap so sub-text
       starts right around where parent text starts. */
        body.sidebar-expanded .navECMenu__list .submenu,
        body.sidebar-expanded .navECMenu__list .group-list {
            padding-left: 10px !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            text-align: left !important;
        }

            body.sidebar-expanded .navECMenu__list .submenu li,
            body.sidebar-expanded .navECMenu__list .group-list li {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                padding-left: 0 !important;
                text-align: left !important;
            }

                body.sidebar-expanded .navECMenu__list .submenu li > a,
                body.sidebar-expanded .navECMenu__list .submenu li > label,
                body.sidebar-expanded .navECMenu__list .group-list li > a,
                body.sidebar-expanded .navECMenu__list .group-list li > label {
                    padding-left: 0 !important;
                    text-align: left !important;
                    justify-content: flex-start !important;
                }
}

/* Mobile-expanded state: no left indent, rows hug the left edge the way
   they did before the indent rule was added. */
@media screen and (max-width: 1366px) {
    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;
        padding-left: 0 !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-x: hidden !important;
        overflow-y: auto !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;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        left: 0 !important;
        right: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !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,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list > li,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .submenu,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .group-list,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .submenu li,
    body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .group-list li {
        text-align: left !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;
            justify-content: flex-start !important;
            gap: 10px !important;
            line-height: 1 !important;
            padding-left: 12px !important;
            text-align: left !important;
        }

        body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .submenu,
        body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .group-list {
            padding-left: 45px !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            text-align: left !important;
        }

            body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .submenu li,
            body:not(.sidebar-expanded):not(.sidebar-collapsed) .navECMenu__list .group-list li {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                padding-left: 0 !important;
                text-align: left !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;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE DEFENSE BLOCK — APPENDED LAST (maximum specificity)
   
   Some legacy base stylesheets use mobile media queries like:
       @media (max-width: 768px) { .headerWd nav { display: none; } }
   on the assumption that mobile will open a separate overlay menu.
   Our design keeps the rail visible on mobile, so we have to force
   the nav, its list, its items, and the hamburger to be visible
   with higher specificity than those legacy rules.
   
   The `html body` prefix adds two extra specificity points, which
   beats nearly every rule in the base file.
   ───────────────────────────────────────────────────────────── */

@media screen and (max-width: 1366px) {

    /* Sidebar itself must be a visible block-level container.
       Background override: the base stylesheet applies a light-blue
       background on narrow viewports (assumes the sidebar becomes a
       mobile overlay). We want it to keep the SAME background as
       desktop. Adjust the color below to match your exact brand
       purple if needed — the value here is an approximation taken
       from the SpiceTrade / SpiceWeb / IMHAPP dashboard screenshots. */
    html body .headerWd,
    html body.sidebar-collapsed .headerWd,
    html body.sidebar-expanded .headerWd {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: #4c2d91 !important;
        background-image: none !important;
    }

    /* Hamburger: force visible. Color is inherited from the base
       theme — we don't override it. */
    html body .mobileMenu,
    html body #mobileMenu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

        html body .mobileMenu > b,
        html body .mobileMenu > i,
        html body .mobileMenu .icon-menu,
        html body #mobileMenu > b,
        html body #mobileMenu > i,
        html body #mobileMenu .icon-menu {
            display: inline-block !important;
            font-size: 22px !important;
            line-height: 1 !important;
        }

    /* Nav container and its children: force visible, block-level,
       full rail width. Beats any `display: none` from legacy media
       queries that assume the nav becomes a mobile overlay. */
    html body .headerWd nav,
    html body .headerWd .navECMenu__list,
    html body .headerWd nav > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
    }

        /* Each menu row visible. */
        html body .headerWd .navECMenu__list > li,
        html body .headerWd .navECMenu__list > li > label,
        html body .headerWd .navECMenu__list > li > a {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

    /* Icons visible — color is whatever the base theme sets. */
    html body .headerWd .menu-icon {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

        html body .headerWd .menu-icon > svg,
        html body .headerWd .menu-icon > img,
        html body .headerWd .menu-icon > i,
        html body .headerWd .menu-icon > b {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

    /* In collapsed rail, each menu row is a block that fills 75px
       and centers its icon via text-align. Re-assert here with
       max specificity in case the base stylesheet fights it. */
    html body.sidebar-collapsed .headerWd .navECMenu__list > li,
    html body.sidebar-collapsed .headerWd .navECMenu__list > li > label,
    html body.sidebar-collapsed .headerWd .navECMenu__list > li > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body.sidebar-collapsed .headerWd .menu-icon {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 8px 0 !important;
        margin: 0 auto !important;
    }
}