:root{
  --bg: oklch(98.4% 0.004 80);
  --bg-soft: oklch(96.5% 0.005 80);
  --surface: #ffffff;
  --surface-2: oklch(98% 0.004 80);
  --border: oklch(91% 0.006 80);
  --border-strong: oklch(86% 0.008 80);
  --fg: oklch(22% 0.012 260);
  --fg-muted: oklch(48% 0.012 260);
  --fg-subtle: oklch(62% 0.01 260);
  --accent: oklch(48% 0.02 260);
  --green: #15803d;
  --green-bg: #dcfce7;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --red: #b91c1c;
  --red-bg: #fee2e2;
  --blue: #1d4ed8;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --b-teal: #0d9488;
  --b-teal-soft: #ccfbf1;
  --b-red: #dc2626;
  --b-red-soft: #fee2e2;
  --b-slate: #475569;
  --b-slate-soft: #e2e8f0;
  --b-amber: #eab308;
  --b-amber-soft: #fef3c7;
}
html[data-theme="dark"]{
  --bg: oklch(16% 0.008 260);
  --bg-soft: oklch(19% 0.01 260);
  --surface: oklch(21% 0.01 260);
  --surface-2: oklch(24% 0.012 260);
  --border: oklch(28% 0.012 260);
  --border-strong: oklch(34% 0.014 260);
  --fg: oklch(95% 0.005 80);
  --fg-muted: oklch(70% 0.01 260);
  --fg-subtle: oklch(55% 0.012 260);
  --accent: oklch(80% 0.02 260);
  --green: #4ade80;
  --green-bg: rgba(34,197,94,.14);
  --amber: #fbbf24;
  --amber-bg: rgba(234,179,8,.14);
  --red: #f87171;
  --red-bg: rgba(239,68,68,.14);
  --blue: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 1px 2px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.25);
  --b-teal-soft: rgba(13,148,136,.18);
  --b-red-soft: rgba(220,38,38,.18);
  --b-slate-soft: rgba(100,116,139,.22);
  --b-amber-soft: rgba(234,179,8,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select{font-family:inherit;color:inherit}
a{color:inherit}

.topbar{position:sticky;top:0;z-index:20;background:color-mix(in oklab, var(--bg) 85%, transparent);backdrop-filter: saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1440px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:"Times New Roman",serif;font-weight:500;font-size:15px;position:relative;flex:none}
.brand-mark span{position:relative;z-index:1}
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg, transparent 48%, color-mix(in oklab, var(--bg) 60%, transparent) 49% 51%, transparent 52%)}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-title{font-weight:600;font-size:14px;letter-spacing:-0.005em}
.brand-sub{font-size:11px;color:var(--fg-subtle);letter-spacing:0.04em;text-transform:uppercase}

.tabs{display:flex;gap:2px;margin-left:20px;background:var(--bg-soft);padding:3px;border-radius:10px;border:1px solid var(--border)}
.tab{border:0;background:transparent;padding:7px 14px;border-radius:7px;font-size:13px;font-weight:500;color:var(--fg-muted);display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--fg)}
.tab.active{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
.tab svg{width:14px;height:14px;opacity:.85}

.top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.clock-time{font-variant-numeric:tabular-nums;font-weight:500;font-size:13px}
.clock-date{font-size:11px;color:var(--fg-subtle)}
.icon-btn{width:34px;height:34px;border-radius:9px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg-muted);transition:.15s}
.icon-btn:hover{color:var(--fg);border-color:var(--border-strong)}
.icon-btn svg{width:15px;height:15px}
.user-chip{position:relative;display:inline-block}
.user-chip-btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:12px;color:inherit;line-height:1.2;max-width:260px}
.user-chip-btn:hover{border-color:var(--border-strong)}
.user-chip-btn[aria-expanded="true"]{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.user-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#64748b,#334155);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}
.user-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:8px;z-index:25;display:flex;flex-direction:column;gap:6px}
.user-menu[hidden]{display:none}
.user-menu-email{padding:6px 8px 8px 8px;font-size:11px;color:var(--fg-subtle);word-break:break-all;border-bottom:1px solid var(--border)}
.user-menu-signout{display:flex;align-items:center;gap:8px;padding:8px 10px;background:transparent;border:0;border-radius:6px;font-size:12px;color:var(--fg);text-align:left;width:100%}
.user-menu-signout:hover{background:var(--bg-soft);color:var(--red)}
.user-menu-signout svg{width:14px;height:14px;opacity:.75}

.page{max-width:1440px;margin:0 auto;padding:28px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:24px}
.page-title{font-size:22px;font-weight:600;letter-spacing:-0.015em;margin:0 0 4px}
.page-sub{font-size:13px;color:var(--fg-muted);margin:0}

