/* ============================================================================
   shiplink-header.css
   Scoped styles for the React Shield Header component (#shiplink-header-root).
   Uses Shield design tokens where possible; falls back to USB brand values.
   ============================================================================ */

/* ── Feature-toggle visibility ──────────────────────────────────────────────
   Applied via Razor in _Layout.cshtml based on the UseShieldHeader web.config key.
   The old Bootstrap navbar is NOT removed — it stays in the DOM for instant
   rollback. Only visibility is toggled so no layout gaps appear.           */
.sl-old-nav--hidden {
    display: none !important;
}

.sl-header-root--hidden {
    display: none !important;
}

/* Shield collapsed menus can render both trigger-icon and chevron layers.
       Keep only the chevron to avoid duplicated arrows on mobile. */
#shiplink-header-root .usb-nav__root[class*="usb-nav__root--collapsed"] .usb-nav__collapse .usb-nav__sub [class*="usb-nav__sub-trigger-icon"] {
    display: none !important;
}

/* Leaf links should not show a secondary icon lane in collapsed submenus. */
#shiplink-header-root .usb-nav__root[class*="usb-nav__root--collapsed"] .usb-nav__collapse .usb-nav__sub [class*="usb-nav__link-icon"] {
    display: none !important;
}

/* Prevent the next submenu pane from peeking in on the right side. */
#shiplink-header-root .usb-nav__root[class*="usb-nav__root--collapsed"] .usb-nav__collapse {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

    #shiplink-header-root .usb-nav__root[class*="usb-nav__root--collapsed"] .usb-nav__collapse .usb-nav__sub,
    #shiplink-header-root .usb-nav__root[class*="usb-nav__root--collapsed"] .usb-nav__collapse .usb-nav__sub-full {
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

/* ── Header shell ────────────────────────────────────────────────────────── */
/* U.S. Bank approved typeface: Circular-USB (loaded from CDN via shield-fonts.css).
   Site.css applies * { font-family: Montserrat !important } globally, so we must
   scope an !important override here to restore Circular-USB inside the Shield header. */
