/* ──────────────────────────────────────────────────────────────────
   SFSC Brand System
   Tokens, font faces, and back-compat aliases for the legacy admin.
   Loaded AFTER admin-dashboard.css so :root tokens win the cascade
   on every page, even ones that haven't been migrated yet.
   ────────────────────────────────────────────────────────────────── */

/* TODO(perf): convert .otf to .woff2 in a follow-up pass. Universal browser
   support but file sizes are ~2-3× and decode is slower. Defer until the
   brand system has shipped and we have real load metrics. */

@font-face {
    font-family: 'Söhne';
    src: url('../fonts/sohne/Sohne-Buch.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Söhne';
    src: url('../fonts/sohne/Sohne-Kraftig.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Söhne';
    src: url('../fonts/sohne/Sohne-Halbfett.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Söhne Mono';
    src: url('../fonts/sohne/SohneMono-Buch.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Söhne Mono';
    src: url('../fonts/sohne/SohneMono-Halbfett.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tiempos Headline';
    src: url('../fonts/tiempos/TiemposHeadline-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tiempos Headline';
    src: url('../fonts/tiempos/TiemposHeadline-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Topbar pill family — Touche Semibold (display) + Aceh Soft (body).
   Scoped for use INSIDE .tb-pill only; sidebar/content/modals stay Söhne+Tiempos. */
@font-face {
    font-family: 'Touche';
    src: url('../fonts/touche/Touche-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aceh Soft';
    src: url('../fonts/aceh-soft/AcehSoft-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aceh Soft';
    src: url('../fonts/aceh-soft/AcehSoft-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aceh Soft';
    src: url('../fonts/aceh-soft/AcehSoft-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aceh Soft';
    src: url('../fonts/aceh-soft/AcehSoft-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ──────────────────────────────────────────────────────────────────
   Brand tokens
   ────────────────────────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --sfsc-navy:      #0A1628;
    --sfsc-navy-2:    #0F1E36;
    --sfsc-navy-3:    #162842;
    --sfsc-navy-line: #1F3252;

    /* DNA blue (from logo) */
    --sfsc-dna-1: #C5DAEF;
    --sfsc-dna-2: #7BA8DC;
    --sfsc-dna-3: #4A88C6;
    --sfsc-dna-4: #185FA5;
    --sfsc-dna-5: #0E3F73;

    /* Paper canvas — cool, not warm */
    --sfsc-paper:    #F5F6F8;
    --sfsc-paper-2:  #E8EDF4;
    --sfsc-card:     #FFFFFF;

    /* Rules + dividers */
    --sfsc-rule:      #E2E6EE;
    --sfsc-rule-2:    #EDF0F5;
    --sfsc-hairline:  #D5DBE5;

    /* Ink (light-mode text only) */
    --sfsc-ink:    #0B1622;
    --sfsc-ink-2:  #1F2A3A;
    --sfsc-ink-3:  #5C6577;
    --sfsc-ink-4:  #8993A4;

    /* Sidebar text — light tones for the dark navy surface */
    --sfsc-side-tx:    #E8E4D9;
    --sfsc-side-tx-2:  #C5DAEF;
    --sfsc-side-tx-3:  #8993A4;
    --sfsc-side-label: #5F6967;

    /* Semantics */
    --sfsc-red:        #C8362D;
    --sfsc-red-soft:   #FCE5E2;
    --sfsc-red-ink:    #7A1F18;
    --sfsc-green:      #1B5E48;
    --sfsc-green-soft: #DCEAE3;
    --sfsc-green-ink:  #0F3D2E;
    --sfsc-amber:      #A6741C;
    --sfsc-amber-soft: #F4E6CA;
    --sfsc-amber-ink:  #5C3D08;

    /* Type stack */
    --sfsc-serif: 'Tiempos Headline', 'Fraunces', ui-serif, Georgia, serif;
    --sfsc-sans:  'Söhne', 'Söhne Buch', -apple-system, system-ui, sans-serif;
    --sfsc-mono:  'Söhne Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* Topbar pill type stack (scoped — only used inside .tb-pill) */
    --sfsc-pill-display: 'Touche', 'Söhne', system-ui, sans-serif;
    --sfsc-pill-body:    'Aceh Soft', 'Söhne', system-ui, sans-serif;

    /* Layout */
    --sfsc-sb-w:        232px;
    --sfsc-tb-h:        64px;
    --sfsc-radius-card: 16px;
    --sfsc-radius-pill: 99px;
    --sfsc-radius-md:   8px;

    /* Elevation — softened, no harsh shadows */
    --sfsc-shadow-1: 0 1px 2px rgba(11, 22, 34, .04), 0 0 0 1px rgba(11, 22, 34, .04);
    --sfsc-shadow-2: 0 4px 16px rgba(11, 22, 34, .06), 0 0 0 1px rgba(11, 22, 34, .04);
    --sfsc-shadow-3: 0 12px 32px rgba(10, 22, 40, .12);
}

/* ──────────────────────────────────────────────────────────────────
   Legacy variable aliases.
   The 17 unmigrated #pg-* sections still reference --navy, --tx, --cyan
   and friends in their CSS rules and (heavily) in inline styles emitted
   by the JS. Re-pointing those names at the new tokens makes every page
   look like the new system on day one — coherent-off where unmigrated,
   not broken. Delete each alias as its consumers migrate.
   ────────────────────────────────────────────────────────────────── */
:root {
    --navy:      var(--sfsc-navy);
    --navy-deep: var(--sfsc-navy);
    --cyan:      var(--sfsc-dna-4);
    --cyan-dim:  rgba(24, 95, 165, .06);
    --cyan-glow: rgba(24, 95, 165, .10);

    --bg:        var(--sfsc-paper);
    --surface:   var(--sfsc-paper-2);
    --card:      var(--sfsc-card);
    --ghost:     var(--sfsc-rule);
    --ghost-h:   var(--sfsc-hairline);

    --tx:        var(--sfsc-ink);
    --tx1:       var(--sfsc-ink);
    --tx2:       var(--sfsc-ink-2);
    --tx3:       var(--sfsc-ink-3);
    --tx4:       var(--sfsc-ink-4);

    --green:     var(--sfsc-green);
    --green-bg:  var(--sfsc-green-soft);
    --green-tx:  var(--sfsc-green-ink);

    --red:       var(--sfsc-red);
    --red-bg:    var(--sfsc-red-soft);
    --red-tx:    var(--sfsc-red-ink);

    --amber:     var(--sfsc-amber);
    --amber-bg:  var(--sfsc-amber-soft);
    --amber-tx:  var(--sfsc-amber-ink);

    --blue:      var(--sfsc-dna-4);
    --blue-bg:   var(--sfsc-dna-1);
    --blue-tx:   var(--sfsc-dna-5);

    /* Purple + teal are deprecated. Map to muted neutrals so legacy
       pages look brand-coherent rather than alarmingly saturated. */
    --purple:    var(--sfsc-ink-3);
    --purple-bg: var(--sfsc-rule-2);
    --purple-tx: var(--sfsc-ink-2);
    --teal:      var(--sfsc-dna-3);
    --teal-bg:   var(--sfsc-rule-2);
    --teal-tx:   var(--sfsc-dna-5);

    --sb-w:      var(--sfsc-sb-w);
    --tb-h:      var(--sfsc-tb-h);

    --font-sans:    var(--sfsc-sans);
    --font-display: var(--sfsc-serif);
    --font-mono:    var(--sfsc-mono);
}

/* ──────────────────────────────────────────────────────────────────
   Body baseline. Brand the whole admin in one stroke; per-page CSS
   refines from here.
   ────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--sfsc-sans);
    background: var(--sfsc-paper);
    color: var(--sfsc-ink);
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Display-level type leans serif. */
h1, h2, .display, .headline {
    font-family: var(--sfsc-serif);
    letter-spacing: -.01em;
    color: var(--sfsc-ink);
    font-weight: 500;
}

/* ──────────────────────────────────────────────────────────────────
   Sidebar appearance — commit 2
   Restyles the legacy .sb chrome to navy + DNA-blue. Touches APPEARANCE
   ONLY — positioning (.sb { position:fixed; left:0; width:var(--sb-w) })
   and the mobile slide-in @media rule are owned by the legacy CSS until
   chrome layout migration (commit 6). Same rule for .sb-children collapse.
   Every override selector is prefixed with `.sb` (specificity 0,3,0) to
   beat legacy 0,2,0 regardless of enqueue order.
   ────────────────────────────────────────────────────────────────── */

.sb {
    background: var(--sfsc-navy);
    border-right: 1px solid var(--sfsc-navy-line);
    color: var(--sfsc-side-tx);
}
.sb::-webkit-scrollbar-thumb {
    background: var(--sfsc-navy-line);
}

/* Nav items — base + hover */
.sb .sb-i {
    color: var(--sfsc-side-tx);
    font-family: var(--sfsc-sans);
    font-weight: 500;
    border-left: 0;             /* legacy 3px transparent border-left, visually noisy with new pill */
    border-radius: 10px;
}
.sb .sb-i:hover {
    background: var(--sfsc-navy-2);
    color: var(--sfsc-side-tx);
}
.sb .sb-i .material-symbols-outlined {
    color: var(--sfsc-side-tx-3);
}
.sb .sb-i:hover .material-symbols-outlined {
    color: var(--sfsc-side-tx-2);
}

/* Active state — DNA-blue gradient pill + thin left accent.
   The Pharmly-style right-side cursor-arrow needs overflow-x:visible on .sb,
   which fights the legacy `.sb { overflow-y:auto }` implicit clipping.
   Deferring the arrow to commit 6 when chrome layout migration changes the
   sidebar's overflow model. The left accent stripe carries "you are here"
   intent for now without overflow risk. */
.sb .sb-i.act {
    background: var(--sfsc-dna-4);
    color: #FFFFFF;
    font-weight: 500;
    border-left: 0;
    box-shadow: none;
    position: relative;
}
.sb .sb-i.act::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--sfsc-dna-2);
    border-radius: 2px;
}
.sb .sb-i.act .material-symbols-outlined {
    color: #FFFFFF;
}

/* Parent of an active sub-item — calmer accent than full-active */
.sb .sb-parent.has-active-child {
    background: transparent;
    color: var(--sfsc-side-tx-2);
    font-weight: 600;
    border-left: 0;
}
.sb .sb-parent.has-active-child .material-symbols-outlined {
    color: var(--sfsc-side-tx-2);
}

/* Badges (Orders/Messages counts) — DNA-blue tint on navy bg.
   Override legacy `background:var(--red); color:#fff` which read as a hard
   alarm pill on the new navy surface. */
.sb .sb-badge {
    background: var(--sfsc-dna-2);
    color: var(--sfsc-navy);
    font-weight: 700;
}
.sb .sb-i.act .sb-badge {
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}

/* Sub-children — keep legacy collapse animation; restyle the rows */
.sb .sb-sub {
    color: var(--sfsc-side-tx-3);
    font-family: var(--sfsc-sans);
    font-weight: 500;
    border-left: 0;
    border-radius: 6px;
    margin: 1px var(--sp-2);
}
.sb .sb-sub:hover {
    background: var(--sfsc-navy-2);
    color: var(--sfsc-side-tx);
}
.sb .sb-sub.act {
    background: var(--sfsc-navy-3);
    color: var(--sfsc-side-tx-2);
    font-weight: 600;
    border-left: 0;
    box-shadow: none;
}
.sb .sb-sub.act::before { display: none; } /* no left accent stripe on sub-active; reads cluttered */

/* Footer (Settings link) */
.sb .sb-foot {
    border-top: 1px solid var(--sfsc-navy-line);
}

/* ──────────────────────────────────────────────────────────────────
   Topbar appearance — commit 3
   Restyles the legacy .tb chrome on its current dark-navy surface.
   APPEARANCE ONLY — position (.tb { position:fixed; top:0; left:0; right:0;
   height:var(--tb-h) }) is owned by legacy CSS until chrome layout migration
   (commit 6). Same for the @media(max-width:500px) responsive rule.
   Every override prefixed with `.tb` for 0,3,0 specificity over legacy 0,2,0.

   Pharmly-style "avatar + name + role + chevron" user pill needs markup
   additions (no .tb-user-role in current topbar). Commit 3 does avatar +
   name pill; role + chevron arrive in commit 4 (markup additions phase).
   ────────────────────────────────────────────────────────────────── */

/* Topbar surface: navy with subtle vertical lift + DNA-blue hairline accent. */
.tb {
    background: linear-gradient(to bottom, var(--sfsc-navy) 0%, var(--sfsc-navy-2) 100%);
    box-shadow: 0 1px 0 rgba(197, 218, 239, .08), /* DNA-blue hairline at bottom edge */
                0 4px 16px rgba(0, 0, 0, .14);
    color: var(--sfsc-side-tx);
}

/* Logo brightness filter still appropriate on navy. Adjust max-height so the
   logo lockup doesn't dwarf the topbar's 64px height. */
.tb .tb-logo img,
.tb .tb-logo .custom-logo,
.tb .tb-logo .custom-logo img,
.tb .tb-logo a img {
    max-height: 36px;
    filter: brightness(1.15);
}

/* Search pill — 99px radius, refined cream-on-navy glass. */
.tb .tb-search {
    width: 280px;
    flex-shrink: 1;
    min-width: 180px;
    border-radius: var(--sfsc-radius-pill);
    transition: box-shadow .2s ease;
}
.tb .tb-search input {
    height: 44px;
    background: #FAFAFB;                       /* near-white — sub-pill inside white container */
    border: 1px solid var(--sfsc-rule);        /* cool gray hairline */
    border-radius: var(--sfsc-radius-pill);
    padding: 0 70px 0 44px;
    font-family: var(--sfsc-sans);
    font-size: 14px;
    color: var(--sfsc-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tb .tb-search input::placeholder {
    color: var(--sfsc-ink-4);
}
.tb .tb-search input:focus {
    background: #FFFFFF;
    border-color: var(--sfsc-dna-3);
    color: var(--sfsc-ink);
    box-shadow: none;
}
/* Open state — keep the input's pill top corners (22px effective for a 44px
   input is the natural pill arc); square the bottom + transparent bottom
   border so the dropdown joins seamlessly without a visible seam. */
.tb .tb-search.open input {
    border-radius: 22px 22px 0 0;
    border-bottom-color: transparent;
    box-shadow: none;
}
/* Search magnifier — Lucide SVG sized 16px, color via currentColor.
   Absolute-positioned at top:14 left:16 to align with 44px input vertical center. */
.tb .tb-search > svg {
    position: absolute;
    color: var(--sfsc-ink-3);
    top: 14px;
    left: 16px;
    pointer-events: none;
}

/* Bell — 44px circular button, white background per Pharmly proportions. */
.tb .tb-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--sfsc-rule);
    background: #FFFFFF;
    color: var(--sfsc-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s, color .15s;
}
.tb .tb-icon:hover {
    background: var(--sfsc-paper-2);
    border-color: var(--sfsc-hairline);
    color: var(--sfsc-ink);
    transform: none;
}
/* Unread dot — red, sits cleanly inside bell's upper-right quadrant.
   Border ring matches bell bg (#FFFFFF) so the dot reads as a stuck-on
   indicator, not a clipping artifact. */
.tb .tb-dot {
    top: 9px;
    right: 11px;
    width: 8px;
    height: 8px;
    background: var(--sfsc-red);
    border: 2px solid #FFFFFF;
}

/* User pill — sub-pill inside the white container with avatar +
   name/role meta + chevron. .tb-user-trigger replaces the legacy
   inline-flex wrapper as a class-based hook. */
.tb .tb-user .tb-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    height: 44px;
    background: #FAFAFB;
    border: 1px solid var(--sfsc-rule);
    border-radius: var(--sfsc-radius-pill);
    box-shadow: none;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tb .tb-user .tb-user-trigger:hover {
    background: var(--sfsc-paper-2);
    border-color: var(--sfsc-hairline);
}
.tb .tb-user-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sfsc-paper-2);
    border: 1px solid var(--sfsc-rule);
    flex-shrink: 0;
    transition: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tb .tb-user-btn:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--sfsc-rule);
}
/* Override sfsc_get_character_svg() inline `object-fit:cover; border-radius:6px`
   so the peptide character PNG fits inside the circular mask without clipping
   the body. !important required to beat inline-style specificity (1,0,0,0). */
.tb .tb-user-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    display: block;
}
.tb .tb-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.tb .tb-user-name {
    font-family: var(--sfsc-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--sfsc-ink);
    line-height: 1.2;
    white-space: nowrap;
}
.tb .tb-user-role {
    font-family: var(--sfsc-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--sfsc-ink-4);
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
}
.tb .tb-user-chev {
    display: inline-flex;
    align-items: center;
    align-self: center;
    color: var(--sfsc-ink-4);
    font-size: 14px !important;
    margin-left: 2px;
}
/* Override the helper's stroke-width="1.7" presentation attribute on the
   chevron SVG. Bolder 2.2 matches the visual weight of the user name +
   handle text. CSS stroke-width beats SVG presentation attributes. */
.tb .tb-user-chev svg {
    stroke-width: 2.2;
}

/* User dropdown — light card on dark chrome. */
.tb .tb-dropdown {
    border: 1px solid var(--sfsc-rule);
    border-radius: 14px;
    box-shadow: var(--sfsc-shadow-3);
    margin-top: 12px;
    overflow: hidden;
}
.tb .tb-dropdown .tb-dd-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sfsc-rule);
}
.tb .tb-dropdown .tb-dd-name {
    font-family: var(--sfsc-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--sfsc-ink);
}
.tb .tb-dropdown .tb-dd-role {
    font-family: var(--sfsc-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--sfsc-dna-4);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}
.tb .tb-dropdown .tb-dd-item {
    font-family: var(--sfsc-sans);
    font-size: 13px;
    color: var(--sfsc-ink-2);
    padding: 11px 16px;
}
.tb .tb-dropdown .tb-dd-item:hover {
    background: var(--sfsc-paper-2);
}
.tb .tb-dropdown .tb-dd-item .material-symbols-outlined {
    color: var(--sfsc-ink-3);
}
.tb .tb-dropdown .tb-dd-item.danger {
    color: var(--sfsc-red);
}
.tb .tb-dropdown .tb-dd-item.danger .material-symbols-outlined {
    color: var(--sfsc-red);
}

/* Global search dropdown — light card hanging off the search pill. */
.tb .tb-search .gs-dropdown {
    border: 1px solid var(--sfsc-rule);
    border-top: 0;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 8px 16px rgba(10, 22, 40, .08);
    margin-top: -1px;
}
.tb .tb-search .gs-cat-pills {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sfsc-rule-2);
}
.tb .tb-search .gs-cat-pill {
    border-radius: var(--sfsc-radius-pill);
    background: var(--sfsc-paper-2);
    color: var(--sfsc-ink-3);
    font-family: var(--sfsc-sans);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
}
.tb .tb-search .gs-cat-pill:hover,
.tb .tb-search .gs-cat-pill.act {
    background: var(--sfsc-navy);
    color: #FFFFFF;
}
.tb .tb-search .gs-result {
    padding: 10px 14px;
    color: var(--sfsc-ink-2);
    font-family: var(--sfsc-sans);
    font-size: 13px;
}
.tb .tb-search .gs-result:hover {
    background: var(--sfsc-paper-2);
}

/* Notification panel — light card hanging off the bell. */
.tb .notif-panel {
    border: 1px solid var(--sfsc-rule);
    border-radius: 14px;
    box-shadow: var(--sfsc-shadow-3);
    margin-top: 12px;
}

/* ──────────────────────────────────────────────────────────────────
   Sidebar additions — commit 4
   Styles for the .sb-gl section labels. (Quick Stock widget +
   #d-low-inventory mount + .sb-stock styles + renderLowInventory()
   were all removed in the cleanup commit; only .sb-gl rules survive.)
   ────────────────────────────────────────────────────────────────── */

/* Section labels — Söhne Mono uppercase, recede into navy chrome.
   Override legacy .sb-gl which uses Inter-flavored sans + var(--tx4). */
.sb .sb-gl {
    font-family: var(--sfsc-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--sfsc-side-tx-3);
    letter-spacing: 1.4px;
    padding: 16px 12px 4px;
    margin: 0;
}
.sb .sb-gl:first-child {
    padding-top: 4px;
}


/* ──────────────────────────────────────────────────────────────────
   Chrome layout migration — commit 6  (HIGH RISK)
   The legacy admin used position:fixed for both topbar and sidebar with
   .main margin-compensation. This commit wraps the chrome in a CSS Grid
   shell, neutralizes the legacy positioning, and renders the sidebar +
   topbar as a flush full-bleed app frame (Supabase / Linear / GitHub /
   Stripe pattern). body remains the scroll container; sidebar is sticky
   to viewport top.

   Affects every page since chrome wraps everything. Verify on
   1920 / 1440 / 1280 / 1024 / 768 widths before the 12-hour soak.
   ────────────────────────────────────────────────────────────────── */

/* Outer grid — sidebar | stage. No outer padding: sidebar is flush
   left/top/bottom; the topbar pill provides its own margin from edges.
   body scrolls; shell expands to content. */
.sfsc-shell {
    background: var(--sfsc-paper);
    padding: 0;
    display: grid;
    grid-template-columns: var(--sfsc-sb-w) 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 100vh;
    box-sizing: border-box;
}
.sfsc-shell *,
.sfsc-shell *::before,
.sfsc-shell *::after {
    box-sizing: border-box;
}

/* Sidebar — full-bleed left column, anchored top:0 left:0, full viewport
   height. Right corners rounded (16px) where sidebar meets content area;
   left corners square against viewport edge. Sticky so it persists as
   content scrolls. Outer container clips; inner .sb-nav scrolls. */
.sfsc-shell .sb {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    width: auto;
    height: 100vh;
    z-index: auto;
    border-right: 1px solid var(--sfsc-navy-line);
    border-radius: 0 var(--sfsc-radius-card) var(--sfsc-radius-card) 0;
    box-shadow: 0 8px 24px rgba(10, 22, 40, .12);
    align-self: start;
    overflow: hidden;
    transform: none;
}
.sfsc-shell .sb .sb-nav {
    overflow-y: auto;
    overflow-x: hidden;
}
.sfsc-shell .sb .sb-nav::-webkit-scrollbar {
    width: 4px;
}
.sfsc-shell .sb .sb-nav::-webkit-scrollbar-thumb {
    background: var(--sfsc-navy-line);
    border-radius: 4px;
}

/* Stage — flex column right side. min-width:0 contains overflow from
   wide content (chart canvas, tables) so the grid column doesn't blow up. */
.sfsc-shell .sfsc-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Topbar — transparent layout container that holds the .tb-pill.
   Sits as sibling of .main inside .sfsc-stage. Sticky so the pill
   stays visible while content scrolls. Margin: 16px from sidebar's
   right edge (left), 16px from viewport top, 16px from viewport right. */
.sfsc-shell .tb {
    position: sticky;
    top: 0;
    z-index: 10;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 16px 32px 0;
    padding: 0;
    height: auto;
    color: var(--sfsc-ink);
}

/* The pill itself — single white container holding the title group on
   the left and search/quick/bell/user clustered on the right. Hairline
   border defines it on the paper canvas; no shadow (kept flat per polish). */
.sfsc-shell .tb .tb-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* .tb inherits display:flex from the legacy admin-dashboard.css:45 rule
       (brand-system.css:761 overrides position/margin/padding but not display).
       That makes this pill a flex item with default flex:0 1 auto, so it
       sizes to content (~768px) instead of filling .tb (~986px) — a 218px
       right-edge gap vs the cards below. flex:1 makes it grow to fill .tb. */
    flex: 1;
    /* Shopify-style centered content: the pill grows up to 1440px then
       auto margins absorb leftover free space, centering it within .tb on
       wide viewports. Below 1440px the pill fills the available container
       width (flex:1 wins). Must stay aligned with .main-inner's max-width
       below — both share the same cap so pill and content right edges
       still match at any viewport width. */
    max-width: 1440px;
    margin: 0 auto;
    height: 88px;
    padding: 0 32px;
    background: #FFFFFF;
    border: 1px solid var(--sfsc-rule);
    border-radius: var(--sfsc-radius-pill);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Two flex groups inside the pill: title group LEFT, cluster of
   search + quick-add + bell + user on the RIGHT. .tb-center wrapper
   removed — search now lives in .tb-right alongside the other widgets. */
.sfsc-shell .tb .tb-pill .tb-left,
.sfsc-shell .tb .tb-pill .tb-right {
    display: flex;
    align-items: center;
    min-width: 0;
}
.sfsc-shell .tb .tb-pill .tb-left {
    flex: 0 1 auto;
    gap: 12px;
}
.sfsc-shell .tb .tb-pill .tb-right {
    flex: 0 0 auto;
    gap: 14px;
}

/* Page title group — h1 (Tiempos serif) + small subtitle below. */
.sfsc-shell .tb .tb-title-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.sfsc-shell .tb .tb-title-group .tb-title {
    font-family: var(--sfsc-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--sfsc-ink);
    margin: 0;
    letter-spacing: -.01em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sfsc-shell .tb .tb-title-group .tb-subtitle {
    font-family: var(--sfsc-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--sfsc-ink-3);
    margin: 2px 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sfsc-shell .tb .tb-title-group .tb-subtitle:empty {
    display: none; /* collapse so title centers when no subtitle is set */
}

/* Hamburger toggle — paper-bg color override. display:none until ≤900px. */
.sfsc-shell .tb .sb-tog {
    color: var(--sfsc-ink-2);
}

/* Main — keep legacy padding values so content has breathing room
   from the flush right edge. Topbar lives inside .main-inner. */
.sfsc-shell .main {
    margin: 0;
    padding: 28px 32px 48px;
    min-height: 0;
}
.sfsc-shell .main-inner {
    /* Shopify-style centered content. Below 1440px viewports width:100%
       fills the parent (no horizontal scroll). Above 1440px the wrapper
       caps and auto margins absorb leftover space, centering the column
       with paper background visible left/right. Must match .tb-pill's
       max-width above so pill and content right edges align. */
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* Mobile — collapse to single column at 900px. Sidebar resets to
   fixed-overlay slide-in. Pill scales down; subtitle hides at narrow
   widths. Hamburger appears in pill's left position via legacy CSS. */
@media (max-width: 900px) {
    .sfsc-shell {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .sfsc-shell .sb {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        height: 100vh;
        border-radius: 0;
        border-right: 1px solid var(--sfsc-navy-line);
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 90;
        box-shadow: 0 12px 40px rgba(10, 22, 40, .25);
    }
    .sfsc-shell .sb.open {
        transform: translateX(0);
    }
    .sfsc-shell .tb {
        margin: 12px;
    }
    .sfsc-shell .tb .tb-pill {
        height: 56px;
        padding: 0 16px;
        gap: 10px;
    }
    .sfsc-shell .tb .tb-title-group .tb-title {
        font-size: 18px;
    }
    .sfsc-shell .tb .tb-title-group .tb-subtitle {
        display: none;
    }
    .sfsc-shell .main {
        padding: 24px 20px 32px;
    }
}
@media (max-width: 500px) {
    .sfsc-shell .main {
        padding: 16px;
    }
    .sfsc-shell .tb .tb-user-meta {
        display: none; /* avatar + chevron only on small mobile */
    }
}

/* Sidebar brand row — logo lockup at the top of the navy sidebar.
   Replaces the prior topbar logo placement; topbar is now search +
   bell + user only. The image carries the wordmark; brightness filter
   keeps it legible on the deep navy surface. */
.sfsc-shell .sb .sb-brand {
    display: flex;
    align-items: center;
    padding: 14px 16px 14px 18px;
    flex-shrink: 0;
}

/* Sidebar #d-low-inventory mount is parked hidden so staff.js's
   renderLowInventory() doesn't error. The renderer sets el.style.display='flex'
   on first dashboard load, which would override the HTML `hidden` attribute
   and bleed the "All stocked up" message into the sidebar. !important here
   wins against the inline style; sidebar stays clean. */
.sb #d-low-inventory {
    display: none !important;
}
.sfsc-shell .sb .sb-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}
.sfsc-shell .sb .sb-brand img,
.sfsc-shell .sb .sb-brand .custom-logo,
.sfsc-shell .sb .sb-brand .custom-logo img {
    max-height: 38px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(1.18);
}

/* ──────────────────────────────────────────────────────────────────
   Topbar pill — scoped font swap to Touche (display) + Aceh Soft (body).
   Specificity 0,3,0 (.tb .tb-pill .X) wins over the generic .tb .X rules
   above thanks to the extra .tb-pill class. Söhne + Tiempos stay
   everywhere outside .tb-pill — sidebar, content, modals, dropdowns.
   ────────────────────────────────────────────────────────────────── */

.tb .tb-pill {
    font-family: var(--sfsc-pill-body);
}
.tb .tb-pill .tb-title-group .tb-title {
    font-family: var(--sfsc-pill-display);
    font-weight: 600;
    letter-spacing: -.01em;
}
.tb .tb-pill .tb-title-group .tb-subtitle {
    font-family: var(--sfsc-pill-body);
    font-weight: 400;
}
.tb .tb-pill .tb-search input {
    font-family: var(--sfsc-pill-body);
    font-weight: 400;
}
.tb .tb-pill .tb-user-name {
    font-family: var(--sfsc-pill-body);
    font-weight: 500;
}
/* Role display switched to lowercase @username (PHP echo $user->user_login).
   Bumped from 9px mono uppercase to 11px Aceh Soft Light, no transform. */
.tb .tb-pill .tb-user-role {
    font-family: var(--sfsc-pill-body);
    font-weight: 300;
    font-size: 12px;
    color: var(--sfsc-ink-3);
    text-transform: none;
    letter-spacing: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Quick-add button + popover — sits between search and bell in the
   topbar pill's right group. Solid DNA-blue circle to match the
   sidebar active-pill state (commit 6 mod). Popover hangs below as
   a light card matching the notification + user dropdown chrome.
   ────────────────────────────────────────────────────────────────── */
.tb .tb-quick {
    position: relative;
    display: inline-flex;
}
.tb .tb-quick-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--sfsc-ink);
    background: var(--sfsc-ink);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(11, 22, 34, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: background .15s, border-color .15s, transform .12s;
}
.tb .tb-quick-btn:hover {
    background: var(--sfsc-ink-2);
    border-color: var(--sfsc-ink-2);
}
/* The global rule at admin-dashboard.css:9 — button:focus,button:active
   { background-color: inherit !important } — was flipping this button's
   navy bg to white on click (inheriting from .tb-pill). Counter with
   !important to keep the navy. */
.tb .tb-quick-btn:focus,
.tb .tb-quick-btn:active {
    background-color: var(--sfsc-ink) !important;
    border-color: var(--sfsc-ink) !important;
}
.tb .tb-quick-btn:hover:focus,
.tb .tb-quick-btn:hover:active {
    background-color: var(--sfsc-ink-2) !important;
    border-color: var(--sfsc-ink-2) !important;
}
/* Subtle DNA-blue ring on keyboard focus only (mouse click skips this). */
.tb .tb-quick-btn:focus-visible {
    outline: 2px solid var(--sfsc-dna-3) !important;
    outline-offset: 2px !important;
}
.tb .tb-quick-btn:active {
    transform: scale(.96);
}

/* Popover panel — light card, anchored below the button on the right.
   Layered soft shadow gives Pharmly/Linear-style elevation without the
   heavy box-shadow-3 token's drop. transform-origin pegs the entry
   animation to the top-right so it expands from the button anchor. */
.tb .quick-add-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: #FFFFFF;
    border: 1px solid var(--sfsc-rule);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(11, 22, 34, .08), 0 2px 6px rgba(11, 22, 34, .04);
    padding: 8px;
    z-index: 200;
    transform-origin: top right;
}
.tb .quick-add-panel.open {
    display: block;
    animation: quickAddIn .16s ease-out;
}
@keyframes quickAddIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tb .quick-add-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-family: var(--sfsc-pill-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--sfsc-ink);
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.tb .quick-add-item:hover {
    background: var(--sfsc-paper-2);
}
/* Lucide icons — sfsc_lucide() outputs <svg> with stroke="currentColor",
   so the parent's `color` paints the strokes. */
.tb .quick-add-item svg {
    width: 20px;
    height: 20px;
    color: var(--sfsc-ink-2);
    flex-shrink: 0;
}