.range-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin-bottom:22px;box-shadow:var(--shadow-sm)}
.range-label{font-size:11px;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.06em;padding:0 4px 0 8px}
.date-input{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-variant-numeric:tabular-nums}
.date-input svg{width:13px;height:13px;color:var(--fg-subtle)}
.date-input input{border:0;background:transparent;outline:none;font-size:13px;padding:0;width:130px;font-variant-numeric:tabular-nums}
.date-sep{color:var(--fg-subtle);padding:0 2px}
.preset-group{display:flex;gap:4px;margin-left:auto}
.preset{border:1px solid var(--border);background:var(--surface-2);color:var(--fg-muted);padding:6px 11px;border-radius:8px;font-size:12px;font-weight:500}
.preset:hover{color:var(--fg);border-color:var(--border-strong)}
.preset.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.kpi{padding:18px 20px}
.kpi-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-muted);font-weight:500;margin-bottom:10px}
.kpi-label .dot{width:6px;height:6px;border-radius:50%;background:var(--fg-muted)}
.kpi-value{font-size:28px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-sub{margin-top:6px;font-size:12px;color:var(--fg-muted)}
.kpi-sub b{color:var(--fg);font-weight:600}
.progress{height:6px;background:var(--bg-soft);border-radius:999px;overflow:hidden;margin-top:12px}
.progress > span{display:block;height:100%;background:var(--fg);border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.pace-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;text-transform:uppercase}
.pace-green{background:var(--green-bg);color:var(--green)}
.pace-amber{background:var(--amber-bg);color:var(--amber)}
.pace-red{background:var(--red-bg);color:var(--red)}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-variant-numeric:tabular-nums}
.delta.up{color:var(--green)}
.delta.down{color:var(--red)}
.delta svg{width:10px;height:10px}

.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 14px}
.section-title{font-size:13px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}
.section-title .count{font-size:11px;color:var(--fg-subtle);font-weight:500;background:var(--bg-soft);border:1px solid var(--border);padding:2px 8px;border-radius:999px}
.section-meta{font-size:12px;color:var(--fg-subtle)}

.freshness-badge{font-size:11px;color:var(--fg-subtle);font-weight:500;background:var(--bg-soft);border:1px solid var(--border);padding:2px 8px;border-radius:999px;white-space:nowrap}
.freshness-badge:empty{display:none}
.freshness-badge.freshness-stale{color:#a3000a;background:#ffe9eb;border-color:#f5b3b9}

.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}

/* Snapshot view: one card per physical site (4 groups), each showing the
   combined net sales and per-bucket sub-lines. No source / category split. */
.snap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.snap{padding:18px 20px 16px 22px;position:relative}
.snap::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--accent-color,var(--fg-muted))}
.snap-head{margin-bottom:10px}
.snap-name{font-weight:600;font-size:14px;color:var(--accent-color,var(--fg));letter-spacing:-0.005em}
.snap-figure{margin-bottom:14px;font-variant-numeric:tabular-nums}
.snap-sales{font-size:28px;font-weight:600;letter-spacing:-0.02em;line-height:1.05}
.snap-sublist{padding-top:10px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:4px}
.snap-sub-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
.snap-sub-name{color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snap-sub-amt{color:var(--fg);font-weight:500;flex:none}

/* View tabs (Snapshot / Locations) sit in the section head. */
.view-tabs{display:flex;gap:2px;background:var(--bg-soft);padding:3px;border-radius:9px;border:1px solid var(--border)}
.view-tab{border:0;background:transparent;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:500;color:var(--fg-muted);display:inline-flex;align-items:center;gap:6px}
.view-tab:hover{color:var(--fg)}
.view-tab.active{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
.view-tab .count{font-size:10px;color:var(--fg-subtle);background:var(--bg-soft);border:1px solid var(--border);padding:1px 6px;border-radius:999px}
.view-tab.active .count{background:var(--bg-soft)}

/* Apply button in range bar: subtle but distinct so users notice it's
   actionable after editing custom dates. */
.btn-apply{padding:6px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:600;letter-spacing:.01em}
.btn-apply:hover{opacity:.9}
.loc{padding:18px 20px 16px 22px;position:relative}
.loc::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--accent-color,var(--fg-muted))}
.loc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.loc-name{font-weight:600;font-size:14px;color:var(--accent-color,var(--fg));letter-spacing:-0.005em}
.loc-meta{font-size:11px;color:var(--fg-subtle);margin-top:2px;font-family:var(--mono)}
.loc-attain{font-size:11px;font-weight:600;color:var(--fg-muted);font-variant-numeric:tabular-nums;padding:3px 8px;background:var(--bg-soft);border-radius:6px;border:1px solid var(--border)}
.loc-figure{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;font-variant-numeric:tabular-nums}
.loc-sales{font-size:22px;font-weight:600;letter-spacing:-0.02em}
.loc-goal{font-size:12px;color:var(--fg-subtle)}
.loc-progress{height:5px;background:var(--bg-soft);border-radius:999px;overflow:hidden;margin-bottom:14px}
.loc-progress > span{display:block;height:100%;background:var(--accent-color,var(--fg));border-radius:999px;transition:width .5s}

