/* ============================================================================
   Top-bar — fully self-contained, own class names (spq-topbar__*, spq-dd*).
   Does NOT rely on any Cuba theme class (.page-header, .header-wrapper,
   .nav-right, .toggle-sidebar, .onhover-dropdown, ...) for structure OR
   styling, so it can never be broken by Cuba's own CSS/JS touching
   #pageWrapper's class list (see PageHeader.razor/sidebar-menu.js history).
   Pairs with the AppNav rail (<aside id="appNav">), same design language.
   ============================================================================ */

/* Hard safety net: whatever the exact internal cause of a too-wide topbar row
   turns out to be on a given page, the PAGE itself must never gain a
   horizontal scrollbar because of it. overflow-x on html/body clips at the
   true viewport edge regardless of what any descendant tries to do — this is
   the backstop, not a substitute for the shrink fixes below. */
html, body { overflow-x: hidden; max-width: 100vw; }

#pageWrapper .page-header {
    background: #ffffff;
    border-bottom: 1px solid #e7ecf3;
    box-shadow: 0 1px 2px rgba(16, 28, 61, .04);
    max-width: 100%;
    /* NOTE: no overflow:hidden here — every .spq-dd__menu dropdown (notifications,
       presence, profile, language, dev-menu) is position:absolute and renders BELOW
       this bar's fixed height, so overflow:hidden here clips every popup invisible.
       The actual horizontal-overflow bug is fixed via left/width on .page-header
       below (position:fixed doesn't auto-shrink with margin-left) — that fix doesn't
       need overflow:hidden as a backstop, and html/body overflow-x:hidden above
       already guards the page level regardless. */
}

.spq-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    min-height: 56px;
    padding: 0 18px;
}

