/* =========================================================================
   I3 DESIGN TOKENS + COMPONENTS
   Derived from ~/inventory-app/v2-mockups/DESIGN_SYSTEM.md (Attio x Linear)
   Brand: monochrome + orange #FF6A1A. Dense, keyboard-first, no chrome.
   ========================================================================= */
:root{
  --bg-canvas:#FAFAF9;--bg-surface:#FFF;--bg-subtle:#F4F4F3;--bg-muted:#ECEBE9;
  --border:#E4E3E0;--border-strong:#D1CFCB;--border-focus:#171717;
  --text-primary:#171717;--text-secondary:#525252;--text-muted:#757472;--text-subtle:#B8B6B0;
  --accent:#FF6A1A;--accent-hover:#E85A0E;--accent-bg:#FFF4EC;
  --success:#15803D;--success-bg:#E8F3EE;
  --warning:#B45309;--warning-bg:#FEF3E2;
  --danger:#B91C1C;--danger-bg:#FCE7E7;
  --info:#1D4ED8;--info-bg:#E4ECFB;
  --violet:#6D28D9;--violet-bg:#F0EAFB;
  --shadow-xs:0 1px 1px rgba(0,0,0,.03);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 2px 4px rgba(0,0,0,.04),0 8px 16px rgba(0,0,0,.04);
  --shadow-lg:0 4px 8px rgba(0,0,0,.04),0 16px 32px rgba(0,0,0,.06);
  --shadow-panel:-20px 0 40px rgba(0,0,0,.08);
  --shadow-palette:0 20px 60px rgba(0,0,0,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --bg-canvas:#0A0A0A;--bg-surface:#131313;--bg-subtle:#1C1C1C;--bg-muted:#262626;
  --border:#242424;--border-strong:#333;--border-focus:#FAFAFA;
  --text-primary:#FAFAFA;--text-secondary:#B4B4B4;--text-muted:#A0A0A0;--text-subtle:#525252;
  --accent:#FF7A35;--accent-hover:#FF8F52;--accent-bg:#2A1B10;
  --success:#4ADE80;--success-bg:#0F2A1A;
  --warning:#FBBF24;--warning-bg:#2A1F0A;
  --danger:#F87171;--danger-bg:#2A1212;
  --info:#60A5FA;--info-bg:#0F1A2A;
  --violet:#A78BFA;--violet-bg:#1E1530;
  --shadow-panel:-20px 0 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-canvas);color:var(--text-primary);
  font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:13.5px;line-height:20px;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04","cv11";}
.mono,.num{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-bg);color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ====== SHELL ====== */
.app{display:grid;grid-template-columns:56px 1fr;min-height:100vh}
.nav{position:sticky;top:0;height:100vh;background:var(--bg-surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;transition:width 200ms var(--ease);overflow-y:auto;overflow-x:hidden;z-index:50;width:56px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav:hover{width:236px;box-shadow:var(--shadow-md)}
.nav-brand{height:48px;display:flex;align-items:center;padding:0 16px;gap:12px;border-bottom:1px solid var(--border);flex-shrink:0}
.nav-brand-mark{width:24px;height:24px;border-radius:6px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 24px}
.nav-brand-label{white-space:nowrap;font-weight:600;font-size:13.5px;opacity:0;transition:opacity 150ms}
.nav:hover .nav-brand-label{opacity:1}
.nav-section{padding:6px 0;flex-shrink:0}
.nav-section-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);padding:5px 16px;opacity:0;transition:opacity 150ms;white-space:nowrap}
.nav:hover .nav-section-label{opacity:1}
.nav a{display:flex;align-items:center;gap:12px;height:30px;padding:0 16px;color:var(--text-secondary);
  font-size:13px;position:relative;transition:background 100ms,color 100ms;white-space:nowrap}
.nav a:hover{background:var(--bg-subtle);color:var(--text-primary)}
.nav a.active{background:var(--bg-subtle);color:var(--accent)}
.nav a.active::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;background:var(--accent);border-radius:0 2px 2px 0}
.nav a svg{flex:0 0 16px;width:16px;height:16px;stroke-width:1.75}
.nav a .label{white-space:nowrap;opacity:0;transition:opacity 150ms}
.nav:hover a .label{opacity:1}
.nav a .badge{margin-left:auto;font-size:10px;background:var(--accent);color:#fff;border-radius:9999px;
  padding:1px 6px;opacity:0;transition:opacity 150ms}
.nav a .badge.gray{background:var(--bg-muted);color:var(--text-secondary)}
.nav:hover a .badge{opacity:1}

