/* KamiStats v2 design system — the single token source for BOTH worlds:
   the live app links this file, and the offline report builders inline it
   (report_theme.py, which also regex-parses :root for the JS chart
   palette, so token renames here must be mirrored there).
   Layering contract: below the base rules this file styles CLASSES only —
   bare element styling lives in app.css so nothing leaks into report
   markup — and sets no base font-size/line-height (app: 14px/1.45 in
   app.css; reports: 16px/1.35 in report.css). */
:root {
  /* neutrals */
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #161615;
  --header-bg: #222221;         /* table headers, section-title bars */
  --inset: #131312;             /* input wells, tab-nav rail */
  --control: #191918;           /* secondary control fill */
  --hover: #242422;             /* row + control hover */
  --hairline: #2c2c2a;
  --hairline-strong: #3a3a37;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --ring: rgba(255, 255, 255, 0.10);
  /* interactive accent */
  --accent: #3987e5;
  --accent-deep: #205a9e;
  --accent-deep-hover: #2a6cbf;
  /* semantics */
  --atk: #3987e5;
  --def: #f5b14c;
  --win: #35c989;
  --loss: #f06464;
  --accent-2: #a88cff;
  /* categorical chart palette + diverging midpoint */
  --chart-1: #3987e5; --chart-2: #2ed08f; --chart-3: #ffb54a;
  --chart-4: #ff6b6b; --chart-5: #a78bfa; --chart-6: #22d3ee;
  --chart-7: #f97316; --chart-8: #f472b6; --chart-9: #14b8a6;
  --chart-10: #fde047;
  --chart-mid: #e5e7eb;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}
::selection { background: var(--atk); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 0; border: 2px solid #0a0a0a; }

/* micro-label utility */
.kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.kpi-card {
  position: relative; overflow: hidden; min-height: 76px; padding: 10px 14px;
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.kpi-value { font-family: 'Sora', sans-serif; font-size: 23px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.kpi-sub { font-size: 11px; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-label { font-size: 10px; color: var(--muted); margin-top: 7px; text-transform: uppercase; letter-spacing: .1em; }

/* data tables */
.table-scroll {
  position: relative; overflow: auto;
  border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.data-table th {
  position: sticky; top: 0; z-index: 2; text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--hairline-strong); color: var(--ink-2);
  font-weight: 800; text-transform: uppercase; font-size: 10px;
  letter-spacing: .08em; white-space: nowrap; background: var(--header-bg);
}
.data-table td { padding: 7px 12px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.data-table tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--hover); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .bold { font-weight: 700; color: var(--ink); }

/* status badges */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2); background: var(--control);
}
.badge.w { color: var(--win); border-color: rgba(53, 201, 137, .45); background: rgba(53, 201, 137, .08); }
.badge.l { color: var(--loss); border-color: rgba(240, 100, 100, .45); background: rgba(240, 100, 100, .08); }
.badge.ours { color: var(--accent); border-color: rgba(57, 135, 229, .45); background: rgba(57, 135, 229, .08); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 6px 14px; border: 1px solid var(--accent);
  border-radius: 4px; background: var(--accent-deep); color: #fff;
  font: 700 11px 'Inter', sans-serif; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--accent-deep-hover); text-decoration: none; }
.btn.ghost, .btn.secondary { background: var(--control); border-color: var(--hairline-strong); color: var(--ink-2); }
.btn.ghost:hover, .btn.secondary:hover { background: var(--hover); color: var(--ink); }
.btn:disabled { opacity: .6; cursor: default; }

/* empty state */
.empty-state {
  display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 108px;
  padding: 18px; border: 1px dashed var(--hairline-strong); border-radius: 6px;
  background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--muted); text-align: center; font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.empty-state.compact { min-height: 78px; padding: 14px; border-style: solid; border-color: rgba(255, 255, 255, 0.08); }