/* ============================================================================
   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 {
    /* Published as a variable so badges that sit ON an icon (presence count) can ring
       themselves in the bar's own colour and stay legible in either theme. */
    --spq-topbar-bg: #ffffff;
    background: var(--spq-topbar-bg);
    border-bottom: 1px solid var(--bd, #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: 3px;
    min-width: 0;
    max-width: 100%;
    min-height: 56px;
    padding: 0 13px;

    /* One knob for the whole right-hand tray. Every trigger in the action cluster — the
       icon buttons, the presence chip, the profile avatar — sizes off this, so the strip
       can be tightened or loosened in one place instead of six.
       It used to be 38-40px per item, which cost ~280px of bar before the title had any
       say; at 30 the same seven items take ~222px and the page title/breadcrumb keep the
       difference. Count badges are unaffected: they still ride each icon's corner.
       Phones never see this — below 768px the cluster becomes a vertical sheet with
       44px rows (see the .is-tools-open block). */
    --spq-tray-size: 30px;
    --spq-tray-icon: 17px;
}

/* ---- 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: var(--tc-text, #46536b); font-size: 1.05rem;
}
.spq-topbar__toggle:hover { background: var(--sf-raised, #eef2f8); color: var(--tc-strong, #1f2b45); }

/* ---- Hide / show the whole left rail ---------------------------------------
   Small round button that sits just before the hamburger. The hamburger toggles
   the rail between its icon and labelled widths; this one takes the rail off the
   screen entirely (#pageWrapper.appnav-hidden — see app-nav.css) and remembers
   the choice per tenant+user.

   The icon is a layout glyph, never an arrow: .spq-go-back-btn sits a few pixels to
   the right with a chevron-left in it, and a second left-pointing arrow next to it
   would read as "back" and get pressed by accident. A panel icon says "this changes
   the layout", which is what it actually does. */
