/* Cargosnap dashboard — design tokens and layout.
   Colours are the validated data-viz palette; see docs/frontend_design.md. */

:root {
  color-scheme: light;

  --surface-1: #fcfcfb;
  --page-plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.06);

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --delta-up: #006300;
  --delta-down: #d03b3b;

  --seq-100: #cde2fb;
  --seq-250: #86b6ef;
  --seq-400: #3987e5;
  --seq-550: #1c5cab;
  --seq-700: #0d366b;
  /* Diverging pair for the cohort change view: red loses, blue gains. */
  --div-loss: #e34948;
  --div-gain: #2a78d6;

  --radius: 8px;
  --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page-plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --shadow: none;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --delta-up: #0ca30c;
    --seq-100: #0d366b;
    --seq-250: #184f95;
    --seq-400: #2a78d6;
    --seq-550: #5598e7;
    --seq-700: #9ec5f4;
    /* Diverging pair for the cohort change view: red loses, blue gains. */
    --div-loss: #e66767;
    --div-gain: #3987e5;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --page-plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: none;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --delta-up: #0ca30c;
  --seq-100: #0d366b;
  --seq-250: #184f95;
  --seq-400: #2a78d6;
  --seq-550: #5598e7;
  --seq-700: #9ec5f4;
  /* Diverging pair for the cohort change view: red loses, blue gains. */
  --div-loss: #e66767;
  --div-gain: #3987e5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--page-plane);
  -webkit-font-smoothing: antialiased;
}

body.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; font-weight: 600; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
a { color: var(--series-1); }

.muted { color: var(--text-secondary); }
.small { font-size: 13px; }
.numeric { font-variant-numeric: tabular-nums; }

/* ── Shell ───────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { font-weight: 600; margin-right: 4px; white-space: nowrap; }

.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }

.nav a {
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 14px;
  white-space: nowrap;
}
.nav a:hover { background: var(--page-plane); color: var(--text-primary); }
.nav a[aria-current="page"] { background: var(--series-1); color: #fff; }

.session { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.session a[aria-current="page"] { font-weight: 600; color: var(--text-primary); }

/* ── Admin ───────────────────────────────────────────────────────────── */

.admin-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: var(--gap); border-bottom: 1px solid var(--gridline); }
.admin-tabs a { padding: 7px 12px; text-decoration: none; color: var(--text-secondary); font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a:hover { color: var(--text-primary); }
.admin-tabs a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--series-1); font-weight: 600; }
.console { border-top: 1px solid var(--gridline); padding: 8px 0; }
.console summary { cursor: pointer; font-size: 14px; }
.console pre { margin: 8px 0 0; padding: 10px 12px; max-height: 480px; overflow: auto; background: var(--page-plane); border-radius: 6px; font-size: 12px; line-height: 1.45; white-space: pre; }

.controls {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.control { display: flex; flex-direction: column; gap: 3px; }
.control label { font-size: 12px; color: var(--text-muted); }
.control select, .control input[type="search"], .control input[type="text"] {
  font: inherit;
  font-size: 14px;
  padding: 5px 8px;
  border: 1px solid var(--baseline);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  min-width: 150px;
}
.control-inline { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }

.stale-banner {
  padding: 10px 20px;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface-1));
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.auth-card { max-width: 380px; width: 100%; }
.auth-card h1 { margin-bottom: 4px; }
.auth-card form { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.auth-card label { font-size: 13px; color: var(--text-secondary); }

input[type="email"] {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--baseline);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
}

button, .button {
  font: inherit;
  font-weight: 500;
  padding: 9px 16px;
  border: none;
  border-radius: 6px;
  background: var(--series-1);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
button:hover, .button:hover { filter: brightness(0.94); }
button.secondary, .button.secondary {
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--baseline);
}

.notice { padding: 10px 12px; border-radius: 6px; font-size: 14px; margin: 12px 0; }
.notice-ok { background: color-mix(in srgb, var(--good) 14%, var(--surface-1)); }
.notice-bad { background: color-mix(in srgb, var(--critical) 14%, var(--surface-1)); }
.notice-warn { background: color-mix(in srgb, var(--warning) 20%, var(--surface-1)); }

/* ── Stat tiles ──────────────────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: var(--gap);
}

.kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-value { font-size: 26px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: 13px; color: var(--text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.delta-up { color: var(--delta-up); }
.delta-down { color: var(--delta-down); }
.kpi-plan { font-size: 12px; }

/* The plan tree: indented by depth, totals in bold, unmeasured lines muted. */
table.plan-tree td.depth-1 { padding-left: 26px; }
table.plan-tree td.depth-2 { padding-left: 42px; }
table.plan-tree td.depth-3 { padding-left: 58px; }
table.plan-tree td.depth-4 { padding-left: 74px; }
table.plan-tree tr.tier-0 td { font-weight: 600; }
table.plan-tree td.not-measured { color: var(--text-muted); font-style: italic; text-align: center; }

