/* Phone Loops Command Center — shared stylesheet
 * Monochromatic "clinical blueprint" system (shadcn/Geist).
 * Tokens inlined so the rendered output is self-contained (PRD §2.5).
 * JP: hand-edit freely — colors, spacing, radii all live here.
 *
 * Theming: light values on :root, dark overrides on [data-theme="dark"].
 * index.html sets data-theme before first paint (localStorage → OS preference).
 */
:root {
  color-scheme: light;

  /* Surfaces (canvas → nested → paper, layering without borders) */
  --color-canvas: #f5f5f5;
  --color-paper: #ffffff;
  --color-nested: #f5f5f5;      /* sub-cards ON paper: one tonal step down */
  --color-surface-alt: #fafafa;
  --color-hover: #efefef;

  /* Ink */
  --color-ink: #0a0a0a;
  --color-ink-soft: #171717;
  --color-mid-gray: #737373;
  --color-hairline: #e5e5e5;
  --color-ember: #e7000b;

  /* Meters (mono fill per design pack — color never decorates) */
  --meter-track: rgba(10, 10, 10, 0.08);
  --meter-fill: #171717;

  /* Charts (mid-grey data bars per the monochrome reference pack; hover steps
   * to ink. Var indirection keeps both theme-correct automatically.) */
  --chart-bar: var(--color-mid-gray);
  --chart-bar-hover: var(--color-ink);

  /* Status (restrained — color only for state, always with a text label) */
  --status-ok: #16794a;
  --status-warn: #a16207;
  --status-bad: #e7000b;
  --status-ok-bg: rgba(22, 121, 74, 0.08);
  --status-warn-bg: rgba(161, 98, 7, 0.09);
  --status-bad-bg: rgba(231, 0, 11, 0.07);

  /* Typography */
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-caption: 12px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 30px;
  --text-display: 48px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-48: 48px;

  /* Layout */
  --page-max-width: 1280px;
  --card-padding: 20px;

  /* Radii — 24px containers, 18px pills, 12px nested, per DESIGN.md */
  --radius-small: 6px;
  --radius-nested: 12px;
  --radius-cards: 24px;
  --radius-badges: 999px;

  --shadow-card: rgba(23, 23, 23, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px -1px;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — near-black canvas, tonal card stack (screenshots' Ledger kit) */
  --color-canvas: #0a0a0a;
  --color-paper: #171717;
  --color-nested: #212121;      /* sub-cards ON card: one tonal step UP */
  --color-surface-alt: #1c1c1c;
  --color-hover: #262626;

  --color-ink: #fafafa;
  --color-ink-soft: #e5e5e5;
  --color-mid-gray: #a1a1a1;
  --color-hairline: rgba(255, 255, 255, 0.09);
  --color-ember: #ff453a;

  --meter-track: rgba(255, 255, 255, 0.12);
  --meter-fill: #e5e5e5;

  --status-ok: #4cc38a;
  --status-warn: #d6a243;
  --status-bad: #ff6369;
  --status-ok-bg: rgba(76, 195, 138, 0.12);
  --status-warn-bg: rgba(214, 162, 67, 0.12);
  --status-bad-bg: rgba(255, 99, 105, 0.12);

  /* Dark cards separate by tone, not shadow */
  --shadow-card: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on, "cv11" on;
}
body { transition: background-color 0.2s ease, color 0.2s ease; }

.wrap {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-48);
}

/* ---- Header ---- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-24);
  border-bottom: 1px solid var(--color-hairline);
}
.masthead .logo { height: 40px; width: auto; display: block; color: var(--color-ink); opacity: 0.75; }
.masthead .actions { display: flex; align-items: center; gap: var(--spacing-12); }

.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-badges);
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--color-hover); }
.btn:active { background: var(--color-nested); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
}
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; }
/* sun shows in dark (click → light), moon shows in light */
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ---- Health strip ---- */
.health-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
}
.health-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-badges);
  padding: 8px 14px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  outline: none;
}
.health-cell:hover { background: var(--color-hover); }
.health-cell:focus-visible { border-color: var(--color-mid-gray); }
/* Red alert: the requested 2px ring in the dot's red — 1px recolored border +
 * 1px inset ring, so geometry never shifts. (Deliberately not composed with
 * --shadow-card: it is `none` in dark, which would void the declaration.) */
