:root {
  --bg: #ffffff;
  --surface: #f5f5f9;
  --card: #ffffff;
  --card-hover: #f0f0f7;
  --border: #e2e2ec;
  --border-strong: #cacad4;
  --ink: #0d0d18;
  --muted: #5c6480;
  --muted-strong: #3a3f58;
  /* Brand — Mild.mn cosmetics rose */
  --brand: #c8185c;
  --brand-dark: #9e1248;
  --brand-muted: rgba(200,24,92,.10);
  /* Status */
  --green: #10b981;
  --green-muted: rgba(16,185,129,.10);
  --orange: #f97316;
  --orange-muted: rgba(249,115,22,.10);
  --teal: #0d9488;
  --teal-muted: rgba(13,148,136,.10);
  --red: #ef4444;
  --red-muted: rgba(239,68,68,.10);
  --yellow: #f59e0b;
  --yellow-muted: rgba(245,158,11,.10);
  --shadow: 0 2px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  /* Legacy aliases */
  --paper: var(--bg);
  --white: var(--card);
  --line: var(--border);
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
}

button, input, select { font: inherit; }
button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
button:hover { border-color: var(--brand); background: var(--surface); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(200,24,92,.15); }
button:disabled { cursor: not-allowed; opacity: .4; }
input, select {
  width: 100%;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
input::placeholder { color: var(--muted); }
select option { background: var(--surface); color: var(--ink); }
/* Remove browser up/down controls on number fields */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 900;
}

/* ── Auth ─────────────────────────────────────── */
.hidden { display: none !important; }
.auth-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(200,24,92,.08), transparent 28rem),
    radial-gradient(circle at 88% 88%, rgba(13,148,136,.06), transparent 28rem),
    var(--bg);
}
.auth-card {
  width: min(420px, 100%);
  padding: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.auth-card h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.8rem); line-height: .9; letter-spacing: -.06em; color: var(--ink); }
.auth-card p { color: var(--muted); margin: 8px 0 0; }
#authForm { display: grid; gap: 12px; margin-top: 22px; }
#authForm button { background: var(--brand); border-color: var(--brand); color: #fff; }
#authForm button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.error-text { color: var(--red); font-weight: 900; margin: 0; }

/* ── Sidebar ──────────────────────────────────── */
.side { display: none; }

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand);
  font-size: 1.05rem;
  font-weight: 950;
  color: #fff;
  letter-spacing: -.02em;
}
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { color: var(--ink); font-size: .95rem; font-weight: 950; letter-spacing: .04em; }
.brand-text small { color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

nav { display: grid; gap: 3px; margin-top: 28px; }
nav button {
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  color: var(--muted-strong);
  background: transparent;
  border-color: transparent;
  text-align: left;
  border-radius: 8px;
  font-size: .86rem;
  padding: 0 12px;
}
nav button:hover { color: var(--ink); background: rgba(0,0,0,.05); border-color: transparent; transform: none; box-shadow: none; }
nav button.active { color: #fff; background: var(--brand); border-color: var(--brand); }








/* ── Main content ─────────────────────────────── */
.main { margin-left: 0; padding: 16px clamp(16px, 3vw, 40px) 64px; max-width: 1520px; width: 100%; }

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
h1 { max-width: 940px; margin: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: .92; letter-spacing: -.04em; }
h2 { margin: 0; font-size: 1.05rem; }
h3 { margin: 0; font-size: .9rem; }
.lead { max-width: 780px; color: var(--muted); line-height: 1.6; font-size: .85rem; }

/* Cards + panels */
.server-card, .panel, .metric-grid article {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.panel:hover, .metric-grid article:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  transform: translateY(-2px);
}




.company-pulse { display: grid; gap: 5px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.company-pulse div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.company-pulse div span { color: var(--muted); font-size: .76rem; }
.company-pulse div strong { margin: 0; font-size: .9rem; color: var(--ink); }



.branch-pulse { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 3px; }
.branch-pulse:empty { display: none; }







/* Traffic-light KPI cards */
.kpi-green { border-color: var(--green) !important; box-shadow: 0 0 0 1px var(--green), 0 4px 16px rgba(16,185,129,.15) !important; }
.kpi-amber { border-color: var(--yellow) !important; box-shadow: 0 0 0 1px var(--yellow), 0 4px 16px rgba(245,158,11,.15) !important; }
.kpi-red { border-color: var(--red) !important; box-shadow: 0 0 0 1px var(--red), 0 4px 16px rgba(239,68,68,.15) !important; }

/* Freshness banner */
.freshness-bar { padding: 7px 14px; border-radius: 9px; font-size: .78rem; font-weight: 900; margin: 10px 0 4px; }
.freshness-ok { background: var(--green-muted); color: var(--green); border: 1px solid rgba(16,185,129,.25); }
.freshness-warn { background: var(--yellow-muted); color: var(--yellow); border: 1px solid rgba(245,158,11,.25); }
.freshness-stale { background: var(--red-muted); color: var(--red); border: 1px solid rgba(239,68,68,.25); }

/* ── Filters — NOT sticky, 3 rows ────────────── */
.filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Date row */
.filter-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.date-inline-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.date-lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .68rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.date-lbl input[type="date"] {
  width: 130px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: .8rem;
  border-radius: 8px;
}
.date-arrow {
  color: var(--muted);
  font-weight: 900;
  font-size: .9rem;
  padding: 0 2px;
  margin-top: 14px;
}
.benchmark-inline select {
  min-height: 32px;
  padding: 4px 8px;
  font-size: .78rem;
  border-radius: 8px;
  min-width: 140px;
}
.compare-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--brand-muted);
  border: 1px solid var(--brand);
  border-radius: 8px;
}

/* Multiselect row */
.filter-ms-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Quick filter row */
.filter-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-end;
}
.filter-quick-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .68rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter-quick-row select {
  min-height: 30px;
  padding: 3px 8px;
  font-size: .78rem;
  border-radius: 7px;
  min-width: 100px;
}
.filter-quick-row .search-label { flex: 1 1 200px; }
.filter-quick-row .search-label input { min-height: 30px; font-size: .78rem; }
.ms-hidden { display: none !important; }
.search-label { flex: 1; }

.filters.scrolled { box-shadow: none; }

/* ── Active filter chips ──────────────────── */
.active-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
  margin-bottom: 8px;
  transition: min-height .2s;
}
.active-chips-bar:empty { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand-muted);
  color: var(--ink);
  font-size: .73rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  animation: chipIn .2s ease-out;
}
.filter-chip:hover { background: rgba(200,24,92,.25); }
.filter-chip .chip-x { color: var(--brand); font-weight: 950; font-size: .8rem; }
@keyframes chipIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }




/* ── Metric grid ──────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
}
.metric-grid article { min-height: 110px; padding: 14px 16px; }
.metric-grid span { color: var(--muted); font-size: .68rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.metric-grid strong { display: block; margin-top: 12px; font-size: clamp(1.1rem, 2vw, 1.75rem); letter-spacing: -.04em; color: var(--ink); }
/* Target gap / achievement wrap their value in a coloured <span>; the label rule
   above (.metric-grid span) was shrinking it to caption size. Keep value spans
   inside the big number at the number's own size. */
.metric-grid strong span { font-size: inherit; letter-spacing: inherit; text-transform: none; }
.metric-grid small { display: block; margin-top: 5px; color: var(--muted); font-size: .75rem; }

/* Transaction-feed coverage note. The receipt file is uploaded separately from
   the sales file, so it can lag behind — this says how much of the selected
   range it actually covers rather than letting a partial count read as a drop
   in footfall. Amber when days are missing, quiet when the range is complete. */
.kpi-coverage { font-weight: 800; font-size: .7rem; }
.kpi-coverage.cov-partial { color: var(--yellow); }
.kpi-coverage.cov-complete { color: var(--muted); font-weight: 600; }
.metric-grid article.kpi-stale { border-color: var(--yellow) !important; box-shadow: 0 0 0 1px var(--yellow), 0 4px 16px rgba(245,158,11,.15) !important; }

.delta-positive { color: var(--green) !important; font-weight: 950; }
.delta-negative { color: var(--red) !important; font-weight: 950; }
.delta-neutral { color: var(--muted) !important; font-weight: 900; }

/* ── Insight grid ─────────────────────────────── */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
  min-height: 96px; /* reserve space so first paint doesn't shift when insights load */
}
.insight-grid article {
  position: relative;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  border-left: 3px solid var(--border-strong);
}
.insight-grid article strong { color: var(--ink); font-size: .9rem; display: block; }
.insight-grid p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; font-size: .82rem; }

/* Tone accents for management insights */
.insight-card.insight-positive { border-left-color: var(--green); }
.insight-card.insight-negative { border-left-color: var(--red); }
.insight-card.insight-warning  { border-left-color: var(--yellow); }
.insight-card.insight-neutral  { border-left-color: var(--border-strong); }
.insight-card.insight-positive strong { color: var(--green); }
.insight-card.insight-negative strong { color: var(--red); }
.insight-card.insight-warning  strong { color: var(--yellow); }

/* Click-through affordance */
.insight-card.insight-clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.insight-card.insight-clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.insight-card.insight-clickable:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.insight-drill-hint {
  display: inline-block;
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  opacity: 0;
  transition: opacity .12s ease;
}
.insight-card.insight-clickable:hover .insight-drill-hint,
.insight-card.insight-clickable:focus-visible .insight-drill-hint { opacity: 1; }

/* ── Tabs ─────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.grid { display: grid; gap: 14px; margin-top: 14px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { margin-top: 14px; overflow: hidden; }
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--border);
}

/* ── Charts ───────────────────────────────────── */
.chart-switch, .chart-type-group { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.chart-switch button, .chart-type-group button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: .73rem;
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--muted-strong);
}
.chart-switch button.active, .chart-type-group button.active {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}
/* Fixed height, scrolls internally: a horizontal bar chart with many bars grows
   its inner wrapper (all bars visible at full size) while the box itself stays a
   constant size, so filtering never collapses the chart or jumps the page. */
.chart-box { position: relative; height: 300px; min-height: 260px; padding: 10px 14px 16px; overflow-y: auto !important; overflow-x: hidden; }
/* Inner wrapper the canvas lives in; JS sets its height taller than the box for
   long horizontal charts. Defaults to filling the box (short charts, pie/column). */
.chart-canvas-scroll { position: relative; width: 100%; height: 100%; }
.chart-box canvas { position: relative; z-index: 2; display: block; width: 100% !important; height: 100% !important; pointer-events: auto; touch-action: manipulation; }
/* Thin scrollbar so the internal scroll is discoverable but unobtrusive */
.chart-box::-webkit-scrollbar { width: 9px; }
.chart-box::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
.chart-fallback {
  position: absolute;
  inset: 10px 14px 16px;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  pointer-events: none;
}
.chart-box.chart-ready .chart-fallback { display: none; }
.chart-fallback-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 18px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.chart-fallback-svg {
  width: 100%;
  height: calc(100% - 24px);
  min-height: 170px;
}
.chart-fallback-empty {
  display: grid;
  place-items: center;
  min-height: 170px;
  color: var(--muted);
  font-size: .82rem;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
}
.chart-fallback-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: flex-end;
}
.chart-fallback-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}
.chart-fallback-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

/* ── Skeleton loading ───────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, #eaeaf2 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 8px;
}

.skeleton-block { height: 100px; width: 100%; margin: 8px 0; }
.skeleton-row { height: 22px; width: 100%; margin: 6px 0; border-radius: 4px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Panel descriptions ───────────────── */
.panel-desc {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
  margin: 0 0 10px;
  padding: 8px 14px;
  border-left: 2px solid var(--border-strong);
}

/* ── Concentration metrics ────────────── */
.concentration-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
}
.conc-metric {
  flex: 1 1 100px;
  min-width: 100px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conc-metric span { color: var(--muted); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.conc-metric strong { font-size: 1rem; color: var(--ink); }
.conc-gini { font-size: 1.1rem; font-weight: 900; }
.conc-risk-low { color: var(--green); }
.conc-risk-moderate { color: var(--yellow); }
.conc-risk-high { color: var(--red); }
.concentration-insights {
  padding: 10px 14px;
}
.conc-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted-strong);
  margin: 0 0 6px;
}
.conc-action {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Pareto ───────────────────────────── */
.pareto-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 14px;
}
.pareto-card {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.pareto-card span { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.pareto-card strong { display: block; margin-top: 4px; font-size: 1.05rem; color: var(--ink); }
.pareto-top20 { border-color: var(--green); background: var(--green-muted); }
.pareto-top20 strong { color: var(--green); }
.pareto-middle { border-color: var(--yellow); background: var(--yellow-muted); }
.pareto-tail { border-color: var(--red); background: var(--red-muted); }
.basic-chart { display: grid; gap: 8px; padding: 4px; }
.basic-chart-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: 10px;
  align-items: center;
}
.basic-chart-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
}
.basic-chart-bars {
  display: grid;
  gap: 3px;
}
.basic-chart-bars span {
  display: block;
  min-height: 8px;
  border-radius: 999px;
}

/* ── Branch picker ────────────────────────────── */
.branch-picker {
  display: flex;
  gap: 6px;
  margin: 8px 14px 0;
  padding-bottom: 8px;
  overflow-x: auto;
}
.branch-picker button {
  display: grid;
  min-width: 140px;
  height: auto;
  min-height: 46px;
  justify-items: start;
  align-content: center;
  text-align: left;
  background: var(--surface);
  border-color: var(--border-strong);
  font-size: .8rem;
  padding: 8px 12px;
}
.branch-picker button.active { color: #fff; border-color: var(--brand); background: var(--brand); }
.branch-picker small { color: inherit; opacity: .72; font-size: .7rem; }

/* ── Tables ───────────────────────────────────── */
.table-shell { overflow: auto; padding: 6px 14px 16px; }
/* Toolbar: flex rather than a fixed grid so controls can be added without
   re-counting columns, and so it wraps instead of overflowing on narrow screens. */
.rank-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin: 0 0 10px;
}
.rank-controls .mode-group { flex: 1 1 240px; }
.rank-controls .rank-search { flex: 0 1 230px; min-width: 150px; }
.rank-controls .rank-count { margin-left: auto; }
.chart-count-sel {
  display: flex; align-items: center; gap: 5px;
  font-size: .73rem; color: var(--muted); font-weight: 800; white-space: nowrap;
}
.chart-count-sel select { width: auto; min-height: 28px; padding: 0 6px; font-size: .73rem; border-radius: 7px; }
.chart-count-sel small { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.mode-group { display: flex; flex-wrap: wrap; gap: 4px; }
.mode-group button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: .73rem;
  background: var(--surface);
  border-color: var(--border-strong);
}
.mode-group button.active { color: #fff; border-color: var(--brand); background: var(--brand); }
.rank-search { font-size: .73rem; }
.rank-count { color: var(--muted); font-size: .73rem; font-weight: 900; white-space: nowrap; align-self: center; }


/* ── Campaigns ─────────────────────────────────── */
/* Card grid so several concurrent campaigns are all visible at once */
.campaign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 0 14px 12px; }
.campaign-list-empty { grid-column: 1 / -1; padding: 14px; text-align: center; color: var(--muted); font-size: .84rem; border: 1px dashed var(--border-strong); border-radius: 11px; background: var(--surface); }