#shiplink-header-root,
#shiplink-header-root * {
    font-family: var(--token-font-base, Circular-USB, Arial, Helvetica, sans-serif) !important;
}

    /* Remove border/outline box from all Shield header menu items and states. */
    #shiplink-header-root .usb-nav__link,
    #shiplink-header-root .usb-nav__sub-trigger,
    #shiplink-header-root .usb-nav__sub-close-button {
        --nav-link-active-border: none !important;
        --nav-link-focus-border: none !important;
        --nav-link-active-border-radius: 0 !important;
        --nav-link-focus-border-radius: 0 !important;
        --nav-sub-trigger-active-border: none !important;
        --nav-sub-trigger-focus-border: none !important;
        --nav-sub-trigger-active-border-radius: 0 !important;
        --nav-sub-trigger-focus-border-radius: 0 !important;
        --nav-sub-close-button-focus-border: none !important;
        --nav-sub-trigger-selected-border-left: 0 !important;
        --nav-sub-trigger-selected-focus-border-left: 0 !important;
        --nav-expanded-sub-link-selected-border-left: 0 !important;
        --nav-expanded-sub-trigger-selected-border-left: 0 !important;
        --nav-expanded-sub-trigger-selected-focus-border-left: 0 !important;
        --nav-sub-list-item-sub-trigger-selected-border-left: 0 !important;
        --nav-sub-list-item-sub-trigger-selected-focus-border-left: 0 !important;
    }

        #shiplink-header-root .usb-nav__link,
        #shiplink-header-root .usb-nav__link:hover,
        #shiplink-header-root .usb-nav__link:active,
        #shiplink-header-root .usb-nav__link:focus,
        #shiplink-header-root .usb-nav__link:focus-visible,
        #shiplink-header-root .usb-nav__sub-trigger,
        #shiplink-header-root .usb-nav__sub-trigger:hover,
        #shiplink-header-root .usb-nav__sub-trigger:active,
        #shiplink-header-root .usb-nav__sub-trigger:focus,
        #shiplink-header-root .usb-nav__sub-trigger:focus-visible,
        #shiplink-header-root .usb-nav__sub-close-button,
        #shiplink-header-root .usb-nav__sub-close-button:hover,
        #shiplink-header-root .usb-nav__sub-close-button:active,
        #shiplink-header-root .usb-nav__sub-close-button:focus,
        #shiplink-header-root .usb-nav__sub-close-button:focus-visible {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
        }

            #shiplink-header-root .usb-nav__link:active::before,
            #shiplink-header-root .usb-nav__link:focus-visible::before,
            #shiplink-header-root .usb-nav__sub-trigger:active::before,
            #shiplink-header-root .usb-nav__sub-trigger:focus-visible::before,
            #shiplink-header-root .usb-nav__sub-close-button:active::before,
            #shiplink-header-root .usb-nav__sub-close-button:focus-visible::before {
                border: none !important;
                border-left: none !important;
                outline: none !important;
                box-shadow: none !important;
                content: none !important;
            }

    #shiplink-header-root .usb-nav__list-item,
    #shiplink-header-root .usb-nav__list-item.navigation_usb-nav__list-item--emphasis-subtle_h16wb_753,
    #shiplink-header-root .usb-nav__list-item.navigation_usb-nav__list-item--emphasis-minimal_h16wb_127 {
        border-bottom: none !important;
    }

        #shiplink-header-root .usb-nav__sub-trigger[aria-expanded=true],
        #shiplink-header-root .usb-nav__list-item:has(.usb-nav__link[data-nav-link-active=true]) .usb-nav__sub-trigger,
        #shiplink-header-root .usb-nav__list-item:has(.usb-nav__link[data-nav-link-active=true]) .usb-nav__sub-trigger[aria-current=true],
        #shiplink-header-root .usb-nav__sub .usb-nav__list-item:has(.usb-nav__link[data-nav-link-active=true]) .usb-nav__sub-trigger {
            border-left: none !important;
        }

    /* Remove left-border / outline artifacts inside submenus but KEEP the bottom
   divider line between items so the dropdown matches the Shield design. */
    #shiplink-header-root .usb-nav__sub .usb-nav__list-item {
        border-left: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--token-border-low, #e8e8e8) !important;
        box-shadow: none !important;
    }

    /* Keep divider lines visible in collapsed/mobile menu (main + nested). */
    #shiplink-header-root .usb-nav__root[class*="usb-nav__root--collapsed"] .usb-nav__collapse .usb-nav__list > .usb-nav__list-item,
    #shiplink-header-root .usb-nav__root[class*="usb-nav__root--collapsed"] .usb-nav__collapse .usb-nav__sub .usb-nav__list > .usb-nav__list-item {
        border-left: none !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--token-border-low, #e8e8e8) !important;
    }

    /* Links and triggers inside submenus: remove all borders/outlines on the
   element itself (divider comes from the parent list-item above). */
    #shiplink-header-root .usb-nav__sub .usb-nav__link,
    #shiplink-header-root .usb-nav__sub .usb-nav__sub-trigger,
    #shiplink-header-root .usb-nav__sub .usb-nav__sub-close-button {
        border: none !important;
        box-shadow: none !important;
    }

        #shiplink-header-root .usb-nav__sub .usb-nav__link::before,
        #shiplink-header-root .usb-nav__sub .usb-nav__sub-trigger::before,
        #shiplink-header-root .usb-nav__sub .usb-nav__sub-close-button::before,
        #shiplink-header-root .usb-nav__sub .usb-nav__link::after,
        #shiplink-header-root .usb-nav__sub .usb-nav__sub-trigger::after,
        #shiplink-header-root .usb-nav__sub .usb-nav__sub-close-button::after {
            border: none !important;
            content: none !important;
        }

.sl-header {
    background-color: #ffffff;
    color: #1a1a1a;
    width: 100%;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid #d8d8d8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── Utility nav row (48px) ──────────────────────────────────────────────── */
.sl-header__utility-row {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 48px;
    border-bottom: 1px solid #e8e8e8;
}

.sl-header__utility-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

/* ── Primary nav row (56px) ────────────────────────────────────────────── */
.sl-header__navbar {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 48px;
    gap: 0;
    flex-wrap: nowrap;
}

/* ── Skip link (a11y) ────────────────────────────────────────────────────── */
.sl-header__skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #ffffff;
    color: #00004e;
    padding: 8px 16px;
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
}

    .sl-header__skip-link:focus {
        top: 0;
    }

/* ── Brand / logo ────────────────────────────────────────────────────────── */
.sl-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 48px; /* logo-to-nav-gap per Figma spec */
}

    .sl-header__brand:focus-visible {
        outline: 2px solid #00004e;
        outline-offset: 2px;
        border-radius: 2px;
    }

.sl-header__logo {
    height: 32px;
    width: auto;
    display: block;
}

/* ── Nav collapse (main menu) ────────────────────────────────────────────── */
.sl-header__collapse {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
}