.health-cell.bad {
  border-color: var(--status-bad);
  box-shadow: inset 0 0 0 1px var(--status-bad);
}
.health-cell .code { font-weight: var(--fw-semibold); letter-spacing: 0.3px; }
/* Tooltip: full system name on hover / keyboard focus */
.health-cell .tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  white-space: nowrap;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 4px 8px;
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 5;
}
.health-cell:hover .tip,
.health-cell:focus-visible .tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-mid-gray); }
.dot.ok { background: var(--status-ok); }
.dot.warn { background: var(--status-warn); }
.dot.bad { background: var(--status-bad); }

/* ---- Panels ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-20);
}
.panel {
  grid-column: span 1;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  min-width: 0;
  scroll-margin-top: var(--spacing-12);
  transition: box-shadow 0.3s ease;
}
.panel.wide { grid-column: span 2; }
.panel:focus { outline: none; }
/* Landing highlight when a health swatch jumps here */
.panel.panel-flash { box-shadow: 0 0 0 2px var(--color-mid-gray); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}
.panel-head .title {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-subheading);
  font-weight: var(--fw-semibold);
}
.panel-head .code-chip {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5px;
  color: var(--color-mid-gray);
  background: var(--color-nested);
  border-radius: var(--radius-small);
  padding: 2px 6px;
}
.stale {
  font-size: 11px;
  color: var(--color-mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stale.amber { color: var(--status-warn); }

/* ---- Stat blocks (nested sub-cards, label-over-value like the design pack) ---- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}
.stat {
  background: var(--color-nested);
  border-radius: var(--radius-nested);
  padding: var(--spacing-12) 14px;
  min-width: 0;
}
.stat .lbl {
  font-size: 11px;
  color: var(--color-mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat .val {
  font-size: var(--text-heading-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.6px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat .sub {
  font-size: var(--text-caption);
  color: var(--color-mid-gray);
  margin-top: 2px;
}

/* ---- Meter (thin rounded progress bar, mono fill) ---- */
.meter {
  height: 6px;
  border-radius: var(--radius-badges);
  background: var(--meter-track);
  margin-top: var(--spacing-8);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--meter-fill);
}

/* ---- Charts (monochrome card language — design/monochromatic UI dashboard design/) ---- */
.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}
.chart-card {
  background: var(--color-nested);
  border-radius: var(--radius-nested);
  padding: 14px;
  min-width: 0;
}
.chart-lbl {
  font-size: 11px;
  color: var(--color-mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-hero {
  font-size: var(--text-heading-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin-bottom: var(--spacing-8);
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 72px;
  border-bottom: 1px solid var(--color-hairline);
}
.bar-slot {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  min-width: 0;
}
.bar-slot i {
  display: block;
  width: 100%;
  background: var(--chart-bar);
  border-radius: 3px 3px 0 0; /* rounded data-end, square baseline */
}
.bar-slot:hover i { background: var(--chart-bar-hover); }
.bars-x {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-mid-gray);
  margin-top: var(--spacing-4);
}
.bars-note { font-size: var(--text-caption); color: var(--color-mid-gray); margin-top: 2px; }

/* Donut: progress ring + center hero (same track/fill language as .meter) */
.donut { position: relative; width: 150px; margin: var(--spacing-8) auto var(--spacing-12); }
.donut svg { display: block; width: 100%; height: auto; }
.donut circle { fill: none; stroke-width: 12; }
.donut .track { stroke: var(--meter-track); }
.donut .fill { stroke: var(--meter-fill); stroke-linecap: round; }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.donut-val {
  font-size: var(--text-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.6px;
  line-height: 1.1;
}
.donut-sub { font-size: var(--text-caption); color: var(--color-mid-gray); margin-top: 2px; }

/* Hairline key-value rows (label left in mid-grey, value right in ink) */
.kv-list { margin-bottom: var(--spacing-16); }
.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-12);
  padding: 9px 0;
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--text-body);
}
.kv-row:last-child { border-bottom: none; }
.kv-row span { color: var(--color-mid-gray); }
.kv-row b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* Goal footer under a meter: "65% achieved …… target 6/14d" */
.goal-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  color: var(--color-mid-gray);
  margin-top: var(--spacing-4);
}
.goal-foot b { font-weight: var(--fw-medium); color: var(--color-ink-soft); }

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--color-mid-gray);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-hairline);
}
tbody td { padding: 9px 8px; border-bottom: 1px solid var(--color-hairline); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color 0.1s ease; }
tbody tr:hover td { background: var(--color-nested); }
tbody tr:hover td:first-child { border-radius: var(--radius-small) 0 0 var(--radius-small); }
tbody tr:hover td:last-child { border-radius: 0 var(--radius-small) var(--radius-small) 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td a { color: var(--color-ink); text-decoration: none; }
td.recent-title { max-width: 240px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Badges (capsules: soft fill default, tonal for state) ---- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-badges);
  padding: 2px 9px;
  color: var(--color-ink-soft);
  background: var(--color-nested);
  white-space: nowrap;
}
/* badges inside stat sub-cards sit on the nested tone — step them once more */
.stat .badge { background: var(--color-paper); }
[data-theme="dark"] .stat .badge { background: var(--color-hover); }
.badge.ok   { color: var(--status-ok);   background: var(--status-ok-bg); }
.badge.warn { color: var(--status-warn); background: var(--status-warn-bg); }
.badge.bad  { color: var(--status-bad);  background: var(--status-bad-bg); }
/* Status pill dot (inherits the badge's tint via currentColor) */
.badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: 1px;
}