.cc-status { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: .64rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.cc-live { background: var(--green-muted); color: var(--green); }
.cc-soon { background: var(--teal-muted); color: var(--teal); }
.cc-done { background: var(--border); color: var(--muted-strong); }
.cc-off { background: var(--red-muted); color: var(--red); }


.cc-actions { display: flex; gap: 6px; margin-top: 2px; }
.cc-actions button { min-height: 28px; padding: 0 12px; font-size: .74rem; }

.cc-del-btn { flex: 0 0 auto; }
.campaign-form { padding: 4px 2px 2px; }
.cf-row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; align-items: flex-end; }
.cf-field { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cf-field input, .cf-field textarea { font-size: .82rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--ink); }
.cf-field textarea { width: 100%; min-height: 96px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; resize: vertical; }
.cf-grow { flex: 1 1 260px; }
.cf-hint { display: block; font-size: .66rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--muted); margin: 1px 0 3px; }
.cf-check { flex-direction: row; align-items: center; gap: 5px; }
.cf-check input { width: auto; }
.cf-actions { align-items: center; margin-top: 8px; margin-bottom: 0; }
.cf-spacer { flex: 1; }
.cf-count { font-size: .74rem; font-weight: 800; color: var(--muted); }
.campaign-view-bar { display: flex; align-items: center; gap: 10px; padding: 2px 14px 8px; }
.campaign-view-bar button { min-height: 30px; font-size: .76rem; }
.cs-target input {
  width: 100%; min-width: 104px; min-height: 26px; padding: 2px 6px;
  text-align: right; font-variant-numeric: tabular-nums; font-size: .76rem;
  border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink);
}
.cs-target input:hover { border-color: var(--border-strong); }
.cs-target input:focus { border-color: var(--brand); background: var(--card); outline: none; }
.cs-target input.cs-custom { border-color: var(--yellow); }
.campaign-summary { padding: 6px 14px 4px; min-height: 120px; }
.campaign-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.campaign-window { padding: 0 14px 8px; }
@media (max-width: 1400px) { .campaign-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .campaign-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Target year grid: entities down the rows, 12 months across ── */
.target-grid-wrap { margin: 4px 14px 14px; overflow: auto; max-height: 68vh; border: 1px solid var(--border); border-radius: 11px; }
.target-grid { border-collapse: separate; border-spacing: 0; font-size: .78rem; }
/* Entity name column frozen on the left, month header row frozen on top */
.target-grid th.tg-ent {
  position: sticky; left: 0; z-index: 3; min-width: 190px; max-width: 240px; text-align: left;
  background: var(--surface); border-right: 1px solid var(--border-strong);
  padding: 4px 10px; font-size: .76rem; text-transform: none; letter-spacing: 0;
  color: var(--ink); font-weight: 700;
}
.target-grid th.tg-ent span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-grid th.tg-ent small { display: block; font-weight: 500; color: var(--muted); font-size: .64rem; }
/* Seller grid: hire date + experience badge under the name */
.target-grid th.tg-ent-seller { min-width: 210px; }
/* ── Payment mix ─────────────────────────────────
   One stacked bar plus a keyed breakdown. Payment methods get their own hues,
   deliberately not the target good/warn/bad set — no payment method is a
   failure state. */
.pay-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2, rgba(0,0,0,.05)); margin-bottom: 12px; }
.pay-seg { display: block; height: 100%; }
.pay-card { background: #4f7fd4; }
.pay-cash { background: #3fa17a; }
.pay-loan { background: #c9803f; }
.pay-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }
.pay-key { display: inline-flex; align-items: center; }

.summary-row-list { display: flex; flex-direction: column; gap: 2px; }
.summary-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; }
.summary-row span { color: var(--ink); font-weight: 600; font-size: .84rem; }
.summary-row span small { color: var(--muted); font-weight: 500; margin-left: 5px; }
.summary-row strong { font-variant-numeric: tabular-nums; font-size: .95rem; }
.summary-row > small { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }

/* Traffic vs ticket bridge inside the drill-down diagnosis. */
.dg-traffic .dg-verdict { font-style: normal; font-weight: 700; color: var(--ink); }
.dg-warn-note { display: block; font-style: normal; color: var(--yellow); font-size: .74rem; font-weight: 600; }

/* Branch type column in the target grid — narrow, sticky-adjacent to the name
   column, and visually quieter than the money cells it sits beside. */
.target-grid th.tg-type, .target-grid td.tg-type { width: 130px; min-width: 110px; }
.tg-type-input {
  width: 100%; min-height: 26px; padding: 2px 6px;
  font-size: .72rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--ink);
}
.tg-type-input:focus { border-color: var(--brand); outline: none; }
.tg-type-input::placeholder { color: var(--muted); font-weight: 400; }