.dayrow{display:flex;align-items:flex-end;gap:4px;height:72px;margin-bottom:6px}
.day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end;cursor:default}
.day[title]:hover .day-bar > span{opacity:0.85}
.day-bar{width:100%;background:var(--bg-soft);border-radius:4px 4px 0 0;min-height:2px;position:relative;overflow:hidden;transition:opacity .15s}
.day-bar > span{position:absolute;inset:auto 0 0 0;background:color-mix(in oklab, var(--accent-color,var(--fg)) 75%, transparent);border-radius:3px 3px 0 0}
.day.today .day-bar > span{background:var(--accent-color,var(--fg))}
.day.future .day-bar{background:transparent;border:1px dashed var(--border-strong)}
.day.future .day-bar > span{display:none}
.daylabels{display:flex;gap:3px;margin-bottom:14px}
.daylabels > span{flex:1;text-align:center;font-size:10px;color:var(--fg-subtle);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase}
.daylabels > span.today{color:var(--accent-color,var(--fg));font-weight:600}

.pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11px;background:var(--bg-soft);border:1px solid var(--border);color:var(--fg-muted);font-variant-numeric:tabular-nums}
.pill b{color:var(--fg);font-weight:600}
.pill .pk{color:var(--fg-subtle);font-size:10px;text-transform:uppercase;letter-spacing:.04em}

.loc-foot{padding-top:12px;border-top:1px dashed var(--border)}
.cat-row{display:grid;grid-template-columns:1fr 52px 70px 72px;align-items:center;gap:8px;padding:3px 0;font-size:11.5px;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.cat-row .cat-name{display:flex;align-items:center;gap:6px;color:var(--fg-muted);min-width:0}
.cat-row .cat-name::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--cat-color,var(--fg-muted));flex:none}
.cat-row .cat-pct{text-align:right;font-weight:600;color:var(--fg)}
.cat-row .cat-amt{text-align:right;color:var(--fg-muted)}
.cat-row .cat-slot{display:flex;justify-content:flex-end}
.cat-row .cat-dash{color:var(--fg-subtle)}
.risk-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 6px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;white-space:nowrap}
.risk-low{background:var(--green-bg);color:var(--green)}
.risk-mod{background:var(--amber-bg);color:var(--amber)}
.risk-high{background:rgba(234,88,12,.14);color:#c2410c}
html[data-theme="dark"] .risk-high{background:rgba(249,115,22,.18);color:#fb923c}
.risk-crit{background:var(--red-bg);color:var(--red)}
.cat-divider{height:1px;background:var(--border);margin:8px 0 6px}
.cat-ratio{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;margin-top:2px}
.cat-ratio .rl{color:var(--fg-muted)}
.cat-ratio .rv{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;color:var(--fg)}
.cat-note{font-size:10.5px;color:var(--fg-subtle);margin-top:6px;font-style:italic}
.loc-flag{display:inline-flex;align-items:center;gap:6px;font-size:11px;background:var(--amber-bg);color:var(--amber);padding:3px 8px;border-radius:6px;font-weight:500;border:1px solid color-mix(in oklab, var(--amber) 30%, transparent)}
.loc-flag svg{width:11px;height:11px;flex:none}

/* KDS prep / expo grid (rendered by public/kds-render.js) */
.snap-prep{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.snap-prep .prep-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:baseline;font-size:11.5px;padding:2px 0}
.snap-prep .prep-row-head{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle);padding-bottom:2px}
.snap-prep .prep-row-head .prep-prep,.snap-prep .prep-row-head .prep-expo{text-align:right}
.snap-prep .prep-row-total{font-weight:600;color:var(--fg);border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:2px}
.snap-prep .prep-label{color:var(--fg-muted)}
.snap-prep .prep-prep,.snap-prep .prep-expo{text-align:right;color:var(--fg-muted)}
.snap-prep .prep-row-total .prep-prep,.snap-prep .prep-row-total .prep-expo{color:var(--fg)}
.snap-prep .prep-cell-count{color:var(--fg-subtle);font-size:10.5px}
.snap-prep .prep-cell.empty{color:var(--fg-subtle)}
.snap-prep .prep-approx{font-size:9px;color:var(--fg-subtle);margin-left:3px;cursor:help}

.refresh-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--fg);font-weight:500;font-size:13px;transition:.15s}
.btn:hover{border-color:var(--border-strong)}
.btn-primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-primary:hover{opacity:.9}
.btn svg{width:13px;height:13px}
.btn.loading svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.log{flex:1;max-height:72px;overflow:auto;font-family:var(--mono);font-size:11px;color:var(--fg-muted);line-height:1.6}
.log-line{display:flex;gap:10px}
.log-ts{color:var(--fg-subtle);flex:none;width:68px}
.log-ok{color:var(--green)}
.log-warn{color:var(--amber)}
.log-err{color:var(--red)}

