/* ===================================================================================
   ASSORT INVENTORY HUB — shell.css (ported s298, 2026-09-09, task 3 of the mobile-shell plan)
   Ported from `13 Design System/09 Fleet Shell/2026-09-06_fleet-shell_v1/shell.css` (the CS
   reference Ken named: "i want all apps to be this same header"). Accent already swapped for
   THIS app's gold tile: var(--indigo)/var(--indigo-tint) → var(--gold-ink)/var(--gold-tint),
   the focus-ring rgba → gold. tokens.css already carries --text-mid/--fill-tint/--font-display;
   the three names this file needed on top of those (--gold/--gold-tint/--gold-ink) are appended
   there too. Phone breakpoint is 980px throughout (this app's own sidebar breakpoint), never the
   reference's 767px.
   =================================================================================== */

/* ---- tokens the shell adds ---- */
:root{ --nav-h:82px; --tabbar-clear:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 16px); }

/* ---- the header ---- */
.app-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;height:56px;padding:0 16px;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0}
.app-hdr .brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--text)}
.app-hdr .brand .tile{width:30px;height:30px;border-radius:8px;background:#FAFAFA;border:1px solid var(--border);display:grid;place-items:center;flex-shrink:0}
.app-hdr .brand .tile svg{display:block}
.app-hdr .brand .wm{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.app-hdr .cluster{display:flex;align-items:center;gap:6px;flex-shrink:0}
.hdr-actions{display:flex;align-items:center;gap:6px}
.hdr-actions:empty{display:none}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;height:36px;border:1px solid var(--border);border-radius:var(--radius-full);padding:3px 4px 3px 9px;background:var(--white)}
.lang-toggle > .fi{color:var(--text2);flex-shrink:0}
.lang-toggle .lang-seg{display:flex;background:var(--surface-tint);border-radius:var(--radius-full);overflow:hidden}
.lang-toggle button{border:0;background:transparent;font-family:var(--font-sans);font-size:12px;font-weight:700;color:var(--text2);padding:5px 10px;cursor:pointer;border-radius:var(--radius-full);line-height:1.2}
.lang-toggle button.on{background:var(--text);color:var(--white)}
.icon-btn{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--white);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0}
.icon-btn:hover{color:var(--text)}
.icon-btn .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--white)}
.avatar{width:36px;height:36px;border-radius:50%;background:#e8e8ed;color:var(--text);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;border:none;padding:0;cursor:pointer;flex-shrink:0;font-family:var(--font-sans)}
.acct-menu{position:relative;flex-shrink:0}
.acct-pop{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:6px;width:264px;z-index:200}
.acct-pop[hidden]{display:none}
.acct-head{display:flex;align-items:center;gap:10px;padding:10px 12px 12px}
.acct-head .avatar{width:38px;height:38px;font-size:13px;cursor:default}
.acct-head .who{min-width:0;line-height:1.25;display:flex;flex-direction:column}
.acct-head .name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-head .role{font-size:12px;color:var(--text2);font-weight:500}
.acct-head .acct-email{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-sep{height:1px;background:var(--border-soft);margin:4px 0}
.acct-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-md);color:var(--text);font-family:var(--font-sans);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.acct-item[hidden]{display:none}
.acct-item .fi{color:var(--text3);flex-shrink:0}
.acct-item:hover{background:var(--card)}
.acct-item:hover .fi{color:var(--text2)}
.acct-item .snav-badge{display:none}
.acct-logout{display:block;width:calc(100% - 12px);margin:4px 6px 2px;padding:9px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;text-align:center;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--text)}
.acct-logout:hover{background:var(--card)}
.icon-btn.is-loading::before { margin-right: 0; }

/* ---- the desktop sidebar ---- */
.shellnav{width:222px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;background:#f4f5f8;border-right:1px solid var(--border-soft);padding:16px 12px;overflow-y:auto}
.shellnav .eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text2);padding:14px 10px 6px;display:block}
.shellnav > .eyebrow:first-child{padding-top:2px}
.snav-nav{display:flex;flex-direction:column;gap:2px}
.snav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--text-mid);text-decoration:none}
.snav-item[hidden]{display:none}
.snav-item .fi{width:17px;height:17px;color:var(--text2);flex-shrink:0}
.snav-item:hover{background:var(--white);color:var(--text)}
.snav-item.active{background:var(--white);color:var(--text);font-weight:700;box-shadow:var(--shadow-sm)}
.snav-item.active .fi{color:var(--gold-ink)}
.snav-badge{margin-left:auto;font-size:12px;font-weight:600;color:var(--text2);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-full);padding:1px 8px;font-variant-numeric:tabular-nums}
.snav-badge[hidden]{display:none}
.snav-item.active .snav-badge{background:var(--gold-ink);color:var(--white);border-color:var(--gold-ink)}
.snav-extra{display:flex;flex-direction:column;gap:2px}