.tg-hire { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.tg-hire label { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tg-hire input[type="date"] { width: auto; min-height: 24px; padding: 1px 5px; font-size: .68rem; font-weight: 500; }

/* ── Experience badge (seller years worked) ─────── */
.exp-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 900; white-space: nowrap; letter-spacing: .01em; }
.exp-badge.exp-none { background: var(--border); color: var(--muted); }
.exp-badge.exp-new { background: var(--teal-muted); color: var(--teal); }
.exp-badge.exp-jr { background: rgba(59,130,246,.12); color: #3b82f6; }
.exp-badge.exp-mid { background: var(--yellow-muted); color: var(--yellow); }
.exp-badge.exp-sr { background: var(--green-muted); color: var(--green); }
.target-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.target-grid thead th.tg-ent { z-index: 4; }
.target-grid th.tg-mcol { min-width: 108px; text-align: right; padding: 6px 8px; font-size: .66rem; }
.target-grid td.tg-cell { padding: 2px 3px; }
.target-grid td.tg-cell input {
  width: 100%; min-width: 96px; min-height: 26px; padding: 2px 6px;
  text-align: right; font-variant-numeric: tabular-nums; font-size: .76rem;
  border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink);
}
.target-grid td.tg-cell input:hover { border-color: var(--border-strong); }
.target-grid td.tg-cell input:focus { border-color: var(--brand); background: var(--card); outline: none; }
.target-grid .tg-total {
  font-variant-numeric: tabular-nums; font-weight: 800; text-align: right;
  background: rgba(128,128,128,.05); white-space: nowrap; padding: 4px 10px;
}
.target-grid tfoot td, .target-grid tfoot th { position: sticky; bottom: 0; z-index: 2; background: var(--surface); border-top: 2px solid var(--border-strong); }
.target-grid tfoot th.tg-ent { z-index: 4; }
.target-grid .tg-grand { color: var(--brand); }
#targetGridSave.tg-dirty { border-color: var(--brand); background: var(--brand-muted); font-weight: 800; }

/* Achievement KPI mini-bar */
.ach-bar { margin-top: 6px; height: 5px; }
.ach-bar .target-progress-fill.ach-good { background: var(--green); }
.ach-bar .target-progress-fill.ach-warn { background: var(--yellow); }
.ach-bar .target-progress-fill.ach-bad { background: var(--red); }

/* Generic pager placed after any enhanced listing */
.rank-pager[data-for] { padding: 8px 4px 2px; }

/* Sortable column headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable .sort-caret { margin-left: 3px; font-size: .62rem; opacity: .9; }
th.sortable.sorted { color: var(--ink); }
th.sortable.sorted .sort-caret { color: var(--green); }

/* Pagination strip under rank tables */
.rank-pager {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; padding: 10px 4px 2px; font-size: .76rem; color: var(--muted);
}
.rank-pager-info { font-weight: 800; white-space: nowrap; }
.rank-pager-btns { display: flex; align-items: center; gap: 4px; }
.rank-pager-btns button {
  min-height: 28px; padding: 0 9px; font-size: .76rem; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink); cursor: pointer;
}
.rank-pager-btns button:hover:not(:disabled) { border-color: var(--green); }
.rank-pager-btns button:disabled { opacity: .4; cursor: default; }
.rank-pager-page { padding: 0 6px; font-weight: 800; white-space: nowrap; }
.rank-pager-size { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rank-pager-size select { width: auto; min-height: 28px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-size: .76rem; }

table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th, td { padding: 5px 7px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; }
th:first-child, td:first-child { text-align: left; }
th {
  color: var(--muted); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}
td { color: var(--ink); font-variant-numeric: tabular-nums; }
td:first-child { font-variant-numeric: normal; } /* names, not figures */
td strong { color: var(--ink); }
td small { display: block; color: var(--muted); margin-top: 0; font-size: .68rem; line-height: 1.15; }
/* Zebra striping + row hover for scannable data grids */
tbody tr:nth-child(even) > td { background: rgba(128, 128, 128, .045); }
tbody tr:hover > td { background: rgba(128, 128, 128, .10); }
.click-row { cursor: pointer; transition: background .1s; }
.click-row:hover { background: rgba(200,24,92,.05); }
.action-cell { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.action-cell button, .danger { min-height: 28px; font-size: .73rem; }
.danger { border-color: rgba(239,68,68,.35); color: var(--red); background: rgba(239,68,68,.06); }

.rank-num { color: var(--muted); font-size: .72rem; width: 28px; text-align: center; font-weight: 900; }
.export-rank-btn { min-height: 28px; padding: 0 10px; font-size: .73rem; border-radius: 7px; background: var(--surface); border-color: var(--border-strong); white-space: nowrap; }
.rank-list { padding: 6px 14px 16px; }
.rank-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rank-row small { display: block; color: var(--muted); margin-top: 3px; font-size: .73rem; }

/* ── Admin ────────────────────────────────────── */
.admin-card { padding-bottom: 16px; }
.upload-drop {
  display: grid;
  min-height: 120px;
  place-items: center;
  margin: 0 14px 10px;
  padding: 16px;
  border: 2px dashed rgba(200,24,92,.4);
  border-radius: 14px;
  background: var(--brand-muted);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
}
.upload-drop:hover { border-color: var(--brand); }
.upload-drop input { display: none; }
.upload-drop span { font-size: .95rem; }
.upload-drop small { color: var(--muted); font-size: .78rem; }
.preview-box {
  min-height: 80px;
  margin: 0 14px 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  line-height: 1.55;
  font-size: .82rem;
}
/* Why an upload stopped short of importing itself. Louder than a warning,
   because it is the difference between done and waiting. */
.import-failed { color: var(--red); margin: 0 0 6px; }
.import-blockers {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  border-left: 3px solid var(--red); background: var(--surface-2, rgba(0,0,0,.03));
}
.import-blockers strong { display: block; font-size: .74rem; margin-bottom: 4px; }
.import-blockers small { display: block; color: var(--muted-strong); font-size: .7rem; line-height: 1.45; }
.warning-list {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 12px;
  background: rgba(245, 158, 11, .1);
  color: #92400e;
}
.warning-list small { color: inherit; }
.audit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.audit-grid article {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.audit-grid span,
.audit-grid small {
  display: block;
  color: var(--muted);
  font-size: .75rem;
}
.audit-grid strong {
  display: block;
  margin: 4px 0;
  font-size: 1.05rem;
}
.admin-card > button { margin-left: 14px; }
.target-delete-box {
  margin: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.manual-target-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.manual-target-form h3, .manual-target-form button { grid-column: span 2; }
.manual-target-form h3 { margin: 0; color: var(--ink); font-size: .9rem; }

/* cascade wizard */
.cascade-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
}
.cascade-form p { grid-column: span 2; margin: 0; }
.cascade-form button { grid-column: span 2; }
.cascade-section { margin: 14px; }
.target-delete-box h3 { margin: 0 0 10px; color: var(--ink); font-size: .9rem; }
.delete-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.delete-grid button { grid-column: span 2; }
.target-delete-box .preview-box { margin: 10px 0; }
.target-admin-tools, .insight-exclusion-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 14px;
}
.insight-exclusion-form { grid-template-columns: 160px 1fr 1fr auto; }
.target-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.target-summary-grid article {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface);
}
.target-summary-grid span { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.target-summary-grid strong { display: block; margin-top: 4px; color: var(--ink); font-size: .95rem; }
.target-summary-grid small { display: block; margin-top: 3px; color: var(--muted); }
.scope-details summary { cursor: pointer; font-weight: 900; color: var(--muted-strong); font-size: .82rem; }
.scope-details small { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--muted); font-size: .73rem; }

/* ── Summary list ─────────────────────────────── */
.summary-list { padding: 6px 14px 16px; }
.summary-note { margin: 0 0 8px; color: var(--muted); font-size: .82rem; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.summary-row span { color: var(--muted); font-size: .84rem; }
.summary-row strong { text-align: right; color: var(--ink); font-size: .84rem; }

/* ── Secondary diagnostics ────────────────────── */
.secondary-details { margin-top: 14px; }
.secondary-details > summary { cursor: pointer; color: var(--muted); font-weight: 950; letter-spacing: .02em; padding: 6px 0; font-size: .84rem; }
.secondary-details[open] > summary { color: var(--brand); }

/* ── Store performance panel ──────────────────── */
.store-perf-wrap { padding: 0 14px 14px; min-height: 160px; }
/* KPIs left, achievement bars right — keeps the whole panel (numbers, chart,
   rows and pager) inside one screen instead of stacking into a scroll. */
.store-perf-top { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.25fr); gap: 12px; align-items: start; margin: 4px 0 12px; }
.store-perf-top .store-perf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.store-perf-top.no-chart { grid-template-columns: 1fr; }
.store-perf-top.no-chart .store-perf-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .store-perf-top { grid-template-columns: 1fr; }
  /* Stacked: KPIs go back to one row so the panel stays short */
  .store-perf-top .store-perf-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .store-perf-top .store-perf-summary,
  .store-perf-top.no-chart .store-perf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.store-perf-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.sp-kpi { padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 11px; background: var(--surface); }
.sp-kpi span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sp-kpi strong { display: block; font-size: 1.02rem; margin-top: 3px; letter-spacing: -.01em; }
.sp-kpi small { display: block; color: var(--muted); font-size: .7rem; margin-top: 2px; }
/* "+2 hidden, still counted" — excluded entities stay out of lists but in totals */
.sp-hidden-note { display: inline-block; font-style: normal; font-weight: 800; color: var(--muted); border-bottom: 1px dotted var(--border-strong); cursor: help; }
.sp-kpi.sp-good { border-left-color: var(--green); }
.sp-kpi.sp-bad { border-left-color: var(--red); }
.store-perf-scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.store-perf-table { font-size: .8rem; }
.store-perf-table th { background: var(--surface); }
.store-perf-table td, .store-perf-table th { padding: 5px 10px; }
.store-perf-table .sp-name strong { font-weight: 700; }
/* Per-store status tint via a left accent bar on the first cell */
.store-perf-table tr.sp-good td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.store-perf-table tr.sp-warn td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }
.store-perf-table tr.sp-bad td:first-child { box-shadow: inset 3px 0 0 var(--red); }
/* Achieved % mini bar */
.sp-ach { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 84px; }
.sp-ach i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 4px; background: var(--green); opacity: .28; }
.store-perf-table tr.sp-bad .sp-ach i { background: var(--red); }
.store-perf-table tr.sp-warn .sp-ach i { background: var(--yellow); }
.sp-ach span { position: relative; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Target achievement bars ──────────────────── */
.ach-chart { padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.ach-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ach-title { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ach-title small { display: block; margin-top: 2px; font-size: .64rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ach-toggle { display: flex; gap: 4px; flex: 0 0 auto; }
.ach-toggle button {
  min-height: 24px; padding: 0 8px; font-size: .68rem; font-weight: 700; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong); color: var(--muted);
}
.ach-toggle button:hover { border-color: var(--green); color: var(--ink); }
.ach-toggle button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ach-bands { display: flex; flex-wrap: wrap; gap: 8px; margin: 7px 0 8px; font-size: .66rem; font-weight: 700; color: var(--muted); }
.ach-band { display: inline-flex; align-items: center; gap: 4px; }
.ach-band::before { content: ""; width: 8px; height: 8px; border-radius: 3px; }
.ach-band.bad::before { background: var(--red); }
.ach-band.warn::before { background: var(--yellow); }
.ach-band.good::before { background: var(--green); }
.ach-bars { display: grid; gap: 4px; }
.ach-bars-all { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.ach-row {
  display: grid; grid-template-columns: minmax(80px, 130px) 1fr 40px; align-items: center; gap: 8px;
  cursor: pointer; border-radius: 6px; padding: 1px 2px;
}
.ach-row:hover { background: var(--row-hover, rgba(125, 125, 125, .09)); }
.ach-name { font-size: .72rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-track { position: relative; height: 14px; border-radius: 5px; background: var(--border); overflow: hidden; }
.ach-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.ach-fill.ach-bad { background: var(--red); }
.ach-fill.ach-warn { background: var(--yellow); }
.ach-fill.ach-good { background: var(--green); }
.ach-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--muted); opacity: .65; }
.ach-val { font-size: .72rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ach-val.ach-bad { color: var(--red); }
.ach-val.ach-warn { color: var(--yellow); }
.ach-val.ach-good { color: var(--green); }

/* ── Tracked brands (target grid) ─────────────── */
.tracked-brands { margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.tracked-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.tracked-head strong { font-size: .84rem; }
.tracked-head small { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; max-width: 62ch; }
.tracked-add { display: flex; align-items: center; gap: 6px; }
.tracked-add select { width: auto; min-width: 200px; max-width: 320px; min-height: 30px; font-size: .76rem; }
.tracked-add button { min-height: 30px; padding: 0 12px; font-size: .76rem; }
.tracked-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tracked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--ink);
}
.tracked-chip small { color: var(--muted); font-weight: 700; font-size: .66rem; }
.tracked-chip button {
  min-height: 18px; width: 18px; padding: 0; border-radius: 50%; line-height: 1;
  border: none; background: var(--border); color: var(--ink); font-size: .8rem; cursor: pointer;
}
.tracked-chip button:hover { background: var(--red); color: #fff; transform: none; box-shadow: none; }

/* ── Data cutoff note ─────────────────────────── */
.data-cutoff-note {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin: 6px 0 0; padding: 7px 12px; border-radius: 9px; font-size: .74rem; color: var(--muted);
  border: 1px solid var(--border); background: var(--surface);
}
.data-cutoff-note strong { color: var(--ink); }
.data-cutoff-note.warn { border-color: var(--yellow); color: var(--ink); }
.data-cutoff-note .cutoff-trim {
  min-height: 26px; padding: 0 10px; font-size: .72rem; font-weight: 700; border-radius: 7px; cursor: pointer;
  background: var(--brand); border: 1px solid var(--brand); color: #fff;
}
.data-cutoff-note .cutoff-trim:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* A day the file holds only the start of: held back, and said so. */
.data-cutoff-note .cutoff-held { flex-basis: 100%; padding-left: 8px; border-left: 3px solid var(--yellow); color: var(--ink); }
.today-held { display: block; margin-top: 3px; padding-left: 8px; border-left: 3px solid var(--yellow); color: var(--ink); }




/* retail-intel-grid layout now defined in new components section below */
.retail-intel-grid h3 { margin: 0 0 8px; font-size: .86rem; color: var(--ink); }
.intel-row {
  display: block;
  width: 100%;
  height: auto;
  min-height: 44px;
  margin-top: 5px;
  padding: 7px 9px;
  text-align: left;
  background: var(--card);
  border-color: var(--border);
  border-radius: 9px;
  font-size: .82rem;
}
.intel-row strong,
.intel-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intel-row small { color: var(--muted); font-size: .72rem; }
.intel-row.risk { border-color: rgba(180, 35, 24, .28); background: var(--red-muted); }
.watch-item, .mini-rank-row {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 44px;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  padding: 7px 9px;
  text-align: left;
  background: var(--card);
  border-color: var(--border);
  border-radius: 9px;
  font-size: .82rem;
}
.watch-item strong, .mini-rank-row strong {
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  color: var(--ink);
}
.watch-item small, .mini-rank-row small { display: block; color: var(--muted); font-size: .7rem; }
.mini-rank-row.positive { border-color: rgba(16,185,129,.28); background: rgba(16,185,129,.07); }
.mini-rank-row.positive strong { color: var(--green); }
.mini-rank-row.negative { border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.07); }
.mini-rank-row.negative strong { color: var(--red); }


.mini-panel { padding: 12px 14px 16px; border-top: 1px solid var(--border); }
.mini-panel h3 { margin-bottom: 8px; color: var(--ink); font-size: .87rem; }
.empty { padding: 20px; color: var(--muted); text-align: center; font-size: .84rem; }

/* ── Forecast ─────────────────────────────────── */
.forecast-meta-head { color: var(--muted); font-size: .76rem; font-weight: 900; white-space: nowrap; }
/* Status filter + search strip above the forecast table */
.forecast-controls { margin-top: 2px; }
.forecast-table { font-size: .8rem; }
.forecast-table td, .forecast-table th { padding: 5px 9px; }
.forecast-table td small { white-space: nowrap; color: var(--muted); font-size: .66rem; }
/* Projected-achievement bar inside the table row */
.fc-ach { min-width: 76px; }
.fc-ach i.ach-bad { background: var(--red); }
.fc-ach i.ach-warn { background: var(--yellow); }
.fc-ach i.ach-good { background: var(--green); }
.forecast-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 950; letter-spacing: .02em; }
.forecast-on-track { background: var(--green-muted); color: var(--green); }
.forecast-at-risk { background: var(--yellow-muted); color: var(--yellow); }
.forecast-behind { background: var(--red-muted); color: var(--red); }
.forecast-neutral { background: rgba(120,128,160,.1); color: var(--muted); }

/* ── ABC badges ───────────────────────────────── */
.abc-badge {
  display: inline-block;
  width: 20px;
  text-align: center;
  padding: 2px 0;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 950;
}
.abc-a { background: var(--green-muted); color: var(--green); }
.abc-b { background: var(--yellow-muted); color: var(--yellow); }
.abc-c { background: var(--red-muted); color: var(--red); }

/* ── Heatmap ──────────────────────────────────── */
.heatmap-wrap { padding: 6px 14px 16px; overflow-x: auto; }
.heatmap-grid { display: grid; gap: 3px; min-width: 380px; }
.heat-day { text-align: center; padding: 3px 2px 5px; font-size: .68rem; font-weight: 950; color: var(--muted); }
.heat-hour { display: flex; align-items: center; font-size: .64rem; font-weight: 900; color: var(--muted); white-space: nowrap; }
.heat-cell {
  min-height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .56rem;
  font-weight: 950;
  color: #fff;
  cursor: default;
  transition: opacity .1s;
}
.heat-cell:hover { opacity: .7; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1400px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}
@media (max-width: 1220px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: 1fr; }
  
  .audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 1221px) {
  .side { width: 200px; }
  .main { margin-left: 200px; }
}

/* Preset select in preset-bar */
#presetSelect { width: auto; min-width: 140px; min-height: 32px; font-size: .8rem; padding: 4px 10px; }

/* ── Print ────────────────────────────────────── */
@media print {
  .side, .filters, .preset-bar, #freshnessBar, .panel-head button,
  .rank-controls, .branch-picker, .drilldown-panel,
  .load-more-row, .action-cell { display: none !important; }
  .main { margin-left: 0; padding: 0; }
  
  .two { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  body { background: #fff; color: #000; }
  .panel, .metric-grid article, .server-card { border: 1px solid #ccc; box-shadow: none; background: #fff; }
  th { color: #666; }
  td { color: #000; }
  .tab-panel { display: block !important; }
}

.import-history-toolbar { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.import-history-toolbar .summary-note { margin: 0; }
.toggle-label { font-size: 0.82rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
tr.row-deleted td { opacity: 0.45; text-decoration: line-through; }
/* Invisible spacer row that keeps a paginated table's body a constant height */
tr.table-filler, tr.table-filler td { border: none !important; background: transparent !important; padding: 0 !important; pointer-events: none; }
tr.table-filler:hover td { background: transparent !important; }
.import-dropped { color: var(--red); font-weight: 900; }

/* ── Drill-down diagnosis ─────────────────────── */
.drill-diagnosis { margin: 4px 0 14px; }
.dg-verdict {
  margin: 0 0 12px; padding: 11px 13px; border-radius: 11px;
  font-size: .9rem; line-height: 1.5; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
}
.dg-verdict.dg-up { border-left-color: var(--green); }
.dg-verdict.dg-down { border-left-color: var(--red); }
/* Compact cause strip */
.dg-causes { margin-bottom: 8px; }
.dg-cause {
  display: grid; grid-template-columns: 150px 1fr auto 34px; align-items: center;
  gap: 4px 8px; padding: 4px 0; border-bottom: 1px dashed var(--border);
}
.dg-cause-label { font-size: .78rem; font-weight: 700; }
.dg-cause-val { font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.dg-cause-shr { font-size: .7rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.dg-cause small { grid-column: 2 / -1; color: var(--muted); font-size: .69rem; margin-top: -2px; }
.dg-bar { height: 6px; border-radius: 4px; background: rgba(128,128,128,.16); overflow: hidden; }
.dg-bar i { display: block; height: 100%; border-radius: 4px; }
.dg-bar i.dg-pos { background: var(--green); }
.dg-bar i.dg-neg { background: var(--red); }
.dg-inline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 6px 10px; margin-bottom: 10px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border); font-size: .75rem;
}
.dg-inline b { font-size: .78rem; }
.dg-inline span { color: var(--muted); }
.dg-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.dg-three h5 { margin: 0 0 5px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dg-sub-bad { color: var(--red); }
.dg-sub-good { color: var(--green); }
.dg-sub-warn { color: var(--yellow); }

/* Dense metric sheet */
.dm-wrap { margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 11px; overflow: auto; max-height: 420px; }
.dm-table { font-size: .78rem; }
.dm-table th { background: var(--surface); font-size: .6rem; padding: 5px 9px; }
.dm-table td { padding: 3px 9px; font-variant-numeric: tabular-nums; }
.dm-table td.dm-label { text-align: left; font-weight: 700; font-variant-numeric: normal; }
.dm-table td.dm-bench { color: var(--muted); }
.dm-table tr.dm-strong td { font-weight: 800; background: rgba(128,128,128,.05); }
.dg-contrib-list { display: flex; flex-direction: column; gap: 4px; }
.dg-contrib {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%;
  padding: 7px 10px; text-align: left; border: 1px solid var(--border);
  border-radius: 9px; background: var(--surface); cursor: pointer; min-height: unset;
}
.dg-contrib:hover { border-color: var(--brand); }
.dg-contrib.bad { border-left: 3px solid var(--red); }
.dg-contrib.good { border-left: 3px solid var(--green); }
.dg-contrib.warn { border-left: 3px solid var(--yellow); }
.dg-contrib-name { font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-contrib-val { font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.dg-contrib small { grid-column: 1 / -1; color: var(--muted); font-size: .69rem; }
.drill-more { margin-top: 10px; }
.drill-more summary { cursor: pointer; font-size: .76rem; font-weight: 800; color: var(--muted); padding: 6px 0; }
.drill-more summary:hover { color: var(--ink); }

/* ── Drilldown modal ─────────────────────────── */
.modal-card.drilldown-modal-card { width: min(1120px, 100%); max-height: 92vh; }
#drilldownBody { padding: 8px 18px 20px; }

@keyframes drillPop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
#drilldownPanel:not(.hidden) .drilldown-modal-card { animation: drillPop .16s ease; }

/* ── Button disabled state ────────────────────────── */
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--accent, #f97316); outline-offset: 2px; }

/* ── Import history row colors ────────────────────── */
tr.import-row-actual { background: rgba(59,130,246,0.04); }
tr.import-row-target { background: rgba(13,148,136,0.04); }

/* ── Month quick-fill row ─────────────────────────── */
.month-input-row { display: flex; gap: 6px; align-items: center; }
.month-input-row input { flex: 1; }
.month-today-btn { font-size: 0.78rem; padding: 3px 8px; white-space: nowrap; }

/* ── Cascade limit branches label transition ──────── */
#cascadeLimitBranchesLabel { transition: opacity 0.15s; }

/* ── Table horizontal scroll on small screens ─────── */
.table-shell, [id$="Rows"] > table, .target-inline-list table { display: block; overflow-x: auto; }

@media print {
  nav, .filters, .import-history-toolbar button, .action-cell, .rank-controls,
  .target-delete-box, .cascade-section, .insight-exclusion-form,
  .load-more-row, #freshnessBar, #drilldownPanel { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { box-shadow: none; border: 1px solid #ccc; }
}

@media (max-width: 760px) {
  nav { grid-template-columns: repeat(2, 1fr); margin-left: 0; margin-top: 10px; width: 100%; }
  .filters, .metric-grid { grid-template-columns: 1fr; }
  .rank-controls { grid-template-columns: 1fr 1fr; }
  .search-label { grid-column: span 1; }
  .delete-grid, .manual-target-form, .target-admin-tools, .insight-exclusion-form, .target-summary-grid { grid-template-columns: 1fr; }
  .delete-grid button, .manual-target-form h3, .manual-target-form button { grid-column: span 1; }
  .audit-grid, .retail-intel-grid { grid-template-columns: 1fr; }
  .month-input-row { flex-wrap: wrap; }
}


.date-preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.date-preset-group .preset-section-label {
  font-size: .66rem;
  font-weight: 950;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 6px;
  white-space: nowrap;
}
.date-preset-group .preset-divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  margin: 0 4px;
  flex-shrink: 0;
}
.date-preset-group button {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-strong);
  transition: all .12s;
}
.date-preset-group button:hover {
  background: white;
  border-color: var(--brand);
  color: var(--brand);
  transform: none;
  box-shadow: none;
}
.date-preset-group button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(200,24,92,.25);
}



/* ── Go button ──────────────────────────────────── */
.go-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 900;
  min-height: 36px;
  padding: 0 22px;
  font-size: .88rem;
  letter-spacing: .02em;
}
.go-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.go-btn.pending {
  animation: pulse-go 1.6s ease infinite;
  box-shadow: 0 0 0 3px rgba(200,24,92,.2);
}
@keyframes pulse-go {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,24,92,.3); }
  50% { box-shadow: 0 0 0 7px rgba(200,24,92,.0); }
}



/* ── Target progress bar ────────────────────────── */
.target-progress-wrap {
  margin-top: 8px;
}
.target-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--muted);
  margin-bottom: 4px;
}
.target-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--border);
}
.target-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width .5s ease;
}
.target-progress-fill.amber { background: var(--yellow); }
.target-progress-fill.red { background: var(--red); }

/* ── Chart download button ──────────────────────── */
.chart-box { position: relative; }
.chart-download-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 12;
  min-height: 24px;
  padding: 0 9px;
  font-size: .68rem;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  opacity: 1;
  transition: opacity .15s;
  pointer-events: auto;
}
.chart-box:hover .chart-download-btn {
  opacity: 1;
  pointer-events: auto;
}
.chart-download-btn:hover {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  transform: none;
  box-shadow: none;
}