.empty { color: var(--color-mid-gray); font-size: 13px; padding: var(--spacing-12) 0; }
.panel-note { color: var(--color-mid-gray); font-size: var(--text-caption); margin: var(--spacing-12) 0 0; }
.footnote { color: var(--color-mid-gray); font-size: 11px; margin-top: var(--spacing-24); text-align: center; }

/* ---- Purchase Orders block (inside Stock panel) ---- */
.po-block { margin-top: var(--spacing-20); }
.po-block-head {
  display: flex; align-items: center; gap: var(--spacing-8);
  font-size: var(--text-body); font-weight: var(--fw-semibold);
  margin-bottom: var(--spacing-8);
}
.po-row { cursor: pointer; }
.po-row:focus-visible { outline: 2px solid var(--color-ink-soft); outline-offset: -2px; }

/* ---- PO detail modal ---- */
.po-modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--spacing-48) var(--spacing-16);
  background: rgba(10, 10, 10, 0.55);
  overflow-y: auto;
}
.po-modal[hidden] { display: none; }
.po-modal-card {
  width: 100%; max-width: 720px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
}
.po-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-8); margin-bottom: var(--spacing-16);
}
.po-modal-head .icon-btn { font-size: 15px; line-height: 1; }
.po-modal-card .code-chip {
  font-size: 11px; font-weight: var(--fw-semibold);
  padding: 2px 6px; border-radius: 5px;
  background: var(--color-nested); color: var(--color-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.po-line-note {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--color-mid-gray); line-height: 1.35;
}
.po-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-8); margin-bottom: var(--spacing-16);
}
.po-meta-item {
  background: var(--color-nested); border-radius: var(--radius-nested);
  padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.po-meta-item span { font-size: 11px; color: var(--color-mid-gray); text-transform: uppercase; letter-spacing: 0.5px; }
.po-meta-item b { font-size: 13px; font-weight: var(--fw-medium); }
.po-totals { margin-top: var(--spacing-12); }
.po-totals > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; color: var(--color-mid-gray); font-size: 13px;
}
.po-totals > div b { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.po-totals .grand { font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--color-ink); border-top: 1px solid var(--color-hairline); margin-top: var(--spacing-4); padding-top: var(--spacing-8); }
.po-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-16); }
.po-action:disabled { opacity: 0.55; cursor: default; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.po-shopify { border-color: var(--color-ink-soft); font-weight: var(--fw-semibold); }
.po-shopify::after { content: " ↗"; margin-left: 4px; }
.po-row-actions { text-align: right; white-space: nowrap; }
.po-mini-btn {
  padding: 2px 8px; font-size: 11px; line-height: 1.4;
  margin-left: var(--spacing-4);
}
.po-note { font-size: 11px; color: var(--color-mid-gray); margin: var(--spacing-12) 0 0; }

@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .panel, .panel.wide { grid-column: span 1; }
}

/* SM card footer: link to the discontinued-SKU list */
.sm-foot { margin: 10px 2px 0; font-size: 12px; }
.sm-foot a { color: var(--muted, #8a93a6); text-decoration: underline; cursor: pointer; }
.sm-foot a:hover { color: var(--fg, #e6e9ef); }

/* SM PO editing (draft only) */
.po-qty { width: 84px; padding: 3px 6px; text-align: right; font: inherit;
  background: var(--panel, #12161f); color: var(--fg, #e6e9ef);
  border: 1px solid var(--line, #2a3140); border-radius: 6px; }
.po-qty:focus { outline: none; border-color: var(--accent, #4f8cff); }
.po-row-removed { opacity: .4; text-decoration: line-through; }
.po-row-removed .po-qty { text-decoration: line-through; }
.po-edit-status { margin: 8px 2px 0; font-size: 12px; color: var(--muted, #8a93a6); }
.po-edit-status.ok { color: #4ade80; }
.po-edit-status.err { color: #f87171; }