/* ---- the phone tab bar + sheets exist only on phones ---- */
.tabbar{display:none}
.sheet-dim,.pop-dim{display:none}

/* ---- ONE back control ---- */
.pback-row{display:flex;align-items:center;position:sticky;top:0;z-index:3;background:var(--white);padding:2px 12px 0}
/* s298 (2026-09-09, fix round 1): the source (`13 Design System/09 Fleet Shell/shell.css`) dropped
   this rule's closing brace AND the eleven declarations that followed it on the same broken
   continuation — verified live in jsdom's CSS parser, which (matching real CSS-Nesting-aware
   browsers) read every rule below as NESTED under `.pback`, so `.tabbar`/`.sheet`/`.srow` never
   became top-level rules and the whole phone shell silently never applied. My first pass here only
   closed the brace, leaving `.pback` at 6 of its 17 real declarations (no color/font/text-decoration
   at all — it would have painted as a default underlined blue link). Restored the missing eleven
   from the true source, `assort-cs-app/public/app.css:774-776`, with the accent mapped to this
   app's own gold like every other swap in this file: `color:var(--indigo)` → `var(--gold-ink)`. */
.pback{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 12px 0 4px;margin-left:-4px;background:none;border:0;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--gold-ink);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1}
.pback .fi{width:20px;height:20px;flex:none;stroke-width:2.4}
.pback:hover{background:var(--gold-tint)}
.pback:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(135,114,0,.35)}
.pback-row.phone-only{display:none}
.detail-head .pback-row{position:static;padding:0 0 2px;margin:-8px 0 0 -6px}

/* ---- phone (≤980px): sticky header, the tab bar, the More sheet ---- */
/* s303 (tabbar-gold.test.js): this app has exactly ONE @media (max-width:980px) block in this
   file — .pback-row.phone-only's toggle folded in here rather than kept as its own separate query.
   Two same-breakpoint blocks parse fine, but a naive "find the first @media(980px) block" reader
   (this test's own `block()` helper) would grab whichever comes first and miss the rest — merging
   keeps the phone breakpoint a single, whole, greppable block. */
@media (max-width:980px){
  .pback-row.phone-only{display:flex}
  .app-hdr{position:sticky;top:0;z-index:35;padding:0 12px}
  .app-hdr .lang-toggle{padding-left:4px}
  .app-hdr .lang-toggle > .fi{display:none}
  .app-frame{height:auto;min-height:calc(100vh - 56px);display:block;overflow:visible;padding-bottom:var(--tabbar-clear)}
  .tabbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40}
  .tabbar .tabs{min-height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--border);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,160px);justify-content:center;align-items:center;padding:0 6px env(safe-area-inset-bottom,0px)}
  .tabbar .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;font-size:11px;font-weight:500;color:var(--text2);position:relative;text-decoration:none;background:none;border:0;font-family:var(--font-sans);cursor:pointer;min-width:0;min-height:var(--nav-h)}
  .tabbar .tab[hidden]{display:none}
  .tabbar .tab .fi{width:22px;height:22px}
  .tabbar .tab.active{color:var(--gold-ink);font-weight:700}
  .tabbar .tab .snav-badge{position:absolute;top:calc(50% - 27px);left:calc(50% + 7px);margin:0;min-width:17px;height:17px;border-radius:9px;background:var(--red);color:var(--white);border:2px solid var(--white);font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;line-height:1}
  .tabbar .tab .snav-badge[hidden]{display:none}
  .sheet-dim{display:block;position:fixed;inset:0;bottom:var(--nav-h);background:rgba(20,23,31,.32);z-index:41}
  .sheet-dim[hidden]{display:none}
  .sheet{position:fixed;left:0;right:0;bottom:var(--nav-h);background:var(--white);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);padding:10px 14px 14px;z-index:42;max-height:80vh;overflow-y:auto}
  .sheet[hidden]{display:none}
  .sheet .grab,.filter-pop .grab,.salon-pop .grab{display:block;width:38px;height:4px;border-radius:2px;background:var(--border);margin:2px auto 12px}
  .sheet h2{font-size:17px;font-weight:700;margin:4px 6px 10px}
  .srow{display:flex;align-items:center;gap:12px;padding:12px 8px;border:0;border-bottom:1px solid var(--border-soft);font-size:15px;font-weight:500;color:var(--text);text-decoration:none;font-family:var(--font-sans);background:none;width:100%;text-align:left;cursor:pointer}
  .srow[hidden]{display:none}
  .srow .fi{width:20px;height:20px;color:var(--text2)}
  .srow.active .fi{color:var(--gold-ink)}
  .srow .snav-badge{margin-left:auto}
}