/* ── Charts ──────────────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.chart-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.chart-title { font-size: 15px; font-weight: 600; }
.chart-sub { font-size: 13px; color: var(--text-muted); }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: hidden; }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legend-swatch.dashed { border: 2px dashed; box-sizing: border-box; border-radius: 2px; }

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--baseline);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(11, 11, 11, 0.14);
  z-index: 20;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.08s;
  font-variant-numeric: tabular-nums;
}
.tooltip.on { opacity: 1; }
.tooltip-title { font-weight: 600; margin-bottom: 3px; color: var(--text-primary); }
.tooltip-row { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.tooltip-row .legend-swatch { width: 9px; height: 9px; }
.tooltip-value { margin-left: auto; padding-left: 12px; color: var(--text-primary); font-weight: 500; }

/* ── Tables ──────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--gridline); white-space: nowrap; }
table.data th { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--page-plane); }
table.data a { text-decoration: none; }
table.data a:hover { text-decoration: underline; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-primary); }
th[aria-sort] { color: var(--text-primary); }
th[aria-sort="ascending"]::after { content: " \25B2"; }
th[aria-sort="descending"]::after { content: " \25BC"; }

.pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; background: var(--page-plane); border: 1px solid var(--border); }
.pill-new { background: color-mix(in srgb, var(--series-1) 16%, var(--surface-1)); }
.pill-expansion { background: color-mix(in srgb, var(--series-3) 18%, var(--surface-1)); }
.pill-contraction { background: color-mix(in srgb, var(--series-2) 16%, var(--surface-1)); }
.pill-churn { background: color-mix(in srgb, var(--critical) 14%, var(--surface-1)); }
.pill-remove { background: color-mix(in srgb, var(--critical) 14%, var(--surface-1)); }
.pill-add { background: color-mix(in srgb, var(--series-1) 16%, var(--surface-1)); }

/* A correction's reason is a sentence: let it wrap, but not into a sliver.
   A long customer name wraps too, so the reason keeps its room. */
table.data td.reason { white-space: normal; min-width: 280px; }
table.data td.wrap { white-space: normal; min-width: 140px; }