.sl-header__nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.sl-header__nav-list--right {
    margin-left: auto;
    gap: 8px;
}

.sl-header__nav-item {
    position: relative;
}

/* ── Plain nav link (no children) ────────────────────────────────────────── */
.sl-header__nav-link {
    display: block;
    color: #00004e;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}

    .sl-header__nav-link:hover,
    .sl-header__nav-link:focus-visible {
        background: rgba(0,0,78,0.07);
        color: #00004e;
        outline: none;
    }

    .sl-header__nav-link:focus-visible {
        outline: 2px solid #00004e;
        outline-offset: 2px;
    }

/* ── Dropdown trigger button ─────────────────────────────────────────────── */
.sl-header__dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #00004e;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

    .sl-header__dropdown-trigger:hover,
    .sl-header__nav-item--open .sl-header__dropdown-trigger {
        background: rgba(0,0,78,0.07);
        color: #00004e;
    }

    .sl-header__dropdown-trigger:focus-visible {
        outline: 2px solid #00004e;
        outline-offset: 2px;
    }

.sl-header__dropdown-chevron {
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.2s ease;
    display: inline-block;
}
/* Rotate chevron when menu is open */
.sl-header__nav-item--open .sl-header__dropdown-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown menu panel ─────────────────────────────────────────────────── */
.sl-header__dropdown-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 240px;
    /* overflow must stay 'visible' (the default) so that side-flyout submenu
       panels are NOT clipped. CSS does not allow overflow-y:auto + overflow-x:visible
       on the same element — setting either axis to non-visible forces both to auto,
       which would clip the absolutely-positioned submenu panels. */
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    z-index: 1020;
}
/* Right-side dropdowns open to the left */
.sl-header__nav-list--right .sl-header__dropdown-menu {
    left: auto;
    right: 0;
}

/* ── Dropdown items ──────────────────────────────────────────────────────── */
.sl-header__dropdown-item {
    display: block;
    padding: 9px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s ease;
}

    .sl-header__dropdown-item:hover {
        background: rgba(0,0,78,0.06);
        color: #00004e;
    }

    .sl-header__dropdown-item:focus-visible {
        background: rgba(0,0,78,0.06);
        color: #00004e;
        outline: 2px solid #00004e;
        outline-offset: -2px;
    }

/* ── Side-flyout submenu (Bootstrap .dropdown-submenu equivalent) ────────── */
/* Trigger button: full-width, same style as a regular dropdown item,         */
/* but with a right-pointing arrow to signal it opens a sub-panel.            */
.sl-header__submenu-item {
    position: relative;
}

.sl-header__submenu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s ease;
}

    .sl-header__submenu-trigger:hover,
    .sl-header__submenu-item--open > .sl-header__submenu-trigger {
        background: rgba(0,0,78,0.06);
        color: #00004e;
    }

    .sl-header__submenu-trigger:focus-visible {
        outline: 2px solid #00004e;
        outline-offset: -2px;
    }

.sl-header__submenu-arrow {
    flex-shrink: 0;
    margin-left: 12px;
    opacity: 0.55;
}

/* The flyout panel — opens to the RIGHT of the trigger item */
.sl-header__submenu-panel {
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 220px;
    /* No overflow clipping here either — nested flyouts must remain visible */
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    z-index: 1021;
}

/* Flip leftward when the right edge would overflow the viewport */
.sl-header__submenu-panel--left {
    left: auto;
    right: 100%;
}

/* ── Mobile hamburger toggle ─────────────────────────────────────────────── */
.sl-header__mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

.sl-header__mobile-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #00004e;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Animate to ✕ when open */
.sl-header__mobile-toggle--open .sl-header__mobile-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.sl-header__mobile-toggle--open .sl-header__mobile-toggle-bar:nth-child(2) {
    opacity: 0;
}

.sl-header__mobile-toggle--open .sl-header__mobile-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ── Responsive: ≤1056px — collapse main nav to hamburger (large breakpoint) ── */
@media (max-width: 1056px) {
    .sl-header__utility-row {
        padding: 0 16px;
    }

    /* ── Mobile logo centering ───────────────────────────────────────────────
       Shield nav renders .usb-container as a flex row with justify-content:space-between.
       Override to center so the brand logo is centred on mobile per Figma spec.
       The hamburger trigger is then absolutely positioned to the left edge so it
       doesn't shift the logo off-centre.                                      */
    #shiplink-header-root .usb-nav__root > .usb-container {
        justify-content: center !important;
        position: relative;
    }

    #shiplink-header-root .usb-nav__trigger {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    .sl-header__collapse {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 8px 0 16px;
        border-top: 1px solid #e0e0e0;
    }

    .sl-header__collapse--open {
        display: flex;
    }

    .sl-header__nav-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .sl-header__nav-item {
        width: 100%;
    }

        .sl-header__nav-item a,
        .sl-header__nav-item .usb-link,
        .sl-header__nav-item button[data-state] {
            width: 100%;
            text-align: left;
        }
}

