/* Left Menu Base Styles */

/* AHW - Menu Width Control - Derived from theme setting --bit-menu-width */
:root {
    --menu-item-width: var(--bit-menu-width, 240px);
}

main.menu-collapsed {
    /* 70px (was 60px): the extra 10px is left breathing room so the collapsed
       icon strip isn't flush against the browser edge (see padding-left on
       #leftMenu below). */
    grid-template-columns: 70px 1fr;
    /* Let the collapsed flyout sub-menus escape the grid. `main` clips with
       overflow:hidden so the page never scrolls, but that also cut off the
       rollout menus. #mainContent has its own overflow:auto, so releasing the
       clip here only frees the absolutely-positioned flyouts. Scoped to
       collapsed only — expanded sub-menus are inline accordions that don't
       need to overflow. */
    overflow: visible;
}

#leftMenu {
    grid-area: leftMenu;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    background: var(--bit-LeftMenuBg, #f5f5f5);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 5;
    position: relative;
}
/* AHW Position of Left Menu Logo Area Styles */
ul.nav.bit.nav-pills {
    margin-top: 20px;
}

/* Pin button area at top of left menu */
.pin-button-area {
    height: 50px;
    margin: 0 !important;
    padding: 8px !important;
}

/* Logo in top header - left-justified to visually align with left menu column */
#topHeader #orgTitleContainer {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
    padding-right: 1rem;
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Collapsed: drop the logo column's right divider. The menu bg is white and the
   content bg is white, so this divider is the only vertical line near the narrow
   icon strip — removing it kills the stray "vertical line" in the collapsed view
   without affecting the expanded header. */
.menu-collapsed #topHeader #orgTitleContainer {
    border-right: none !important;
}

#topHeader #orgTitleContainer a {
    display: flex !important;
    align-items: center !important;
}

/* Menu Collapse Button - in top header next to logo */
.menu-collapse-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    color: #64748b !important;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    outline: none;
}

/* Hide collapse button in mobile view */
@media (max-width: 768px) {
    .menu-collapse-btn {
        display: none !important;
    }
}

/* Collapse button hover state */
.menu-collapse-btn:hover {
    background-color: #f1f5f9;
    transform: scale(1.05);
}

.menu-collapse-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: #64748b !important;
}

.menu-collapse-btn:hover i {
    color: #1e293b !important;
}

/* Hide the label text in expanded state */
.menu-collapse-btn span {
    display: none;
}

/* Collapsed State Styles */
.menu-collapsed #leftMenu {
    overflow: visible;
    /* 10px symmetric horizontal inset for the wide rounded-rect items. The inset
       lives on the CONTAINER (not item margins) so every item can be width:100%;
       margin:0 — that makes <a> leaf links and <button> submenu parents fill and
       center identically (width:auto shrink-wraps a <button> but not an <a>,
       which is what threw them out of alignment). */
    padding: 24px 10px;
}

/* When collapsed, keep same background but adjust size */
.menu-collapsed .menu-collapse-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px;
    justify-content: center;
    margin: 0;
    width: 35px;
    height: 35px;
}

.menu-collapsed .menu-collapse-btn:hover {
    background-color: #f1f5f9;
    transform: none;
}

.menu-collapsed .menu-collapse-btn i {
    transform: none;
    font-size: 14px;
    margin: 0;
    display: block;
}

/* Center the pin button when collapsed */
.menu-collapsed #leftMenu .pin-button-area {
    justify-content: center;
}

/* Hide text in collapse button when collapsed */
.menu-collapsed .menu-collapse-btn span {
    display: none;
}

/* The collapsed icon strip's left/right inset now comes entirely from each
   item's 10px margin (see .nav-link below), so the container itself has no
   horizontal padding — keeps the rounded-rect highlight centered in the column. */
.menu-collapsed #leftMenu {
    box-sizing: border-box;
}