.spq-rail-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 26px; height: 26px; padding: 0;
    margin-right: 2px;
    border-radius: 50%;
    border: 1px solid var(--bd, #dfe6f1);
    background: var(--sf-card, #fff);
    color: var(--tc-muted, #6a7896);
    font-size: .66rem; line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 28, 61, .10);
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* One glyph per state — panel-with-sidebar while the rail is up, plain window once it
   is gone. Both live in the markup (PageHeader.razor); only the visible one is laid out. */
.spq-rail-toggle__gone { display: none; }
#pageWrapper.appnav-hidden .spq-rail-toggle__shown { display: none; }
#pageWrapper.appnav-hidden .spq-rail-toggle__gone { display: inline-block; }
.spq-rail-toggle:hover {
    background: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
    color: #fff;
    box-shadow: 0 2px 7px rgba(16, 28, 61, .18);
}
.spq-rail-toggle:focus-visible {
    outline: 2px solid var(--theme-default, #7366ff);
    outline-offset: 2px;
}

/* ---- 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: 6px;
    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: var(--tc-strong, #16233d); font-size: 1.02rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
    max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    /* Auto-shrink, no grow: the Edit pill sits immediately after the last glyph of
       the title rather than being pushed to the far right of the title row. */
    flex: 0 1 auto; min-width: 0;
}

/* ---- Edit button in title row (after page title, before Go Back) ----------------
   Ghost pill, same scale as the rest of the title row, accent-tinted so it reads as
   an action link without dominating the title text beside it. */
.spq-title-edit-btn {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    height: 22px; padding: 0 8px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--theme-default, #7366ff) 28%, transparent);
    background: transparent; cursor: pointer;
    color: color-mix(in srgb, var(--theme-default, #5647d8) 82%, transparent);
    font-size: .68rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); white-space: nowrap;
    transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.spq-title-edit-btn__text { font-size: .68rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
.spq-title-edit-btn:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 10%, transparent);
    border-color: color-mix(in srgb, var(--theme-default, #7366ff) 48%, transparent);
    color: var(--theme-text, var(--theme-default, #5647d8));
}
.spq-title-edit-btn:focus-visible { outline: 2px solid var(--theme-default, #7366ff); outline-offset: 2px; }
body.dark-only .spq-title-edit-btn { color: var(--theme-text, var(--theme-default)); border-color: rgba(179,168,245,.28); }
body.dark-only .spq-title-edit-btn:hover { color: var(--tcd-text, #d8d2ff); border-color: rgba(179,168,245,.55); background: rgba(157,141,255,.12); }

/* ---- GSTIN · RegType · RegDate meta after company name in breadcrumb ------------ */
.spq-crumb-co-meta {
    display: inline-flex; align-items: center; flex-wrap: nowrap;
    gap: .3rem; margin-left: 4px;
    font-size: .7rem; color: var(--tc-muted, #7e8ba4);
    white-space: nowrap;
}
.spq-crumb-co-gstin {
    display: inline-flex; align-items: center; gap: .28rem;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: .7rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .01em;
    color: var(--tc-muted, #7e8ba4);
}
.spq-crumb-co-sep { opacity: .45; }
.spq-crumb-co-regdate { display: inline-flex; align-items: center; gap: .28rem; }
body.dark-only .spq-crumb-co-meta,
body.dark-only .spq-crumb-co-gstin { color: var(--tcd-muted, #8291ac); }
/* Too small to show on very tight screens — collapse the regdate, then full meta */
@media (max-width: 1199.98px) { .spq-crumb-co-regdate { display: none; } }
@media (max-width: 991.98px)  { .spq-crumb-co-meta    { display: none; } }

/* ---- Go Back button (after page title) ----------------------------------------- */
/* A bar-level flex item (see PageHeader.razor): inline-flex + align-self keep the button on
   the bar's own centre line, level with the action icons, instead of riding the upper of the
   title block's two rows the way it did while it lived inside .spq-topbar__title-row. */
.spq-go-back-dd { flex: 0 0 auto; display: inline-flex; align-items: center; align-self: center; margin-right: 2px; }
.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 var(--bd, #dfe4ec); background: var(--sf-subtle, #f5f8fc); cursor: pointer;
    color: var(--tc-muted, #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: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000); }
.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: var(--sf-raised, #1c2d4f); border-color: var(--bd, #26365c); color: var(--tcd-strong, #d4ddef); }
body.dark-only .spq-go-back-btn:hover { background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff); color: var(--tcd-strong, #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: var(--sf-raised, #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: var(--tc-muted, #7e8ba4); text-decoration: none;
}
.spq-topbar__breadcrumb .breadcrumb-item a:hover { color: var(--tc-strong, #1f2b45); }
.spq-topbar__breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #c3cbdb; }

/* Phone-only company chip ("09-Trade Name") and the row that carries it next to the
   edit button. Desktop keeps the full breadcrumb trail, so both stay out of the layout
   entirely until the mobile block below turns them on. */
.spq-topbar__company-row { display: none; }
.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: var(--tc-text, #46536b);
    font-size: .8rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); line-height: 1.3;
    white-space: nowrap; cursor: pointer;
}
.fs-periodbtn:hover { background: var(--sf-raised, #eef2f8); }
.fs-periodbtn.is-narrowed { color: var(--theme-text, 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: var(--sf-card, #fff); border: 1px solid var(--bd, #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: var(--tc-strong, #1f2b45);
    font-size: .78rem; text-align: left; cursor: pointer;
}
.fs-menu button:hover { background: var(--sf-subtle, #f2f5fa); }

.fs-grp {
    padding: 4px 9px 2px;
    font-size: .58rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .12em; text-transform: uppercase;
    color: var(--tc-faint, #97a3ba);
}
.fs-sep { height: 1px; margin: 4px 0; background: var(--sf-raised, #eaeef5); }
.fs-muted { color: var(--tc-muted, #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 var(--bd, #cdd6e4); background: var(--sf-card, #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: var(--sf-card, #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: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    border: 1px solid var(--bd, #dfe4ec); background: var(--sf-card, #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;
    /* Vertical padding only — it costs no bar width, and it is what keeps the count badges
       visible. They sit on each icon's top-right corner and now overhang it by a couple of
       pixels (offset + ring); the SLBS track this list lives in is overflow-y:hidden and
       sizes to its content, so with padding:0 the top of every badge would be sliced off. */
    padding: 4px 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; }

/* Square, not the old 38x32 pill: a square hover target at the tray size reads as a tray
   icon and is what buys the bar its width back. The .spq-topbar__gstlogin-btn and
   .spq-topbar__copy-btn variants below override width/height for their labelled pills. */
.spq-topbar__icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--spq-tray-size, 30px); height: var(--spq-tray-size, 30px);
    border-radius: 8px;
    border: none; background: transparent; cursor: pointer;
    color: var(--tc-text, #46536b); text-decoration: none;
}
.spq-topbar__icon-btn:hover { background: var(--sf-raised, #eef2f8); color: var(--tc-strong, #1f2b45); }
.spq-topbar__icon-btn svg {
    width: var(--spq-tray-icon, 17px); height: var(--spq-tray-icon, 17px);
    fill: none; stroke: currentColor;
}
/* Scoped to the action list on purpose: the labelled pills that reuse .spq-topbar__icon-btn
   in the title area (Copy / GST Login) sit in a 22px-tall box beside .74rem text, and a
   tray-sized glyph would tower over it. Only the tray's own Font Awesome buttons — today
   the appearance palette — line up with the 17px svg icons either side of them. */
.spq-topbar__action-list .spq-topbar__icon-btn i[class*="fa-"] {
    font-size: calc(var(--spq-tray-icon, 17px) - 1px);
}

/* Count badge. Kept on every icon that has one — the whole point of slimming the tray was
   to lose width, not information. Sized down with the button and pushed flush to the
   corner so a 2-digit count still clears the glyph underneath it; "99+" grows sideways
   via min-width + padding rather than wrapping. */
.spq-topbar__badge {
    position: absolute; top: -1px; right: -2px;
    min-width: 14px; height: 14px; padding: 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #28a745; color: #fff;
    font-size: .55rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); line-height: 1;
    /* Rings the badge in the bar's own background so it separates from the glyph at this
       size, the same trick .spq-presence-count already uses. */
    box-shadow: 0 0 0 2px var(--spq-topbar-bg, #fff);
}


/* ---- 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: 52px; right: 12px; z-index: 1200;
    min-width: 220px;
    background: var(--sf-card, #ffffff); border: 1px solid var(--bd, #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: var(--tc-text, #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-text, var(--theme-default, #7366ff));
}

/* Font Awesome glyphs inside these menus (e.g. Dev Issue Board) — the rest of the
   rows use feather, which renders a 24px svg, so give the glyph the same column
   width or its label sits out of line with everything above it. */
.spq-dd__menu li a i[class*="fa-"],
.spq-dd__menu li button i[class*="fa-"] {
    flex: 0 0 24px;
    width: 24px;
    font-size: 1rem;
    text-align: center;
}

/* ---- 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);
    /* Right-anchored, so the panel opens leftward INTO the bar. Left-anchored it grew toward
       the viewport edge, and now that the button sits next to the action cluster rather than
       beside the page title, that put roughly half the panel off-screen. */
    left: auto;
    right: 0;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
}

/* ---- Profile chip -----------------------------------------------------------
   Avatar only. The role + shortened address that used to sit beside it are gone: the
   topbar shows no names, so the chip is a fixed square regardless of how long anyone's
   address is, and the cluster can never be pushed sideways by one user's e-mail.
   Identity lives in the tooltip and at the head of the menu. */
.spq-topbar__profile-chip {
    display: flex; align-items: center; justify-content: center;
    height: var(--spq-tray-size, 30px); width: var(--spq-tray-size, 30px);
    padding: 0; border-radius: 8px; cursor: pointer;
}
.spq-topbar__profile-chip:hover { background: var(--sf-raised, #eef2f8); }
.spq-topbar__avatar { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; }

/* Initials avatar. Deliberately not an <img>: there is no per-user photo to serve, and a
   generic silhouette says less than two letters of the person's own address. */
.spq-topbar__avatar-initials {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-default, #7366ff), #4f8bff);
    color: #fff; font-size: .62rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .2px;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(16,28,61,.18);
    -webkit-user-select: none;
    user-select: none;
}

.spq-profile-menu { right: 0; min-width: 220px; }
.spq-profile-menu__who {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px; margin-bottom: 4px;
    border-bottom: 1px solid var(--bd, #e7ecf3);
    pointer-events: none;   /* a header, not a menu item */
}
.spq-profile-menu__email { font-size: .76rem; color: var(--tc-strong, #16233d); font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); word-break: break-all; }
.spq-profile-menu__role { font-size: .68rem; color: var(--tc-muted, #7e8ba4); }

/* ---- "Go to portal" menu trigger (was the plain GST Login button) ----------
   Wider than the icon buttons around it because it carries a label: this is the one
   action in the row a user hunts for by name, and an unlabelled icon for "sign in to
   the portal as this company" is a guess. The label is dropped on phones (below). */
.spq-topbar__gstlogin-btn {
    width: auto !important; padding: 0 10px; gap: 6px; height: 22px;
    border: 1px solid color-mix(in srgb, var(--theme-default, #7366ff) 30%, transparent);
    color: var(--theme-text, var(--theme-default, #7366ff));
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}
.spq-topbar__gstlogin-btn:hover { background: color-mix(in srgb, var(--theme-default, #7366ff) 10%, transparent); }
.spq-topbar__gstlogin-text { font-size: .74rem; white-space: nowrap; }
/* Bar-level flex item (see PageHeader.razor — it sits outside .spq-topbar__actions so its
   menu is not clipped by the scroller). align-self:center puts it on the same line as the
   icon strip beside it rather than centring on the title row. */
.spq-gstportal-dd {
    flex: 0 0 auto; position: relative;
    display: inline-flex; align-items: center; align-self: center;
    margin-right: 2px;
}
/* Trigger for the portal menu, so it also carries a caret. The button is a menu opener,
   not an action — the rows inside it are what navigate. */
.spq-topbar__gstlogin-caret { font-size: .58rem; opacity: .7; margin-left: -1px; }
/* GST Extension download link beside GST Login (Home page): desktop only — the
   extension installs into a desktop browser, so it is noise on phones and tablets. */
@media (max-width: 991.98px) {
    .spq-topbar__ext-link { display: none !important; }
}
.spq-gstportal-dd:hover .spq-topbar__gstlogin-btn,
.spq-gstportal-dd:focus-within .spq-topbar__gstlogin-btn {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 10%, transparent);
}

/* ---- Portal menu override — must come AFTER .spq-dd__menu in the cascade.
   Anchored under its own button (position:absolute), not at the shared fixed top-right
   coordinate .spq-dd__menu uses: that coordinate exists only because the icon-cluster
   popovers live inside a clipping SingleLineButtonScroller, and this control deliberately
   does not. Right-anchored so the panel opens leftward INTO the bar instead of growing
   past the viewport edge. */
.spq-gstportal-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    width: max-content;
    min-width: 274px;   /* keeps "GST Portal Quick Links & Downloads" on one line */
    max-width: calc(100vw - 24px);
}

/* ---- Copy dropdown — bar-level flex item just before "Go to portal" ----------
   Mirrors .spq-gstportal-dd: sits outside .spq-topbar__actions so its menu is
   not clipped by SingleLineButtonScroller, and outside the phone kebab so copying
   a GSTIN never costs two taps. Menu anchors under its own button (position:absolute)
   the same way .spq-gstportal-menu does. */
.spq-topbar-copy-dd {
    flex: 0 0 auto; position: relative;
    display: inline-flex; align-items: center; align-self: center;
    margin-right: 2px;
}
.spq-topbar__copy-btn {
    width: auto !important; padding: 0 10px; gap: 6px; height: 22px;
    border: 1px solid var(--bd, #dde3ef);
    color: var(--tc-text, #46536b);
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}
.spq-topbar__copy-btn:hover { background: var(--sf-raised, #eef2f8); color: var(--tc-strong, #1f2b45); border-color: var(--bd, #c8d1e0); }
.spq-topbar__copy-text { font-size: .74rem; white-space: nowrap; }
.spq-topbar-copy-dd:hover .spq-topbar__copy-btn,
.spq-topbar-copy-dd:focus-within .spq-topbar__copy-btn { background: var(--sf-raised, #eef2f8); color: var(--tc-strong, #1f2b45); }
.spq-topbar-copy-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    width: max-content;
    min-width: 200px;
    max-width: calc(100vw - 24px);
}
body.dark-only .spq-topbar__copy-btn { color: var(--tcd-text, #c2cde3); border-color: var(--bd, #26365c); }
body.dark-only .spq-topbar__copy-btn:hover,
body.dark-only .spq-topbar-copy-dd:hover .spq-topbar__copy-btn { background: rgba(255,255,255,.08); color: var(--tcd-strong, #fff); }
@media (max-width: 767.98px) {
    .spq-topbar__copy-text { display: none; }
    .spq-topbar__copy-btn { width: 40px !important; padding: 0; }
    .spq-topbar-copy-menu { position: fixed !important; top: 60px !important; left: 8px !important; right: 8px !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
}

/* ============================================================================
   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: var(--sf-subtle, #f4f6fa);
    border-bottom: 1px solid var(--bd, #e7ecf3);
}
.dsk-slim-navbar { width: 100%; }
.dsk-nav-container {
    display: flex; align-items: center;
    padding: 3px 12px;
    overflow: visible;
}

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

.dsk-nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; margin: 0; border-radius: 4px;
    color: var(--tc-text, #3e4d6b); font-size: .8rem; font-weight: clamp(1, calc(500 + var(--spq-fw-delta, 0)), 1000); letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap; cursor: pointer; text-decoration: none; max-width: 200px;
    border: none;
    background: transparent;
    transition: color .12s ease, background .12s ease;
}
.dsk-nav-link.text-ellipsis { overflow: hidden; text-overflow: ellipsis; }
.dsk-nav-link:hover { color: var(--tc-strong, #1a2744); background: rgba(30,50,100,.08); }
.dsk-nav-item:hover > .dsk-nav-link {
    color: var(--theme-text, var(--theme-default, #7366ff));
    background: color-mix(in srgb, var(--theme-default, #7366ff) 10%, transparent);
}
.dsk-nav-link .fa-chevron-down { font-size: .55rem; opacity: .5; transition: transform .15s ease; }
.dsk-nav-item:hover > .dsk-nav-link .fa-chevron-down { transform: rotate(180deg); opacity: .85; }

.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: var(--sf-card, #ffffff); border: 1px solid var(--bd, #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: var(--tc-text, #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-text, var(--theme-default, #7366ff));
}
.dsk-dropdown-shortcut { font-size: .64rem; color: var(--tc-faint, #a2aec3); font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); }
.dsk-dropdown-divider { height: 1px; margin: 5px 6px; background: var(--sf-raised, #eef1f6); }

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

/* Slim strip hidden on every screen size (12-Oct-2026) — the sidebar is the single nav.
   Delete this rule to bring the strip back. */
.dsk-nav-wrapper { display: none !important; }

/* ---- Dark mode --------------------------------------------------------------- */
body.dark-only #pageWrapper .page-header { --spq-topbar-bg: var(--sf-card, #0e1c3d); background: var(--spq-topbar-bg); 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: var(--tcd-text, #c2cde3); }
body.dark-only .spq-topbar__toggle:hover { background: rgba(255,255,255,.08); color: var(--tcd-strong, #fff); }
body.dark-only .spq-rail-toggle {
    background: var(--sf-card, #14213f);
    border-color: var(--bd, #2b3c63);
    color: var(--tcd-text, #a7b5d0);
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
body.dark-only .spq-rail-toggle:hover {
    background: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
    color: var(--tcd-strong, #fff);
}
body.dark-only .spq-topbar__page-title { color: var(--tcd-strong, #eaf0fb); }
body.dark-only .spq-topbar__title-divider { background: rgba(255,255,255,.12); }
body.dark-only .spq-topbar__title-row .tiny-select {
    color: var(--tcd-text, #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: var(--tcd-muted, #8291ac); }
body.dark-only .fs-periodbtn { color: var(--tcd-text, #c2cde3); }
body.dark-only .fs-periodbtn:hover { background: rgba(255,255,255,.08); }
body.dark-only .fs-menu { background: var(--sf-card, #14213f); border-color: var(--bd, #26365c); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
body.dark-only .fs-menu button { color: var(--tcd-strong, #d4ddef); }
body.dark-only .fs-menu button:hover { background: rgba(255,255,255,.07); }
body.dark-only .fs-grp { color: var(--tcd-muted, #7b8aa5); }
body.dark-only .fs-sep { background: var(--sf-raised, #26365c); }
body.dark-only .fs-muted { color: var(--tcd-muted, #8291ac); }
body.dark-only .fs-box { background: var(--sf-card, #0e1c3d); border-color: var(--bd, #3a4a70); }
body.dark-only .fs-menu-foot .fs-btn { background: var(--sf-card, #0e1c3d); border-color: var(--bd, #34446b); color: var(--tcd-strong, #d4ddef); }

body.dark-only .spq-topbar__icon-btn { color: var(--tcd-text, #c2cde3); }
body.dark-only .spq-topbar__icon-btn:hover { background: rgba(255,255,255,.08); color: var(--tcd-strong, #fff); }
body.dark-only .spq-topbar__profile-chip:hover { background: rgba(255,255,255,.08); }
body.dark-only .spq-profile-menu__who { border-bottom-color: var(--bd, #26365c); }
body.dark-only .spq-profile-menu__email { color: var(--tcd-strong, #eaf0fb); }
body.dark-only .spq-topbar__avatar-initials { box-shadow: 0 1px 3px rgba(0,0,0,.45); }
body.dark-only .spq-dd__menu { background: var(--sf-card, #14213f); border-color: var(--bd, #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: var(--tcd-strong, #d4ddef); }
body.dark-only .dsk-nav-wrapper { background: var(--sf-card, #0d1b38); border-bottom-color: rgba(255,255,255,.07); }
body.dark-only .dsk-nav-link { color: var(--tcd-muted, #9fb0cd); background: transparent; }
body.dark-only .dsk-nav-link:hover { color: var(--tcd-strong, #fff); background: rgba(255,255,255,.09); }
body.dark-only .dsk-nav-item:hover > .dsk-nav-link { color: var(--theme-text, var(--theme-default, #7366ff)); background: color-mix(in srgb, var(--theme-default) 14%, transparent); }
body.dark-only .dsk-dropdown-menu { background: var(--sf-card, #14213f); border-color: var(--bd, #26365c); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
body.dark-only .dsk-dropdown-item { color: var(--tcd-strong, #d4ddef); }
body.dark-only .dsk-dropdown-divider { background: var(--sf-raised, #26365c); }

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

    /* Icon only on phones — the row has no width for the word, and the tap target is the
       same either way. The chip's title still names the company it will sign in as. */
    .spq-topbar__gstlogin-text { display: none; }
    .spq-topbar__gstlogin-btn { width: 40px !important; padding: 0; }
    .spq-topbar__gstlogin-caret { display: none; }

    /* The chip is avatar-only everywhere now, so there is no text left to trim on a phone —
       it just needs to be a proper thumb target. */
    .spq-topbar__profile-chip { width: 44px; height: 44px; }
    .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; }

    /* Chip + edit icon share one line. min-width:0 on both the row and the chip is what
       lets the trade name ellipsis instead of shoving the icon off the edge. */
    .spq-topbar__company-row {
        display: flex; align-items: center; gap: 4px; min-width: 0;
    }

    .spq-topbar__company-chip {
        display: inline-flex; align-items: center; gap: 3px;
        min-width: 0;
        max-width: 100%; min-height: 24px;
        color: var(--tc-text, #46536b); font-size: .72rem; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
        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: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); color: var(--tc-strong, #1f2b45); }
    .spq-topbar__company-chip-sep { flex: 0 0 auto; color: var(--tc-faint, #a6b0c4); }
    .spq-topbar__company-chip-name {
        min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    }

    /* Icon-only on phones — the word "Edit" would eat the trade name's width. 36px square
       is the largest real target that fits a 48px topbar with its 6px padding; the negative
       margin buys back the visual gap the padding would otherwise add beside the chip. */
    .spq-topbar__company-edit {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; margin: -6px 0;
        padding: 0; border: 0; border-radius: 50%;
        background: transparent;
        color: var(--theme-text, var(--theme-default, #5647d8));
        font-size: .82rem;
        -webkit-tap-highlight-color: transparent;
    }
    .spq-topbar__company-edit:active {
        background: color-mix(in srgb, var(--theme-default, #7366ff) 14%, transparent);
    }

    /* The desktop pill-style link rides along inside the hidden breadcrumb — belt and braces. */
    .spq-company-edit-link { display: none !important; }

    /* Period menu: switch to viewport-anchored (position:fixed) so the panel never
       overflows — the button can sit at any x position in the topbar (e.g. after the
       year selector) and the dropdown still spans left:12px..right:12px of the screen.
       position:absolute left:0 only works when the button is at the far left; here it
       isn't, so a 320px panel easily overflows a 393px screen. Same fixed approach used
       by .spq-dd__menu for the icon cluster. Give every row a real touch target too. */
    .fs-menu {
        position: fixed;
        top: 54px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100svh - 70px);
        overflow-y: auto;
    }
    .fs-monthmenu { min-width: 0; }
    .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: var(--tc-text, #46536b); font-size: 1.05rem; cursor: pointer;
    }
    .spq-topbar.is-tools-open .spq-topbar__more { background: var(--sf-raised, #eef2f8); color: var(--tc-strong, #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: 6px; border-radius: 12px;
        background: var(--sf-card, #fff); border: 1px solid var(--bd, #e7ecf3);
        box-shadow: 0 12px 30px rgba(16, 28, 61, .18);
        min-width: 220px;
    }
    /* SLBS clips + keeps one line by design — inside the panel we drop the track's
       flex row entirely and stack children vertically, native-app style. */
    .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 .slbs__track {
        display: flex !important; flex-direction: column !important;
        align-items: stretch !important; gap: 2px !important;
    }
    /* Vertical dropdown, one full-width row per action (like an Android/iOS action sheet). */
    .spq-topbar.is-tools-open .spq-topbar__action-list {
        display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    }
    .spq-topbar.is-tools-open .spq-topbar__action-item,
    .spq-topbar.is-tools-open .spq-topbar__actions .spq-dd,
    .spq-topbar.is-tools-open .spq-topbar__actions gst-operations-bell-client {
        width: 100%; display: flex; align-items: stretch;
    }
    /* The desktop tray sizing (--spq-tray-size) is overridden here: in the sheet these are
       full-width rows, and min-height beats the square height set on the base rules. */
    .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 {
        width: 100%; min-width: 0; min-height: 44px;
        justify-content: flex-start; gap: 10px;
        padding: 6px 12px; border-radius: 8px;
    }
    /* Badges follow the glyph to the left edge of the row instead of hanging off the far
       right of a full-width button, where they would read as belonging to nothing. */
    .spq-topbar.is-tools-open .spq-topbar__badge,
    .spq-topbar.is-tools-open .spq-presence-count { top: 8px; right: auto; left: 26px; }

    .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: var(--tcd-muted, #8291ac); }
    body.dark-only .spq-topbar__company-chip-code { color: var(--tcd-strong, #eaf0fb); }
    body.dark-only .spq-topbar__company-chip-sep { color: var(--tcd-faint, #5b6883); }

    body.dark-only .spq-topbar__more { color: var(--tcd-text, #c2cde3); }
    body.dark-only .spq-topbar.is-tools-open .spq-topbar__more { background: rgba(255,255,255,.08); color: var(--tcd-strong, #fff); }
    body.dark-only .spq-topbar.is-tools-open .spq-topbar__actions {
        background: var(--sf-card, #14213f); border-color: var(--bd, #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. */
    /* Phones get the same full-width sheet every other topbar menu uses. The old rule kept
       this one absolute and left-anchored to its button, which on a phone sits close to the
       right edge — so the panel ran off-screen and about half of it was unreachable. Pinning
       it to both screen edges makes clipping impossible at any width. */
    .spq-go-back-menu {
        position: fixed !important;
        top: 60px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Same treatment for the portal menu: on a phone its button sits close to the right
       edge, so a button-anchored panel runs off-screen. Pin it to both screen edges. */
    .spq-gstportal-menu {
        position: fixed !important;
        top: 60px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* ==========================================================================
   "Company List" breadcrumb jump link
   The second crumb used to read "Company master" as flat text, and users took it
   for a label rather than the way back to the list. It is now an explicit jump:
   list icon + accent colour + an arrow that slides right on hover, so the whole
   thing reads as a destination. Quieter than the company switch pill next to it —
   the active company must stay the loudest element in the trail.
   ========================================================================== */
.spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump,
.spq-topbar__breadcrumb .breadcrumb-item .spq-crumb-jump {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 1px;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--theme-text, var(--theme-default, #5647d8));
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.spq-crumb-jump__icon { font-size: .82em; opacity: .85; }

/* The arrow is the "you can go there" cue: parked and faint, then slides out on
   hover/focus. Width is animated too so the crumb does not jump on first hover. */
.spq-crumb-jump__go {
    font-size: .78em;
    opacity: 0;
    max-width: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease, max-width .15s ease;
}

.spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump:hover,
.spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump:focus-visible {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 12%, transparent);
    border-color: color-mix(in srgb, var(--theme-default, #7366ff) 35%, transparent);
    color: var(--theme-text, var(--theme-default, #5647d8));
}

.spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump:hover .spq-crumb-jump__go,
.spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump:focus-visible .spq-crumb-jump__go {
    opacity: .9;
    max-width: 1.2em;
    transform: translateX(0);
}

.spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump:focus-visible {
    outline: 2px solid var(--theme-default, #7366ff);
    outline-offset: 1px;
}

/* Touch devices have no hover — show the arrow permanently so the cue is not lost. */
@media (hover: none) {
    .spq-crumb-jump__go { opacity: .75; max-width: 1.2em; transform: translateX(0); }
}

body.dark-only .spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump { color: var(--theme-text, var(--theme-default)); }
body.dark-only .spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump:hover,
body.dark-only .spq-topbar__breadcrumb .breadcrumb-item a.spq-crumb-jump:focus-visible {
    background: rgba(157, 141, 255, .16);
    border-color: rgba(157, 141, 255, .38);
    color: var(--theme-text, var(--theme-default));
}
/* ==========================================================================
   Return-family breadcrumb dropdown — which GST return (GSTR-1/2A/2B/3B/6/7/9…)
   the current screen belongs to, with a menu to jump to any other family for
   the same company/period. Sits in the same flex row as .spq-dd (hover-based
   popover); the trigger echoes .spq-company-switch-link's pill look, and the
   menu is anchored under the button (see .spq-go-back-menu note) rather than
   the shared fixed top-right coordinate .spq-dd__menu uses by default.
   ========================================================================== */
.spq-return-family-dd { display: inline-flex; }
.spq-return-family-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 1px;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--tc-muted, #7e8ba4);
    font: inherit;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.spq-return-family-btn__caret { font-size: .62em; opacity: .7; }
.spq-return-family-btn:hover,
.spq-return-family-btn:focus-visible {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 12%, transparent);
    border-color: color-mix(in srgb, var(--theme-default, #7366ff) 35%, transparent);
    color: var(--theme-text, var(--theme-default, #5647d8));
}
.spq-return-family-btn:focus-visible { outline: 2px solid var(--theme-default, #7366ff); outline-offset: 1px; }

.spq-return-family-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
}
.spq-return-family-menu li a.is-active {
    color: var(--theme-text, var(--theme-default, #7366ff));
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    justify-content: space-between;
}
.spq-return-family-menu__check { font-size: .8em; opacity: .85; }

body.dark-only .spq-return-family-btn { color: var(--tcd-muted, #8291ac); }
body.dark-only .spq-return-family-btn:hover,
body.dark-only .spq-return-family-btn:focus-visible {
    background: rgba(157, 141, 255, .16);
    border-color: rgba(157, 141, 255, .38);
    color: var(--theme-text, var(--theme-default));
}
body.dark-only .spq-return-family-menu li a.is-active { color: var(--theme-text, var(--theme-default)); }

/* ==========================================================================
   Company switcher — breadcrumb link + modern picker dialog
   The active company in the breadcrumb becomes a pill link; clicking it opens
   a searchable dialog of the user's allowed companies and jumps to the same
   screen/period for the chosen one. Accent follows --theme-default.
   ========================================================================== */
.spq-company-switch-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 0px 6px; 
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-default, #7366ff) 8%, transparent);
    color: var(--theme-text, var(--theme-default, #5647d8));
    font: inherit;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
/* Breadcrumb company name: filled theme chip, name only; the change-company hint is a tooltip.
   Fits inside the existing breadcrumb row height. */
.spq-crumb-firm { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1; }
.spq-crumb-firm__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .82rem; }
.spq-company-switch-link:has(.spq-crumb-firm),
.spq-crumb-firm--chip {
    background: var(--theme-default, #7366ff);
    color: #fff !important;
    border-radius: 6px;
    padding: 1px 8px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    max-width: 280px;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
}
.spq-company-switch-link:has(.spq-crumb-firm):hover,
.spq-crumb-firm--chip:hover { background: color-mix(in srgb, var(--theme-default, #7366ff) 85%, #000); }
body.dark-only .spq-company-switch-link:has(.spq-crumb-firm) { color: var(--tcd-strong, #fff); }
.spq-company-switch-link__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.spq-company-switch-link__caret { font-size: .62em; opacity: .7; }
.spq-company-switch-link:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 15%, transparent);
    border-color: color-mix(in srgb, var(--theme-default, #7366ff) 35%, transparent);
}
.spq-company-switch-link:focus-visible { outline: 2px solid var(--theme-default, #7366ff); outline-offset: 1px; }

/* "Edit" — sits immediately after the switch pill. Deliberately quieter than the pill:
   ghost by default so the company name stays the loud thing, filling in on hover. Only
   rendered for users holding Masters:Write, so it never teases an action they cannot take. */
.spq-company-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    padding: 1px 8px;
    line-height: 1.4;
    border: 1px solid color-mix(in srgb, var(--theme-default, #7366ff) 22%, transparent);
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--theme-default, #5647d8) 82%, transparent);
    font: inherit;
    font-size: .78rem;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.spq-company-edit-link i { font-size: .82em; }
.spq-company-edit-link:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 12%, transparent);
    border-color: color-mix(in srgb, var(--theme-default, #7366ff) 42%, transparent);
    color: var(--theme-text, var(--theme-default, #5647d8));
}
.spq-company-edit-link:focus-visible { outline: 2px solid var(--theme-default, #7366ff); outline-offset: 1px; }

/* The theme gives .page-header z-index 8, and the header is the stacking context for
   everything it opens. Any page element with a higher z-index (GSTR-9's sticky appbar = 40,
   sticky grid toolbars, period bars) then painted OVER the company picker and the header
   dropdowns, however high their own z-index. Lift the whole header only while one of its
   popups is actually open, so the bar's resting order against page content is unchanged.
   1040 stays below Bootstrap modals (1050+); the picker overlay is itself modal. */
#pageWrapper .page-header:has(.spq-dd:hover > .spq-dd__menu),
#pageWrapper .page-header:has(.spq-dd:focus-within > .spq-dd__menu),
#pageWrapper .page-header:has(.is-tools-open) { z-index: 1040; }
#pageWrapper .page-header:has(.spq-cs-overlay) { z-index: 2000; }

.spq-cs-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(16, 28, 61, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: spqCsFade .12s ease;
}
@keyframes spqCsFade { from { opacity: 0; } to { opacity: 1; } }

.spq-cs-dialog {
    display: flex; flex-direction: column;
    width: min(560px, 100%); max-height: 72vh; overflow: hidden;
    background: var(--sf-card, #fff); border: 1px solid var(--bd, #e7ecf3); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 28, 61, .28);
    animation: spqCsPop .14s cubic-bezier(.2, .8, .3, 1);
}
@keyframes spqCsPop {
    from { transform: translateY(-8px) scale(.985); opacity: .6; }
    to { transform: none; opacity: 1; }
}

.spq-cs-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.spq-cs-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); color: var(--tc-strong, #1f2b45); }
.spq-cs-title i { color: var(--theme-text, var(--theme-default, #7366ff)); }
.spq-cs-close {
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: transparent; color: var(--tc-muted, #8291ac); font-size: 1.05rem; cursor: pointer;
}
.spq-cs-close:hover { background: var(--sf-raised, #eef2f8); color: var(--tc-strong, #1f2b45); }

.spq-cs-searchbar { position: relative; margin: 0 18px; }
.spq-cs-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tc-faint, #9aa6bf); font-size: .9rem; }
.spq-cs-search {
    width: 100%; height: 44px; padding: 0 38px 0 40px;
    border: 1px solid var(--bd, #e3e9f2); border-radius: 12px; background: var(--sf-subtle, #f7f9fc);
    font-size: .95rem; color: var(--tc-strong, #1f2b45); outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.spq-cs-search:focus {
    border-color: var(--theme-default, #7366ff); background: var(--sf-card, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-default, #7366ff) 15%, transparent);
}
.spq-cs-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: none; border-radius: 8px;
    background: transparent; color: var(--tc-faint, #9aa6bf); cursor: pointer;
}
.spq-cs-clear:hover { background: var(--sf-raised, #eef2f8); color: var(--tc-strong, #1f2b45); }

.spq-cs-hint { display: flex; align-items: center; gap: 7px; padding: 10px 20px 6px; font-size: .78rem; color: var(--tc-muted, #6b7793); }
.spq-cs-hint i { color: var(--theme-text, var(--theme-default, #7366ff)); opacity: .8; }
.spq-cs-hint strong { color: var(--tc-strong, #1f2b45); }

.spq-cs-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 10px; }
.spq-cs-empty { padding: 28px 16px; text-align: center; color: var(--tc-muted, #8291ac); font-size: .9rem; }

/* "Showing first 20 of N — keep typing" sentinel at the end of a capped list. */
.spq-cs-more {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 4px 2px 2px; padding: 10px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--theme-default, #7366ff) 6%, transparent);
    color: var(--tc-muted, #6b7793); font-size: .78rem; line-height: 1.4;
}
.spq-cs-more i { margin-top: 2px; color: var(--theme-text, var(--theme-default, #7366ff)); opacity: .8; }
.spq-cs-more strong { color: var(--tc-strong, #1f2b45); font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); }

.spq-cs-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 10px 12px; border: 1px solid transparent; border-radius: 12px;
    background: transparent; cursor: pointer; transition: background .12s, border-color .12s;
}
.spq-cs-item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 8%, transparent);
    border-color: color-mix(in srgb, var(--theme-default, #7366ff) 22%, transparent);
}
.spq-cs-item.is-current { opacity: .7; cursor: default; }
.spq-cs-avatar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); font-size: .82rem;
    color: var(--theme-text, var(--theme-default, #5647d8)); background: color-mix(in srgb, var(--theme-default, #7366ff) 14%, transparent);
}
.spq-cs-item-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.spq-cs-item-name {
    display: flex; align-items: center; gap: 8px; font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); color: var(--tc-strong, #1f2b45);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.spq-cs-item-sub {
    display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--tc-muted, #7a879f);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.spq-cs-gstin { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.spq-cs-dot { color: #c3cbdb; }
.spq-cs-badge {
    flex: 0 0 auto; font-size: .62rem; font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000); text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 7px; border-radius: 999px;
    color: var(--theme-text, var(--theme-default, #5647d8)); background: color-mix(in srgb, var(--theme-default, #7366ff) 14%, transparent);
}
.spq-cs-go { flex: 0 0 auto; color: var(--tc-faint, #b7c0d4); font-size: .8rem; transition: transform .12s, color .12s; }
.spq-cs-item:hover:not(:disabled) .spq-cs-go { color: var(--theme-text, var(--theme-default, #7366ff)); transform: translateX(2px); }

.spq-cs-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px; border-top: 1px solid var(--bd, #eef2f8); font-size: .72rem; color: var(--tc-faint, #9aa6bf);
}
.spq-cs-esc { font-variant: small-caps; }

/* ---- Dark ---- */
body.dark-only .spq-company-switch-link { color: #c3b9ff; }
body.dark-only .spq-company-edit-link { color: var(--theme-text, var(--theme-default)); border-color: rgba(179, 168, 245, .28); }
body.dark-only .spq-company-edit-link:hover { color: var(--tcd-text, #d8d2ff); }
body.dark-only .spq-topbar__company-edit { color: var(--theme-text, var(--theme-default)); }
body.dark-only .spq-cs-dialog { background: var(--sf-card, #14213f); border-color: var(--bd, #26365c); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
body.dark-only .spq-cs-title { color: var(--tcd-strong, #eaf0fb); }
body.dark-only .spq-cs-close:hover { background: rgba(255, 255, 255, .08); color: var(--tcd-strong, #fff); }
body.dark-only .spq-cs-search { background: var(--sf-card, #0f1a33); border-color: var(--bd, #26365c); color: var(--tcd-strong, #eaf0fb); }
body.dark-only .spq-cs-search:focus { background: var(--sf-card, #0f1a33); }
body.dark-only .spq-cs-clear:hover { background: rgba(255, 255, 255, .08); color: var(--tcd-strong, #fff); }
body.dark-only .spq-cs-hint { color: var(--tcd-muted, #8291ac); }
body.dark-only .spq-cs-hint strong { color: var(--tcd-strong, #eaf0fb); }
body.dark-only .spq-cs-item:hover:not(:disabled) { border-color: color-mix(in srgb, var(--theme-default, #7366ff) 40%, transparent); }
body.dark-only .spq-cs-item-name { color: var(--tcd-strong, #eaf0fb); }
body.dark-only .spq-cs-item-sub { color: var(--tcd-muted, #8291ac); }
body.dark-only .spq-cs-dot { color: #3f4d6b; }
body.dark-only .spq-cs-foot { border-color: var(--bd, #26365c); color: var(--tcd-faint, #6b7793); }

/* ---- Mobile GST-login clipboard card ---------------------------------------
   Global copy of the card the "/" company list styles inline. GstLoginHost renders the
   same markup from MainLayout, so the rules can no longer live inside one page's
   <style> block — that block only exists while that page is on screen. */
.spq-mgl-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.spq-mgl-card {
    background: var(--sf-card, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 420px;
    padding: 16px;
}
.spq-mgl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000);
    font-size: 15px;
    margin-bottom: 6px;
}
.spq-mgl-company { font-weight: clamp(1, calc(600 + var(--spq-fw-delta, 0)), 1000); color: navy; }
.spq-mgl-gstin { font-size: 12px; color: var(--tc-text, #555); margin-bottom: 8px; }
.spq-mgl-note { font-size: 12px; color: var(--tc-text, #666); margin-bottom: 10px; }
.spq-mgl-row { display: flex; gap: 6px; margin-bottom: 8px; }
.spq-mgl-row input { flex: 1; }
.spq-mgl-row .btn { white-space: nowrap; }
body.dark-only .spq-mgl-card { background: var(--sf-card, #14213f); color: var(--tcd-strong, #eaf0fb); }
body.dark-only .spq-mgl-company { color: #9ec2ff; }
body.dark-only .spq-mgl-gstin,
body.dark-only .spq-mgl-note { color: var(--tcd-text, #b8c4dc); }

/* ---- Tablet breadcrumb (768px – 1229.98px) -------------------------------------
   Below ~1230px the trail (home · Company List · Dashboard · company pill · meta ·
   family crumb) no longer fits beside the period picker and the tray, and Bootstrap's
   .breadcrumb is flex-wrap: wrap — so it broke onto a second line and pushed the bar
   taller. Keep it on ONE line: crumbs never wrap, the company pill is the one thing
   that gives way (ellipsis), and on narrower tablets the two jump crumbs drop to
   icon-only (their title attribute still names the destination). Phones (<768px)
   hide the trail entirely in the mobile block above; desktop is untouched. */
@media (min-width: 768px) and (max-width: 1229.98px) {
    .spq-topbar__breadcrumb { min-width: 0; max-width: 100%; overflow: hidden; }
    .spq-topbar__breadcrumb .breadcrumb {
        flex-wrap: nowrap;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
    }
    .spq-topbar__breadcrumb .breadcrumb-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* The company crumb (holds the switch pill) is the shrinkable one. */
    .spq-topbar__breadcrumb .breadcrumb-item:has(.spq-company-switch-link) {
        flex: 0 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
    }
    .spq-company-switch-link { max-width: 200px; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .spq-topbar__breadcrumb .spq-crumb-jump > span { display: none; }
    .spq-crumb-jump__go { display: none; }
    .spq-company-switch-link { max-width: 150px; }
}