.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.chart-card{padding:18px 20px 20px}
.chart-card.full{grid-column:1/-1}
.chart-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.chart-title h3{margin:0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.chart-title .hint{font-size:11px;color:var(--fg-subtle)}
.chart-wrap{position:relative;height:260px}
.chart-wrap.tall{height:320px}

.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.metric{padding:14px 16px}
.metric-label{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.metric-value{font-size:20px;font-weight:600;letter-spacing:-0.015em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.metric-sub{font-size:11px;color:var(--fg-subtle);margin-top:4px}

.heat{width:100%;border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums}
.heat th,.heat td{padding:0;font-size:11px;text-align:center}
.heat th{font-weight:500;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.05em;font-size:10px;padding-bottom:6px}
.heat th.loc{text-align:left;width:180px;padding-left:4px;color:var(--fg-muted)}
.heat td.loc{text-align:left;padding-left:4px;color:var(--fg);font-weight:500;font-family:var(--sans);font-size:12px}
.heat td.cell{padding:9px 4px;border-radius:5px;font-family:var(--mono);font-size:11px;color:var(--fg);background: color-mix(in oklab, var(--fg) calc(var(--h) * 1%), var(--bg-soft))}
html[data-theme="dark"] .heat td.cell{background: color-mix(in oklab, var(--fg) calc(var(--h) * 1%), var(--surface-2))}

.multi{position:relative}
.multi-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);font-size:12px;font-weight:500}
.multi-btn svg{width:11px;height:11px;color:var(--fg-subtle)}
.multi-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);padding:6px;min-width:240px;display:none}
.multi.open .multi-pop{display:block}
.multi-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12.5px}
.multi-item:hover{background:var(--bg-soft)}
.multi-item input{accent-color:var(--fg)}
.multi-item .sw{width:8px;height:8px;border-radius:2px;background:var(--accent-color,var(--fg-muted))}

.settings-grid{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}
.settings-nav{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px}
.settings-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:13px;color:var(--fg-muted);text-decoration:none}
.settings-nav a:hover{background:var(--bg-soft);color:var(--fg)}
.settings-nav a.active{background:var(--bg-soft);color:var(--fg);font-weight:500}
.settings-nav a .num{font-family:var(--mono);font-size:11px;color:var(--fg-subtle);margin-left:auto}
.settings-section{scroll-margin-top:84px;margin-bottom:28px}
.settings-section .card{padding:0}
.section-header{padding:18px 22px;border-bottom:1px solid var(--border)}
.section-header h2{margin:0 0 4px;font-size:15px;font-weight:600}
.section-header p{margin:0;font-size:12.5px;color:var(--fg-muted)}
.section-body{padding:18px 22px}

.field-row{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:14px 0;border-bottom:1px solid var(--border)}
.field-row:last-child{border-bottom:0;padding-bottom:0}
.field-row:first-child{padding-top:0}
.field-label{font-size:13px;font-weight:500}
.field-hint{font-size:12px;color:var(--fg-muted);margin-top:3px}
.field-control input[type="number"],.field-control input[type="text"],.field-control select{padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-size:13px;width:200px;font-variant-numeric:tabular-nums;outline:none}
.field-control input:focus,.field-control select:focus{border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in oklab, var(--fg) 10%, transparent)}
.field-control.readonly .ro{padding:7px 11px;border:1px dashed var(--border);border-radius:8px;background:var(--bg-soft);font-family:var(--mono);font-size:12px;color:var(--fg-muted);display:inline-block}
.input-money,.input-pct{position:relative;display:inline-block}
.input-money::before{content:"$";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--fg-subtle);font-size:13px;pointer-events:none}
.input-money input{padding-left:22px}
.input-pct::after{content:"%";position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--fg-subtle);font-size:13px;pointer-events:none}
.input-pct input{padding-right:26px;width:100px}

.loc-settings{display:grid;grid-template-columns:1fr;gap:0}
.loc-row{display:grid;grid-template-columns: 26px minmax(180px,1.3fr) 70px 160px 170px 170px 22px;gap:16px;align-items:center;padding:14px 18px;border-top:1px solid var(--border);position:relative}
.loc-row:first-child{border-top:0}
.loc-row.head{padding:10px 18px;background:var(--bg-soft);border-top:0;border-bottom:1px solid var(--border);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-subtle);font-weight:600}
.loc-row .stripe{width:3px;height:26px;border-radius:2px;background:var(--accent-color,var(--fg-muted))}
.loc-row .nm{font-weight:500;font-size:13.5px;color:var(--fg);display:flex;flex-direction:column;gap:3px}
.loc-row .nm .nm-meta{font-family:var(--mono);font-size:10.5px;color:var(--fg-subtle);font-weight:400}
.loc-row .sq{font-family:var(--mono);font-size:11px;color:var(--fg-subtle)}