/* Collapsed nav items — faithful port of the left-menu-redesign mockup's
   collapsed rule (`.leftMenu.collapsed .nav-link { justify-content:center;
   margin:4px 10px; padding:11px 0 }`): a wide rounded-rect that fills the
   column with a 10px inset each side, icon centered. The container has no
   horizontal padding (see below) so the 10px margin alone sets the inset. */
.menu-collapsed #leftMenu .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* A compact PERFECT SQUARE (40x40) that hugs the icon, centered via auto
       margins. Width is explicit (not auto) so <a> leaf links AND <button>
       submenu parents both keep this exact size and stay aligned — width:auto
       shrink-wraps a <button> but not an <a>, which previously misaligned them. */
    width: 40px;
    height: 30px;
    margin: 4px auto;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
}

/* Collapsed LEAF icon hover: no background box — just the icon-color change + spin
   (matches the mockup's `.fx-spin.collapsed .nav-link:hover i`). Only the active
   item and flyout-parent icons get the box; a box on every hovered icon read as a
   stray light tint. */
.menu-collapsed #leftMenu .nav-link:hover,
.menu-collapsed #leftMenu button.nav-link:hover {
    background: transparent !important;
}

/* Hide all text content but keep icons visible */
.menu-collapsed #leftMenu .nav-link span {
    display: none;
}

/* Make icons centered and larger. Fixed size (not tied to any org/theme
   setting) so collapsed icons stay consistent app-wide; nudged 20px -> 18px
   to avoid crowding. */
.menu-collapsed #leftMenu .nav-link i {
    /* !important to beat Bootstrap's me-2 (margin-right) on the icon markup,
       which otherwise pushes the icon off-center inside the square. */
    margin: 0 !important;
    font-size: 18px;
    display: block;
}

/* AHW - Collapsed "Spin & Pop" hover F/X — sibling of the modal "X" button
   (rotate 90deg + scale). Higher specificity than the expanded pop above, so
   it wins when the menu is collapsed. Transform/color only; no font changes. */
.menu-collapsed #leftMenu .nav-link:hover i {
    transform: rotate(90deg) scale(1.25);
    /* Use the active icon color so hover and active match (was ActiveTextColor,
       which diverged from the active state's --bit-LeftMenuActiveIconColor). */
    color: var(--bit-LeftMenuActiveIconColor, var(--bit-LeftMenuActiveTextColor)) !important;
}

/* AHW - Collapsed "you are here" chip. Keeps the active page (leaf links use
   .active) and the active section (top-level toggles use .toggler-active)
   visibly highlighted with a theme-derived tint when the menu is collapsed. */
.menu-collapsed #leftMenu .nav-link.active,
.menu-collapsed #leftMenu .toggle-arrow.toggler-active {
    background: color-mix(in srgb, var(--bit-LeftMenuHoverBg, var(--bit-LeftMenuActiveTextColor)) var(--bit-LeftMenuHoverPct, 12%), transparent) !important;
    border-radius: 10px;
}

/* The active leaf carries Bootstrap's rounded-end-0 (squares the right corners
   so the expanded full-width bar meets the edge). In collapsed mode we want a
   fully rounded compact square, so re-round it. */
.menu-collapsed #leftMenu .nav-link.active.rounded-end-0 {
    border-radius: 10px !important;
}

/* Hide exit impersonation text when collapsed, show only icon */
.menu-collapsed #leftMenu .exitImpersonate span {
    display: none;
}

.menu-collapsed #leftMenu .exitImpersonate {
    padding: 10px;
    display: flex;
    justify-content: center;
}

.menu-collapsed #leftMenu .exitImpersonate i {
    margin: 0;
    font-size: 18px;
}

/* Hide various text elements */
.menu-collapsed #leftMenu hr {
    display: none;
}