/* ── Session expiry warning toast ───────────────── */
.session-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  width: 320px;
  padding: 18px 20px;
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 14px;
  background: #fffbeb;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  animation: slideUp .25s ease;
}
.session-toast strong { color: #92400e; display: block; margin-bottom: 4px; font-size: .92rem; }
.session-toast p { color: #78350f; font-size: .82rem; margin: 0 0 12px; line-height: 1.5; }
.session-toast-actions { display: flex; gap: 8px; }
.session-toast-actions button { flex: 1; min-height: 32px; font-size: .8rem; }
.session-toast-actions .btn-extend { background: var(--yellow); border-color: var(--yellow); color: #fff; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}








/* ── Laptop compact filters ─────────────────────── */
@media (max-width: 1380px) {
  .metric-grid article { min-height: 95px; padding: 10px 12px; }
  .metric-grid strong { font-size: clamp(1rem, 1.6vw, 1.5rem); }
}
@media (max-width: 1100px) {
  .date-preset-group { gap: 3px; }
  .date-preset-group button { min-height: 26px; padding: 0 8px; font-size: .73rem; }
}








.retail-intel-grid section { background: var(--surface); }
.intel-row { background: var(--card); }
.watch-item, .mini-rank-row { background: var(--card); }
.pareto-card { background: var(--surface); }
.conc-metric { background: var(--surface); }
.preview-box { background: var(--surface); color: var(--muted-strong); }
.audit-grid article { background: var(--surface); }
.target-summary-grid article { background: var(--surface); }
.manual-target-form { background: var(--surface); }
.target-delete-box { background: var(--surface); }
.summary-row { border-bottom: 1px solid var(--border); }

/* ── Table on light theme ───────────────────────── */
table { background: var(--card); }
th { color: var(--muted); background: var(--surface); border-bottom: 2px solid var(--border); }
td { color: var(--ink); border-bottom: 1px solid var(--border); }
td strong { color: var(--ink); }
td small { color: var(--muted); }

/* ── Heatmap cell text on light bg ──────────────── */
.heat-cell { color: #fff; }
.heat-hour { color: var(--muted-strong); }
.heat-day { color: var(--muted-strong); }

/* ── Warning list on light theme ───────────────── */
.warning-list { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); color: #92400e; }

/* ── Upload drop zone on light theme ────────────── */
.upload-drop { background: var(--brand-muted); border-color: rgba(200,24,92,.25); }

/* ═══════════════════════════════════════════════════
   CUSTOM MULTI-SELECT DROPDOWN
   ═══════════════════════════════════════════════════ */
.ms-wrap {
  position: relative;
  flex-shrink: 0;
}
.ms-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--border-strong);
  color: var(--muted-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ms-trigger:hover { border-color: var(--brand); color: var(--ink); }
.ms-trigger.ms-has-selection { border-color: var(--brand); color: var(--ink); background: var(--brand-muted); }
.ms-trigger.ms-has-selection:hover { background: rgba(200,24,92,.16); }
.ms-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .65rem;
  font-weight: 950;
  line-height: 1;
}
.ms-chevron { font-size: .7rem; opacity: .6; margin-left: auto; }
.ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  width: 240px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  overflow: hidden;
}
.ms-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.ms-search {
  width: 100%;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: .8rem;
}
.ms-select-all-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted-strong);
  cursor: pointer;
  user-select: none;
}
.ms-select-all-row:hover { background: var(--surface); }
.ms-select-all-row input {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
  accent-color: var(--brand);
}
.ms-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: .78rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background .08s;
}
.ms-option:hover { background: var(--surface); }
.ms-option input[type="checkbox"] { margin: 0; flex-shrink: 0; accent-color: var(--brand); width: 14px; height: 14px; }
.ms-option.ms-selected { color: var(--brand); font-weight: 700; }
.ms-option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-footer {
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  font-size: .72rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ms-clear-btn {
  font-size: .72rem;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  min-height: 0;
}
.ms-clear-btn:hover { text-decoration: underline; transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════
   STICKY FILTER BAR (only Apply Filters + chips)
   ═══════════════════════════════════════════════════ */
.sticky-filter-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  margin: 8px 0 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.sticky-bar-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.reset-btn-inline {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--muted-strong);
  min-height: 36px;
  font-size: .8rem;
}
.reset-btn-inline:hover { border-color: var(--brand); color: var(--brand); }

/* ═══════════════════════════════════════════════════
   ADVANCED INSIGHTS SECTIONS (per tab)
   ═══════════════════════════════════════════════════ */
.tab-insights {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}
.insights-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 900;
  font-size: .88rem;
  color: var(--muted-strong);
  list-style: none;
  user-select: none;
  transition: background .12s, color .12s;
}
.insights-summary:hover { background: var(--surface); color: var(--ink); }
.tab-insights[open] .insights-summary { color: var(--brand); border-bottom: 1px solid var(--border); }
.insights-icon { font-size: 1rem; color: var(--brand); }
.insights-badge {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-muted);
  color: var(--brand);
  font-size: .7rem;
  font-weight: 950;
}
.insights-body {
  padding: 14px;
}
.insights-placeholder {
  color: var(--muted);
  font-size: .84rem;
  padding: 8px 0;
}
.insights-section {
  margin-bottom: 16px;
}
.insights-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.insights-section-head h3 {
  margin: 0;
  font-size: .86rem;
  color: var(--ink);
}
.insights-section-head small { color: var(--muted); font-size: .74rem; }
.insight-row-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.insight-stat-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.insight-stat-card span { font-size: .66rem; font-weight: 900; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.insight-stat-card strong { display: block; margin-top: 4px; font-size: 1rem; color: var(--ink); }
.insight-stat-card small { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.insight-item-list { display: grid; gap: 4px; }
.insight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: .8rem;
}
.insight-item-rank { width: 22px; text-align: center; font-size: .7rem; font-weight: 950; color: var(--muted); }
.insight-item-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-item-value { font-size: .82rem; font-weight: 900; white-space: nowrap; }
.insight-item.growing { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.05); }
.insight-item.growing .insight-item-value { color: var(--green); }
.insight-item.declining { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.04); }
.insight-item.declining .insight-item-value { color: var(--red); }
.insight-item.warning { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.05); }
.insight-item.warning .insight-item-value { color: var(--yellow); }






.panel-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════
   CHART COMPACT HEIGHTS
   ═══════════════════════════════════════════════════ */
.chart-box { height: 280px; min-height: 240px; }
.metric-grid article { min-height: 95px; padding: 10px 14px; }
.metric-grid strong { font-size: clamp(.95rem, 1.7vw, 1.55rem); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE UPDATES FOR NEW LAYOUT
   ═══════════════════════════════════════════════════ */
@media (max-width: 1380px) {
  .metric-grid article { padding: 8px 10px; min-height: 84px; }
  .filter-ms-row { gap: 4px; }
  .ms-trigger { font-size: .74rem; padding: 0 8px; }
}
@media (max-width: 1100px) {
  .date-preset-group button { min-height: 26px; padding: 0 8px; font-size: .73rem; }
  .ms-panel { width: 220px; }
  .insight-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .filter-date-row { flex-direction: column; align-items: stretch; }
  .date-inline-group { flex-wrap: wrap; }
  .ms-panel { width: 200px; left: 0; right: auto; }
  .sticky-filter-bar { padding: 6px 0; }
  .insight-row-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════ */
body.dark-mode {
  --bg: #0b0d14;
  --surface: #101320;
  --card: #161927;
  --card-hover: #1e2138;
  --border: #232640;
  --border-strong: #2e3352;
  --ink: #dde0f0;
  --muted: #7880a2;
  --muted-strong: #9da2c0;
  --shadow: 0 8px 32px rgba(0,0,0,.55);
}
body.dark-mode .side { background: #070810; }
body.dark-mode .sticky-filter-bar { background: var(--bg); border-bottom-color: var(--border); }
body.dark-mode .filters { background: var(--surface); border-color: var(--border); }
body.dark-mode .date-preset-group { background: var(--surface); border-color: var(--border); }
body.dark-mode .ms-trigger { background: var(--card); border-color: var(--border-strong); color: var(--muted-strong); }
body.dark-mode .ms-panel { background: var(--card); border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
body.dark-mode .ms-search { background: var(--surface); color: var(--ink); }
body.dark-mode .ms-option { color: var(--ink); }
body.dark-mode .ms-option:hover { background: var(--card-hover); }
body.dark-mode .ms-select-all-row:hover { background: var(--card-hover); }
body.dark-mode input, body.dark-mode select { background: var(--surface); color: var(--ink); }
body.dark-mode button { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
body.dark-mode button:hover { background: var(--card-hover); }
body.dark-mode nav button { background: transparent; color: var(--muted); border-color: transparent; }
body.dark-mode nav button:hover { background: rgba(255,255,255,.06); }
body.dark-mode nav button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
body.dark-mode .go-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
body.dark-mode .auth-screen {
  background: radial-gradient(circle at 18% 12%, rgba(200,24,92,.22), transparent 28rem),
    radial-gradient(circle at 88% 88%, rgba(13,148,136,.14), transparent 28rem), var(--bg);
}
body.dark-mode .loading-overlay { background: rgba(11,13,20,.88); }
body.dark-mode .date-lbl input[type="date"] { background: var(--surface); color: var(--ink); }



/* ═══════════════════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════════════════ */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
}
.loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--muted-strong); font-size: .9rem; font-weight: 700; }

/* ═══════════════════════════════════════════════════
   USER EDIT MODAL (scope / retail access control)
   ═══════════════════════════════════════════════════ */
body.modal-open { overflow: hidden; }
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 13, 24, 0.45);
  backdrop-filter: blur(3px);
}
.modal-card {
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  box-shadow: var(--shadow), 0 24px 48px rgba(0, 0, 0, 0.12);
}
.modal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}
.modal-card-head h2 { margin: 4px 0 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.modal-close {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
  background: var(--surface);
}
.user-edit-form {
  display: grid;
  gap: 12px;
  padding: 16px 18px 20px;
}
.user-edit-form .stack-label { gap: 6px; }
.user-edit-form .inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted-strong);
}
.user-edit-form .inline-check input { width: auto; min-height: auto; }
#discontinued .manual-target-form .inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  grid-column: span 2;
}
#discontinued .manual-target-form .inline-check input { width: auto; min-height: auto; }
.input-readonly { opacity: 0.85; cursor: default; }
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.modal-actions .btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
}
.modal-actions button[type="submit"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.modal-actions button[type="submit"]:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.panel-sub {
  margin: 8px 0 0;
  max-width: 52ch;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 600;
}
body.dark-mode .modal-overlay { background: rgba(0, 0, 0, 0.65); }
body.dark-mode .modal-card { background: var(--card); }

/* ═══════════════════════════════════════════════════
   TIERED DELTA ARROWS
   ═══════════════════════════════════════════════════ */
.delta-positive { color: #059669 !important; font-weight: 900; }
.delta-negative { color: #dc2626 !important; font-weight: 900; }
.delta-neutral { color: var(--muted) !important; }
.delta-positive.tier-2 { color: #047857 !important; }
.delta-positive.tier-3 { color: #065f46 !important; }
.delta-negative.tier-2 { color: #b91c1c !important; }
.delta-negative.tier-3 { color: #7f1d1d !important; }

/* ═══════════════════════════════════════════════════
   RETAIL INTEL EXPANDED
   ═══════════════════════════════════════════════════ */
.retail-intel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px 16px;
}
.intel-section { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.intel-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.intel-section-head h3 { margin: 0; font-size: .84rem; }
.intel-desc { font-size: .72rem; color: var(--muted); margin-left: auto; }
.intel-list { padding: 6px; }
.intel-hidden { padding: 0 6px 6px; }
.intel-show-more { display: flex; justify-content: center; padding: 4px 0 8px; }
.intel-show-btn { min-height: 26px; padding: 0 14px; font-size: .74rem; border-radius: 6px; }
.intel-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  margin-bottom: 4px;
  padding: 5px 8px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .1s;
}
.intel-row:hover { border-color: var(--brand); }
.intel-row.risk { border-color: rgba(220,38,38,.25); background: var(--red-muted); }
.intel-rank { flex-shrink: 0; font-size: .72rem; color: var(--muted); font-weight: 900; min-width: 22px; display: flex; align-items: center; }
.intel-row-body { flex: 1; min-width: 0; }
.intel-row-body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: .8rem; }
.intel-row-body small { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.intel-abc-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  font-size: .8rem;
  color: var(--muted-strong);
  border-top: 1px solid var(--border);
}
.intel-abc-summary small { display: block; width: 100%; color: var(--muted); font-size: .72rem; margin-top: 2px; }

/* ═══════════════════════════════════════════════════
   FOLDABLE TABLE UNDER CHART
   ═══════════════════════════════════════════════════ */
.rank-table-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
  border-top: 1px solid var(--border);
}
.rank-table-fold-btn {
  min-height: 26px;
  padding: 0 12px;
  font-size: .74rem;
  border-radius: 6px;
}
.table-shell.folded { display: none; }

/* ═══════════════════════════════════════════════════
   BIGGER CHARTS
   ═══════════════════════════════════════════════════ */
.chart-box { height: 320px !important; min-height: 260px !important; }

@media (max-width: 1100px) {
  .retail-intel-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════
   TOP BAR — replaces sidebar
   ═══════════════════════════════════════════════════ */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 300;
  display: flex;
  align-items: stretch;
  height: 52px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
body.dark-mode .top-bar { background: #0d0f1a; border-bottom-color: var(--border); }

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px 0 16px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  text-decoration: none;
}
.top-bar-brand .brand-logo {
  width: 30px;
  height: 30px;
  font-size: .88rem;
  border-radius: 7px;
  flex-shrink: 0;
}
.top-bar-brand .brand-text strong { font-size: .82rem; letter-spacing: .05em; }
.top-bar-brand .brand-text small { font-size: .6rem; }

/* ── Horizontal navigation ── */
.top-nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  margin: 0;             /* not the old sidebar nav's 28px top margin */
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.top-nav::-webkit-scrollbar { display: none; }
.top-nav button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
  min-height: unset;
  transform: none !important;
  box-shadow: none !important;
}
.top-nav button:hover { color: var(--ink); background: rgba(0,0,0,.03); border-bottom-color: var(--border-strong); }
.top-nav button.active { color: var(--brand); border-bottom-color: var(--brand); background: var(--brand-muted); }
body.dark-mode .top-nav button:hover { background: rgba(255,255,255,.05); }
body.dark-mode .top-nav button.active { background: rgba(200,24,92,.12); }

/* ── Top-bar right section ── */
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px 0 8px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.top-bar-period {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 0 8px;
}
.top-bar-period span { font-size: .78rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tb-data-age { font-size: .65rem; color: var(--muted); white-space: nowrap; }
.tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; flex-shrink: 0; }
.tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted-strong);
  white-space: nowrap;
  transition: background .1s, border-color .1s, color .1s;
  transform: none !important;
  box-shadow: none !important;
}
.tb-btn:hover { background: var(--surface); border-color: var(--border); color: var(--ink); }
.tb-icon { padding: 0 8px; font-size: .88rem; }
.tb-logout { color: var(--muted); }
.tb-logout:hover { color: var(--red); border-color: var(--red); }
.tb-select {
  height: 28px;
  min-height: 28px;
  padding: 0 6px;
  font-size: .72rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-strong);
  max-width: 110px;
}
.top-bar-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 0 6px;
}
.top-bar-user span { font-size: .78rem; font-weight: 700; color: var(--ink); }
.top-bar-user small { font-size: .62rem; color: var(--muted); }

/* ── Info bar (non-sticky, below top-bar, shows scope + period summary) ── */
.info-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 0;
  margin-bottom: 4px;
  font-size: .78rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.info-bar-scope { color: var(--muted-strong); font-weight: 700; }
.info-bar-compare { color: var(--muted); font-style: italic; }
.company-pulse-inline {
  display: flex;
  gap: 14px;
  margin-left: auto;
}
.company-pulse-inline > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.company-pulse-inline span { color: var(--muted); font-size: .72rem; }
.company-pulse-inline strong { color: var(--ink); font-size: .82rem; font-weight: 900; }
.branch-pulse-inline { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Main content: full width ── */
.main { padding-top: 12px; }

/* Ensure .app-shell is just a wrapper, no flex needed without sidebar */
.app-shell { display: block; }

/* ── Metric grid: tighter for full-width laptop ── */
.metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.metric-grid article {
  min-height: 84px;
  padding: 10px 14px;
}
.metric-grid span { font-size: .62rem; letter-spacing: .08em; }
.metric-grid strong { font-size: clamp(.88rem, 1.3vw, 1.3rem); margin-top: 8px; }
.metric-grid small { font-size: .7rem; }

/* ── Chart heights for laptop ── */
.chart-box { height: 300px !important; min-height: 240px !important; padding: 8px 12px 12px; }

/* ── Panel: tighter ── */
.panel { margin-top: 10px; }
.panel-head { padding: 12px 16px 8px; }
.panel-head h2 { font-size: .96rem; }

/* ── Insight grid: 4 columns on wide screens ── */
.insight-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

/* ── Table: compact rows ── */
th, td { padding: 6px 7px; font-size: .8rem; }
th { font-size: .62rem; }



/* ── Responsive for laptop ── */
@media (max-width: 1400px) {
  .top-nav button { padding: 0 13px; font-size: .79rem; }
  .top-bar-right { gap: 2px; }
  .top-bar-period span { font-size: .72rem; }
}
@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .top-nav button { padding: 0 10px; font-size: .76rem; }
  .tb-btn { padding: 0 6px; font-size: .72rem; }
}
@media (max-width: 800px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-grid { grid-template-columns: 1fr; }
  .top-bar-user, .tb-data-age, .top-bar-period { display: none; }
}

/* Narrow screens: stop the tabs from being squeezed out — wrap the nav to its
   own full-width, horizontally-scrollable row below the brand/actions. */
@media (max-width: 960px) {
  .top-bar { height: auto; flex-wrap: wrap; }
  .top-bar-brand { height: 52px; }
  .top-bar-right { height: 52px; margin-left: auto; }
  .top-nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    height: 44px;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .top-nav::-webkit-scrollbar { display: block; height: 3px; }
  .top-nav button { padding: 0 15px; }
}

/* ── Print: show nav items ── */
@media print {
  .top-bar { position: static; }
  .top-nav, .top-bar-right { display: none; }
  .main { padding: 0; }
}