.main{display:flex;flex-direction:column;min-width:0}
.header{position:sticky;top:0;height:48px;background:var(--bg-surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 20px;z-index:40}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);white-space:nowrap}
.breadcrumb .sep{color:var(--text-subtle)}
.breadcrumb .here{color:var(--text-primary);font-weight:500}
.header-search{margin-left:24px;flex:0 0 300px;height:28px;background:var(--bg-subtle);
  border:1px solid transparent;border-radius:6px;display:flex;align-items:center;padding:0 10px;gap:8px;font-size:12.5px;color:var(--text-muted);cursor:pointer}
.header-search:hover{border-color:var(--border-strong);color:var(--text-secondary)}
.header-search .kbd{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--text-muted);
  background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;padding:0 5px}
.header-spacer{flex:1}
.header-actions{display:flex;align-items:center;gap:6px}
.btn-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:var(--text-secondary)}
.btn-icon:hover{background:var(--bg-subtle);color:var(--text-primary)}
.entity-picker{height:28px;padding:0 10px;border:1px solid var(--border);border-radius:6px;
  font-size:12.5px;display:flex;align-items:center;gap:8px;background:var(--bg-surface);white-space:nowrap}
.entity-picker:hover{border-color:var(--border-strong)}
.avatar{width:28px;height:28px;border-radius:9999px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:12px}
.content{padding:20px 24px;max-width:1480px;width:100%;margin:0 auto}

/* ====== TYPOGRAPHY ====== */
.page-title{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.page-subtitle{font-size:13px;color:var(--text-muted);margin:0 0 20px}
.section-title{font-size:15px;font-weight:600;margin:0 0 12px;letter-spacing:-.005em}

/* ====== BUTTONS ====== */
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid var(--border);border-radius:6px;background:var(--bg-surface);
  font-size:13px;font-weight:500;transition:background 100ms,border-color 100ms,transform 80ms;white-space:nowrap}
.btn:hover{background:var(--bg-subtle);border-color:var(--border-strong)}
.btn:active{transform:scale(.98)}
.btn-sm{height:28px;padding:0 10px;font-size:12.5px}
.btn-xs{height:24px;padding:0 8px;font-size:11.5px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--bg-subtle)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn .kbd{margin-left:6px;font-family:"JetBrains Mono",monospace;font-size:10px;opacity:.7;
  background:rgba(0,0,0,.05);border-radius:3px;padding:0 4px}

/* ====== TABLES ====== */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.table thead th{background:var(--bg-subtle);color:var(--text-muted);font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;padding:10px;text-align:left;border-bottom:1px solid var(--border);
  position:sticky;top:48px;z-index:10;white-space:nowrap}
.table tbody td{padding:8px 10px;border-bottom:1px solid var(--border);height:36px;vertical-align:middle}
.table tbody tr{cursor:default}
.table tbody tr:hover td{background:var(--bg-subtle)}
.table.dense tbody td{height:28px;padding:4px 10px}
.table tbody tr.selected td{background:var(--accent-bg)}
.table tbody tr.selected td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.table tbody tr.row-parent td{font-weight:600;background:var(--bg-subtle)}
.table tbody tr.row-child td:first-child{padding-left:28px}
.num-cell{text-align:right;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.num-cell.neg{color:var(--danger);font-weight:600}
.num-cell.pos{color:var(--success)}
.num-cell.zero{color:var(--text-subtle)}

/* ====== CHIPS ====== */
.chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;
  border-radius:4px;font-size:11px;font-weight:500;line-height:1;background:var(--bg-subtle);color:var(--text-muted);white-space:nowrap}
.chip.success{background:var(--success-bg);color:var(--success)}
.chip.warning{background:var(--warning-bg);color:var(--warning)}
.chip.danger{background:var(--danger-bg);color:var(--danger)}
.chip.info{background:var(--info-bg);color:var(--info)}
.chip.accent{background:var(--accent-bg);color:var(--accent)}
.chip.violet{background:var(--violet-bg);color:var(--violet)}
.chip svg{width:10px;height:10px;stroke-width:2}
.chip .dot{width:6px;height:6px;border-radius:9999px;background:currentColor}