/* Collapsed flyout panel — match the left-menu-redesign mockup flyout
   (left:calc(100% + 14px); top:-6px; min-width:200px; background:#fff;
   border:1px solid #e2e8f0; border-radius:12px; padding:8px;
   box-shadow:0 14px 34px -12px rgba(15,23,42,0.32)). */
.menu-collapsed #leftMenu .menu-toggler {
    display: none !important;
    position: absolute;
    left: calc(100% + 12px);
    /* Raise the flyout so it opens higher than the hovered icon row. */
    top: -18px;
    margin-left: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    width: auto !important;
    max-height: none !important;
    min-width: 200px;
    z-index: 1001;
    padding: 4px 8px;
    box-shadow: 0 14px 34px -12px rgba(15, 23, 42, 0.32);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    overflow: visible !important;
}

/* Invisible bridge across the 12px gap so hover doesn't drop between icon and panel */
/* Invisible hover bridge spanning the 12px gap on the LEFT of every flyout —
   including nested (3rd-level) flyouts. Without it on nested flyouts, moving the
   mouse from a 2nd-level item toward its 3rd-level flyout crosses an un-bridged
   gap, drops :hover, and closes the flyout before anything can be clicked. */
.menu-collapsed #leftMenu .menu-toggler::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: transparent;
}

/* Show submenu on hover when collapsed */
.menu-collapsed #leftMenu li:hover > .menu-toggler,
.menu-collapsed #leftMenu li:focus-within > .menu-toggler {
    display: block !important;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Make parent li position relative for absolute submenu */
.menu-collapsed #leftMenu ul.nav > li {
    position: relative;
}

/* Anchor 3rd-level flyout to its own parent li, not the top-level li.
   Without this, top:0 on the nested .menu-toggler resolves to the top-level
   <li>, causing the 3rd tier to jump to the top of the 2nd-level flyout. */
.menu-collapsed #leftMenu .menu-toggler ul > li {
    position: relative;
}

/* Style the flyout submenu items */
.menu-collapsed #leftMenu .menu-toggler ul {
    max-height: none !important;
    opacity: 1 !important;
    /* The flyout panel already has 8px padding; drop the expanded ul's side
       padding so items aren't double-inset. */
    padding: 0 !important;
}

/* Collapsed flyout items — match the mockup
   (.collapsed .group .submenu .nav-link { justify-content:flex-start;
   font-size:0.84rem; font-weight:500; padding:7px 12px; margin:0;
   border-radius:8px; white-space:nowrap }). */
.menu-collapsed #leftMenu .menu-toggler ul .nav-link {
    display: flex !important;
    justify-content: flex-start !important;
    font-size: 0.84rem !important;
    font-weight: 400 !important;
    padding: 1px 12px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Flyout items hover — the global collapsed rule clears nav-link hover bg, so
   re-enable the mockup's accent-soft hover for items inside the flyout panel. */
.menu-collapsed #leftMenu .menu-toggler ul .nav-link:hover {
    background: color-mix(in srgb, var(--bit-LeftMenuHoverBg, var(--bit-LeftMenuActiveTextColor)) var(--bit-LeftMenuHoverPct, 12%), transparent) !important;
    color: var(--bit-LeftMenuActiveTextColor) !important;
}

/* Flyout item icons shouldn't spin on hover (that F/X is for the icon strip). */
.menu-collapsed #leftMenu .menu-toggler ul .nav-link:hover i {
    transform: none !important;
}

/* Third-level items in collapsed flyout: a 3rd-level flyout is its OWN card, so
   its items start at the same 12px left padding as a 2nd-level flyout (no extra
   indent) — matches the mockup's second flyout panel. */
.menu-collapsed #leftMenu .menu-toggler .menu-toggler ul .nav-link {
    padding: 1px 12px !important;
    line-height: 1.15 !important;
}

/* Third-level flyout: positioned beside the second-level flyout (no overlap). */
.menu-collapsed #leftMenu .menu-toggler .menu-toggler {
    margin-left: 0 !important;
    box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.12);
    border-radius: 8px !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Second-level flyout: create isolated stacking context and solid background
   so the 3rd-level's z-index:-1 reliably renders behind it. */