.cohort-table { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.cohort-table th { font-size: 11px; color: var(--text-muted); font-weight: 600; padding: 2px 4px; white-space: nowrap; }
.cohort-table td { padding: 4px 6px; border-radius: 3px; text-align: right; font-variant-numeric: tabular-nums; min-width: 46px; white-space: nowrap; }
.cohort-table td.empty { background: none; }
/* Incomplete months: shown on request, faded so they never read as real revenue. */
.cohort-table th.incomplete { font-style: italic; font-weight: 400; }
.cohort-table td.incomplete { opacity: 0.4; }
.cohort-table tfoot th, .cohort-table tfoot td { font-weight: 600; color: var(--text-primary); border-top: 1px solid var(--border); padding-top: 6px; }

/* The matrix scrolls inside its own box, sized to fit under the top bar, so
   the month header, the cohort column and the total row stay in view. Sticky
   cells need an opaque background, and the shadow fills the border-spacing
   gaps so scrolled cells do not show through between them. */
.cohort-scroll { overflow: auto; max-height: calc(100vh - 150px); }
.cohort-table thead th,
.cohort-table tbody th,
.cohort-table tfoot th,
.cohort-table tfoot td { position: sticky; background: var(--surface-1); box-shadow: 0 0 0 2px var(--surface-1); }
.cohort-table thead th { top: 0; z-index: 2; }
.cohort-table tfoot th, .cohort-table tfoot td { bottom: 0; z-index: 2; }
.cohort-table tbody th { left: 0; z-index: 1; text-align: left; }
.cohort-table tbody th.tenant { max-width: 300px; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.cohort-table tbody th.tenant a { color: inherit; text-decoration: none; }
.cohort-table tbody th.tenant a:hover { text-decoration: underline; }
.cohort-table thead th:first-child,
.cohort-table tfoot th { left: 0; z-index: 3; }
/* Opacity would let the scrolled cells show through the sticky total row. */
.cohort-table tfoot td.incomplete { opacity: 1; color: var(--text-muted); }

/* Sequential ramp for the cohort heatmap: one hue, light to dark. The text
   flips to white on the dark end so every cell keeps its contrast. */
.cohort-table td.h0 { background: var(--surface-1); color: var(--text-muted); }
.cohort-table td.h1 { background: color-mix(in srgb, var(--seq-100) 60%, var(--surface-1)); }
.cohort-table td.h2 { background: var(--seq-100); }
.cohort-table td.h3 { background: color-mix(in srgb, var(--seq-250) 70%, var(--seq-100)); }
.cohort-table td.h4 { background: var(--seq-250); }
.cohort-table td.h5 { background: color-mix(in srgb, var(--seq-400) 60%, var(--seq-250)); }
.cohort-table td.h6 { background: var(--seq-400); color: #fff; }
.cohort-table td.h7 { background: color-mix(in srgb, var(--seq-550) 70%, var(--seq-400)); color: #fff; }
.cohort-table td.h8 { background: var(--seq-550); color: #fff; }
.cohort-table td.h9 { background: var(--seq-700); color: #fff; }

:root[data-theme="dark"] .cohort-table td.h6,
:root[data-theme="dark"] .cohort-table td.h7,
:root[data-theme="dark"] .cohort-table td.h8,
:root[data-theme="dark"] .cohort-table td.h9 { color: #0d0d0d; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .cohort-table td.h6,
  :root:where(:not([data-theme="light"])) .cohort-table td.h7,
  :root:where(:not([data-theme="light"])) .cohort-table td.h8,
  :root:where(:not([data-theme="light"])) .cohort-table td.h9 { color: #0d0d0d; }
}

/* Diverging ramps for the cohort change view: two hues, each fading into the
   surface, with no change a plain cell. Five steps per side. The ink holds 5:1
   on every step in light mode; in dark mode it flips to black on the darkest. */
.cohort-table td.loss1 { background: color-mix(in srgb, var(--div-loss) 16%, var(--surface-1)); }
.cohort-table td.loss2 { background: color-mix(in srgb, var(--div-loss) 32%, var(--surface-1)); }
.cohort-table td.loss3 { background: color-mix(in srgb, var(--div-loss) 50%, var(--surface-1)); }
.cohort-table td.loss4 { background: color-mix(in srgb, var(--div-loss) 70%, var(--surface-1)); }
.cohort-table td.loss5 { background: color-mix(in srgb, var(--div-loss) 90%, var(--surface-1)); }
.cohort-table td.gain1 { background: color-mix(in srgb, var(--div-gain) 16%, var(--surface-1)); }
.cohort-table td.gain2 { background: color-mix(in srgb, var(--div-gain) 32%, var(--surface-1)); }
.cohort-table td.gain3 { background: color-mix(in srgb, var(--div-gain) 50%, var(--surface-1)); }
.cohort-table td.gain4 { background: color-mix(in srgb, var(--div-gain) 70%, var(--surface-1)); }
.cohort-table td.gain5 { background: color-mix(in srgb, var(--div-gain) 90%, var(--surface-1)); }

:root[data-theme="dark"] .cohort-table td.loss5,
:root[data-theme="dark"] .cohort-table td.gain5 { color: #0d0d0d; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .cohort-table td.loss5,
  :root:where(:not([data-theme="light"])) .cohort-table td.gain5 { color: #0d0d0d; }
}

.section { margin-bottom: 22px; }
.row-actions { display: flex; gap: 8px; align-items: center; }

.empty-state { padding: 40px 20px; text-align: center; color: var(--text-secondary); }

/* ── Information page: docs/how_it_works.md, rendered ────────────────── */

.info-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.info-toc { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.info-toc-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.info-toc a { color: var(--text-secondary); text-decoration: none; padding: 3px 8px; border-radius: 6px; }
.info-toc a:hover { background: var(--surface-1); color: var(--text-primary); }

.prose { padding: 24px 28px; max-width: 900px; }
.prose h1 { font-size: 24px; margin-bottom: 12px; }
.prose h2 { font-size: 19px; margin: 32px 0 10px; padding-top: 16px; border-top: 1px solid var(--gridline); scroll-margin-top: 72px; }
.prose h3 { font-size: 15px; margin: 22px 0 6px; scroll-margin-top: 72px; }
.prose p, .prose ul { margin: 0 0 12px; max-width: 72ch; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose code { font-size: 13px; background: var(--page-plane); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 16px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gridline); }
.prose th { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.prose .diagram { margin: 8px 0 16px; overflow-x: auto; }
.prose .diagram svg { display: block; width: 100%; min-width: 720px; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }

@media (max-width: 800px) {
  .info-layout { grid-template-columns: minmax(0, 1fr); }
  .info-toc { position: static; }
  .prose { padding: 16px; }
}

/* ── Print: page 1 goes into decks ───────────────────────────────────── */

@media print {
  .topbar, .controls, .row-actions, .stale-banner, .info-toc { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .card, .chart-card, .kpi { border-color: #ddd; box-shadow: none; break-inside: avoid; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .info-layout { display: block; }
}