@import '_content/BAComponents/BAComponents.2g8h4fo5tn.bundle.scp.css';

/* /Shared/MainLayout.razor.rz.scp.css */
/* QLogistics shell — a sticky desktop sidebar plus a phone top bar, matching the QClock/QLogisticsView house style. */

.page[b-cv5unt5av3] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-cv5unt5av3] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-cv5unt5av3] {
    /* QCRM-style subtle vertical gradient rail instead of a flat panel. */
    background: linear-gradient(180deg, color-mix(in srgb, var(--qs-surface-soft) 92%, var(--qs-surface)), var(--qs-surface));
    border-inline-end: 1px solid var(--qs-border, #d9e2e8);
}

/* Bottom padding clears the fixed document action bar (.qs-bottom-bar) on the editor pages. Left/right
   gutters stay small so wide grids and card grids use the available width (see .qs-page max-width). */
.content[b-cv5unt5av3] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.25rem 1rem 6.5rem;
}

.sidebar-flash-toggle[b-cv5unt5av3] {
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: var(--qs-surface, #fff);
    border: 1px solid var(--qs-border, #d9e2e8);
    border-radius: 999px;
    color: var(--qs-primary-strong, #10384a);
    box-shadow: var(--shadow-xs, 0 2px 5px rgba(15, 23, 42, 0.12));
    font-size: 0.85rem;
    padding: 0;
    transform: translate(50%, 0.75rem);
    cursor: pointer;
    z-index: 2;
}

html[dir="rtl"] .sidebar-flash-toggle[b-cv5unt5av3] {
    right: auto;
    left: 0;
    transform: translate(-50%, 0.75rem);
}

@media (max-width: 640.98px) {
    .page[b-cv5unt5av3] {
        display: block;
    }

    .sidebar[b-cv5unt5av3] {
        /* On phones the sidebar owns only the top bar; the menu itself overlays the page as a drawer. */
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        height: 3.5rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
        border-inline-end: 0;
        border-bottom: 1px solid var(--qs-border, #d9e2e8);
    }

    main[b-cv5unt5av3] {
        width: 100%;
    }

    .content[b-cv5unt5av3] {
        /* Phones: tight gutters so item/customer cards fill the screen width. */
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .sidebar-flash-toggle[b-cv5unt5av3] {
        display: none;
    }

    .sidebar.collapsed[b-cv5unt5av3] {
        /* The phone shell uses a top bar and drawer, so the desktop icon-only width must not apply. */
        width: 100%;
    }
}

@media (min-width: 641px) {
    .page[b-cv5unt5av3] {
        flex-direction: row;
    }

    .sidebar[b-cv5unt5av3] {
        width: 232px;
        height: 100vh;
        position: sticky;
        top: 0;
        box-shadow: var(--shadow-xs, 1px 0 3px rgba(15, 23, 42, 0.1));
    }

    .content[b-cv5unt5av3] {
        /* Desktop has the most empty space, so keep side gutters small and let .qs-page own the width. */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sidebar.collapsed[b-cv5unt5av3] {
        width: 53px;
    }
}


/* =========================================================================
   Shell refinement
   ========================================================================= */

/* The rail is a distinct plane from the workspace: slightly raised surface,
   a defined edge, and no shadow bleeding over the content in dark mode. */
.sidebar[b-cv5unt5av3] {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--qs-surface-soft) 96%, var(--qs-surface)),
            var(--qs-surface) 60%);
    border-inline-end: 1px solid var(--qs-border);
    box-shadow: none;
}

/* The utility bar is a thin, quiet strip; the previous 52px band read as an
   empty header because it only ever holds the theme toggle. */
.qbm-topbar[b-cv5unt5av3] {
    min-height: 46px;
    padding-inline: var(--space-4, 1rem);
    background: color-mix(in srgb, var(--qs-surface) 78%, transparent);
    border-bottom: 1px solid var(--qs-border);
}

/* QLogistics has no fixed bottom action bar (its editor actions are sticky
   inside their own card), so the 6.5rem reservation was dead space on every
   page. The remaining allowance clears the phone safe area. */
.content[b-cv5unt5av3] {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

.sidebar-flash-toggle[b-cv5unt5av3] {
    background: var(--qs-surface);
    border-color: var(--qs-border);
    color: var(--qs-muted);
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.sidebar-flash-toggle:hover[b-cv5unt5av3] {
    border-color: color-mix(in srgb, var(--qs-primary) 45%, var(--qs-border));
    background: color-mix(in srgb, var(--qs-primary) 12%, var(--qs-surface));
    color: var(--qs-primary);
}

.sidebar-flash-toggle:focus-visible[b-cv5unt5av3] {
    outline: 2px solid var(--qs-primary);
    outline-offset: 2px;
}

@media (min-width: 641px) {
    /* A slightly wider rail keeps two-word workspace names such as
       "Management & Reports" on one line instead of wrapping to three rows. */
    .sidebar[b-cv5unt5av3] {
        width: 248px;
    }

    .content[b-cv5unt5av3] {
        padding-left: var(--space-5, 1.25rem);
        padding-right: var(--space-5, 1.25rem);
    }
}

@media (max-width: 640.98px) {
    .sidebar[b-cv5unt5av3] {
        background: var(--qs-surface);
        box-shadow: 0 1px 3px rgba(2, 6, 23, 0.35);
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* QLogistics sidebar navigation — ported from the QClock/QLogisticsView house style and made self-contained
   because QLogistics does not load Bootstrap. The drawer behaviour (open/close, outside-tap dismiss) is
   driven by the shared Assets/site.js, which keys off id="navMenu" and ".top-row-nav .navbar-toggler". */

.top-row-nav[b-03e6y5gq5h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0 0.75rem;
    background: var(--qs-surface, #ffffff);
}

.container-fluid-nav[b-03e6y5gq5h] {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

.navbar-brand[b-03e6y5gq5h] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--qs-primary-strong, #10384a);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.navbar-brand:hover[b-03e6y5gq5h] {
    color: var(--qs-primary-strong, #10384a);
}

/* The compact compass mark gives the focused shell the same clear product identity as QSales and QCosting. */
.navbar-brand-mark[b-03e6y5gq5h] {
    display: inline-grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--qs-primary) 30%, transparent);
    border-radius: 9px;
    background: linear-gradient(145deg, var(--qs-primary), var(--qs-primary-strong));
    box-shadow: var(--shadow-xs, 0 2px 5px rgba(15, 23, 42, 0.15));
    color: #fff;
    font-size: 1rem;
}

/* Self-contained hamburger button (no Bootstrap base styles available in QLogistics). */
.navbar-toggler[b-03e6y5gq5h] {
    display: block;
    border: 0;
    border-radius: 50%;
    background: var(--qs-surface, #ffffff);
    padding: 10px;
    cursor: pointer;
}

.navbar-toggler:hover[b-03e6y5gq5h] {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.navbar-toggler-icon[b-03e6y5gq5h] {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(16, 56, 74, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-scrollable[b-03e6y5gq5h] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-links[b-03e6y5gq5h] {
    flex-grow: 1;
}

/* Section labels make the broader logistics and maritime domains scannable without becoming navigation targets. */
.nav-section-label[b-03e6y5gq5h] {
    padding: 0.9rem 1.45rem 0.45rem;
    color: var(--qs-muted, #5f6e78);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

/* The compact rail retains icons only, so headings cannot consume unexplained vertical space. */
.icon-only .nav-section-label[b-03e6y5gq5h] {
    display: none;
}

.nav-item[b-03e6y5gq5h] {
    font-size: 0.9rem;
    padding: 0 0.75rem 0.4rem;
}

.nav-item:first-of-type[b-03e6y5gq5h] {
    padding-top: 1rem;
}

.nav-item.nav-item-icon[b-03e6y5gq5h] {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.nav-item[b-03e6y5gq5h]  a {
    position: relative;
    color: var(--qs-text, #20252b);
    border-radius: var(--radius-md, 8px);
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-height: 2.85rem;
    height: auto;
    line-height: 1.2;
    padding: 0.6rem 0.7rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.nav-item[b-03e6y5gq5h]  a.active {
    background: color-mix(in srgb, var(--qs-primary) 14%, transparent);
    color: var(--qs-heading, #1e293b);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qs-primary) 22%, transparent);
}

/* QCRM-style active-page accent stripe on the leading edge of the rail. */
.nav-item[b-03e6y5gq5h]  a.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--qs-primary);
}

.nav-item[b-03e6y5gq5h]  a:hover {
    background: color-mix(in srgb, var(--qs-primary) 10%, transparent);
    color: var(--qs-heading, #1e293b);
    transform: translateX(2px);
}

html[dir="rtl"] .nav-item[b-03e6y5gq5h]  a:hover {
    transform: translateX(-2px);
}

.nav-icon[b-03e6y5gq5h] {
    display: inline-grid;
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--qs-primary) 7%, transparent);
    font-size: 1rem;
    text-align: center;
    vertical-align: middle;
    color: var(--qs-muted, #5f6e78);
    transition: background-color .15s ease, color .15s ease;
}

/* Icons pick up the accent on the active/hovered item, matching the QCRM rail. */
.nav-item[b-03e6y5gq5h]  a:hover .nav-icon,
.nav-item[b-03e6y5gq5h]  a.active .nav-icon {
    background: color-mix(in srgb, var(--qs-primary) 16%, transparent);
    color: var(--qs-primary);
}

html[dir="rtl"] .nav-icon[b-03e6y5gq5h] {
    margin-right: 0;
    margin-left: 5px;
}

.nav-text[b-03e6y5gq5h] {
    display: inline-block;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

/* Collapsible section headers stay plain text so they do not look like boxed menu items. */
.nav-section[b-03e6y5gq5h] {
    margin: 0.2rem 0 0.35rem;
}

.nav-section-toggle[b-03e6y5gq5h] {
    width: calc(100% - 1.5rem);
    min-height: 2.75rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.35rem;
    margin: 0.85rem 0.75rem 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--qs-muted, #5f6e78);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: color 0.15s ease;
}

/* Visually hide labels in icon-only mode without removing accessible link names. */
.icon-only .nav-text[b-03e6y5gq5h] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-section-toggle:hover[b-03e6y5gq5h],
.nav-section-toggle:focus-visible[b-03e6y5gq5h],
.nav-section.is-active .nav-section-toggle[b-03e6y5gq5h] {
    background: transparent;
    color: var(--qs-primary-strong, #10384a);
    outline: none;
}

.nav-section-toggle:focus-visible .nav-section-label[b-03e6y5gq5h] {
    text-decoration: underline;
}

.nav-section-toggle-user[b-03e6y5gq5h] {
    grid-template-columns: auto 1fr auto;
}

.nav-section-user-icon[b-03e6y5gq5h] {
    width: 1.35rem;
    color: inherit;
    font-size: 1rem;
    text-align: center;
}

.nav-section-label[b-03e6y5gq5h] {
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-section-chevron[b-03e6y5gq5h] {
    width: 1rem;
    color: inherit;
    font-size: 0.72rem;
    text-align: center;
    transition: transform 0.15s ease;
}

.nav-section.is-expanded .nav-section-chevron[b-03e6y5gq5h] {
    transform: rotate(90deg);
}

html[dir="rtl"] .nav-section.is-expanded .nav-section-chevron[b-03e6y5gq5h] {
    transform: rotate(-90deg);
}

.nav-section-content[hidden][b-03e6y5gq5h] {
    display: none;
}

.nav-section.is-icon-only[b-03e6y5gq5h] {
    margin: 0;
}

.nav-language-row[b-03e6y5gq5h] {
    padding: 0.35rem 0.75rem 0.75rem;
}

.nav-language-label[b-03e6y5gq5h] {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--qs-muted, #5f6e78);
    font-size: 0.78rem;
    font-weight: 700;
}

.nav-user-divider[b-03e6y5gq5h] {
    border: 0;
    border-top: 2px solid var(--qs-border, #d9e2e8);
    width: 60%;
    margin: 0.5rem 0.75rem;
}

.nav-error[b-03e6y5gq5h] {
    margin: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--qs-red-soft, #fff0f0);
    color: var(--qs-red-text, #9a2c2c);
    font-size: 0.85rem;
}

.collapse[b-03e6y5gq5h] {
    display: none;
}

/* Desktop: hide the hamburger and let the menu fill the sticky sidebar below the brand row. */
@media (min-width: 641px) {
    .navbar-toggler[b-03e6y5gq5h] {
        display: none;
    }

    .nav-scrollable[b-03e6y5gq5h] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Phone: a fixed top bar plus a slide-in drawer that overlays the page body. */
@media (max-width: 640px) {
    .top-row-nav[b-03e6y5gq5h] {
        position: relative;
        z-index: 1101;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    .mobile-collapse[b-03e6y5gq5h] {
        position: fixed;
        top: 3.5rem;
        bottom: 0;
        left: 0;
        z-index: 1100;
        width: min(20rem, 86vw);
        background: var(--qs-surface, #ffffff);
        box-shadow: 8px 0 24px rgba(15, 23, 42, 0.22);
        overflow: hidden;
    }

    html[dir="rtl"] .mobile-collapse[b-03e6y5gq5h] {
        left: auto;
        right: 0;
        box-shadow: -8px 0 24px rgba(15, 23, 42, 0.22);
    }

    .nav-scrollable[b-03e6y5gq5h] {
        height: calc(100dvh - 3.5rem);
        padding-bottom: 1rem;
    }
}

/* The drawer backdrop catches outside taps to close the open phone menu. */
.mobile-nav-backdrop[b-03e6y5gq5h] {
    position: fixed;
    top: 3.5rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1099;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.18);
    cursor: pointer;
}

/* =========================================================================
   Navigation refinement
   The rail is the one surface visible on every screen, so it carries the
   product identity: a defined edge, a quiet grouping rhythm, and an active
   state that is legible in both themes.
   ========================================================================= */

/* The brand row is the top of the rail on desktop and the whole top bar on a
   phone; a hairline separates it from the links in both roles. */
.top-row-nav[b-03e6y5gq5h] {
    border-bottom: 1px solid var(--qs-border);
    background: transparent;
}

.navbar-brand[b-03e6y5gq5h] {
    padding: 0.25rem 0.35rem;
    border-radius: var(--radius-md, 10px);
    color: var(--qs-heading);
    letter-spacing: -0.01em;
    transition: color .15s ease, background-color .15s ease;
}

.navbar-brand:hover[b-03e6y5gq5h] {
    color: var(--qs-primary);
    background: color-mix(in srgb, var(--qs-primary) 10%, transparent);
}

.navbar-brand:focus-visible[b-03e6y5gq5h] {
    outline: 2px solid var(--qs-primary);
    outline-offset: 2px;
}

.navbar-brand-mark[b-03e6y5gq5h] {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--qs-primary) 30%, transparent);
    color: var(--accent-contrast, #fff);
}

/* The hamburger was a fixed dark-ink SVG, which disappeared against the dark
   phone top bar. Masking it with currentColor makes it follow the theme. */
.navbar-toggler[b-03e6y5gq5h] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--qs-text);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.navbar-toggler:hover[b-03e6y5gq5h] {
    border-color: color-mix(in srgb, var(--qs-primary) 30%, transparent);
    background: color-mix(in srgb, var(--qs-primary) 12%, transparent);
    box-shadow: none;
    color: var(--qs-primary);
}

.navbar-toggler:focus-visible[b-03e6y5gq5h] {
    outline: 2px solid var(--qs-primary);
    outline-offset: 2px;
}

.navbar-toggler-icon[b-03e6y5gq5h] {
    width: 1.35rem;
    height: 1.35rem;
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* The rail owns a long scrollable list, so its scrollbar is themed too. */
.nav-scrollable[b-03e6y5gq5h] {
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--qs-muted) 40%, transparent) transparent;
}

/* Group captions read as captions, not as disabled menu items. */
.nav-section-label[b-03e6y5gq5h] {
    padding: 1.05rem 1.1rem 0.35rem;
    color: color-mix(in srgb, var(--qs-muted) 82%, transparent);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Arabic and Farsi lose legibility under uppercase tracking. */
html[dir="rtl"] .nav-section-label[b-03e6y5gq5h],
html[lang="fa"] .nav-section-label[b-03e6y5gq5h] {
    letter-spacing: 0;
    text-transform: none;
}

.nav-item[b-03e6y5gq5h] {
    padding: 0 0.6rem 0.15rem;
}

.nav-item[b-03e6y5gq5h]  a {
    min-height: 2.6rem;
    padding: 0.5rem 0.65rem;
    color: var(--qs-muted);
    font-weight: 600;
}

.nav-item[b-03e6y5gq5h]  a:hover {
    background: color-mix(in srgb, var(--qs-primary) 11%, transparent);
    color: var(--qs-heading);
    transform: none;
}

html[dir="rtl"] .nav-item[b-03e6y5gq5h]  a:hover {
    transform: none;
}

/* The active page is stated once, strongly: tinted plate, accent text, and a
   leading edge that lines up with the page header's own accent rule. */
.nav-item[b-03e6y5gq5h]  a.active {
    background: color-mix(in srgb, var(--qs-primary) 16%, transparent);
    color: var(--qs-heading);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qs-primary) 26%, transparent);
}

.nav-item[b-03e6y5gq5h]  a.active::before {
    top: 0.45rem;
    bottom: 0.45rem;
    width: 3px;
    border-radius: 0 999px 999px 0;
}

html[dir="rtl"] .nav-item[b-03e6y5gq5h]  a.active::before {
    border-radius: 999px 0 0 999px;
}

.nav-icon[b-03e6y5gq5h] {
    background: transparent;
    color: color-mix(in srgb, var(--qs-muted) 90%, transparent);
}

.nav-item[b-03e6y5gq5h]  a:hover .nav-icon,
.nav-item[b-03e6y5gq5h]  a.active .nav-icon {
    background: color-mix(in srgb, var(--qs-primary) 18%, transparent);
    color: var(--qs-primary);
}

/* The user block sits at the foot of the rail and should read as a footer. */
.nav-section[b-03e6y5gq5h] {
    padding-top: 0.35rem;
    border-top: 1px solid var(--qs-border);
    background: color-mix(in srgb, var(--qs-surface-soft) 45%, transparent);
}

.nav-user-divider[b-03e6y5gq5h] {
    display: none;
}

.nav-language-label[b-03e6y5gq5h] {
    color: color-mix(in srgb, var(--qs-muted) 85%, transparent);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[dir="rtl"] .nav-language-label[b-03e6y5gq5h],
html[lang="fa"] .nav-language-label[b-03e6y5gq5h] {
    letter-spacing: 0;
    text-transform: none;
}

/* Icon-only mode centres the glyphs instead of leaving them left-aligned in a
   53px rail with no label to balance them. */
.icon-only .nav-item[b-03e6y5gq5h]  a {
    justify-content: center;
    padding-inline: 0.35rem;
}

.icon-only .nav-section[b-03e6y5gq5h] {
    padding-inline: 0.15rem;
}

@media (max-width: 640px) {
    /* A drawer floating over content needs a real backdrop, not a light veil. */
    .mobile-collapse[b-03e6y5gq5h] {
        border-inline-end: 1px solid var(--qs-border);
        background: var(--qs-surface);
    }
}

.mobile-nav-backdrop[b-03e6y5gq5h] {
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(2px);
}

/* This block is appended after the original desktop media query, so the rail's
   hidden-hamburger rule has to be restated here to keep winning. */
@media (min-width: 641px) {
    .navbar-toggler[b-03e6y5gq5h] {
        display: none;
    }
}