.menu-collapsed #leftMenu > ul.nav > li > .menu-toggler {
    isolation: isolate;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.12);
}

.menu-collapsed #leftMenu .menu-toggler ul .nav-link span {
    display: inline-block !important;
    /* No extra margin: the icon's me-2 already spaces text from the icon.
       Leaf links render raw text (no span), so adding margin here pushed
       toggle items (e.g. Document Center) ~8px further right than the rest. */
    margin-left: 0;
    /* Keep the label on one line and let it size to its content, so the chevron's
       margin-left:auto can push it to the far right edge. The base
       `#leftMenu .nav-link span { white-space:normal; flex:1 }` otherwise made
       long toggle labels (e.g. "Document Center") wrap and crowd the chevron. */
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.menu-collapsed #leftMenu .menu-toggler ul .nav-link i {
    font-size: 16px !important;
    /* Restore the icon→text gap inside the flyout. The collapsed icon-strip rule
       zeroes icon margins to center the strip icons, which also flattened the
       gap on flyout item icons (Bootstrap's me-2 got overridden). */
    margin-right: 10px !important;
}

/* Collapsed flyout: all 2nd-level items (toggle buttons + leaf links) use the same 10px padding.
   Force width:100% and display:flex on leaves so <a> elements stretch like <button> toggles. */
.menu-collapsed #leftMenu .menu-level-2,
.menu-collapsed #leftMenu .menu-level-3 {
    padding-left: 10px !important;
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
}



/* Top-level collapsed parents: replace the chevron with the mockup's small teal
   "has-sub" dot (it marks items that open a flyout). Repurposes the chevron
   ::after as a 5px dot in the corner of the icon square; the icon itself stays
   centered. (mockup: .collapsed .group .nav-link .has-sub — 5px dot, right:9px,
   accent @0.55, full opacity on hover.) */
.menu-collapsed #leftMenu > ul.nav > li > .toggle-arrow::after {
    content: '' !important;
    position: absolute !important;
    /* Push the dot to the square's right edge so it clears the centered icon
       (the 40px square is tighter than the mockup's full-width item). */
    right: 2px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--bit-LeftMenuActiveTextColor) !important;
    opacity: 0.55 !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.menu-collapsed #leftMenu > ul.nav > li > .toggle-arrow:hover::after {
    opacity: 1 !important;
    transform: translateY(-50%) !important;
}

/* Highlight the parent icon square while its flyout is open (mockup:
   .collapsed .group:hover > .nav-link { background:accent-soft }). */
.menu-collapsed #leftMenu > ul.nav > li:hover > .toggle-arrow {
    background: color-mix(in srgb, var(--bit-LeftMenuHoverBg, var(--bit-LeftMenuActiveTextColor)) var(--bit-LeftMenuHoverPct, 12%), transparent) !important;
}

/* Flyout title (parent name atop the collapsed flyout panel). Hidden in the
   expanded inline submenu; only shown inside the collapsed flyout. Mockup:
   .flyout-title { 0.66rem; 700; uppercase; letter-spacing:0.7px; #94a3b8 }. */
#leftMenu .menu-toggler > .flyout-title {
    display: none;
}
.menu-collapsed #leftMenu .menu-toggler > .flyout-title {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    padding: 2px 12px 4px;
    white-space: nowrap;
}

/* Collapsed: top-level submenu parents (toggle-arrow buttons) must collapse to
   the same 40px centered square as leaf icons. `.toggle-arrow` carries
   `width:100% !important` + `justify-content:space-between` for the expanded
   chevron row, which (being !important) otherwise survives into collapsed mode
   and leaves the icon pinned to the left of a full-width button. */