.toggle{position:relative;display:inline-block;width:36px;height:20px}
.toggle input{opacity:0;width:0;height:0}
.toggle .slide{position:absolute;inset:0;background:var(--border-strong);border-radius:999px;transition:.2s;cursor:pointer}
.toggle .slide::before{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input:checked + .slide{background:var(--green)}
.toggle input:checked + .slide::before{transform:translateX(16px)}

.info{width:16px;height:16px;border-radius:50%;background:var(--bg-soft);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--fg-subtle);font-size:10px;font-weight:600;cursor:help;position:relative}
.info:hover{color:var(--fg);border-color:var(--border-strong)}
.info .tip{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);width:220px;padding:8px 10px;background:var(--fg);color:var(--bg);border-radius:6px;font-size:11px;font-weight:400;line-height:1.4;opacity:0;pointer-events:none;transition:.15s;z-index:10}
.info .tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:4px solid transparent;border-left-color:var(--fg)}
.info:hover .tip{opacity:1}

.settings-foot{position:sticky;bottom:0;background:color-mix(in oklab, var(--bg) 92%, transparent);backdrop-filter:blur(6px);border-top:1px solid var(--border);margin:0 -28px -28px;padding:14px 28px;display:flex;align-items:center;gap:16px;z-index:10}
.goal-total{font-size:13px;color:var(--fg-muted)}
.goal-total b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.goal-warn{color:var(--amber);font-size:12px;margin-left:8px;display:none}
.goal-warn.show{display:inline}