/* ── Responsive: ≤320px — smallest layout ────────────────────────────────── */
@media (max-width: 320px) {
    .sl-header__utility-row {
        padding: 0 8px;
    }

    .sl-header__navbar {
        padding: 0 8px;
    }
}

/* ── localStorage nav-override rules ────────────────────────────────────────
   data-sl-nav attribute is set on <html> by the inline script in _Layout.cshtml.
   "old" → hide Shield header, force old Bootstrap navbar visible.
   "new" → hide old Bootstrap navbar, force Shield header visible.
   These override whatever server-rendered classes Razor set.              */
[data-sl-nav="old"] #shiplink-header-root {
    display: none !important;
}

[data-sl-nav="old"] #Header {
    display: block !important;
}

[data-sl-nav="new"] #Header {
    display: none !important;
}

[data-sl-nav="new"] #shiplink-header-root {
    display: block !important;
}

/* Keep Shield submenu panels usable at high zoom/smaller viewports.
   Shield runtime sets panel height/overflow dynamically; these overrides ensure
   long menus remain scrollable within the visible viewport area. */
#shiplink-header-root .usb-nav__sub {
    max-width: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* At zoomed desktop widths, reduce panel width so deep flyouts have room. */
@media (max-width: 1600px) {
    #shiplink-header-root .usb-nav__sub {
        width: min(14rem, calc(100vw - 2rem)) !important;
    }
}

/* Keep list overflow visible so Shield tooltip overlays are never clipped by
   submenu list containers. */
#shiplink-header-root .usb-nav__sub > .usb-nav__list {
    max-height: none !important;
    overflow: visible !important;
}

/* Nested flyout list sections should also allow overlay content to escape. */
#shiplink-header-root .usb-nav__sub .usb-nav__sub > .usb-nav__list {
    max-height: none !important;
    overflow: visible !important;
}
#shiplink-header-root .sl-customer-sub-panel,
#shiplink-header-root .sl-customer-sub-panel > .usb-nav__list,
#shiplink-header-root .sl-header__mobile-customer-panel {
    overflow-x: hidden !important;
}

/* Choose Customer list in Shield utility menu can be long; keep it scrollable. */
#shiplink-header-root .sl-header__customer-list {
    max-height: calc(100vh - 12rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

/* Override generic submenu overflow rules for Choose Customer specifically. */
#shiplink-header-root .sl-customer-sub-panel > .usb-nav__list.sl-header__customer-list {
    max-height: calc(100vh - 12rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Customer search input inside Choose Customer sub-menu — tokens from Shield search component */
#shiplink-header-root .sl-customer-search-item {
    padding: 0.25rem 1.5rem !important;
}

#shiplink-header-root .sl-header__customer-list .usb-nav__link {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Keep report tooltip icon independent from nav link styling. */
#shiplink-header-root .sl-header__report-item-with-tooltip {
    position: relative;
}

    #shiplink-header-root .sl-header__report-item-with-tooltip > .usb-nav__link {
        padding-right: 2.25rem !important;
    }

#shiplink-header-root .sl-header__nav-tooltip-icon-wrap {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    z-index: 2;
}

#shiplink-header-root .sl-header__nav-tooltip-icon-btn {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--nav-sub-link-color, #00004e);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

    #shiplink-header-root .sl-header__nav-tooltip-icon-btn:hover,
    #shiplink-header-root .sl-header__nav-tooltip-icon-btn:focus-visible {
        color: var(--nav-sub-link-hover-text-color, #1038b0);
    }

#shiplink-header-root .sl-header__report-item-with-tooltip .usb-nav__tooltip .description {
    white-space: normal;
}


#shiplink-header-root .sl-customer-search {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: var(--search-control-spacing, 0.25rem);
    padding: var(--search-control-spacing, 0.25rem) var(--search-control-padding-left-right, 0.75rem);
    margin-bottom: var(--token-spacing-2, 0.25rem);
    min-height: 2rem;
    border: var(--token-border-width-default, 1px) solid var(--search-input-border-color, rgb(122, 122, 149));
    border-radius: var(--search-control-border-radius, 0.5rem);
    background: var(--search-control-background-color, #ffffff);
    transition: border-color 0.15s ease;
}

    #shiplink-header-root .sl-customer-search:focus-within {
        border-color: var(--search-input-focus-border-color, #235ae4);
        border-width: var(--token-border-width-large, 2px);
        outline: none;
    }