.menu-collapsed #leftMenu > ul.nav > li > .toggle-arrow {
    width: 40px !important;
    height: 40px !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 4px auto !important;
    box-sizing: border-box !important;
}

/* Flyout submenu items with children - use flex flow for reliable vertical centering */
.menu-collapsed #leftMenu .menu-toggler .toggle-arrow::after {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin-left: auto !important;
    padding-left: 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
}

.menu-collapsed #leftMenu .toggle-arrow:hover::after {
    opacity: 1;
}

/* Adjust left border indicator for collapsed state - DISABLED */
.menu-collapsed #leftMenu .nav-link::before {
    left: -4px;
    display: none;
}

/* Add tooltip on hover for collapsed menu items - both links and buttons */
.menu-collapsed #leftMenu .nav-link,
.menu-collapsed #leftMenu button.nav-link {
    position: relative;
}

.menu-collapsed #leftMenu > ul.nav > li:not(:has(> .menu-toggler)) > .nav-link[data-tooltip]:hover::after,
.menu-collapsed #leftMenu > ul.nav > li:not(:has(> .menu-toggler)) > button.nav-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
}

/* Submenu styles */
#leftMenu .menu-toggler ul {
    list-style: none;
    margin: 0;
    /* 10px side gap (mockup: .submenu .nav-link { margin:0 10px }). Put it on the
       container so width:100% toggle <button>s fill it without overflowing and
       clipping their chevron — the text indent is added via item padding-left. */
    padding: 2px 10px;
}

#leftMenu .menu-toggler ul li {
    margin: 0;
    padding: 0;
}

/* Expanded submenu items — match the left-menu-redesign mockup
   (.submenu .nav-link { font-size:0.86rem; font-weight:500;
   padding:6px 14px 6px 50px; margin:0 10px }). 10px of the 50px indent comes
   from the ul padding above, the remaining 40px from padding-left here. */
#leftMenu .menu-toggler ul .nav-link {
    font-size: 0.86rem;
    font-weight: 400;
    padding: 2px 14px 2px 40px !important;
    margin: 0 !important;
    line-height: 1.15;
    border-radius: 10px;
    text-align: left;
    justify-content: flex-start;
}

/* Comfortable gap between a submenu item's icon and its text (a bit more than
   Bootstrap's me-2 so the indented text doesn't crowd the icon). */
#leftMenu .menu-toggler ul .nav-link i {
    margin-right: 10px;
}

/* Expanded mode: 3rd-level menu items (grandchildren) - deepest indentation */
#leftMenu .menu-level-3 {
    padding: 2px 14px 2px 56px !important;
    margin: 0 !important;
    line-height: 1.15;
    font-size: 0.84rem;
}

/* 2nd-level leaf links align at the same indent as toggle parents (no dash prefix). */
#leftMenu .menu-level-2-leaf {
    padding-left: 40px !important;
}

/* Smaller left border for submenu items - DISABLED */
#leftMenu .menu-toggler ul .nav-link::before {
    width: 3px;
    display: none;
}

#leftMenu .menu-toggler ul .nav-link:hover::before {
    height: 0;
}

#leftMenu .menu-toggler ul .nav-link.active::before {
    height: 0;
}

#leftMenu li{
    background: var(--bit-LeftMenuBg, #f5f5f5);
}

/* Section divider — a thin line above a top-level item flagged dividerAbove
   (e.g. "Program Mgmt"), mirroring the mockup's .divider (1px #e2e8f0). Drawn as
   a pseudo-element so it can be inset from the edges in both menu states. */
#leftMenu li.menu-divider-above {
    position: relative;
    margin-top: 9px;
    padding-top: 9px;
}
#leftMenu li.menu-divider-above::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: #e2e8f0;
}

/* Collapsed: tighten the inset so the line matches the ~40px icon-square width
   centered in the 70px column. */
.menu-collapsed #leftMenu li.menu-divider-above::before {
    left: 15px;
    right: 15px;
}