/* ====== KPI ====== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi-grid.cols-6{grid-template-columns:repeat(6,1fr)}
.kpi-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.kpi{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px}
.kpi .label{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;white-space:nowrap}
.kpi .value{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.kpi .value .unit{font-size:13px;color:var(--text-muted);font-weight:500}
.kpi .value.danger{color:var(--danger)}
.kpi .delta{font-size:12px;margin-top:6px;display:flex;align-items:center;gap:4px;color:var(--text-muted)}
.kpi .delta.up{color:var(--success)}.kpi .delta.down{color:var(--danger)}

/* ====== CARD / LAYOUT ====== */
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:16px 20px}
.card.flush{padding:0;overflow:hidden}
.card-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.card-header .section-title{margin:0;flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-31{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.grid-13{display:grid;grid-template-columns:1fr 2fr;gap:16px}

/* ====== FILTER BAR ====== */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filter-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--bg-surface);cursor:pointer;white-space:nowrap}
.filter-chip:hover{border-color:var(--border-strong)}
.filter-chip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.filter-chip .count{color:var(--text-muted);font-size:11px}
.filter-chip.on .count{color:var(--accent)}

/* ====== TABS ====== */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab{height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;
  color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}
.tab .count{font-size:11px;background:var(--bg-subtle);border-radius:9999px;padding:1px 7px;color:var(--text-muted)}

/* ====== TIMELINE ====== */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item::before{content:"";position:absolute;left:-21px;top:5px;width:8px;height:8px;border-radius:9999px;
  background:var(--bg-surface);border:2px solid var(--border-strong)}
.tl-item.accent::before{border-color:var(--accent);background:var(--accent)}
.tl-item.success::before{border-color:var(--success);background:var(--success)}
.tl-item.danger::before{border-color:var(--danger);background:var(--danger)}
.tl-item.warning::before{border-color:var(--warning);background:var(--warning)}
.tl-head{display:flex;align-items:baseline;gap:8px}
.tl-title{font-size:13px;font-weight:500}
.tl-time{font-size:11.5px;color:var(--text-muted);font-family:"JetBrains Mono",monospace;margin-left:auto;white-space:nowrap}
.tl-body{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.tl-body .mono{font-size:11.5px}

/* ====== HIERARCHY TREE ====== */
.tree{font-size:12.5px}
.tree-node{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:6px}
.tree-node:hover{background:var(--bg-subtle)}
.tree-node.current{background:var(--accent-bg)}
.tree-node .sku{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:12px}
.tree-node .title{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-node .qty{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--text-muted)}
.tree-indent{margin-left:22px;border-left:1px solid var(--border);padding-left:8px}

/* ====== PROGRESS ====== */
.progress{height:6px;border-radius:9999px;background:var(--bg-muted);overflow:hidden}
.progress .fill{height:100%;border-radius:9999px;background:var(--accent)}
.progress .fill.success{background:var(--success)}
.progress .fill.warning{background:var(--warning)}
.progress .fill.danger{background:var(--danger)}

/* ====== STAT ROW / DEF LIST ====== */
.def-grid{display:grid;grid-template-columns:140px 1fr;gap:6px 16px;font-size:12.5px}
.def-grid dt{color:var(--text-muted)}
.def-grid dd{margin:0;font-weight:500}

/* ====== SIDE PANEL ====== */
.panel-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.02);z-index:60;display:none}
.panel-backdrop.open{display:block}
.panel{position:fixed;top:0;right:0;bottom:0;width:480px;background:var(--bg-surface);
  border-left:1px solid var(--border);box-shadow:var(--shadow-panel);z-index:61;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform 300ms var(--ease)}
.panel.open{transform:translateX(0)}
.panel-header{height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
.panel-title{font-size:15px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-body{flex:1;overflow:auto;padding:20px}
.panel-footer{height:48px;border-top:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:8px;flex-shrink:0}

/* ====== COMMAND PALETTE ====== */
.palette-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.4);backdrop-filter:blur(4px);z-index:70;display:none;align-items:flex-start;justify-content:center;padding-top:15vh}
.palette-backdrop.open{display:flex}
.palette{width:640px;max-height:60vh;background:var(--bg-surface);border-radius:14px;box-shadow:var(--shadow-palette);display:flex;flex-direction:column;overflow:hidden}
.palette input{height:56px;border:0;padding:0 20px;font-size:17px;width:100%;background:transparent;outline:0}

/* ====== SPARKBARS ====== */
.sparkbars{display:flex;align-items:flex-end;gap:2px;height:28px}
.sparkbars i{flex:1;background:var(--accent);opacity:.75;border-radius:1px 1px 0 0;min-width:3px}
.sparkbars i.muted{background:var(--bg-muted);opacity:1}

/* ====== STATE SELECTOR (mockup only) ====== */
.state-select{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted)}
.state-select select{height:26px;border:1px solid var(--border);border-radius:6px;background:var(--bg-surface);font-size:12px;padding:0 6px}