.toast{position:fixed;bottom:24px;right:24px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px 10px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;box-shadow:0 10px 24px rgba(0,0,0,.15);transform:translateY(10px);opacity:0;transition:.25s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast svg{width:15px;height:15px}

.hidden{display:none !important}
.loading-shimmer{display:inline-block;width:80px;height:14px;background:linear-gradient(90deg,var(--bg-soft) 25%,var(--border) 50%,var(--bg-soft) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:4px;vertical-align:middle}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.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}

.btn[disabled],.btn:disabled,.preset[disabled],.preset:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

.skeleton-chart{width:100%;height:260px;border-radius:8px;background:linear-gradient(90deg,var(--bg-soft) 25%,var(--border) 50%,var(--bg-soft) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.skeleton-chart.tall{height:320px}
.chart-wrap .skeleton-chart{position:absolute;inset:0;height:auto;border-radius:8px}
.skeleton-heatmap{width:100%;display:flex;flex-direction:column;gap:6px;padding:4px 0}
.skeleton-heatmap-row{height:26px;border-radius:5px;background:linear-gradient(90deg,var(--bg-soft) 25%,var(--border) 50%,var(--bg-soft) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   RESPONSIVE — tablet + mobile (desktop-first max-width cascade)
   - Desktop (>=1024)   : original layout; 1024–1280 gets light compression
   - Tablet  (641–1023) : KPI 2-col · Locations 2-col · Charts 2-col (.full spans both)
                          · Settings nav → horizontal strip · chart-wrap 240px
   - Mobile  (<=640)    : KPI 1-col · Locations stack · Charts stack · touch≥44px
                          · avatar-only user chip · scrollable tabs
                          · heatmap + settings table h-scroll · chart-wrap 220px
   All rules reuse existing :root / [data-theme="dark"] vars — no hardcoded colors.
   ============================================================ */

/* ---- 1024–1279: light compression so nothing clips before the real breakpoint ---- */
@media (max-width: 1279px){
  .topbar-inner{max-width:100%;padding:14px 20px;gap:14px}
  .page{padding:24px 20px}
  .tabs{margin-left:8px}
}

/* =====================  TABLET : <=1023  ===================== */
@media (max-width: 1023px){
  .topbar-inner{padding:12px 18px;gap:12px;flex-wrap:wrap}
  .brand-sub{display:none}
  .tabs{order:3;width:100%;margin-left:0;margin-top:4px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;white-space:nowrap}
  .top-right{gap:10px}
  .clock{display:none}
  .user-chip-btn{max-width:200px}
  .user-chip-label{max-width:140px}

  .page{padding:22px 18px}
  .page-head{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:18px}

  /* KPI: 4 → 2 */
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:14px}

  /* Locations: 3 → 2 · Snapshot: 4 → 2 */
  .loc-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .snap-grid{grid-template-columns:repeat(2,1fr);gap:14px}

  /* Charts: stay 2-col (.chart-card.full already spans 1/-1); shorter */
  .chart-grid{gap:14px;margin-bottom:14px}
  .chart-wrap{height:240px}
  .chart-wrap.tall{height:280px}
  .skeleton-chart{height:240px}
  .skeleton-chart.tall{height:280px}

  .metric-row{gap:10px}
  .metric{padding:12px 14px}
  .metric-value{font-size:18px}

  /* Settings: left rail nav → horizontal strip above section.
     minmax(0,1fr) on grid tracks prevents min-content of .loc-row[min-width:900px]
     from blowing out the whole page width. */
  .settings-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .settings-section{min-width:0}
  .settings-nav{position:static;flex-direction:row;gap:4px;overflow-x:auto;padding-bottom:4px;border-bottom:1px solid var(--border);margin-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav a{flex:none;padding:8px 14px;border-radius:8px;white-space:nowrap}
  .settings-nav a .num{display:none}

  .field-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 0}

  /* Per-location settings table: keep grid rows, horizontal-scroll the block.
     min-width:0 lets the scroll container shrink below its min-content child. */
  .loc-settings{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .loc-row{min-width:900px}

  .settings-foot{flex-wrap:wrap;gap:12px;padding:14px 18px;margin:0 -18px -22px}

  .refresh-bar{flex-wrap:wrap}
  .log{flex:1 1 100%;max-height:60px}

  .range-bar{gap:8px}
  .preset-group{margin-left:0}
}

/* =====================  MOBILE : <=640  ===================== */
@media (max-width: 640px){
  html,body{font-size:13.5px}

  .topbar{border-bottom:1px solid var(--border)}
  .topbar-inner{padding:10px 14px;gap:10px;flex-wrap:wrap}
  .brand{gap:10px;flex:1 1 auto;min-width:0}
  .brand-mark{width:32px;height:32px;border-radius:8px;font-size:14px}
  .brand-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .brand-sub{display:none}

  /* Touch ≥44px for interactive chrome */
  .top-right{gap:6px;flex:none}
  .icon-btn{width:44px;height:44px;border-radius:10px}
  .icon-btn svg{width:17px;height:17px}

  /* Avatar-only user chip; dropdown stays functional */
  .user-chip-btn{max-width:44px;width:44px;height:44px;padding:0;border-radius:50%;justify-content:center;gap:0}
  .user-chip-label{display:none}
  .avatar{width:30px;height:30px;font-size:12px}
  .user-menu{min-width:240px;right:0;left:auto}

  /* Tab strip: scroll-snap, full width, ≥38px touch (active visual unchanged) */
  .tabs{order:3;width:100%;margin-left:0;margin-top:2px;padding:3px;gap:2px;border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;scroll-snap-type:x mandatory}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:1 1 0;min-width:max-content;min-height:44px;padding:10px 14px;font-size:12.5px;justify-content:center;white-space:nowrap;scroll-snap-align:start}
  .tab svg{width:13px;height:13px}

  .page{padding:16px 14px}
  .page-head{margin-bottom:14px}
  .page-title{font-size:19px}
  .page-sub{font-size:12px}

  .range-bar{padding:10px;gap:8px;border-radius:10px}
  .range-label{padding:0 2px}
  .date-input{flex:1 1 auto;min-width:0}
  .date-input input{width:100%;min-width:0;font-size:13px}
  .date-sep{display:none}
  .preset-group{margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
  .preset-group::-webkit-scrollbar{display:none}
  .preset{min-height:44px;padding:10px 14px;font-size:12px;white-space:nowrap;flex:none}

  .kpi-grid{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
  .kpi{padding:14px 16px}
  .kpi-value{font-size:24px}

  .loc-grid{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
  .snap-grid{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
  .loc{padding:16px 16px 14px 18px}
  .snap{padding:16px 16px 14px 18px}
  .loc-sales{font-size:20px}

  .section-head{flex-direction:column;align-items:flex-start;gap:2px;margin:4px 0 10px}

  .refresh-bar{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .refresh-bar .btn{min-height:44px;justify-content:center}
  .log{max-height:80px}

  .btn{min-height:44px;padding:10px 14px;font-size:13px}

  /* Charts: stack, shorter. .chart-wrap height defines Chart.js canvas bounds. */
  .chart-grid{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  .chart-card{padding:14px 14px 16px}
  .chart-title{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:10px}
  .chart-title .hint{font-size:10.5px}
  .chart-wrap{height:220px}
  .chart-wrap.tall{height:260px}
  .skeleton-chart{height:220px}
  .skeleton-chart.tall{height:260px}

  .metric-row{grid-template-columns:1fr;gap:8px;margin-bottom:12px}

  .multi{width:100%}
  .multi-btn{width:100%;justify-content:space-between;min-height:44px}
  .multi-pop{left:0;right:0;min-width:0}

  /* Heatmap: h-scroll inside card, right-edge mask fade as scroll hint (no new DOM) */
  #heatmap-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px;position:relative;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
  .heat{min-width:640px}
  .heat th.loc,.heat td.loc{width:140px;font-size:11.5px}

  .settings-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .settings-section{min-width:0}
  .settings-nav{position:static;flex-direction:row;gap:4px;overflow-x:auto;padding:4px 2px;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft);-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:8px}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav a{flex:none;padding:10px 14px;white-space:nowrap;min-height:44px;font-size:12.5px}
  .settings-nav a .num{display:none}

  .section-header{padding:14px 16px}
  .section-body{padding:14px 16px;min-width:0}
  .field-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0}
  .field-control input[type="number"],
  .field-control input[type="text"],
  .field-control select{width:100%;max-width:320px;min-height:44px}
  .input-pct input{width:140px}

  /* Per-location goals table — horizontal scroll, rows preserved.
     min-width:0 on the scroller lets it shrink below .loc-row's min-content. */
  .loc-settings{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0;border-radius:0 0 var(--radius) var(--radius)}
  .loc-row{min-width:860px;padding:12px 14px}
  .loc-row.head{padding:10px 14px}

  .settings-foot{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px;margin:0 -14px -16px}
  .settings-foot > div:last-child{justify-content:stretch}
  .settings-foot .btn{flex:1;justify-content:center}

  .toast{left:14px;right:14px;bottom:14px;justify-content:center}
}

/* =====================  VERY NARROW : <=380  ===================== */
@media (max-width: 380px){
  .topbar-inner{padding:8px 12px}
  .page{padding:14px 12px}
  .brand-title{font-size:12.5px}
  .kpi-value{font-size:22px}
  .loc-sales{font-size:18px}
  .page-title{font-size:17px}
  .tab{padding:10px 10px;font-size:12px}
}

@media (prefers-reduced-motion: reduce){
  .loading-shimmer,.skeleton-chart,.skeleton-heatmap-row{animation:none}
  .progress > span,.loc-progress > span{transition:none}
}

/* ============================================================
   Inline-style removal (CSP 'unsafe-inline' refactor)
   Every rule below replaces an inline style="" attribute that
   was previously in index.html or an app.js innerHTML template.
   Dynamic values (accent colours, bar widths, heatmap intensity)
   are driven by CSS custom properties set via
   el.style.setProperty(...), which bypasses style-src-attr.
   ============================================================ */

/* Static overrides previously inline in index.html */
#analytics-presets{margin-left:0}
#analytics-refresh{margin-left:auto}
.range-label--indent{margin-left:12px}
.tier-hint{font-weight:600}
.tier-hint--low{color:var(--green)}
.tier-hint--mod{color:var(--amber)}
.tier-hint--high{color:#c2410c}
.tier-hint--crit{color:var(--red)}
#keys-status{display:flex;flex-wrap:wrap;gap:6px}
.settings-spacer-40{height:40px}
.settings-foot-actions{margin-left:auto;display:flex;gap:8px}
.cap-sub{font-weight:400;text-transform:none;letter-spacing:0;font-size:10px;color:var(--fg-subtle);margin-top:2px}

/* Dynamic bar widths — width set via --bar-w custom prop */
.progress > span{width:var(--bar-w, 0%)}
.loc-progress > span{width:var(--bar-w, 0%)}
.progress--pace > span{background:var(--green)}

/* Day-row bar heights — set via --day-h */
.day-bar > span{height:var(--day-h, 0%)}

/* KPI value containing a badge — flex row (was inline) */
.kpi-value--row{display:flex;align-items:baseline;gap:10px}
.kpi-sub--spaced{margin-top:4px}

/* Category row colour variants (was inline --cat-color) */
.cat-row--3p{--cat-color:#dc2626}
.cat-row--own{--cat-color:#0d9488}
.cat-row--instore{--cat-color:#475569}
.cat-row--invoices{--cat-color:#7c3aed}

/* Ratio sublabel */
.ratio-sub{color:var(--fg-subtle)}

/* Loc flag wrappers (was inline margin) */
.loc-flag-wrap{margin-top:10px}
.loc-flag-inline{margin-top:4px;align-self:flex-start}

/* Analytics WoW delta badge (was inline font-size) */
.delta--sm{font-size:12px}

/* Channel 3P share trend hint (was inline colour) */
.trend-up{color:var(--green)}
.trend-down{color:var(--red)}
.trend-neutral{color:var(--fg-subtle)}

/* Key-status pills */
.pill--ok{color:var(--green)}
.pill--missing{color:var(--red)}
.pill--muted{color:var(--fg-subtle)}

/* Heatmap avg column bold */
.heat td.cell--avg{font-weight:600}

/* ===== Profitability tab (chunk 8) ===== */
.empty-pill{display:inline-flex;padding:3px 9px;background:var(--bg-soft);border:1px solid var(--border);color:var(--fg-muted);font-size:11px;border-radius:999px;margin-top:8px}
.banner-warn{padding:10px 14px;margin:0 0 16px 0;background:var(--amber-bg);border:1px solid var(--amber);border-radius:8px;color:var(--fg);font-size:13px;display:flex;gap:8px;align-items:center}
.loc-sub{font-size:12px;color:var(--fg-muted);font-variant-numeric:tabular-nums;margin-top:4px}
.prof-pnl-line{font-size:12px;color:var(--fg-muted);margin:-12px 0 18px 0;font-variant-numeric:tabular-nums}
#prof-kpi-grid{grid-template-columns:repeat(5,1fr)}

/* ===== Labour tab (chunk 1 — 7shifts integration) ===== */
.lab-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:13px}
.lab-table th,.lab-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.lab-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted)}
.lab-table td.num,.lab-table th.num{text-align:right}
.lab-table td.label{font-weight:600;color:var(--fg-muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.lab-table tfoot td{font-weight:600;background:var(--bg-soft);border-top:2px solid var(--border-strong);border-bottom:none}
/* Training breakdown row nested under its location — muted + indented, and
   its cost is already counted in the location's Total above (informational). */
.lab-table tr.lab-subrow td{color:var(--fg-muted);font-size:12px;border-bottom:none}
.lab-table tr.lab-subrow td:first-child{padding-left:28px}
.lab-glance-card{padding:0;overflow:hidden}
.cap-pill{display:inline-flex;align-items:center;padding:3px 9px;font-size:11px;font-weight:600;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.cap-pill--warn{color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber)}
.cap-pill--reached{color:var(--red);background:var(--red-bg);border:1px solid var(--red)}
.wage-missing{display:inline-block;margin-left:4px;color:var(--amber);cursor:help}
.lab-train-row{font-style:italic;color:var(--fg-muted)}
.range-display{font-size:14px;color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.hint-pad{margin-left:10px}
.lab-controls{display:inline-flex;gap:12px;align-items:center}
.lab-control-group{display:inline-flex;align-items:center;gap:6px}
.lab-control-label{font-size:12px;color:var(--fg-muted)}
.lab-select{padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--fg);font-size:12px}
#lab-kpis{grid-template-columns:repeat(4,1fr)}

/* Settings: Labour & Payroll group headers + toggle + numeric input */
.settings-group-h{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);margin:18px 0 8px 0;padding-bottom:6px;border-bottom:1px solid var(--border)}
.settings-group-h:first-child{margin-top:0}
.settings-group-sub{font-weight:400;text-transform:none;letter-spacing:0;color:var(--fg-subtle);margin-left:8px;font-size:11px}
.input-num{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:6px;background:var(--surface);padding:0 8px;width:120px}
.input-num input{border:none;outline:none;background:transparent;width:100%;padding:6px 0;font-variant-numeric:tabular-nums;color:var(--fg)}
.toggle{position:relative;display:inline-block;width:38px;height:22px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:22px;transition:background .15s}
.toggle-slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;top:3px;background:var(--surface);border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.toggle input:checked + .toggle-slider{background:var(--green)}
.toggle input:checked + .toggle-slider::before{transform:translateX(16px)}

/* Chunk 3 — admin-only visibility gate.
 * Hidden by default; revealed only when <body data-admin="true"> is set
 * (logged-in user is in KANGSAN_ADMIN_EMAILS). */
.admin-only{display:none}
body[data-admin="true"] .admin-only{display:revert}

/* Chunk 3 — modal scaffolding (reusable). One global modal is wired in
 * index.html; future modals can reuse these classes. */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);cursor:pointer}
.modal-card{position:relative;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 48px rgba(0,0,0,.28);width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 64px);overflow:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal-title{margin:0;font-size:16px;font-weight:600}
.modal-close{background:none;border:none;font-size:22px;line-height:1;color:var(--fg-muted);cursor:pointer;padding:0 6px}
.modal-close:hover{color:var(--fg)}
.modal-body{padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.modal-body select,.modal-body input[type="number"]{padding:6px 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--fg);font-size:13px;min-width:140px}
.modal-error{color:var(--red);background:var(--red-bg);border:1px solid var(--red);border-radius:6px;padding:8px 10px;font-size:13px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--border);padding-top:14px;margin-top:4px}

/* Chunk 3 — Settings sublocation-display row. */
.lab-subloc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.lab-subloc-row:last-child{border-bottom:none}
.lab-subloc-row select{padding:6px 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--fg);font-size:13px;min-width:200px}
.lab-subloc-row .field-control{display:flex;gap:8px;align-items:center}