/* ---- Hamburger ------------------------------------------------------------ */
.spq-topbar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px;
    border: none; background: transparent; cursor: pointer;
    color: #46536b; font-size: 1.05rem;
}
.spq-topbar__toggle:hover { background: #eef2f8; color: #1f2b45; }

/* ---- Title + breadcrumb ----------------------------------------------------
   Two stacked rows: [period picker | divider | page title] on top, breadcrumb
   below — the picker sits inline with the title (same flex row, same
   align-items: center) so they share one baseline instead of the picker being
   vertically centered against the whole title+breadcrumb block. */
.spq-topbar__title {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.spq-topbar__title-row {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
/* Flex items default to min-width:auto (their own content's intrinsic width),
   which blocks shrinking below that no matter what min-width the ROW itself
   has — this is the actual reason the row (and everything above it up to
   .page-header) was being forced wider than the viewport. The period picker
   (FilterStrip's own root div — no class of its own, hence :first-child) and
   the divider keep their natural size; only the title is allowed to actually
   shrink+ellipsis, since it's the one safe thing to truncate. */
.spq-topbar__title-row > :first-child { flex: 0 0 auto; min-width: 0; }
.spq-topbar__title-divider {
    flex: 0 0 auto;
    width: 1px; height: 16px;
    background: #dfe4ec;
}
.spq-topbar__title-text { min-width: 0; }
.spq-topbar__page-title {
    display: block;
    color: #16233d; font-size: 1.02rem; font-weight: 700;
    max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    flex: 1 1 auto; min-width: 0;
}

/* ---- Go Back button (after page title) ----------------------------------------- */
.spq-go-back-dd { flex: 0 0 auto; }
.spq-go-back-btn {
    display: inline-flex; align-items: center; gap: 5px; justify-content: center;
    height: 26px; padding: 0 8px; border-radius: 6px;
    border: 1px solid #dfe4ec; background: #f5f8fc; cursor: pointer;
    color: #5a6a86; font-size: .72rem; white-space: nowrap;
    transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.spq-go-back-text { font-size: .72rem; font-weight: 500; }
.spq-go-back-btn:hover { background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff); color: #fff; }
body.dark-only .spq-go-back-btn { background: #1c2d4f; border-color: #26365c; color: #d4ddef; }
body.dark-only .spq-go-back-btn:hover { background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff); color: #fff; }

/* ---- Period picker (FilterStrip: Year/Month/Branch) — sits right before the title.
   Overrides CustomUI.css's .tiny-select (border-top + transparent bg meant for other
   screens' headers) so it reads as flat, borderless pills instead of boxed selects here.
   appearance: none strips the native OS <select> chrome; the background-image below
   redraws a small chevron so it still reads as a dropdown, not inert text. */
.spq-topbar__title-row .tiny-select {
    -webkit-appearance: none; appearance: none;
    border: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2346536b' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 9px !important;
    padding: 3px 18px 3px 6px !important;
    margin: 0 !important;
    border-radius: 7px;
    font-size: .8rem !important;
    line-height: 1.3;
}
.spq-topbar__title-row .tiny-select:hover { background-color: #eef2f8 !important; }
.spq-topbar__title-row .tiny-select:focus { outline: none; box-shadow: none !important; }
.spq-topbar__breadcrumb .breadcrumb {
    background: transparent;
}
.spq-topbar__breadcrumb .breadcrumb-item,
.spq-topbar__breadcrumb .breadcrumb-item a,
.spq-topbar__breadcrumb .breadcrumb-item i {
    font-size: .75rem; color: #7e8ba4; text-decoration: none;
}
.spq-topbar__breadcrumb .breadcrumb-item a:hover { color: #1f2b45; }
.spq-topbar__breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #c3cbdb; }

/* Phone-only company chip ("09-Trade Name"). Desktop keeps the full breadcrumb
   trail, so this stays out of the layout entirely until the mobile block below
   turns it on. */
.spq-topbar__company-chip { display: none; }

/* ---- Multi-period picker (FilterStrip) --------------------------------------
   Ported from MainApp.RecoDrama's .menu/.monthmenu (wwwroot/reco-drama.css), which
   is scoped under .rd-shell and never loaded outside that project — so the rules
   are re-stated here under an fs- prefix rather than shared. Same shape: tri-state
   master row, 2-up quarter grid, 3-up month grid. */
.fs-menuwrap { position: relative; display: inline-flex; flex: 0 0 auto; }

.fs-periodbtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border: 0; border-radius: 7px;
    background: transparent; color: #46536b;
    font-size: .8rem; font-weight: 700; line-height: 1.3;
    white-space: nowrap; cursor: pointer;
}
.fs-periodbtn:hover { background: #eef2f8; }
.fs-periodbtn.is-narrowed { color: var(--theme-default, #5a7abe); }
.fs-periodbtn .fs-chev { font-size: .6rem; opacity: .65; }

/* Click-away catcher. Sits under the menu, over everything else. */
.fs-menu-backdrop { position: fixed; inset: 0; z-index: 1190; background: transparent; }

.fs-menu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 1191;
    min-width: 250px; padding: 6px;
    background: #fff; border: 1px solid #e4e9f2; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(20, 33, 63, .16);
}
.fs-monthmenu { min-width: 320px; }

.fs-menu button {
    display: flex; width: 100%; align-items: center; gap: 8px;
    padding: 7px 9px; border: 0; border-radius: 7px;
    background: transparent; color: #1f2b45;
    font-size: .78rem; text-align: left; cursor: pointer;
}
.fs-menu button:hover { background: #f2f5fa; }

.fs-grp {
    padding: 4px 9px 2px;
    font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #97a3ba;
}
.fs-sep { height: 1px; margin: 4px 0; background: #eaeef5; }
.fs-muted { color: #7e8ba4; font-size: .62rem; }

.fs-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.fs-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.fs-qgrid button, .fs-mgrid button { padding: 6px 8px; }
.fs-qlabel { line-height: 1.25; }

/* Tri-state tick box: empty / dash (partial) / filled. */
.fs-box {
    flex: none; display: grid; place-items: center;
    width: 16px; height: 16px; border-radius: 5px;
    border: 1.5px solid #cdd6e4; background: #fff;
    font-size: .58rem; color: #fff;
}
.fs-box.on { background: var(--theme-default, #5a7abe); border-color: var(--theme-default, #5a7abe); }
.fs-box.part { background: color-mix(in srgb, var(--theme-default, #5a7abe) 35%, transparent); border-color: var(--theme-default, #5a7abe); }
.fs-dash { display: block; width: 8px; height: 2px; border-radius: 1px; background: #fff; }

.fs-menu-foot { display: flex; align-items: center; gap: 6px; padding: 4px 5px 2px; }
.fs-menu-foot .fs-muted { flex: 1 1 auto; }
.fs-menu-foot .fs-btn {
    width: auto; flex: 0 0 auto;
    padding: 5px 12px; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
    border: 1px solid #dfe4ec; background: #fff;
}
.fs-menu-foot .fs-btn--primary {
    border-color: var(--theme-default, #5a7abe);
    background: var(--theme-default, #5a7abe);
    color: #fff;
}
.fs-menu-foot .fs-btn--primary:hover { filter: brightness(1.06); }
.fs-menu-foot .fs-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Right-side action cluster ---------------------------------------------
   min-width: 0 lets this shrink instead of forcing the whole bar past the
   viewport edge. Horizontal overflow of the icon strip itself is handled by
   <SingleLineButtonScroller> (arrows + fade edges, see PageHeader.razor) —
   see the .spq-dd__menu comment above for why every popover is now
   position:fixed (SLBS's wrapper clips overflow unconditionally). */
.spq-topbar__actions { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.spq-topbar__scroller { min-width: 0; max-width: 100%; }
.spq-topbar__scroller .slbs__track { align-items: center; }
.spq-topbar__action-list {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
}
.spq-topbar__action-item,
.spq-topbar__actions .spq-dd,
.spq-topbar__actions gst-operations-bell-client { flex: 0 0 auto; }
.spq-topbar__action-item { display: flex; align-items: center; }

/* ---- Phone "⋮" trigger — hidden on desktop, where the whole cluster fits. ---- */
.spq-topbar__more { display: none; }
.spq-topbar__tools-backdrop { display: none; }

.spq-topbar__icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: none; background: transparent; cursor: pointer;
    color: #46536b; text-decoration: none;
}
.spq-topbar__icon-btn:hover { background: #eef2f8; color: #1f2b45; }
.spq-topbar__icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }

.spq-topbar__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #28a745; color: #fff;
    font-size: .6rem; font-weight: 700; line-height: 1;
}

/* ---- Language switcher ------------------------------------------------------ */
.spq-topbar__lang-btn { width: auto; padding: 0 10px; gap: 6px; }
.spq-topbar__lang-code { font-size: .72rem; font-weight: 700; color: #46536b; }
.spq-topbar__lang-menu { min-width: 190px; padding: 6px; }
.spq-topbar__lang-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px; cursor: pointer;
    font-size: .8rem; color: #3a4863;
}
.spq-topbar__lang-item:hover { background: #f5f8fc; }
.spq-topbar__lang-item.is-selected { color: var(--theme-default, #7366ff); font-weight: 600; }

/* ---- Hover dropdown shell (bell / lang / dev-menu / presence / profile) ----
   position:fixed (screen-anchored), not absolute (icon-anchored) — deliberate,
   not a bug: the action list is wrapped in <SingleLineButtonScroller> (see
   PageHeader.razor), whose .slbs/.slbs__track set overflow:hidden /
   overflow-y:hidden unconditionally (not just while actively scrolling) to
   support its fade-edge + arrow-button UI. A position:absolute popover would
   get clipped invisible by that. position:fixed ignores an ancestor's
   overflow entirely, at the cost of every popover appearing in the same
   top-right spot rather than hanging off its own trigger icon — an accepted
   trade for one consistent code path across all screen sizes. */
.spq-dd { position: relative; }
.spq-dd__menu {
    position: fixed; top: 60px; right: 12px; z-index: 1200;
    min-width: 220px;
    background: #ffffff; border: 1px solid #e7ecf3; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 28, 61, .14);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
    list-style: none; margin: 0; padding: 6px;
}
.spq-dd:hover > .spq-dd__menu,
.spq-dd:focus-within > .spq-dd__menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.spq-dd__menu li { display: block; }
.spq-dd__menu li a,
.spq-dd__menu li button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px; border: none; background: none;
    border-radius: 8px; color: #3a4863; font-size: .82rem; text-align: left;
    text-decoration: none; cursor: pointer;
}
.spq-dd__menu li a:hover,
.spq-dd__menu li button:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 9%, transparent);
    color: var(--theme-default, #7366ff);
}

/* ---- Go Back menu override — must come AFTER .spq-dd__menu in the cascade.
   Unlike the right-side icon cluster (wrapped in a clipping SingleLineButtonScroller,
   hence .spq-dd__menu's position:fixed above), the go-back button sits in a plain
   flex row with no clipping ancestor — so its menu anchors directly under the button
   via position:absolute instead of the shared fixed top-right coordinate. */
.spq-go-back-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
}

/* ---- Profile chip ----------------------------------------------------------- */
.spq-topbar__profile-chip {
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 6px; border-radius: 10px; cursor: pointer;
}
.spq-topbar__profile-chip:hover { background: #eef2f8; }
.spq-topbar__avatar { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; }
.spq-topbar__profile-text { line-height: 1.15; }
.spq-topbar__profile-text span { color: #16233d; font-weight: 600; font-size: .82rem; }
.spq-topbar__profile-text p { color: #7e8ba4; font-size: .68rem; margin: 0; }
.spq-profile-menu { right: 0; min-width: 200px; }

/* ============================================================================
   Slim top-menu bar (already its own dsk-* classes — unchanged, kept as-is).
   Desktop only; phones use the sidebar drawer as the single nav.
   ============================================================================ */
.dsk-nav-wrapper {
    background: #ffffff;
    border-bottom: 1px solid #e7ecf3;
}
.dsk-slim-navbar { width: 100%; }
.dsk-nav-container {
    display: flex; align-items: stretch;
    padding: 0 12px;
    overflow: visible;
}

.dsk-nav-list {
    display: flex; align-items: stretch; flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0; gap: 2px;
}
.dsk-nav-item { position: relative; display: flex; align-items: stretch; }

.dsk-nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px 8px; margin: 0; border-radius: 0;
    color: #5a6a86; font-size: .8rem; font-weight: 500; letter-spacing: .01em;
    white-space: nowrap; cursor: pointer; text-decoration: none; max-width: 210px;
    border-bottom: 2px solid transparent;
    transition: color .13s ease, border-color .13s ease, background .13s ease;
}
.dsk-nav-link.text-ellipsis { overflow: hidden; text-overflow: ellipsis; }
.dsk-nav-link:hover { color: #1f2b45; background: #f5f8fc; }
.dsk-nav-item:hover > .dsk-nav-link {
    color: var(--theme-default, #7366ff);
    border-bottom-color: var(--theme-default, #7366ff);
    background: transparent;
}
.dsk-nav-link .fa-chevron-down { font-size: .58rem; opacity: .55; transition: transform .15s ease; }
.dsk-nav-item:hover > .dsk-nav-link .fa-chevron-down { transform: rotate(180deg); opacity: .9; }

.dsk-dropdown-menu {
    position: absolute; top: calc(100% + 1px); left: 0; z-index: 1200;
    min-width: 216px; max-height: 72vh; overflow-y: auto;
    list-style: none; margin: 0; padding: 6px;
    background: #ffffff; border: 1px solid #e7ecf3; border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 28, 61, .14);
    opacity: 0; visibility: hidden; transform: translateY(-5px);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
.dsk-nav-item:hover > .dsk-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dsk-dropdown-menu > li { display: block; }
.dsk-dropdown-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border-radius: 7px;
    color: #3a4863; font-size: .8rem; text-decoration: none; cursor: pointer;
    white-space: nowrap;
}
.dsk-dropdown-item:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 9%, transparent);
    color: var(--theme-default, #7366ff);
}
.dsk-dropdown-shortcut { font-size: .64rem; color: #a2aec3; font-weight: 600; }
.dsk-dropdown-divider { height: 1px; margin: 5px 6px; background: #eef1f6; }

.dsk-nav-item:last-child > .dsk-dropdown-menu,
.dsk-nav-item:nth-last-child(2) > .dsk-dropdown-menu { left: auto; right: 0; }

/* Phones: the sidebar drawer is the single nav — hide the slim strip. */
@media (max-width: 991.98px) {
    .dsk-nav-wrapper { display: none !important; }
}

/* ---- Dark mode --------------------------------------------------------------- */
body.dark-only #pageWrapper .page-header { background: #0e1c3d; border-bottom-color: rgba(255,255,255,.06); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
body.dark-only .spq-topbar__toggle { color: #c2cde3; }
body.dark-only .spq-topbar__toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dark-only .spq-topbar__page-title { color: #eaf0fb; }
body.dark-only .spq-topbar__title-divider { background: rgba(255,255,255,.12); }
body.dark-only .spq-topbar__title-row .tiny-select {
    color: #c2cde3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23c2cde3' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
}
body.dark-only .spq-topbar__title-row .tiny-select:hover { background-color: rgba(255,255,255,.08) !important; }
body.dark-only .spq-topbar__breadcrumb .breadcrumb-item,
body.dark-only .spq-topbar__breadcrumb .breadcrumb-item a { color: #8291ac; }
body.dark-only .fs-periodbtn { color: #c2cde3; }
body.dark-only .fs-periodbtn:hover { background: rgba(255,255,255,.08); }
body.dark-only .fs-menu { background: #14213f; border-color: #26365c; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
body.dark-only .fs-menu button { color: #d4ddef; }
body.dark-only .fs-menu button:hover { background: rgba(255,255,255,.07); }
body.dark-only .fs-grp { color: #7b8aa5; }
body.dark-only .fs-sep { background: #26365c; }
body.dark-only .fs-muted { color: #8291ac; }
body.dark-only .fs-box { background: #0e1c3d; border-color: #3a4a70; }
body.dark-only .fs-menu-foot .fs-btn { background: #0e1c3d; border-color: #34446b; color: #d4ddef; }

body.dark-only .spq-topbar__icon-btn { color: #c2cde3; }
body.dark-only .spq-topbar__icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dark-only .spq-topbar__profile-chip:hover { background: rgba(255,255,255,.08); }
body.dark-only .spq-topbar__profile-text span { color: #eaf0fb; }
body.dark-only .spq-dd__menu { background: #14213f; border-color: #26365c; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
body.dark-only .spq-dd__menu li a,
body.dark-only .spq-dd__menu li button { color: #d4ddef; }
body.dark-only .spq-topbar__lang-item { color: #d4ddef; }
body.dark-only .spq-topbar__lang-item:hover { background: rgba(255,255,255,.05); }
body.dark-only .dsk-nav-wrapper { background: #101f3f; border-bottom-color: rgba(255,255,255,.07); }
body.dark-only .dsk-nav-link { color: #9fb0cd; }
body.dark-only .dsk-nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
body.dark-only .dsk-nav-item:hover > .dsk-nav-link { color: #fff; background: transparent; }
body.dark-only .dsk-dropdown-menu { background: #14213f; border-color: #26365c; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
body.dark-only .dsk-dropdown-item { color: #d4ddef; }
body.dark-only .dsk-dropdown-divider { background: #26365c; }

/* ---- Mobile header ------------------------------------------------------- */
@media (max-width: 767.98px) {
    .spq-topbar { padding: 6px 12px; gap: 8px; min-height: 48px; }
    .spq-topbar__lang,
    li.spq-topbar__action-item:has(#maximize-screen) { display: none !important; }
    .spq-topbar__page-title { font-size: .92rem; }

    /* The full trail never fits a phone. Swap it for the "09-Trade Name" chip, which
       carries the one thing worth keeping — which company you are in — and taps
       through to the company dashboard exactly like the breadcrumb's company link. */
    .spq-topbar__breadcrumb { display: none !important; }

    .spq-topbar__company-chip {
        display: inline-flex; align-items: center; gap: 3px;
        max-width: 100%; min-height: 24px;
        color: #46536b; font-size: .72rem; font-weight: 600;
        text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .spq-topbar__company-chip:active { opacity: .6; }
    .spq-topbar__company-chip-code { flex: 0 0 auto; font-weight: 700; color: #1f2b45; }
    .spq-topbar__company-chip-sep { flex: 0 0 auto; color: #a6b0c4; }
    .spq-topbar__company-chip-name {
        min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }

    /* Period menu: pin it to the viewport width instead of letting a 320px panel
       hang off the right edge, and give every tick row a real touch target. */
    .fs-monthmenu { min-width: 0; width: min(320px, calc(100vw - 24px)); }
    .fs-menu { max-width: calc(100vw - 24px); }
    .fs-menu > button, .fs-mgrid button, .fs-qgrid button { min-height: 40px; }
    .fs-menu-foot .fs-btn { min-height: 40px; }
    .fs-mgrid { grid-template-columns: repeat(2, 1fr); }

    /* ---- Collapse the icon cluster behind "⋮" ------------------------------
       Sideways-scrolling a strip of icons is the thing phones handle worst, so on
       phones the cluster is hidden and re-shown as a wrapped panel under the header
       (native sheet-ish), with 44px targets. .is-tools-open is set by PageHeader. */
    .spq-topbar__more {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 auto; width: 40px; height: 40px; margin-left: auto;
        border: none; border-radius: 10px; background: transparent;
        color: #46536b; font-size: 1.05rem; cursor: pointer;
    }
    .spq-topbar.is-tools-open .spq-topbar__more { background: #eef2f8; color: #1f2b45; }

    .spq-topbar__actions { display: none; }
    .spq-topbar.is-tools-open .spq-topbar__actions {
        display: block;
        position: fixed; top: 52px; left: 8px; right: 8px; z-index: 1150;
        max-height: calc(100vh - 64px); overflow-y: auto;
        padding: 8px; border-radius: 12px;
        background: #fff; border: 1px solid #e7ecf3;
        box-shadow: 0 12px 30px rgba(16, 28, 61, .18);
    }
    /* SLBS clips + keeps one line by design — inside the panel we want it to wrap. */
    .spq-topbar.is-tools-open .slbs__nav { display: none !important; }
    .spq-topbar.is-tools-open .slbs,
    .spq-topbar.is-tools-open .slbs__track { overflow: visible !important; }
    .spq-topbar.is-tools-open .spq-topbar__action-list {
        flex-wrap: wrap; gap: 6px; justify-content: flex-start;
    }
    .spq-topbar.is-tools-open .spq-topbar__icon-btn,
    .spq-topbar.is-tools-open .spq-topbar__profile-chip,
    .spq-topbar.is-tools-open .spq-presence-box { min-width: 44px; min-height: 44px; }

    .spq-topbar__tools-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1140; background: transparent;
    }
    /* The action panel sits at z-index 1150; its own popovers must clear it. */
    .spq-topbar.is-tools-open .spq-dd__menu { z-index: 1200; top: 104px !important; }
}

@media (max-width: 767.98px) {
    body.dark-only .spq-topbar__company-chip { color: #8291ac; }
    body.dark-only .spq-topbar__company-chip-code { color: #eaf0fb; }
    body.dark-only .spq-topbar__company-chip-sep { color: #5b6883; }

    body.dark-only .spq-topbar__more { color: #c2cde3; }
    body.dark-only .spq-topbar.is-tools-open .spq-topbar__more { background: rgba(255,255,255,.08); color: #fff; }
    body.dark-only .spq-topbar.is-tools-open .spq-topbar__actions {
        background: #14213f; border-color: #26365c; box-shadow: 0 12px 30px rgba(0,0,0,.5);
    }

    /* Horizontal scrolling of the icon strip itself is handled by
       <SingleLineButtonScroller> (see PageHeader.razor) on every screen size now —
       just re-anchor the (already-fixed, see .spq-dd__menu above) popover to a
       tighter, near-full-width band on phones instead of the desktop's small
       top-right card. */
    .spq-dd__menu {
        top: 54px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    /* Go-back menu stays anchored to its own button (position:absolute).
       Override the .spq-dd__menu mobile rule's left/right/position with !important. */
    .spq-go-back-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        max-width: calc(100vw - 24px) !important;
        width: max-content !important;
    }
}