/* Section header — a divider line plus an uppercase label (e.g. "MANAGE") above a
   top-level item, mirroring the mockup's .divider + .menu-section-label. The line
   shows in both states; the label text only when expanded. */
#leftMenu li.menu-section-header {
    position: relative;
    list-style: none;
    margin-top: 9px;
    padding: 16px 22px 4px;
    background: var(--bit-LeftMenuBg, #fff);
}
#leftMenu li.menu-section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: #e2e8f0;
}
#leftMenu li.menu-section-header .menu-section-label-text {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
}

/* Collapsed: keep the divider line, hide the label text and shrink the header. */
.menu-collapsed #leftMenu li.menu-section-header {
    margin-top: 0;
    padding: 9px 0 0;
}
.menu-collapsed #leftMenu li.menu-section-header .menu-section-label-text {
    display: none;
}
.menu-collapsed #leftMenu li.menu-section-header::before {
    left: 15px;
    right: 15px;
}

/* Menu toggler animations */
.menu-toggler {
    transition: all 0.35s;
    max-height: 500px;
    width: 100%;
}

.menu-toggler:not(.show) {
    max-height: 0;
    overflow: hidden;
}

.menu-toggler ul {
    list-style: none;
    transition: all 0.35s;
    opacity: 1.0;
    max-height: 500px;
    transform: translateX(0px);
}

.menu-toggler:not(.show) ul {
    max-height: 0;
    opacity: 0;
}

/* Bit nav pills specific styles */
.bit.nav-pills .nav-link,
.bit.nav-pills .show > .nav-link {
    color: var(--bit-LeftMenuTextColor) !important;
    font-size: calc(var(--bit-menu-font-size, 14px) * 0.93);
    font-weight: 500;
}

/* Overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}


/*AHW Main menu width*/
/* Responsive styles */
@media (max-width: 768px) {
    #leftMenu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 225px;
        max-width: 85vw;
        transform: translateX(-100%);
    }

    #leftMenu.active {
        transform: translateX(0);
    }
}

@media (max-width: 576px) {
    #leftMenu {
        width: 200px;
    }
}

/* AHW - Arrows and Main menu margins and main menu padding*/
/* Menu styling with theme colors */
#leftMenu .nav-link {
    color: var(--bit-LeftMenuTextColor) !important;
    font-family: var(--bit-menu-font-family, var(--bit-font-family)) !important;
    text-transform: none;
    letter-spacing: -0.025em;
    font-size: var(--bit-menu-font-size, 14px);
    font-weight: 500;
    padding: 5px 12px;
    margin: 0px 8px;
    border-radius: 8px;
    line-height: 1.2;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    position: relative;
    overflow: visible;
}

/* Allow full menu item text without truncation */
#leftMenu .nav-link span {
    overflow: visible;
    white-space: normal;
    flex: 1;
    transition: font-size 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease;
    /* Above the hover/active highlight box (mockup pins the label to z-index:2). */
    position: relative;
    z-index: 2;
}


/* Left border indicator - DISABLED */
#leftMenu .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--bit-LeftMenuActiveTextColor);
    border-radius: 0 4px 4px 0;
    transition: height 0.2s ease;
    display: none;
}

#leftMenu .nav-link:hover::before {
    height: 0;
}

#leftMenu .nav-link.active::before {
    height: 60%;
    display: block;
}

/* Icon colors in menu - with floating effect */
#leftMenu .nav-link i {
    color: var(--bit-LeftMenuIconColor, var(--bit-LeftMenuTextColor)) !important;
    font-size: 1.2em;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    /* Keep the icon (and label, below) above the hover/active highlight box.
       The nav-link's highlight is its own background, but the icon gets a
       transform on hover which creates a stacking context — without an explicit
       z-index the opaque highlight can paint over the icon (mockup pins icon +
       label to z-index:2 over the z-index:0 highlight). */
    position: relative;
    z-index: 2;
}

