/* Metron admin — the only web surface.
   Same palette and type as the app: olive-charcoal chrome, marble ground,
   terracotta accent, sage for healthy states. Newsreader carries every number. */

:root {
  --ground: #1C1F1A;
  --surface: #24281F;
  --marble: #F4F1EA;
  --card: #fff;
  --terracotta: #C4703F;
  --terracotta-ink: #A85A2C;
  --sage: #7D8F6E;
  --sage-ink: #4D5C42;
  --sage-mid: #5F7152;
  --ink: #1C1F1A;
  --ink-60: rgba(28, 31, 26, .62);
  --ink-68: rgba(28, 31, 26, .68);
  --rule: rgba(28, 31, 26, .08);
  --rule-strong: rgba(28, 31, 26, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  /* The design presented each screen as a 1080px artboard card. That is how a
     design canvas shows a page, not how an admin panel should sit in a browser
     — as a real surface it fills the window. */
  background: var(--marble);
  color: var(--ink);
  font: 400 15px/1.55 Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ── Top bar ─────────────────────────────────────────────── */

/* The bar spans the window; its contents align to the same measure as the page
   below it, so nothing looks adrift on a wide monitor. */
.topbar { background: var(--ground); color: var(--marble); }
.topbar-inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 30px;
}
.brand { font: 400 20px/1 Newsreader, serif; letter-spacing: .02em; }
.badge-admin {
  font: 500 10px/1 Archivo; letter-spacing: .14em;
  color: rgba(244, 241, 234, .45);
  padding: 4px 8px; border: 1px solid rgba(244, 241, 234, .2); border-radius: 4px;
}
.nav { flex: 1; display: flex; gap: 22px; padding-left: 14px; }
.nav a {
  font: 500 13px/1 Archivo; color: rgba(244, 241, 234, .5); text-decoration: none;
}
.nav a:hover { color: rgba(244, 241, 234, .8); }
.nav a.active { font-weight: 600; color: var(--terracotta); }
.operator { font: 400 12px/1 Archivo; color: rgba(244, 241, 234, .4); }

/* ── Page ────────────────────────────────────────────────── */

.page { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 30px 48px; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-head h1 { margin: 0; font: 400 30px/1.15 Newsreader, serif; }
.page-head p { margin: 10px 0 0; font: 400 13px/1.55 Archivo; color: var(--ink-60); max-width: 62ch; }
.page-meta { font: 400 12px/1 Archivo; color: var(--ink-60); white-space: nowrap; }

.status-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 13px; border-radius: 6px;
  background: rgba(125, 143, 110, .16); border: 1px solid rgba(125, 143, 110, .4);
  font: 500 12px/1 Archivo; color: var(--sage-ink); white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-mid); flex: none; }

/* ── Tiles ───────────────────────────────────────────────── */

.tiles { display: grid; gap: 1px; margin-top: 26px; background: rgba(28, 31, 26, .10); }
.tiles.c6 { grid-template-columns: repeat(6, 1fr); }
.tiles.c5 { grid-template-columns: repeat(5, 1fr); }
.tiles.c4 { grid-template-columns: repeat(4, 1fr); }
.tile { background: var(--card); padding: 20px 18px; }
.tile-label { font: 500 9.5px/1 Archivo; letter-spacing: .13em; color: var(--ink-68); }
.tile-value { font: 300 34px/1 Newsreader, serif; margin-top: 12px; }
.tile-value .unit { font-size: 17px; }
.tile-note { font: 400 11.5px/1.35 Archivo; color: var(--ink-60); display: block; margin-top: 9px; }
.tile-note.good { color: var(--sage-mid); }

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

.grid { display: grid; gap: 26px; margin-top: 28px; align-items: start; }
.grid.split { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }

@media (max-width: 1100px) {
  .grid.split { grid-template-columns: 1fr; }
  .tiles.c6, .tiles.c5 { grid-template-columns: repeat(3, 1fr); }
  .tiles.c4 { grid-template-columns: repeat(2, 1fr); }
  .nav { gap: 14px; overflow-x: auto; }
}
.stack { display: flex; flex-direction: column; gap: 20px; }

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 24px;
}
.card.dark { background: var(--ground); color: var(--marble); border-color: transparent; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-label { font: 500 10px/1 Archivo; letter-spacing: .14em; color: var(--ink-68); }
.card.dark .card-label { color: rgba(244, 241, 234, .45); }
.card-aside { font: 400 12px/1 Archivo; color: var(--ink-60); }
.card-note {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font: 400 12px/1.6 Archivo; color: var(--ink-60);
}

/* ── Charts (CSS bars, no JS — the CSP forbids script) ───── */

.chart { position: relative; margin-top: 16px; }
/* Height comes from the template so the bar pixel maths and the container
   agree by construction. */
.chart-bars { display: flex; align-items: flex-end; gap: 6px; }
/* The slot is stretched to the container height, so it is a definite-height
   containing block. The bar is absolutely positioned inside it, which is the
   only reliable way to make a percentage height resolve here — as a flex item
   its cross size would be content-based and the percentage would collapse. */
.chart-bars .bar-slot { flex: 1; display: flex; align-items: flex-end; }
.chart-bars .bar { width: 100%; background: var(--sage); border-radius: 2px 2px 0 0; }
.chart-bars .bar.current { background: var(--terracotta); }
.chart-bars .bar.over { background: var(--terracotta); }
.chart-axis {
  display: flex; justify-content: space-between; margin-top: 8px;
  font: 400 11.5px/1 Archivo; color: var(--ink-60);
}
.break-even {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--terracotta);
  font: 400 9px/1 Archivo; color: var(--terracotta-ink);
}
.break-even span { position: absolute; top: -12px; left: 0; background: var(--card); padding-right: 6px; }
.budget-line {
  position: absolute; top: 0; bottom: 26px;
  border-left: 1px dashed var(--terracotta);
  font: 400 9px/1 Archivo; color: var(--terracotta-ink);
}
.budget-line span { position: absolute; top: 0; left: 6px; white-space: nowrap; }