/* ── Branch/company pulse inline (in info bar) ── */
.branch-pulse-label { font-size: .72rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 24px;
  transform: none !important;
  box-shadow: none !important;
  color: var(--muted-strong);
  white-space: nowrap;
}
.bp-chip:hover { border-color: var(--brand); color: var(--ink); background: var(--brand-muted); }

/* ── Sticky filter bar: position relative to new layout (below main padding) ── */
:root { --topbar-h: 52px; }
.sticky-filter-bar { top: var(--topbar-h); transition: top .2s ease; }  /* height of top-bar, measured */

/* ── Section header: remove margin-top on first panel ── */
.tab-panel > .panel:first-child,
.tab-panel > .metric-grid:first-child { margin-top: 0; }

/* ── Chart font defaults for clean look ── */
.chart-box { font-size: 10px; }

/* ── Two-column grid: always single column for cleaner look ── */
.grid.two { grid-template-columns: 1fr; }
/* Staff portal > Game rules: many small fields. */
.grid.three { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; }
/* Branch requests */
.tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .7rem; }
nav button.active .tab-count { background: #fff; color: var(--brand); }
.req-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.req-filters button { min-height: 32px; padding: 0 12px; }
.req-filters button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.req-row { cursor: pointer; }
.req-row.open td { background: var(--surface); }
.req-detail > td { background: var(--surface); }
.req-box { display: grid; gap: 10px; padding: 6px 2px 10px; }
.req-box input, .req-box select, .req-box textarea { width: 100%; }
.req-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); }
.req-status.neg { color: var(--negative, #dc2626); border-color: currentColor; }
.req-status.pos { color: var(--positive, #0f9f6e); border-color: currentColor; }
.req-status.muted { opacity: .65; }
.req-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.req-cell { display: grid; gap: 2px; justify-items: start; text-align: left; min-height: 52px; padding: 8px 10px; border-radius: 10px; }
.req-cell small { font-size: .75rem; }
.req-cell.done { border-color: var(--positive, #0f9f6e); }
.req-cell.cannot { opacity: .7; }
.req-cell.overdue { border-color: var(--negative, #dc2626); }
.req-cell.open { outline: 2px solid var(--brand); }
.req-messages { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.req-messages li { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.req-messages li.mine { justify-self: end; }
.req-messages li p { margin: 0; white-space: pre-wrap; }
.req-messages li small { color: var(--muted); }
.req-messages li.event { justify-self: center; border: 0; background: none; color: var(--muted); font-size: .8rem; }
.requests-today { margin-bottom: 14px; }
.admin-nav.staff-subnav { position: static; margin-top: 0; }
.staff-preview { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.staff-preview h3 { margin: 0 0 6px; }
@media (min-width: 1100px) {
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Insight grid: 3-col on normal width ── */
@media (min-width: 1300px) {
  .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Top-bar dark mode ── */
body.dark-mode .top-nav button:hover { background: rgba(255,255,255,.06); color: var(--ink); border-bottom-color: var(--border-strong); }
body.dark-mode .tb-btn { color: var(--muted); }
body.dark-mode .tb-btn:hover { background: var(--card-hover); border-color: var(--border-strong); color: var(--ink); }
body.dark-mode .top-bar-user span { color: var(--ink); }
body.dark-mode .top-bar-user small { color: var(--muted); }
body.dark-mode .tb-sep { background: var(--border); }
body.dark-mode .info-bar { border-bottom-color: var(--border); }
body.dark-mode .bp-chip { background: var(--card); border-color: var(--border-strong); color: var(--muted-strong); }
body.dark-mode .tb-select { background: var(--surface); border-color: var(--border-strong); color: var(--muted-strong); }

/* Production responsive polish */
.chart-first-panel { margin-top: 0; overflow: visible; }
.trend-hover-insight {
  margin: 6px 14px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface, #f4f6fb);
  border: 1px solid var(--border, #e2e8f0);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted, #5c6480);
  min-height: 2.6em;
}
body.dark-mode .trend-hover-insight {
  background: var(--card, #1e2433);
  border-color: var(--border, #2d3548);
  color: var(--muted, #9aa3bf);
}
.expert-metric { border-color: var(--border-strong); }
.panel-head-actions, .chart-switch, .chart-type-group, .mode-group { min-width: 0; }
.panel-head { flex-wrap: wrap; }
.chart-box {
  height: clamp(260px, 34vh, 380px) !important;
  min-height: 240px !important;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}
.top-nav, .top-bar-right, .filter-ms-row, .filter-quick-row {
  min-width: 0;
}
.tb-btn, .chart-switch button, .chart-type-group button, .mode-group button {
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .main { padding-inline: 10px; }
  .top-bar { gap: 8px; }
  .top-nav { overflow-x: auto; scrollbar-width: thin; }
  .top-nav button { flex: 0 0 auto; }
  .top-bar-right { flex-wrap: wrap; justify-content: flex-end; max-width: 48vw; }
  .chart-box { height: 280px !important; min-height: 220px !important; max-height: 360px; }
  .rank-controls { grid-template-columns: 1fr minmax(150px, 210px) auto auto; }
  .rank-count { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .top-bar { position: sticky; align-items: flex-start; flex-wrap: wrap; min-height: auto; }
  .top-bar-brand { width: auto; }
  .top-nav { order: 3; width: 100%; }
  .top-bar-right { max-width: none; }
  .panel-head { align-items: flex-start; }
  .panel-head-actions { justify-content: flex-start; width: 100%; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-box { height: 260px !important; min-height: 210px !important; max-height: 320px; padding-inline: 8px; }
  .rank-controls { grid-template-columns: 1fr; }
  .chart-switch, .chart-type-group, .mode-group { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
}

@media (max-width: 560px) {
  .main { padding-inline: 8px; }
  .metric-grid { grid-template-columns: 1fr; }
  .filter-quick-row, .filter-ms-row { grid-template-columns: 1fr; }
  .date-preset-group { overflow-x: auto; flex-wrap: nowrap; }
  .chart-box { height: 240px !important; min-height: 200px !important; max-height: 290px; }
  .panel-head h2 { font-size: .9rem; }
  .table-shell { padding-inline: 8px; }
}

/* Final chart responsiveness guard */
.chart-box {
  width: 100%;
  max-width: 100%;
  contain: layout paint;
}

.chart-box canvas {
  max-width: 100%;
}

/* ── Campaign store targets ───────────────────────
   Stores that have never sold the campaign SKUs are still targetable — you may
   be pushing the range into them — but they read as secondary until they do. */
.cs-toggle-all {
  margin-left: 8px; padding: 2px 9px; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--brand); cursor: pointer;
}
.cs-toggle-all:hover { border-color: var(--brand); }
tr.cs-no-history td { opacity: .72; }
tr.cs-no-history td:nth-child(2) small { color: var(--muted); font-style: italic; }

/* ── Privacy mode ─────────────────────────────────
   Blanks every figure so the dashboard can be shown on a shared screen. Chart
   values are painted into a canvas and cannot be masked as text, so the plots
   are blurred instead — the shape of the trend still reads, the values do not. */
#privacyBtn { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#privacyBtn.active { color: var(--brand); border-color: var(--brand); font-weight: 800; }
/* Charts are NOT blurred: the shape of the data is the whole point of a chart
   and stays readable. The figures drawn on them (axis ticks, tooltips) are
   masked in the chart config instead — see maskChartConfig in i18n.js. */


/* ── Weekly tab (8-week decision signals) ─────────
   Reads as a briefing: the signal counts first, then one section per question
   group. Sparklines carry the nine-week shape so a number never has to be
   trusted on its own. */
.weekly-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.wk-chip {
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; background: var(--card);
}
.wk-chip strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wk-chip span { font-size: .76rem; color: var(--muted); font-weight: 600; }
.wk-chip.sp-good { border-color: var(--green); }
.wk-chip.sp-bad { border-color: var(--red); }
.wk-chip.sp-warn { border-color: var(--yellow); }

.weekly-limits { border-left: 3px solid var(--yellow); padding-left: 10px; }

.wk-spark-cell { width: 92px; }
.wk-spark { color: var(--muted-strong); display: block; }
tr.sp-good .wk-spark { color: var(--green); }
tr.sp-bad .wk-spark { color: var(--red); }
tr.sp-warn .wk-spark { color: var(--yellow); }

.wk-score { position: relative; height: 16px; min-width: 62px; background: var(--surface-2, rgba(0,0,0,.06)); border-radius: 4px; overflow: hidden; }
.wk-score i { position: absolute; inset: 0 auto 0 0; background: var(--muted-strong); opacity: .35; }
.wk-score.sp-good i { background: var(--green); opacity: .45; }
.wk-score.sp-bad i { background: var(--red); opacity: .45; }
.wk-score.sp-warn i { background: var(--yellow); opacity: .5; }
.wk-score span { position: relative; display: block; text-align: center; font-size: .7rem; font-weight: 800; line-height: 16px; font-variant-numeric: tabular-nums; }

.wk-signal { white-space: nowrap; font-weight: 700; font-size: .78rem; }


/* Why-it-moved cell: the arithmetic first, the named driver beneath it. */
.wk-why { max-width: 320px; font-size: .74rem; line-height: 1.35; }
.wk-why strong { font-weight: 800; }
.wk-why-num { display: block; color: var(--muted-strong); font-variant-numeric: tabular-nums; }
.wk-why small { display: block; color: var(--muted); font-size: .68rem; }

.wk-signal { cursor: help; }

/* Driver ladder inside the Why cell: brand → category → SKU, each with the
   share of the move it accounts for. Narrow, aligned, scannable. */
.wk-drivers { list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.wk-drivers li {
  display: grid; grid-template-columns: 62px minmax(90px, 1fr) auto 32px;
  gap: 6px; align-items: baseline; font-size: .7rem;
}
.wk-drv-noun { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .6rem; }
.wk-drv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wk-drv-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-drivers small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.wk-why-spread { display: block; color: var(--muted); font-style: italic; }
.wk-why { max-width: 440px; }

/* Expandable full breakdown: what lifted and what dragged at every level, with
   whole names. Folded away by default so the row stays scannable. */
.wk-why-toggle {
  margin-top: 4px; padding: 1px 8px; font-size: .66rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--brand); cursor: pointer;
}
.wk-why-toggle:hover { border-color: var(--brand); }








/* Priority list: the signal rides with the name as a chip (its prescribed
   action is the tooltip), freeing the two boilerplate columns for evidence
   that actually differs row to row. */
.wk-signal-chip {
  display: inline-block; margin-top: 3px; padding: 1px 8px;
  font-size: .64rem; font-weight: 800; letter-spacing: .01em;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted-strong); background: var(--card); cursor: help;
}
.wk-signal-chip.sp-good { border-color: var(--green); color: var(--green); }
.wk-signal-chip.sp-bad { border-color: var(--red); color: var(--red); }
.wk-signal-chip.sp-warn { border-color: var(--yellow); color: var(--yellow); }

/* Dated sub-label under a weekly column heading, so a metric always says which
   period it covers even when the window note has scrolled out of view. */
.wk-head-note {
  display: block; margin-top: 2px;
  font-size: .6rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--muted); white-space: nowrap;
}
.wk-spark-cell { cursor: help; }

/* ── Weekly breakdown pane ────────────────────────
   Full width beneath its table, so the driver ladder, the company comparison
   and the week-by-week series all get real room instead of one squeezed column. */
/* Its own modal, wider than the drill-down and marked with a different accent
   so the two are never mistaken for each other at a glance. */
.modal-card.wk-bd-modal-card { width: min(1240px, 100%); max-height: 92vh; }
.wk-bd-modal-head { border-top: 3px solid var(--yellow); border-radius: 18px 18px 0 0; }
.wk-bd-modal-head .eyebrow { color: var(--yellow); }
.wk-bd-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wk-bd-modal-body { padding: 0 0 4px; }
.wk-bd-next { font-size: .74rem; color: var(--muted-strong); }
.wk-bd-gap { font-size: .72rem; font-weight: 800; color: var(--yellow); }

/* Headline figures, repeated inside the modal because it covers the table. */
.wk-bd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; padding: 0; background: var(--border);
  border-bottom: 1px solid var(--border);
}
.wk-bd-stat { padding: 10px 14px; background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.wk-bd-stat small {
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); display: flex; flex-direction: column;
}
.wk-bd-when { font-size: .58rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.wk-bd-stat strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.wk-bd-stat > span { font-size: .68rem; color: var(--muted-strong); }
.wk-bd-gapline {
  margin: 0; padding: 10px 14px; font-size: .78rem; color: var(--muted-strong);
  border-bottom: 1px solid var(--border); background: var(--surface-2, rgba(0,0,0,.03));
}
.wk-bd-gapline { font-weight: 600; }
.wk-bd-gapline strong { color: var(--yellow); }
/* Plain-language explanation of the arithmetic, so index and share are never
   bare numbers the reader has to take on trust. */
.wk-bd-note {
  margin: 0 0 8px; font-size: .7rem; line-height: 1.5; color: var(--muted-strong);
  border-left: 2px solid var(--border-strong, var(--border)); padding-left: 8px;
}
.wk-bd-note em { font-style: normal; font-weight: 800; color: var(--text); }
.wk-bd-verdict { margin: 6px 0 0; font-size: .72rem; font-weight: 700; color: var(--muted-strong); }
.wk-idx.sp-bad { color: var(--red); }
.wk-idx.sp-good { color: var(--green); }
.wk-mix-wide { min-width: 620px; }
.wk-bd-block { overflow-x: auto; }
.wk-bd-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px; padding: 14px;
}
.wk-bd-wide { grid-column: 1 / -1; }
.wk-bd-block h5 {
  margin: 0 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted-strong);
}
.wk-bd-up { color: var(--green); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.wk-bd-down { color: var(--red); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.wk-mix-table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.wk-mix-table th, .wk-mix-table td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--border); }
.wk-mix-table th:first-child, .wk-mix-table td:first-child { text-align: left; }
.wk-mix-table thead th { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800; }
/* Amounts must never break across lines — "MNT 5,004,194" wrapping to
   "5,004,1 / 94" reads as two different numbers. Only the name column wraps. */
.wk-mix-table td:not(:first-child), .wk-mix-table th:not(:first-child) { white-space: nowrap; }
.wk-mix-table td:first-child { overflow-wrap: anywhere; min-width: 150px; }
.wk-num { font-variant-numeric: tabular-nums; }

/* Diverging bar: dragged grows left of the centre line, lifted grows right, so
   the shape of the week is legible before any figure is read. */
.wk-move-table .wk-bar-cell { width: 190px; padding-left: 14px; }
.wk-bar-head { text-align: center !important; }
.wk-bar-head span { display: inline-block; width: 50%; font-size: .58rem; }
.wk-bar-head .wk-bd-down { text-align: right; padding-right: 6px; }
.wk-bar-head .wk-bd-up { text-align: left; padding-left: 6px; }
.wk-bar { display: flex; align-items: center; width: 100%; height: 9px; }
.wk-bar-neg, .wk-bar-pos { display: flex; flex: 1 1 50%; height: 100%; min-width: 0; }
.wk-bar-neg { justify-content: flex-end; border-right: 1px solid var(--border-strong, var(--border)); }
.wk-bar-pos { justify-content: flex-start; }
.wk-bar b { display: block; height: 100%; }
.wk-bar-neg b { background: var(--red); border-radius: 3px 0 0 3px; }
.wk-bar-pos b { background: var(--green); border-radius: 0 3px 3px 0; }

.wk-mix-table tbody tr.sp-bad td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.wk-mix-table tbody tr.sp-good td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.wk-bd-current { font-weight: 800; background: var(--surface-2, rgba(0,0,0,.04)); }
/* A row shown only to fill a short group out to five. Muted on purpose: it is
   context, not a finding. */
/* Stock flags. Muted by default; loud only when the shelf is empty and there
   is nothing behind it. */
/* ── Replenishment list ───────────────────────────────────────────────── */
.modal-card.stock-modal-card { width: min(1180px, 100%); max-height: 92vh; }
.stock-modal-head { border-top: 3px solid var(--red); border-radius: 18px 18px 0 0; }
.stock-modal-head .eyebrow { color: var(--red); }
.sd-open {
  display: block; margin-top: 5px; min-height: 0; padding: 2px 9px;
  font-size: .64rem; font-weight: 700; border-radius: 999px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong, var(--border));
}
.sd-open:hover { color: var(--text); border-color: var(--text); }
.sd-table td small { display: block; color: var(--muted); font-size: .66rem; }
/* Warehouse cover, read as weeks of this branch's own demand rather than a
   bare count — two units behind a fast line is not a replenishment. */
.sd-plenty { color: var(--green); }
.sd-ok { color: var(--muted-strong); }
.sd-thin { color: var(--yellow); }
.sd-none { color: var(--red); font-weight: 700; }

/* The three answers to "can I fix this?" — send it, send it and reorder, or
   buy it. Each band carries its own edge colour so the eye lands on the one
   the reader came for instead of scanning a single mixed list. */
.sd-band { border-left: 3px solid var(--border); }
.sd-band-good { border-left-color: var(--green); }
.sd-band-thin { border-left-color: var(--yellow); }
.sd-band-none { border-left-color: var(--red); }
.sd-band > h5 { margin-bottom: 2px; }
.sd-count {
  margin: 0 0 6px; font-size: .72rem; font-weight: 600;
  letter-spacing: .01em; color: var(--muted-strong);
}
.sd-band-good .sd-count { color: var(--green); }
.sd-band-thin .sd-count { color: var(--yellow); }
.sd-band-none .sd-count { color: var(--red); }

.wk-tender-note { display: block; font-weight: 400; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.wk-oos { color: var(--yellow); }
.wk-oos-bad { color: var(--red); }
.wk-oos-fix { color: var(--green); }
.wk-oos-chip {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid currentColor; cursor: help; white-space: nowrap;
}

.wk-pad-chip {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); border: 1px dashed var(--border-strong, var(--border)); cursor: help;
}
.wk-mix-hint { display: block; margin-top: 3px; font-size: .66rem; font-weight: 700; color: var(--yellow); cursor: help; }

/* ── Weekly situational check ─────────────────────────────────────────────
   A form, not a table: the question needs room to be read and the answer
   room to be written, so the two sit side by side at equal weight rather
   than the answer being squeezed into a last column. */
.wkc-pick { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted-strong); }
.wkc-pick select { max-width: 260px; }
.wkc-form { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.wkc-group h4 {
  margin: 0 0 8px; font-size: .66rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.wkc-row {
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.1fr);
  gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border);
  align-items: start;
}
.wkc-row:last-child { border-bottom: 0; }
.wkc-q { position: relative; padding-left: 34px; }
.wkc-question { margin: 0; font-size: .82rem; font-weight: 600; line-height: 1.4; }
.wkc-hint { margin: 3px 0 0; font-size: .7rem; color: var(--muted); line-height: 1.45; }
/* The sheet row this came from, so a question can be traced to who asked. */
.wkc-src {
  position: absolute; left: 0; top: 1px;
  font-size: .6rem; font-weight: 800; color: var(--muted);
  border: 1px solid var(--border-strong, var(--border)); border-radius: 4px;
  padding: 1px 5px; cursor: help;
}
.wkc-row.answered .wkc-src { color: var(--green); border-color: var(--green); }
.wkc-a textarea {
  width: 100%; min-height: 62px; resize: vertical;
  font: inherit; font-size: .78rem; line-height: 1.45;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--surface); color: var(--text);
}
.wkc-a textarea:focus { outline: 2px solid var(--accent, var(--green)); outline-offset: -1px; }
.wkc-a textarea:disabled { opacity: .6; cursor: not-allowed; }
.wkc-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding-top: 4px;
}
.wkc-status { font-size: .72rem; color: var(--muted); }
.wkc-status.ok { color: var(--green); font-weight: 700; }
.wkc-status.warn { color: var(--yellow); font-weight: 700; }
.wkc-status.bad { color: var(--red); font-weight: 700; }

@media (max-width: 720px) {
  .wkc-row { grid-template-columns: 1fr; gap: 8px; }
}

/* The check repeated inside the breakdown modal. */
.wk-bd-checks { border-top: 2px solid var(--border-strong, var(--border)); padding-top: 12px; margin-top: 4px; }
.wk-bd-checks .wkc-form { margin-top: 10px; }
.wkc-modal-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
/* Questions with no tag lose the badge gutter rather than keeping it empty. */
.wkc-q-plain { padding-left: 0; }

/* ── Admin: weekly check question editor ───────────────────────────────── */
.wq-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.wq-row {
  display: grid; grid-template-columns: 28px 1fr; gap: 8px;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.wq-handle { display: flex; flex-direction: column; gap: 3px; }
.wq-handle button {
  min-height: 0; padding: 2px 0; width: 100%; font-size: .7rem; line-height: 1.1;
  background: var(--card); border: 1px solid var(--border); border-radius: 5px;
}
.wq-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wq-line { display: flex; gap: 6px; align-items: center; }
.wq-line input { flex: 0 1 190px; min-width: 90px; }
.wq-line input[data-wq-field="ref"] { flex: 0 0 70px; }
.wq-fields input { font-size: .78rem; padding: 6px 9px; }
.wq-question-input { font-weight: 600; }
.wq-remove {
  margin-left: auto; font-size: .7rem; padding: 4px 10px; min-height: 0;
  background: transparent; color: var(--red); border: 1px solid var(--border);
}
.wq-remove:hover { border-color: var(--red); }
.wq-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wq-actions .btn-primary { margin-left: auto; }
.wq-status { font-size: .72rem; color: var(--muted); }
.wq-status.ok { color: var(--green); font-weight: 700; }
.wq-status.warn { color: var(--yellow); font-weight: 700; }
.wq-status.bad { color: var(--red); font-weight: 700; }
/* Quiet until wanted: the row's own click still opens the drill-down, so this
   should not compete for attention. */
.wk-jump {
  display: inline-block; margin-top: 4px; min-height: 0; padding: 2px 8px;
  font-size: .64rem; font-weight: 700; border-radius: 999px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong, var(--border));
}
.wk-jump:hover { color: var(--text); border-color: var(--text); }

/* ── Admin: user creation and tab access ──────────────────────────────── */
.uf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.uf-block {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px;
}
.uf-block legend {
  padding: 0 6px; font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted-strong);
}
.uf-hint { margin: 0; font-size: .72rem; color: var(--muted); line-height: 1.45; }
.uf-hint code { font-size: .72rem; padding: 1px 4px; border-radius: 3px; background: var(--surface); }
.tab-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 12px; }
.tab-pick { display: flex; align-items: center; gap: 7px; font-size: .78rem; }
.tab-pick input { width: auto; }
.tab-pick small { color: var(--muted); font-size: .62rem; cursor: help; }

/* ── Account dialog: what an account can see ───────────────────────────── */
.scope-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.scope-pick { display: grid; gap: 6px; align-content: start; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.scope-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.scope-pick-head strong { color: var(--ink); font-size: .84rem; }
.scope-pick-head .inline-check { font-size: .74rem; }
.scope-count { margin-left: auto; color: var(--muted); font-size: .7rem; font-weight: 700; }
.scope-pick-body { display: grid; gap: 6px; }
.scope-find { min-height: 30px; font-size: .78rem; }
.scope-list { display: grid; gap: 1px; max-height: 176px; overflow: auto; padding-right: 2px; }
.scope-option { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 6px; font-size: .76rem; cursor: pointer; }
.scope-option:hover { background: var(--card); }
.scope-option input { width: auto; min-height: auto; }
.scope-option span { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.scope-option small { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.scope-option.hidden { display: none; }
.scope-note, .scope-admin-note { margin: 0; padding-left: 8px; border-left: 3px solid var(--yellow); color: var(--ink); font-size: .72rem; line-height: 1.45; }
.scope-admin-note { grid-column: 1 / -1; }
.account-clone { max-width: 360px; }
.account-error { margin: 0; padding: 8px 10px; border: 1px solid var(--red); border-radius: 8px; color: var(--red); font-size: .8rem; font-weight: 700; }
/* A tab that also needs a permission is worth marking, or an admin ticks it
   and wonders why it never appears. */
.tab-pick-gated span { color: var(--muted-strong); }

/* ── One upload point: forwarding + stock ─────────────────────────────── */
.fwd-ok, .fwd-bad { margin: 6px 0 0; font-size: .76rem; font-weight: 600; }
.stock-note { margin: 5px 0 0; font-size: .73rem; color: var(--muted); line-height: 1.45; }
.stock-date { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.stock-date input { width: auto; padding: 3px 7px; font-size: .78rem; }
.fwd-ok { color: var(--green); }
.fwd-bad { color: var(--red); }
.sync-form { display: flex; flex-direction: column; gap: 8px; }
.sync-form .stack-label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--muted-strong); }
.inline-check { display: flex; align-items: center; gap: 7px; font-size: .78rem; }
.inline-check input { width: auto; }
.sync-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.sync-actions .btn-primary { margin-left: auto; }
.sync-status { font-size: .72rem; color: var(--muted); }
.sync-status.ok { color: var(--green); font-weight: 700; }
.sync-status.bad { color: var(--red); font-weight: 700; }
.sync-resend { margin: 12px 0 6px; }
/* Admin > Data API & logs: the forwarding card spans the page, so its form lays out in columns. */
.sync-card .sync-form, .sync-card .sync-resend, .sync-card > .table-shell { margin-left: 18px; margin-right: 18px; }
.sync-card .sync-form { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.sync-card .sync-form .inline-check, .sync-card .sync-actions { grid-column: 1 / -1; }
@media (max-width: 760px) { .sync-card .sync-form { grid-template-columns: 1fr; } }
.resend-head { margin: 0 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.resend-row { display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: .78rem; }
.resend-row:last-child { border-bottom: 0; }
.resend-row > span { flex: 1; display: flex; flex-direction: column; font-weight: 600; }
.resend-row small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.resend-gone { color: var(--yellow); }
#stockSnapshots { margin-top: 10px; }

/* ── Admin: SKU category corrections ───────────────────────────────────── */
.co-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.co-form input { flex: 1 1 160px; min-width: 130px; }
.co-form select { flex: 1 1 220px; min-width: 160px; }
.co-preview:empty { display: none; }
.co-preview {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: .78rem;
  border: 1px solid var(--border-strong, var(--border)); background: var(--surface);
}
.co-preview.ok { border-color: var(--green); }
.co-preview.warn { border-color: var(--yellow); }
.co-preview.bad { border-color: var(--red); color: var(--red); }
.co-preview-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.co-preview-list li { display: flex; flex-direction: column; }
.co-preview-list span { font-weight: 700; }
.co-preview-list small, .co-window small { color: var(--muted); font-size: .7rem; }
/* One line per category the SKU has lived under, so the bad window is
   obvious next to the good ones. */
.co-window { display: flex; flex-direction: column; padding: 3px 0; }
.co-window span { font-weight: 600; font-size: .76rem; }
.co-pick, .co-undo {
  display: inline-block; margin-top: 4px; min-height: 0; padding: 3px 9px;
  font-size: .68rem; background: var(--surface); border: 1px solid var(--border);
}
.co-undo { color: var(--red); }
.co-undo:hover { border-color: var(--red); }

.wql-weeks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wql-weeks .chart-switch { flex-wrap: wrap; }
.wql-week-export { margin-left: auto; }

.wq-retired { margin-top: 10px; font-size: .74rem; }
.wq-retired summary { cursor: pointer; color: var(--muted-strong); font-weight: 700; }
.wq-retired-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.wq-retired-row span { flex: 1; color: var(--muted); }
.wq-retired-row button { min-height: 0; padding: 3px 10px; font-size: .7rem; }

/* A weekly row for a store that bills in bulk. Muted, not alarming — the row is
   still worth reading against its own history; it just is not a customer count. */
.wk-bundled {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  font-size: .68rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted-strong);
  background: var(--brand-muted);
  vertical-align: middle;
  cursor: help;
}

/* An excluded branch in the bulk-billing picker. Tinted rather than greyed out:
   the row is still live and its numbers still matter, it is simply not part of
   the company average. */
.bb-held { background: var(--brand-muted); }
.bb-held td:first-child { font-weight: 600; }

/* ── Company average sale, week by week ───────────────────────────────────
   Sits above the signal chips on the weekly tab: the one figure there that is
   about the customer rather than about a branch. Same tile rhythm as the KPI
   row so it reads as a headline, not as another table. */
.wk-aov {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin: 0 0 .9rem;
}
.wk-aov:empty { display: none; }
.wk-aov-tile {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.wk-aov-tile > span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.wk-aov-tile > strong { font-size: 1.15rem; line-height: 1.25; }
.wk-aov-tile > small { font-size: .72rem; color: var(--muted); }
.wk-aov-spark > strong { color: var(--brand); }
.wk-aov-warn { color: var(--orange); font-weight: 600; }
/* The exclusion footnote spans the whole strip rather than sitting in a tile. */
.wk-aov-note { grid-column: 1 / -1; margin: 0; }

/* ── Admin tab: four views, not one scroll ────────────────────────────────
   The sub-navigation borrows the chart-switch rhythm so it reads as part of
   the same family, just larger: it is the primary control on this tab. */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 1rem;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 3;
}
.admin-nav button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 600;
  background: transparent;
  border-color: transparent;
  color: var(--muted-strong);
}
.admin-nav button.active { color: #fff; background: var(--brand); border-color: var(--brand); }
.admin-view { display: none; }
.admin-view.active { display: block; }

/* ── Access & security ──────────────────────────────────────────────────── */
.access-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
}
/* ── Admin › Staff portal ── */
.neg { color: var(--red); font-weight: 800; }
.muted-row td { opacity: .72; }
.btn-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--brand); font-weight: 900; text-decoration: none; }
.btn-link:hover { border-color: var(--brand); }
.stack-form { display: grid; gap: 10px; margin: 0 14px 14px; }
.stack-form textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.stack-form select[multiple] { min-height: 96px; }
.check-wrap { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.staff-brief { padding-top: 12px; border-top: 1px solid var(--border); }
.staff-create { margin: 14px; padding: 14px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); }
.staff-create h3 { margin: 0 0 6px; }
.feedback-body { margin: 4px 0 0; white-space: pre-wrap; }
.slip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 0 14px 14px; }
.slip { display: grid; gap: 4px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--card); break-inside: avoid; }
.slip-brand { margin: 0; color: var(--brand); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.slip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; }
.slip dt { color: var(--muted); font-size: .8rem; }
.slip dd { margin: 0; font-weight: 800; word-break: break-all; }
.slip .slip-secret { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em; }
.slip small { color: var(--muted); }
#printArea { display: none; }
@media print {
  body.print-slips > *:not(#printArea) { display: none !important; }
  body.print-slips #printArea { display: block !important; }
  body.print-slips .slip-grid { grid-template-columns: repeat(2, 1fr); padding: 0; }
  body.print-slips .slip { border-color: #999; color: #000; background: #fff; }
}

.access-tile {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.access-tile > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.access-tile > strong { font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.access-tile > strong small { font-size: .78rem; font-weight: 500; color: var(--muted); margin-left: .3rem; }
.access-tile > small { font-size: .72rem; color: var(--muted); }

/* A failed sign-in, a locked account, an address that keeps trying: tinted
   so it is found by scanning, not by reading. */
.access-bad { background: var(--red-muted); }
.access-bad td:first-child { font-weight: 600; }
.access-open { background: var(--green-muted); }
.access-off { opacity: .6; }
.access-all { color: var(--orange); font-weight: 600; cursor: help; }
.access-actions { white-space: nowrap; }
.access-actions button + button { margin-left: .35rem; }
#accessUsers th small, #accessUsers td small { display: block; font-weight: 400; }

.access-detail {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
}
.access-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }
.access-detail h3 { margin: 0; font-size: 1.05rem; }
.access-detail h3 small { font-weight: 400; color: var(--muted); margin-left: .4rem; }
.access-detail h4 { margin: .9rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Daily usage as a bar behind the number, so a month reads at a glance. */
.access-bar { position: relative; min-width: 140px; height: 20px; border-radius: 5px; background: var(--brand-muted); overflow: hidden; }
.access-bar i { position: absolute; inset: 0 auto 0 0; background: var(--brand); opacity: .35; }
.access-bar span { position: relative; padding: 0 .45rem; line-height: 20px; font-size: .76rem; font-variant-numeric: tabular-nums; }


/* ── Token reveal: the one moment a secret is on screen ─────────────────── */
.token-reveal {
  margin: .75rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--orange);
  border-radius: 10px;
  background: var(--orange-muted);
}
.token-reveal > p { margin: 0 0 .5rem; }
.token-reveal code {
  display: block;
  padding: .55rem .7rem;
  border-radius: 7px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  font-size: .86rem;
  word-break: break-all;
  user-select: all;
}
.token-reveal .summary-note { margin: .5rem 0; }
#passwordForm .btn-secondary { margin-top: .4rem; }


/* ── Phone layout ─────────────────────────────────────────────────────────
   Staff on their own phones, at the counter, for one question: how is my
   branch doing. Everything below reduces the distance to that number. */
.filter-more-btn { display: none; }
@media (max-width: 760px) {
  /* Date row stays. The selector rows fold. */
  .filter-more-btn {
    display: block;
    width: 100%;
    min-height: 40px;
    margin-top: 6px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 600;
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--muted-strong);
  }
  .filters:not(.filters-open) .filter-ms-row,
  .filters:not(.filters-open) .filter-quick-row { display: none; }

  /* Two tiles a row, numbers still legible. Nine tiles become five rows,
     not nine, and the first four are on screen with the trend. */
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .metric-grid [data-kpi] { padding: 10px 12px; }
  .metric-grid [data-kpi] > span { font-size: .66rem; }
  .metric-grid [data-kpi] > strong { font-size: 1.05rem; }
  .metric-grid [data-kpi] > small { font-size: .7rem; }

  /* Tap targets: the toolbar icons were 28-32px, below a thumb. */
  .tb-btn { min-height: 40px; min-width: 40px; }
  nav button { min-height: 44px; }
  .admin-nav button { min-height: 42px; }

  /* The company AOV strip and access tiles stack cleanly already; make the
     admin sub-nav wrap instead of sticking (sticky on a phone hides content). */
  .admin-nav { position: static; }
}

@media (max-width: 760px) {
  /* The toolbar must wrap rather than run off the edge: the thumb-sized
     buttons above widened it past 375px. Sign out stays reachable. */
  .top-bar-right { flex-wrap: wrap; row-gap: 4px; max-width: 100%; overflow-x: auto; }
  .tb-btn { min-width: 36px; padding-left: 8px; padding-right: 8px; }
  .top-bar-user { display: none; }        /* name and role are on the sign-out side already; on a phone they cost the row */
}


/* ── Store calibration ────────────────────────────────────────────────────── */
.calib-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.calib-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.calib-actions .summary-note { margin: 0; }
.calib-suggestions { padding: .7rem .85rem; margin: 0 0 .75rem; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface); }
.calib-suggestions .eyebrow, .calib-selected .eyebrow, .calib-brands .eyebrow { margin: 0 0 .4rem; }
.calib-selected { margin-bottom: .75rem; }
.calib-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.calib-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 30px; padding: 0 .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--muted-strong);
}
button.calib-chip { cursor: pointer; }
button.calib-chip:hover { border-color: var(--brand); color: var(--brand); }
.calib-chip-all { border-style: dashed; }
.calib-chip-on { background: var(--brand-muted); border-color: var(--brand); color: var(--brand-dark); }
.calib-chip-on button { border: 0; background: transparent; color: inherit; font-size: 1rem; line-height: 1; padding: 0 .1rem; cursor: pointer; min-height: 0; }
.calib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .25rem .75rem; }
.calib-row { padding: .3rem .45rem; border-radius: 7px; }
.calib-row.on { background: var(--brand-muted); }
.calib-row small { color: var(--muted); margin-left: .25rem; }
.calib-grid .summary-note { grid-column: 1 / -1; }
.wk-bd-calib { border-left: 3px solid var(--brand); padding-left: .6rem; }
@media (max-width: 760px) { .calib-controls { grid-template-columns: 1fr; } }


/* Store-manager views share the admin sub-view mechanics. */
.sm-view { display: none; }
.sm-view.active { display: block; }


/* ── Store calibration, second pass ─────────────────────────────────────── */
.calib-overview { margin: 0 0 1rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.calib-overview-head { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: .75rem 1rem; align-items: end; margin-bottom: .6rem; }
.calib-overview-head .summary-note { margin: 0 0 .35rem; }
.calib-overview td small { display: block; color: var(--muted); }
.calib-row-current { background: var(--brand-muted); }
.calib-hit, .calib-chip-hit { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 6px; }
.calib-chips-tight .calib-chip { min-height: 24px; font-size: .72rem; padding: 0 .45rem; }
.calib-chips-a .calib-chip, .calib-chip-a { border-color: var(--teal); color: var(--teal); background: var(--teal-muted); }
.calib-editor { margin-top: .5rem; }
.calib-col h3 { margin: 0 0 .5rem; font-size: .95rem; }
.calib-col .stack-label { margin-top: .5rem; }
/* The list scrolls inside a box of fixed height. Typing filters the rows; the
   page under the cursor does not move. */
.calib-list { height: 320px; overflow-y: auto; padding: .25rem; border: 1px solid var(--border); border-radius: 9px; background: var(--card); }
.calib-list .calib-row { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; }
.calib-list-empty { display: flex; align-items: center; justify-content: center; }
.calib-count { margin: .35rem 0 0; }
.calib-controls { grid-template-columns: minmax(260px, 1fr) auto; }
.wk-a { font-size: .74rem; font-weight: 600; margin-bottom: .2rem; }
.wk-a-bad { color: var(--red); }
.wk-a-ok { color: var(--green); }
@media (max-width: 760px) { .calib-overview-head { grid-template-columns: 1fr; } .calib-list { height: 240px; } }


/* ── Store calibration, multi-store editor ───────────────────────────────
   Left: every store, tick several. Right: edit what the ticked stores share.
   A save bar appears only while something differs from what is saved. */
.calib-intro { max-width: 78ch; }
.calib-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.calib-pane { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: .85rem .9rem; min-width: 0; }
.calib-pane-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.calib-pane-head h3 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.calib-pane-head h3 > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calib-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 700; flex: none; }
.calib-selcount { font-size: .75rem; font-weight: 700; color: var(--brand); }
.calib-stores-pane input[type=search], .calib-edit-pane input[type=search] { width: 100%; }
.calib-store-tools { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: .55rem 0 .45rem; }
.calib-links { display: inline-flex; gap: .2rem; }
.calib-link { border: 0; background: transparent; color: var(--brand); font-size: .75rem; font-weight: 600; padding: .15rem .35rem; min-height: 0; cursor: pointer; }
.calib-link:hover { text-decoration: underline; }
.calib-store-list { height: 440px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--card); padding: .2rem; }
.calib-store { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: 7px; cursor: pointer; }
.calib-store:hover { background: var(--surface); }
.calib-store.on { background: var(--brand-muted); box-shadow: inset 3px 0 0 var(--brand); }
.calib-store input { margin: 0; cursor: pointer; }
.calib-store-name { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calib-store-badges { display: inline-flex; gap: .25rem; }
.calib-badge { font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted-strong); background: var(--card); white-space: nowrap; }
.calib-badge-a { border-color: var(--teal); color: var(--teal); background: var(--teal-muted); }
.calib-badge-none { border-style: dashed; color: var(--muted); }
.calib-dirty { color: var(--brand); font-style: normal; font-size: .7rem; }
.calib-list-pad { padding: .6rem; }
.calib-selchips { margin: -.15rem 0 .6rem; }
.calib-selchips:empty { display: none; }
.calib-empty { padding: 2.2rem 1rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: 10px; }
.calib-empty p { margin: .2rem 0; }
.calib-mode { justify-content: flex-start; margin-bottom: .35rem; }
.calib-mode button b { font-weight: 800; margin-left: .15rem; opacity: .85; }
.calib-mode-help { margin: 0 0 .6rem; }
.calib-chip-part { border-style: dashed; }
.calib-chip-fill { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; min-height: 0; cursor: pointer; }
.calib-chip-fill small, .calib-chip small { font-weight: 700; opacity: .75; }
.calib-row.part { background: var(--surface); }
.calib-row-name { flex: 1; min-width: 0; }
.calib-savebar { position: sticky; bottom: .75rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .65rem .85rem; border: 1px solid var(--brand); border-radius: 10px; background: var(--card); box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.calib-savebar-text { font-size: .82rem; font-weight: 600; }
.calib-savebar-actions { display: inline-flex; gap: .5rem; }
.calib-done { margin: .6rem 0 0; color: var(--green); font-weight: 600; }
.calib-done:empty { display: none; }
@media (max-width: 900px) {
  .calib-layout { grid-template-columns: 1fr; }
  .calib-store-list { height: 260px; }
}
/* ── Admin › Adoption ────────────────────────────────────────────────────── */
/* panels here pad their head only; content blocks carry their own gutter, as .table-shell does */
.adopt-findings, .adopt-roles, .adopt-rows { padding: 4px 18px 18px; }
.adopt-cols, .adopt-mini-head { padding-inline: 18px; }
.adopt-cols { padding-bottom: 16px; }
.adopt-cols-sm { padding-bottom: 8px; }
.adopt-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.adopt-bar .summary-note { margin: 0; }
.adopt-findings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.5rem; }
.adopt-f { display: grid; grid-template-columns: 10px 1fr; gap: .6rem; align-items: start; font-size: .86rem; line-height: 1.45; }
.adopt-f > span { width: 9px; height: 9px; border-radius: 50%; margin-top: .38rem; background: var(--muted); }
.adopt-f-bad > span { background: var(--red); }
.adopt-f-warn > span { background: var(--orange); }
.adopt-f-good > span { background: var(--green); }
@media (max-width: 760px) { .adopt-findings { grid-template-columns: 1fr; } }
/* columns: weekly trend, time of day, day of week */
.adopt-cols-plot { --adopt-grid: color-mix(in srgb, var(--muted) 16%, transparent); height: 170px; display: flex; align-items: flex-end; gap: 4px; padding-top: 18px; border-bottom: 1px solid var(--border-strong);
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--adopt-grid) calc(25% - 1px), var(--adopt-grid) 25%); }
.adopt-cols-sm .adopt-cols-plot { height: 96px; }
.adopt-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.adopt-col i { display: block; width: 100%; max-width: 38px; background: var(--brand); border-radius: 4px 4px 0 0; }
.adopt-col.soft i { background: var(--brand-muted); outline: 1px dashed var(--brand); outline-offset: -1px; }
.adopt-col:hover i { opacity: .8; }
.adopt-col b { font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--ink); margin-bottom: 2px; }
.adopt-cols-axis { display: flex; gap: 4px; margin-top: 4px; }
.adopt-cols-axis span { flex: 1; min-width: 0; font-size: .66rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }
.adopt-mini-head { margin: .2rem 0 .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.adopt-cols-sm + .adopt-mini-head { margin-top: 1rem; }
/* horizontal rows: roles, pages */
.adopt-roles, .adopt-rows { display: flex; flex-direction: column; gap: .7rem; }
.adopt-role { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 64px; gap: .75rem; align-items: center; font-size: .85rem; }
.adopt-role strong { text-align: right; font-variant-numeric: tabular-nums; }
.adopt-track { height: 12px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: block; }
.adopt-track i { display: block; height: 100%; background: var(--brand); border-radius: 0 4px 4px 0; }
.adopt-row { display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr) minmax(120px, 170px); gap: .75rem; align-items: center; font-size: .84rem; }
.adopt-row-name { font-weight: 600; }
.adopt-row-val { display: flex; flex-direction: column; line-height: 1.2; }
.adopt-row-val strong { font-variant-numeric: tabular-nums; }
.adopt-row-val small { color: var(--muted); font-size: .72rem; }
@media (max-width: 560px) {
  .adopt-role { grid-template-columns: 110px minmax(0, 1fr) 54px; }
  .adopt-row { grid-template-columns: 90px minmax(0, 1fr); }
  .adopt-row-val { grid-column: 2; }
}
/* status chips carry a word, never colour alone */
.adopt-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.adopt-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adopt-chip-regular { color: var(--green); background: var(--green-muted); }
.adopt-chip-occasional { color: var(--orange); background: var(--orange-muted); }
.adopt-chip-dormant { color: var(--muted-strong); background: var(--surface); border: 1px solid var(--line); }
.adopt-chip-never { color: var(--red); background: var(--red-muted); }
.adopt-heat { display: inline-block; min-width: 2.2rem; padding: .1rem .4rem; border-radius: 5px; text-align: right; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--brand) var(--a), transparent); }
/* ── Campaigns: compact list + brand targets ─────────────────────────────── */
.campaign-list { display: block; padding: 0 14px 12px; }
.campaign-list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 8px; }
.campaign-list-bar .chart-switch { justify-content: flex-start; }
.campaign-list-bar input { min-width: 200px; max-width: 280px; }
.campaign-table { width: 100%; }
.campaign-table td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.campaign-table td small { display: block; color: var(--muted); font-size: .7rem; }
.campaign-table td strong { font-size: .84rem; }
.campaign-row-open { background: var(--brand-muted); box-shadow: inset 3px 0 0 var(--brand); }
.cc-actions-cell { text-align: right; width: 1%; white-space: nowrap; }
.cc-actions-cell button { min-height: 26px; padding: 0 8px; }
/* Achievement bar with a tick for time elapsed: behind the tick is behind pace. */
.cmp-bar { position: relative; min-width: 120px; height: 18px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.cmp-bar i { position: absolute; inset: 0 auto 0 0; background: var(--brand); opacity: .35; }
.cmp-bar.good i { background: var(--green); opacity: .45; }
.cmp-bar.bad i { background: var(--red); opacity: .4; }
.cmp-bar b { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--ink); opacity: .6; }
.cmp-bar span { position: relative; padding: 0 6px; font-size: .72rem; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; }
.cf-brands > span { display: block; margin-bottom: 6px; }
.cf-brand-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr); gap: 12px; }
.cf-brand-results { height: 220px; overflow-y: auto; margin-top: 6px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.cf-brand-opt { justify-content: flex-start; min-height: 28px; padding: 0 8px; font-size: .78rem; background: transparent; border-color: transparent; text-align: left; }
.cf-brand-opt:hover { background: var(--brand-muted); }
.cf-brand-opt small { color: var(--muted); margin-left: 6px; }
.cf-brand-rows { max-height: 260px; overflow-y: auto; }
.cf-brand-rows input { width: 130px; }
.cf-brand-rows td small { display: block; color: var(--muted); }
@media (max-width: 760px) { .cf-brand-grid { grid-template-columns: 1fr; } .campaign-list-bar input { max-width: none; flex: 1; } }

.campaign-table th:nth-child(-n+2), .campaign-table td:nth-child(-n+2) { text-align: left; }


/* ── Headers that fit their column, in either language ────────────────────
   Headers were single-line, upper-case and letter-spaced. Fine for "SALES";
   in Mongolian "8 ДОЛОО ХОНОГТОЙ ХАРЬЦУУЛСАН ӨӨРЧЛӨЛТ" then set the width of
   its whole column, and the weekly table ran to 2,200px on a laptop. Headers
   now wrap onto as many lines as they need, and the column is as wide as its
   data. */
th, th.sortable { white-space: normal; overflow-wrap: break-word; line-height: 1.2; vertical-align: bottom; }
.wk-head-note { white-space: normal; }
html[lang="mn"] th { letter-spacing: .02em; font-size: .62rem; }
html[lang="mn"] .wk-head-note { font-size: .6rem; }
/* The narrative column is the one that should give, not the figures. */
html[lang="mn"] .wk-why { max-width: 300px; }


/* ── Weekly table on a narrower screen ─────────────────────────────────────
   Fourteen columns do not fit a small laptop in any language. Rather than
   crush them -- a figure split across two lines is harder to read than one
   you scroll to -- the figures stay whole, and the branch stays pinned on the
   left so a scrolled row never loses its name. */
.wk-table td:nth-child(n+3):nth-child(-n+6),
.wk-table td:nth-child(11) { white-space: nowrap; }
.wk-table td:nth-child(n+3):nth-child(-n+6) small,
.wk-table td:nth-child(11) small { white-space: normal; }
.wk-table th:nth-child(2), .wk-table td:nth-child(2) {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  min-width: 150px; max-width: 190px;
  box-shadow: inset -1px 0 0 var(--border);
}
.wk-table th:nth-child(2) { z-index: 3; background: var(--surface); }
.wk-table td:nth-child(2) strong { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wk-table tbody tr:nth-child(even) > td:nth-child(2) { background: var(--card); }
.wk-table tbody tr:hover > td:nth-child(2) { background: var(--surface); }
.wk-table .wk-why { min-width: 220px; max-width: 280px; }
html[lang="mn"] .wk-table .wk-why { max-width: 260px; }

/* Multi-line cells need room to lay out sideways, or they stack into a
   column that makes every row four times taller than its figures. */
.wk-table th:nth-child(2), .wk-table td:nth-child(2) { text-align: left; }
.wk-table td:nth-child(6) { min-width: 128px; }
.wk-table td:nth-child(n+12):not(.wk-why) { min-width: 132px; }

.wk-unit-note { margin: 0 0 4px; font-size: .68rem; color: var(--muted); text-align: right; }

/* Final widths, tuned so the table fits a 1920 screen in both languages. */
.wk-table td:nth-child(6) { min-width: 108px; }
.wk-table td:nth-child(n+12):not(.wk-why) { min-width: 110px; }
.wk-table .wk-why, html[lang="mn"] .wk-table .wk-why { min-width: 200px; max-width: 240px; }
/* Driver lines inside "Why": the product name gives way, never the figures. */
.wk-table .wk-drivers li { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.wk-table .wk-drivers li > :nth-child(2) { overflow-wrap: anywhere; }

.wk-bd-sub td { color: var(--muted); font-size: .7rem; }


/* ── Campaign setup: store targets ──────────────────────────────────────── */
.cf-stores > span { display: block; margin-bottom: 6px; }
.cf-store-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.cf-store-bar .cf-field { min-width: 160px; }
.cf-store-bar input[type=search] { min-width: 180px; margin-left: auto; }
.cf-store-scroll { height: 340px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 9px; }
.cf-store-scroll table { margin: 0; }
.cf-store-scroll th { position: sticky; top: 0; }
.cf-store-scroll td small { display: block; color: var(--muted); }
.cf-store-scroll input { width: 140px; }
.cf-store-total { margin: 6px 0 0; }

/* The store and brand tables sit inside a .cf-field, whose label styling is
   capitals; store names and notes must read as written. */
.cf-stores table, .cf-stores .summary-note, .cf-brands table, .cf-brands .cf-brand-results { text-transform: none; letter-spacing: normal; font-weight: normal; }
.cf-stores td strong, .cf-brands td strong { font-weight: 700; }


/* ── Brand targets by branch ─────────────────────────────────────────────── */
.cf-brand-store { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand-muted); text-transform: none; letter-spacing: normal; font-weight: normal; }
.cf-brand-store-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.cf-brand-store h4 { margin: 0; font-size: .95rem; color: var(--ink); }
.cf-brand-store h4 small { font-weight: 500; color: var(--muted-strong); margin-left: 6px; }
.cf-brand-store .cf-store-scroll { background: var(--card); height: 300px; }
.cf-brand-open > td { background: var(--brand-muted); }
.cf-brand-rows input:disabled { background: var(--surface); color: var(--muted-strong); }
.cb-stores-row > td { padding-top: 0; }
.cb-stores { margin: 4px 0 8px; font-size: .76rem; }


/* ── Top tab bar: every tab on screen ──────────────────────────────────────
   fitTopNav() adds .nav-stacked when the tabs no longer fit in the one row.
   They then take a full-width row of their own, as an even grid whose column
   count (--nav-cols) gives balanced rows: 5 + 5 rather than 6 + 4. */
.top-bar.nav-stacked { height: auto; flex-wrap: wrap; align-items: stretch; }
.top-bar.nav-stacked .top-bar-brand { height: 52px; }
.top-bar.nav-stacked .top-bar-right { min-height: 52px; height: auto; margin-left: auto; max-width: none; }
.top-bar.nav-stacked .top-nav {
  order: 3;
  flex: 1 1 100%;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(var(--nav-cols, 5), minmax(0, 1fr));
  overflow: visible;
  border-top: 1px solid var(--border);
}
.top-bar.nav-stacked .top-nav button {
  height: auto;
  min-height: 40px;
  padding: 4px 8px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .top-bar.nav-stacked .top-nav button { min-height: 38px; padding: 3px 4px; font-size: .72rem; }
}
/* Phones: logo mark only, and the toolbar shares its row, so the header is one
   52px row plus the tabs. What does not fit scrolls inside the toolbar; the
   page itself never scrolls sideways. */
@media (max-width: 560px) {
  .top-bar-brand { padding: 0 6px 0 10px; border-right: 0; }
  .top-bar-brand .brand-text { display: none; }
  .top-bar-right, .top-bar.nav-stacked .top-bar-right { flex: 1 1 0; min-width: 0; max-width: 100%; height: 52px; padding: 0 6px 0 0; border-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: safe flex-end; }
  .top-bar-right::-webkit-scrollbar { display: none; }
  .top-bar-right .tb-btn { min-width: 30px; padding-left: 6px; padding-right: 6px; flex: 0 0 auto; }
  .top-bar-right .tb-sep { display: none; }
}
/* Phones: the header tucks away on the way down and returns on the way up. */
.top-bar { transition: transform .2s ease; }
body.topbar-tucked .top-bar { transform: translateY(-100%); }
body.topbar-tucked .sticky-filter-bar { top: 0; }
@media print { body.topbar-tucked .top-bar { transform: none; } }

/* Admin reads no sales, so the date range, filters and Apply bar would only
   sit on top of it doing nothing. */
body[data-tab="admin"] #datePresetBar,
body[data-tab="admin"] #filterSection,
body[data-tab="admin"] #stickyFilterBar,
body[data-tab="requests"] #datePresetBar,
body[data-tab="requests"] #filterSection,
body[data-tab="requests"] #stickyFilterBar { display: none; }

/* ── Tab headlines: one standard retail measure per tab ─────────────────── */
.tab-headline { margin: 0 0 1rem; }
.th-card {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  gap: .4rem 1.25rem;
  align-items: center;
  --bullet-poor: rgba(239,68,68,.14);
  --bullet-fair: rgba(245,158,11,.16);
  --bullet-good: rgba(16,185,129,.14);
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  background: var(--card);
}
.th-card.th-good { border-left-color: #10b981; }
.th-card.th-bad { border-left-color: #ef4444; }
.th-figure { display: flex; flex-direction: column; gap: .15rem; }
.th-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.th-figure strong { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.th-figure strong em { font-style: normal; font-size: .95rem; color: var(--muted-strong); margin-left: .35rem; }
.th-note { margin: 0; font-size: .82rem; color: var(--ink); }
.th-note b { font-weight: 700; font-variant-numeric: tabular-nums; }
.th-why { margin: .2rem 0 0; font-size: .74rem; color: var(--muted); }
.th-card.th-has-chart { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); align-items: stretch; }
.th-side { display: flex; flex-direction: column; justify-content: center; gap: .35rem; min-width: 0; }
.th-side .th-note, .th-side .th-why { margin: 0; }
.th-visual { min-width: 0; display: flex; flex-direction: column; }
.th-chart-title { margin: 0 0 .2rem; font-size: .72rem; font-weight: 700; color: var(--muted-strong); }
.th-card .chart-box.th-chart { height: 230px !important; min-height: 200px !important; max-height: 250px; padding: 4px 6px 6px; }
@media (max-width: 760px) {
  .th-card, .th-card.th-has-chart { grid-template-columns: 1fr; }
  .th-card .chart-box.th-chart { height: 210px !important; min-height: 190px !important; }
}

/* Bullet chart: actual, projection, target on one bar. */
:root { --bullet-poor: rgba(239,68,68,.14); --bullet-fair: rgba(245,158,11,.16); --bullet-good: rgba(16,185,129,.14); }
.bullet { position: relative; height: 14px; margin-top: 6px; border-radius: 3px; background: var(--surface); overflow: visible; }
.bullet i { position: absolute; left: 0; border-radius: 2px; }
.bullet .bullet-proj { top: 3px; height: 8px; background: rgba(200,24,92,.28); }
.bullet .bullet-act { top: 3px; height: 8px; background: var(--brand); }
.bullet .bullet-target { position: absolute; top: -2px; width: 3px; height: 18px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.bullet-key { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 4px; font-size: .64rem; color: var(--muted); }
.bullet-key span { display: inline-flex; align-items: center; gap: .25rem; }
.bullet-key i { display: inline-block; width: 10px; height: 6px; border-radius: 2px; }
.bullet-key .k-act { background: var(--brand); }
.bullet-key .k-proj { background: rgba(200,24,92,.28); }
.bullet-key .k-tgt { width: 3px; height: 10px; background: var(--ink); }

/* ══ Today: the daily briefing ══════════════════════════════════════════════ */
body[data-tab="today"] #datePresetBar,
body[data-tab="today"] .filter-date-row,
body[data-tab="today"] .filter-quick-row,
body[data-tab="today"] #sellerMsWrap,
body[data-tab="today"] #weekdayMsWrap { display: none; }
.today-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.today-head h2 { margin: 2px 0 0; font-size: 1.3rem; letter-spacing: -.01em; }
.today-head .panel-sub { margin: 2px 0 0; }
.today-scope-note { margin: 0; max-width: 360px; font-size: .72rem; color: var(--muted); text-align: right; }
.today-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.today-kpis .sp-kpi strong, .bsc-kpis .sp-kpi strong { font-size: 1.22rem; font-variant-numeric: tabular-nums; }
.today-kpis .sp-kpi small, .bsc-kpis .sp-kpi small { font-size: .72rem; }
.today-kpis .sp-kpi small span, .bsc-kpis .sp-kpi small span { display: inline; font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.today-kpis .sp-kpi .bullet-key span { display: inline-flex; }
/* .sp-kpi span is the tile's label style; a figure inside the value is not a label. */
.today-kpis .sp-kpi strong span, .bsc-kpis .sp-kpi strong span { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; margin: 0; }
#bscExport { min-height: 32px; padding: 0 12px; font-size: .78rem; }
.today-target-note { margin: 8px 2px 0; font-size: .74rem; }
.sp-kpi.sp-warn { border-left-color: var(--yellow); }
.today-filter { justify-content: flex-start; padding: 0 16px 10px; }
.today-filter b { font-weight: 800; margin-left: 4px; opacity: .75; }
.today-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; padding: 0 16px 16px; }
.today-actions > .empty { grid-column: 1 / -1; }
.act-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 12px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.act-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--border-strong); }
.act-card:hover, .act-card:focus-visible { border-color: var(--brand); box-shadow: var(--shadow); outline: none; }
.act-pace::before { background: var(--red); }
.act-brand::before { background: var(--orange); }
.act-stock::before { background: var(--yellow); }
.act-demand::before { background: var(--teal); }
.act-dip::before { background: var(--brand); }
.act-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.act-kind { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.act-stake { font-size: .72rem; font-weight: 800; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.act-card h3 { margin: 0; font-size: .96rem; line-height: 1.25; }
.act-facts { margin: 0; font-size: .8rem; color: var(--ink); }
.act-do { margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted-strong); }
.act-extra { margin: 0; font-size: .72rem; color: var(--muted); }
.act-btn { align-self: flex-start; margin-top: 2px; min-height: 28px; padding: 0 10px; font-size: .72rem; }
.today-more { grid-column: 1 / -1; justify-self: center; min-height: 32px; font-size: .78rem; }
.today-table td small { display: block; color: var(--muted); font-size: .68rem; }
.today-table .forecast-badge { white-space: nowrap; }
.link-btn { padding: 0 6px; min-height: 22px; border-radius: 6px; font-weight: 800; font-size: .78rem; }
.today-wins { padding: 4px 16px 16px; }
.win-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.win-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 12px; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 10px; background: var(--surface); cursor: pointer; }
.win-list li:hover { border-color: var(--green); }
.win-kind { grid-column: 1 / -1; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.win-list strong { font-size: .86rem; }
.win-list small { font-size: .74rem; color: var(--green); font-weight: 700; align-self: end; }
#todayPaceChart { height: 300px !important; }

/* ══ Brand scorecard ════════════════════════════════════════════════════════ */
.bsc-pick { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; color: var(--muted); }
.bsc-pick select { min-width: 200px; max-width: 280px; }
.bsc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 4px 16px 12px; }
.bsc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 16px 6px; }
.bsc-block { min-width: 0; display: flex; flex-direction: column; }
.bsc-block .summary-note { margin: 4px 0 0; }
.bsc-chart { height: 280px !important; min-height: 240px !important; max-height: 300px; padding: 4px 6px 6px; }
.bsc-quadrants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 8px 16px 6px; }
.bsc-q { padding: 10px 12px; border: 1px solid var(--border); border-top: 3px solid var(--q, var(--border-strong)); border-radius: 10px; background: var(--surface); }
.bsc-q-name { display: block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bsc-q strong { font-size: 1.15rem; }
.bsc-q small { font-size: .72rem; color: var(--muted); }
.bsc-q .bsc-q-up { display: block; margin-top: 2px; color: var(--ink); font-weight: 700; }
.bsc-q p { margin: 6px 0 0; font-size: .74rem; color: var(--muted-strong); }
.bsc-sub { margin: 14px 16px 0; font-size: .9rem; }
.quad-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; white-space: nowrap; color: var(--q); background: color-mix(in srgb, var(--q) 12%, transparent); }
.chip-muted { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .64rem; font-weight: 800; background: rgba(120,128,160,.12); color: var(--muted); }
.today-table tr.sp-bad td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.today-table tr.sp-good td:first-child { box-shadow: inset 3px 0 0 var(--green); }
@media (max-width: 1100px) {
  .bsc-row { grid-template-columns: 1fr; }
  .bsc-quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .today-scope-note { text-align: left; }
  .today-kpis, .bsc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-kpis .sp-kpi strong, .bsc-kpis .sp-kpi strong { font-size: 1.02rem; }
  .today-actions { grid-template-columns: 1fr; padding: 0 10px 12px; }
  .bsc-quadrants { grid-template-columns: 1fr; }
  .bsc-pick select { min-width: 0; max-width: 60vw; }
}
@media print {
  body[data-tab="today"] .filters, body[data-tab="today"] .sticky-filter-bar { display: none; }
  .act-card { break-inside: avoid; }
}

/* Refill judgement: an empty line with nothing refillable behind it is information, not a warning. */
.wk-oos-muted { color: var(--muted); font-weight: 700; }
.link-btn.link-muted { color: var(--muted); border-color: var(--border); }

/* ── Brand targets from the branch total ────────────────────────────────── */
.target-proposal { margin: 4px 14px 8px; padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--brand-muted); }
.target-proposal p { margin: 0 0 6px; font-size: .82rem; }
.target-proposal .tp-note { font-size: .76rem; color: var(--muted-strong); }
.target-proposal .tp-note .btn-secondary { margin-left: 6px; min-height: 26px; padding: 0 10px; font-size: .74rem; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tp-actions button { min-height: 30px; font-size: .78rem; }
.target-grid td.tg-proposed input { background: rgba(200,24,92,.08); border-color: rgba(200,24,92,.25); }
.target-check { margin: 0 14px 14px; }
.target-check-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.target-check-table { border-collapse: collapse; width: 100%; font-size: .74rem; font-variant-numeric: tabular-nums; }
.target-check-table th, .target-check-table td { padding: 5px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.target-check-table tbody tr:last-child th, .target-check-table tbody tr:last-child td { border-bottom: 0; }
.target-check-table tbody th { text-align: left; color: var(--muted); font-weight: 700; }
.target-check-table thead th { color: var(--muted); font-size: .66rem; background: var(--surface); }
.target-check-table .tc-ok { color: var(--green); font-weight: 800; }
.target-check-table .tc-off { color: var(--yellow); font-weight: 800; }
.target-check-table .tc-empty { color: var(--muted); }