#leftMenu .nav-link:hover {
    color: var(--bit-LeftMenuActiveTextColor) !important;
    /* Soft accent tint on hover to match the mockup's Pop & Slide (.ex-pop),
       which fills the row with --accent-soft. Slightly lighter (10%) than the
       active pill (12%) so the current page still reads as "more selected". */
    background: color-mix(in srgb, var(--bit-LeftMenuHoverBg, var(--bit-LeftMenuActiveTextColor)) var(--bit-LeftMenuHoverPct, 12%), transparent) !important;
}

#leftMenu .nav-link:hover i {
    color: var(--bit-LeftMenuActiveIconColor, var(--bit-LeftMenuActiveTextColor)) !important;
}

/* AHW - Expanded "Pop & Slide" hover F/X.
   Icon pops/tilts (uses the springy easing already on .nav-link i), the text
   label slides right and breathes its tracking. Transform/letter-spacing only:
   font-size/family/weight stay theme-driven (--bit-menu-font-*). The toggle
   chevron is a ::after pseudo-element, so the icon pop never touches it. */
#leftMenu .nav-link:hover i {
    transform: rotate(-8deg) scale(1.22);
}
#leftMenu .nav-link:hover span {
    transform: translateX(5px);
    letter-spacing: 0.3px;
}

#leftMenu .nav-link.active i,
#leftMenu .toggle-arrow.toggler-active > i,
#leftMenu .sub-menu-toggle-group.toggler-active > i {
    -webkit-text-stroke: 0.75px currentColor;
    text-stroke: 0.75px currentColor;
}

/* Button press effect on click */
#leftMenu .nav-link:active {
    transform: translateX(1px) scale(0.98) !important;
    box-shadow:
        0 1px 3px rgba(150, 150, 150, 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.1s ease !important;
}

#leftMenu .nav-link:active i {
    transform: translateY(0) scale(1) !important;
}

#leftMenu .nav-link.active {
    color: var(--bit-LeftMenuActiveTextColor) !important;
    /* Soft tint of the org's active color (transparent base so it sits over any
       menu background). Mirrors the mockup's "color over it" active pill. */
    background: color-mix(in srgb, var(--bit-LeftMenuHoverBg, var(--bit-LeftMenuActiveTextColor)) var(--bit-LeftMenuHoverPct, 12%), transparent) !important;
    position: relative;
    font-weight: 600 !important;
}

/* Submenu items: keep a constant weight in every state (no bold on hover/active) */
#leftMenu .menu-toggler ul .nav-link.active {
    font-weight: 400 !important;
}

#leftMenu .menu-toggler ul .nav-link.active:hover {
    font-weight: 400 !important;
}

#leftMenu .nav-link.active i {
    color: var(--bit-LeftMenuActiveIconColor, var(--bit-LeftMenuActiveTextColor)) !important;
}

/* Animated gradient keyframes */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Glass shine animation - creates reflective glassy effect */
@keyframes glass-shine {
    0% { background-position: -200% 0%, 0% 0%; }
    50% { background-position: 200% 0%, 0% 0%; }
    100% { background-position: -200% 0%, 0% 0%; }
}


/* Top level menu items */
#leftMenu ul.nav > li > a.nav-link,
#leftMenu ul.nav > li > button.nav-link {
    font-family: var(--bit-menu-font-family, var(--bit-font-family)) !important;
    font-size: var(--bit-menu-font-size, 14px);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.025em;
}

/* AHW - Menu Toggle Arrow Styles - Now on the right */
.toggle-arrow {
    position: relative;
    color: var(--bit-LeftMenuTextColor) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    text-align: left;
    overflow: visible;
}

.toggle-arrow::before {
    content: none !important;
    display: none !important;
}

/* Override for active submenu - DISABLED */
button.sub-menu-toggle-group.toggler-active::before {
    content: '' !important;
    display: none !important;
}