.spark { width: 100%; height: 150px; margin-top: 14px; overflow: visible; }
.retention-row { display: flex; justify-content: space-between; margin-top: 14px; font: 400 12.5px/1 Archivo; color: var(--ink-60); }
.retention-row strong { font: 400 15px/1 Newsreader, serif; color: var(--ink); }

/* ── Provider switch ─────────────────────────────────────── */

.providers { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; background: rgba(244, 241, 234, .10); }
.provider { background: var(--ground); padding: 15px 16px; display: flex; align-items: center; gap: 12px; }
.provider.live { background: var(--surface); }
.provider.blocked { opacity: .55; }
.provider-name { font: 500 13.5px/1.2 Archivo; }
.provider-meta { font: 400 11.5px/1.2 Archivo; color: rgba(244, 241, 234, .42); margin-top: 3px; }
.provider form { margin: 0; }
.tag {
  padding: 5px 9px; border-radius: 4px;
  font: 600 10px/1 Archivo; letter-spacing: .04em;
}
.tag.live { background: var(--terracotta); color: var(--ground); }
.tag.switch {
  background: none; border: 1px solid rgba(244, 241, 234, .22);
  color: rgba(244, 241, 234, .6); font-weight: 500; cursor: pointer;
  font-family: Archivo, system-ui, sans-serif;
}
.tag.switch:hover { border-color: var(--terracotta); color: var(--terracotta); }
.tag.blocked { border: 1px solid rgba(244, 241, 234, .16); color: rgba(244, 241, 234, .4); font-weight: 500; }
.guard-rail { margin: 14px 0 0; font: 400 11.5px/1.6 Archivo; color: rgba(196, 112, 63, .9); }

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

.toolbar { display: flex; gap: 8px; align-items: center; }
.toolbar .chip {
  padding: 10px 14px; border-radius: 6px; border: 1px solid rgba(28, 31, 26, .16);
  font: 400 12.5px/1 Archivo; color: var(--ink-60); text-decoration: none;
}
.toolbar .chip.solid { background: var(--ground); color: var(--marble); border-color: transparent; font-weight: 500; }

.table { margin-top: 26px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.table table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 11px 18px;
  background: rgba(28, 31, 26, .04); border-bottom: 1px solid var(--rule);
  font: 500 9.5px/1 Archivo; letter-spacing: .13em; color: var(--ink-68);
}
.table td { padding: 15px 20px; border-bottom: 1px solid rgba(28, 31, 26, .06); font: 400 13px/1.4 Archivo; }
.table tr:last-child td { border-bottom: none; }
.num { text-align: right; font: 400 15px/1 Newsreader, serif; white-space: nowrap; }
.mono { font: 400 12.5px/1 Newsreader, serif; color: var(--ink-60); }
.muted { color: var(--ink-60); }
.up { color: var(--terracotta-ink); }
.down { color: var(--sage-ink); }

/* ── Category bars ───────────────────────────────────────── */

.cat { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(28, 31, 26, .06); }
.cat:last-child { border-bottom: none; }
.cat-name { width: 250px; font: 400 13px/1.3 Archivo; }
/* Both are spans; without display:block an inline element ignores width
   and height entirely, so the bars render as empty tracks. */
.cat-track { flex: 1; display: block; height: 8px; background: rgba(28, 31, 26, .07); border-radius: 3px; overflow: hidden; }
.cat-fill { display: block; height: 8px; background: var(--sage); }
.cat-fill.hot { background: var(--terracotta); }
.cat-error { width: 66px; text-align: right; font: 400 15px/1 Newsreader, serif; }
.cat-count { width: 66px; text-align: right; font: 400 12px/1 Archivo; color: var(--ink-60); }

.soon { padding: 60px 26px; text-align: center; color: var(--ink-60); }
.soon h1 { font: 400 24px/1 Newsreader, serif; color: var(--ink); margin: 0 0 10px; }

.error-page { padding: 40px 26px; }
.error-page h1 { font: 400 24px/1 Newsreader, serif; margin: 0 0 12px; }
.error-page p { max-width: 60ch; color: var(--ink-60); font-size: 12px; line-height: 1.6; }
.error-page a { color: var(--terracotta-ink); }