/* ============================================================
   UI Showcase — shared design tokens & components
   Premium B-end dashboard system: restrained color, 12px radius,
   32px gaps, soft shadows, Inter/system-ui stack.
   Each page overrides --accent / --accent-ink / --s1.. in its
   own <style> block. Status colors never themed.
   ============================================================ */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;   /* chart surface */
  --surface-2: #ffffff;   /* card */
  --page: #f9f9f7;
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --ring: rgba(11, 11, 11, .10);
  --accent: #2a78d6;          /* page theme — overridden per page */
  --accent-ink: #1c5cab;      /* text/button-safe deep step (>=4.5:1) */
  --accent-wash: rgba(42, 120, 214, .08);  /* tinted wash behind chips */
  /* status — fixed, never themed, never reused as series */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --up: #006300;              /* success text */
  /* categorical slots — overridden per page, fixed order */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  /* premium-ui-design quick sheet */
  --r-card: 12px;
  --r-sm: 8px;
  --gap: 32px;
  --shadow-card: 0 1px 2px rgba(11, 11, 11, .04), 0 8px 24px rgba(11, 11, 11, .06);
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--page);
  color: var(--ink-1);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* ---------- layout ---------- */
.page { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--ring);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  font-size: 15px;
  font-weight: 700;
  padding: 4px 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar .brand .dot {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-ink));
  flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 13.5px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background .15s;
}
.side-item:hover { background: var(--accent-wash); color: var(--ink-1); }
.side-item.active {
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 600;
}
.side-item .ic { width: 18px; text-align: center; flex: none; }
.side-group {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 12px 6px;
}
.backlink {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--ring);
  font-size: 12.5px;
  color: var(--ink-3);
}
.backlink a { color: var(--ink-3); }

.main { padding: 24px var(--gap) 48px; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.topbar h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.topbar .sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }

/* ---------- card ---------- */
.card {
  background: var(--surface-2);
  border: 1px solid var(--ring);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  min-width: 0;
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title .hint { font-size: 12px; font-weight: 400; color: var(--ink-3); }

.grid { display: grid; gap: var(--gap); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page { grid-template-columns: 200px 1fr; }
}
@media (max-width: 900px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .page { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
}

/* ---------- stat tile ---------- */
.stat-tile { display: flex; flex-direction: column; gap: 6px; }
.stat-tile .label { font-size: 12.5px; color: var(--ink-2); }
.stat-tile .value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.stat-tile .delta { font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.stat-tile .delta.up { color: var(--up); }
.stat-tile .delta.down { color: var(--critical); }
.stat-tile .delta.flat { color: var(--ink-3); }

/* ---------- chips / badges (status always icon + label) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip.good { color: #006300; background: rgba(12, 163, 12, .10); border-color: rgba(12, 163, 12, .35); }
.chip.warning { color: #7a5800; background: rgba(250, 178, 25, .14); border-color: rgba(250, 178, 25, .5); }
.chip.serious { color: #8a3d14; background: rgba(236, 131, 90, .12); border-color: rgba(236, 131, 90, .45); }
.chip.critical { color: #a32b2b; background: rgba(208, 59, 59, .10); border-color: rgba(208, 59, 59, .4); }
.chip.neutral { color: var(--ink-2); background: rgba(137, 135, 129, .10); border-color: var(--ring); }

/* ---------- buttons ---------- */
.btn {
  border: none;
  border-radius: var(--r-sm);
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent-ink); color: #fff; }
.btn.primary:hover { box-shadow: 0 4px 14px rgba(11, 11, 11, .18); }
.btn.ghost {
  background: none;
  border: 1px solid var(--ring);
  color: var(--ink-2);
}
.btn.ghost:hover { background: var(--accent-wash); color: var(--accent-ink); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--ring);
}
.tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--grid);
  color: var(--ink-1);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--accent-wash); }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }
.tbl .strong { font-weight: 600; }

/* ---------- meter ---------- */
.meter { width: 100%; }
.meter .track {
  height: 8px;
  border-radius: 999px;
  background: var(--accent-wash);
  overflow: hidden;
}
.meter .fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  width: 0;
  transition: width .8s cubic-bezier(.22, .8, .3, 1);
}
.meter-row { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.meter-row .k { color: var(--ink-2); }
.meter-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- toggle switch ---------- */
.toggle {
  position: relative;
  width: 44px; height: 24px;
  border-radius: 999px;
  background: var(--grid);
  border: none;
  cursor: pointer;
  transition: background .2s;
  flex: none;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 11, 11, .25);
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(20px); }

/* ---------- chart host ---------- */
.chart { width: 100%; }

/* ---------- small helpers ---------- */
.muted { color: var(--ink-3); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap8 { gap: 8px; }
.gap16 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.mt16 { margin-top: 16px; }
.mb0 { margin-bottom: 0; }