/* ====== BANNERS ====== */
.banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:12.5px;margin-bottom:16px;border:1px solid}
.banner.info{background:var(--info-bg);border-color:transparent;color:var(--info)}
.banner.warning{background:var(--warning-bg);border-color:transparent;color:var(--warning)}
.banner.danger{background:var(--danger-bg);border-color:transparent;color:var(--danger)}
.banner .mono{font-size:11.5px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}
@media print{.nav,.header,.panel,.palette-backdrop{display:none!important}.app{grid-template-columns:1fr}.content{max-width:none;padding:0}}

/* =========================================================================
   ROUND 2 — components ported from v2-mockups (parity bar) + i3 additions
   ========================================================================= */

/* ---- KPI with sparkline ---- */
.kpi{display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:left;width:100%;padding:14px 18px 10px;transition:border-color 100ms,box-shadow 100ms}
.kpi:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.kpi .sparkline{margin-top:2px;height:38px;width:100%}
.kpi .sparkline svg{display:block;width:100%;height:100%}

/* ---- Above-fold split ---- */
.above-fold{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:20px;align-items:stretch}
.card{display:flex;flex-direction:column}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;gap:12px;border-bottom:0}
.card-header h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.005em}
.card-header .meta{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.card-body{padding:4px 0;flex:1;min-height:0}
.card-footer{padding:8px 18px 14px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:8px;margin-top:auto}

/* ---- Attention queue ---- */
.attn-list{list-style:none;margin:0;padding:0}
.attn-row{display:grid;grid-template-columns:28px 1fr auto auto;gap:12px;align-items:center;padding:9px 18px;border-top:1px solid var(--border);cursor:pointer;transition:background 100ms}
.attn-row:first-child{border-top:0}
.attn-row:hover{background:var(--bg-subtle)}
.attn-row .ic{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}
.attn-row .ic.danger{background:var(--danger-bg);color:var(--danger)}
.attn-row .ic.warning{background:var(--warning-bg);color:var(--warning)}
.attn-row .ic.info{background:var(--info-bg);color:var(--info)}
.attn-row .ic.accent{background:var(--accent-bg);color:var(--accent)}
.attn-row .ic.violet{background:var(--violet-bg);color:var(--violet)}
.attn-row .ic svg{width:15px;height:15px;stroke-width:1.75}
.attn-row .txt .t{font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.attn-row .txt .sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;font-variant-numeric:tabular-nums}
.attn-row .cta{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);opacity:.6;transition:opacity 100ms,transform 100ms;white-space:nowrap}
.attn-row:hover .cta{opacity:1;transform:translateX(2px);color:var(--accent)}
.attn-row .cta svg{width:12px;height:12px;stroke-width:2}

/* ---- Live ticker ---- */
.ticker{display:flex;flex-direction:column}
.ticker-row{display:grid;grid-template-columns:62px 20px 1fr auto;gap:8px;align-items:center;padding:6px 18px;border-top:1px solid var(--border);font-size:12px;cursor:pointer;transition:background 100ms}
.ticker-row:first-child{border-top:0}
.ticker-row:hover{background:var(--bg-subtle)}
.ticker-row .ts{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--text-muted)}
.ticker-row .ic{width:20px;height:20px;display:grid;place-items:center;border-radius:4px;background:var(--bg-subtle);color:var(--text-secondary)}
.ticker-row .ic svg{width:11px;height:11px;stroke-width:2}
.ticker-row .ic.pos{background:var(--success-bg);color:var(--success)}
.ticker-row .ic.neg{background:var(--danger-bg);color:var(--danger)}
.ticker-row .ic.info{background:var(--info-bg);color:var(--info)}
.ticker-row .ic.violet{background:var(--violet-bg);color:var(--violet)}
.ticker-row .main-text{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker-row .main-text .sku{font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--text-primary)}
.ticker-row .main-text .where{color:var(--text-muted)}
.ticker-row .qty{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums}
.ticker-row .qty.pos{color:var(--success)}
.ticker-row .qty.neg{color:var(--danger)}
.live-pulse{width:6px;height:6px;border-radius:9999px;background:var(--success);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.live-pulse{animation:none}}