.toggle-arrow::after {
    content: '\F285' !important;
    font-family: 'bootstrap-icons' !important;
    transition: all 0.2s ease;
    font-size: 14px !important;
    opacity: 0.7;
    color: var(--bit-LeftMenuTextColor) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding-left: 8px !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 2 !important;
}

.toggle-arrow:hover::after {
    opacity: 1;
    color: #1e293b !important;
}

.toggle-arrow.toggler-active::after {
    transform: rotate(90deg);
    opacity: 1;
    color: var(--bit-LeftMenuActiveTextColor) !important;
}

/* Make the top-level (main) menu parent read as ACTIVE when one of its sub-items
   is the current page (toggler-active). Same tint as .nav-link.active / the hover
   highlight, so an open section shows "you are here" in the expanded menu too
   (collapsed already does this via the rule near the top of this file). The
   2nd-level sub-toggle keeps its own transparent rule below, so this only paints
   the main menu items. */
.toggle-arrow.toggler-active {
    font-weight: 600 !important;
    background: color-mix(in srgb, var(--bit-LeftMenuHoverBg, var(--bit-LeftMenuActiveTextColor)) var(--bit-LeftMenuHoverPct, 12%), transparent) !important;
    color: var(--bit-LeftMenuActiveTextColor) !important;
}

/* Add left border to active top-level parent - DISABLED */
#leftMenu .toggle-arrow.toggler-active::before {
    content: '' !important;
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: var(--bit-LeftMenuActiveTextColor) !important;
    border-radius: 0 4px 4px 0 !important;
    z-index: 1 !important;
}

/* Submenu parent toggle items keep a constant weight (no bold on hover/active) */
.sub-menu-toggle-group.toggler-active {
    font-weight: 400 !important;
}

#leftMenu .menu-toggler .sub-menu-toggle-group.toggler-active:hover {
    font-weight: 400 !important;
}

/* AHW - Ensure submenu toggle arrows are visible and aligned.
   right offset compensates for the nested button overflowing its <li>
   (width:100% + horizontal margins), pulling the chevron back so it
   aligns with the top-level chevron column. */
button.sub-menu-toggle-group.toggle-arrow::after,
#leftMenu .menu-toggler button.toggle-arrow::after {
    content: '\F285' !important;
    font-family: 'bootstrap-icons' !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    opacity: 0.7 !important;
    color: var(--bit-LeftMenuTextColor) !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    padding-left: 8px !important;
    display: inline-block !important;
    position: relative !important;
}

/* Submenu toggle buttons - no background on hover */
#leftMenu .menu-toggler .toggle-arrow:hover {
    background: transparent !important;
}

/* Highlight submenu parent when one of its children is active */
button.sub-menu-toggle-group.toggler-active {
    background: transparent !important;
    color: var(--bit-LeftMenuActiveTextColor) !important;
    position: relative !important;
}

/* Add left border to active submenu parent - DISABLED */
#leftMenu button.sub-menu-toggle-group.toggler-active::before {
    content: '' !important;
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: var(--bit-LeftMenuActiveTextColor) !important;
    border-radius: 0 4px 4px 0 !important;
    z-index: 1 !important;
}

/* Theme Color Classes */
.bit-LeftMenuBg {
    background-color: var(--bit-LeftMenuBg) !important;
}

.bit-LeftMenuTextColor {
    color: var(--bit-LeftMenuTextColor) !important;
}

.bit-LeftMenuTextColor a {
    color: var(--bit-LeftMenuTextColor) !important;
}

.bit-LeftMenuTextColor .nav-link {
    color: var(--bit-LeftMenuTextColor) !important;
}

.bit-LeftMenuTextColor .nav-link:hover {
    background: transparent !important;
}

.bit-LeftMenuTextColor .nav-link.active {
    color: var(--bit-LeftMenuActiveTextColor) !important;
    background: transparent !important;
    border-radius: 8px;
}