#shiplink-header-root .sl-customer-search__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--search-control-icon-fill-color, rgb(45, 45, 62));
}
    #shiplink-header-root .sl-customer-search__icon > svg {
        width: 1rem;
        height: 1rem;
        display: block;
    }

#shiplink-header-root .sl-customer-search__input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-size: var(--token-font-size-sm, 0.875rem);
    color: var(--search-input-value-text-color, rgb(99, 99, 127));
    min-width: 0;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    line-height: 1.1;
}


    #shiplink-header-root .sl-customer-search__input:not(:placeholder-shown) {
        color: var(--search-input-active-value-text-color, rgb(45, 45, 62));
    }

    #shiplink-header-root .sl-customer-search__input::-webkit-search-cancel-button {
        -webkit-appearance: auto;
    }

@media (max-width: 1023px) {
    #shiplink-header-root .sl-header__mobile-customer-item {
        width: 100%;
        display: block !important;
        align-items: flex-start !important;
    }

    /* Mobile inline "Choose customer" expander: opens downward within hamburger menu. */
    #shiplink-header-root .sl-header__mobile-customer-toggle {
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border: none !important;
        background: transparent !important;
        text-align: left;
        cursor: pointer;
        color: inherit;
        line-height: 1.4;
    }

    #shiplink-header-root .sl-header__mobile-customer-label {
        display: block;
        flex: 1 1 auto;
        text-align: left;
    }

    #shiplink-header-root .sl-header__mobile-customer-chevron {
        width: 8px;
        height: 8px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex: 0 0 auto;
    }

        #shiplink-header-root .sl-header__mobile-customer-chevron.is-open {
            transform: rotate(225deg);
        }

    #shiplink-header-root .sl-header__mobile-customer-panel {
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--token-border-low, #e8e8e8);
    }

        #shiplink-header-root .sl-header__mobile-customer-panel .usb-nav__list-item {
            display: block;
            align-items: flex-start;
            width: 100%;
            border-bottom: 1px solid var(--token-border-low, #e8e8e8) !important;
        }

        #shiplink-header-root .sl-header__mobile-customer-panel .usb-nav__link {
            display: block;
            width: 100% !important;
            text-align: left;
        }
}

/* Keep both header variants in a low stacking context so Bootstrap modals can sit above. */
#shiplink-header-root,
#Header {
    position: relative;
    z-index: 100;
}


    /* Login/anonymous old-header presentation: white banner with new logo. */
    #Header.sl-login-banner .navbar-default {
        background: #0c2074;
        border: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    #Header.sl-login-banner .navbar-header {
        float: none;
    }

    #Header.sl-login-banner .navbar-brand {
        height: 56px;
        padding: 10px 0 10px 12px;
    }

        #Header.sl-login-banner .navbar-brand .UsBankLogo {
            height: 36px;
            width: auto;
        }

/* ── Modal / popup z-index fixes ─────────────────────────────────────────────
   The Shield header raised internal stacking contexts, so all Bootstrap modals
   and dropdowns need explicit z-index overrides to remain above the header.

   Stack order (low → high):
     100   #shiplink-header-root / #Header  (header stacking context)
     1030  Shield nav submenu panels override (see below)
     1990  .modal-backdrop
     2000  .modal (ALL modals — must be above backdrop)
     2010  #ChooseCustomerModal (sits above generic modals)
     9999+ .ui-datepicker / .bootstrap-select (already in BootstrapOverrides)    */

/* All Bootstrap modals must sit above the backdrop (1990). */
.modal {
    z-index: 2000 !important;
}

.modal-backdrop {
    z-index: 1990 !important;
}

/* ChooseCustomer modal on top of any other modal. */
#ChooseCustomerModal {
    z-index: 2010 !important;
}

/* Override Shield nav sub-panel z-index so they stay below the modal backdrop.
   The Shield navigation CSS sets --nav-expanded-container-sub-z-index: 9999;
   this scoped override brings it down to 1030, safely above the header (100)
   but well below any modal (1990+).                                           */
#shiplink-header-root {
    --nav-expanded-container-sub-z-index: 1030;
    --nav-tooltip-z-index: 1200;
}