/* ---- Sections / grids ---- */
.section{margin-bottom:20px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px;gap:12px}
.section-sub{font-size:12px;color:var(--text-muted);margin:2px 0 0}
.viz-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bottom-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.loc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.loc-tile{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color 100ms,box-shadow 100ms;display:flex;flex-direction:column;gap:8px}
.loc-tile:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.loc-tile .code{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600}
.loc-tile .name{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-tile .fill-bar{height:4px;background:var(--bg-subtle);border-radius:9999px;overflow:hidden}
.loc-tile .fill-bar .bar{height:100%;background:var(--accent);border-radius:9999px}
.loc-tile .meta-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.loc-tile .meta-row .alerts{display:inline-flex;align-items:center;gap:3px;color:var(--warning)}

/* ---- Charts ---- */
.chart-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px}
.chart-svg{display:block;width:100%;height:180px}
.chart-axis{display:grid;font-size:10.5px;color:var(--text-muted);font-family:"JetBrains Mono",monospace;text-align:center;margin-top:4px}
.donut-wrap{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center}
.donut-legend{list-style:none;padding:0;margin:0;font-size:11.5px;color:var(--text-secondary);display:flex;flex-direction:column;gap:4px}
.donut-legend li{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center}
.donut-legend .sw{width:10px;height:10px;border-radius:2px}
.donut-legend .pct{font-family:"JetBrains Mono",monospace;color:var(--text-muted)}
.legend{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--text-muted);flex-wrap:wrap}
.legend .k{display:inline-flex;align-items:center;gap:5px}
.legend .sw{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---- Activity strip ---- */
.act-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-surface)}
.act-cell{padding:10px 14px;border-right:1px solid var(--border)}
.act-cell:last-child{border-right:0}
.act-cell .l{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.act-cell .v{font-family:"JetBrains Mono",monospace;font-size:19px;font-weight:700;line-height:1.2}
.act-cell .s{font-size:10.5px;color:var(--text-muted)}

/* ---- Heatmap matrix ---- */
.heat{width:100%;border-collapse:separate;border-spacing:2px;font-size:11px}
.heat th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:500;padding:4px;text-align:center}
.heat th.rowh,.heat td.rowh{text-align:left;font-weight:500;color:var(--text-secondary);white-space:nowrap;padding-right:8px}
.heat td{text-align:center;padding:6px 4px;border-radius:4px;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--text-primary)}

/* ---- Scheduled items ---- */
.scheduled-item{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.scheduled-item .when{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--text-muted);flex-shrink:0;width:42px;padding-top:2px}
.scheduled-item .body{font-size:12px;line-height:16px}
.scheduled-item .body .t{font-weight:500}
.scheduled-item .body .s{color:var(--text-muted);font-size:11px}

/* ---- State bar + persona ---- */
.state-bar{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--bg-subtle)}
.state-bar button{height:24px;padding:0 10px;font-size:11.5px;border-radius:6px;color:var(--text-secondary)}
.state-bar button.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-xs)}
.persona-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 18px}
.persona{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--border);border-radius:9999px;font-size:12px;background:var(--bg-surface);cursor:pointer}
.persona:hover{border-color:var(--border-strong)}
.persona.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:500}
.persona svg{width:12px;height:12px;stroke-width:2}

/* ---- Skeleton ---- */
.skel{background:linear-gradient(90deg,var(--bg-muted) 0%,var(--bg-subtle) 50%,var(--bg-muted) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:4px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* ---- Pivot column groups ---- */
.pivot thead tr.grp-head th{text-align:center;border-bottom:1px solid var(--border);font-size:10px;padding:6px 4px;top:48px}
.pivot thead tr.sub-head th{top:74px;font-size:9.5px;padding:4px 6px;letter-spacing:.03em}
.pivot th.grp-start,.pivot td.grp-start{border-left:1px solid var(--border-strong)}
.pivot .loc-dot{width:6px;height:6px;border-radius:9999px;display:inline-block;margin-right:5px}
.pivot tbody td.sel{width:28px;text-align:center}
.sku-badge{display:inline-grid;place-items:center;width:26px;height:16px;border-radius:3px;font-size:8.5px;font-weight:700;letter-spacing:.02em;background:var(--bg-muted);color:var(--text-secondary);margin-right:6px}
.oos-mark{border-right:2px solid var(--danger)}

/* ---- Toggle switch ---- */
.tgl{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);cursor:pointer}
.tgl .track{width:26px;height:15px;border-radius:9999px;background:var(--bg-muted);position:relative;transition:background 120ms}
.tgl .track::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:9999px;background:var(--bg-surface);box-shadow:var(--shadow-xs);transition:transform 120ms}
.tgl.on .track{background:var(--accent)}
.tgl.on .track::after{transform:translateX(11px)}

/* ---- Fill concentration bar ---- */
.fill-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);padding:8px 12px;border-top:1px solid var(--border);background:var(--bg-surface)}
.fill-seg{height:6px;border-radius:2px}