/* Yoda admin v1 — minimal, dense, terminal-feel */
:root {
  --bg: #0e1116;
  --fg: #cdd6f4;
  --muted: #6b7280;
  --accent: #89b4fa;
  --good: #a6e3a1;
  --warn: #f9e2af;
  --bad: #f38ba8;
  --grid: #1e2a38;
  --row-alt: #131820;
}
html, body {
  background: var(--bg); color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0; padding: 0;
}
header {
  display: flex; align-items: baseline; gap: 1em;
  padding: 0.6em 1em;
  border-bottom: 1px solid var(--grid);
}
header h1 { margin: 0; font-size: 1.2em; }
header h1 a { color: var(--accent); text-decoration: none; }
header small { color: var(--muted); }
main { padding: 1em; max-width: 1400px; margin: 0 auto; }
footer { padding: 1em; color: var(--muted); border-top: 1px solid var(--grid); margin-top: 2em; }
footer a { color: var(--muted); }

table.agents { border-collapse: collapse; width: 100%; }
table.agents th, table.agents td {
  padding: 0.4em 0.7em;
  border-bottom: 1px solid var(--grid);
  text-align: left;
  vertical-align: top;
}
table.agents thead { color: var(--muted); }
table.agents tbody tr:nth-child(even) { background: var(--row-alt); }
table.agents tbody tr:hover { background: #1a2230; }
table.agents .num { text-align: right; font-variant-numeric: tabular-nums; }
table.agents .focus, table.agents .models { color: var(--muted); }
table.agents tfoot td { padding-top: 0.6em; border-top: 2px solid var(--grid); }
table.agents tr.dead td:nth-child(2) { color: var(--bad); }
table.agents tr.paused { opacity: 0.6; }
table.agents tr.remote td:nth-child(2) { color: var(--muted); }

.badge {
  display: inline-block; padding: 0.1em 0.5em;
  border-radius: 0.5em; font-size: 0.85em;
  background: var(--grid);
}
.badge.state-active  { background: rgba(166, 227, 161, 0.2); color: var(--good); }
.badge.state-idle    { background: rgba(137, 180, 250, 0.15); color: var(--accent); }
.badge.state-dormant { background: rgba(107, 114, 128, 0.2); color: var(--muted); }
.badge.state-paused  { background: rgba(249, 226, 175, 0.2); color: var(--warn); }
.badge.state-remote  { background: rgba(137, 180, 250, 0.2); color: var(--accent); }
.badge.state-DEAD    { background: rgba(243, 139, 168, 0.2); color: var(--bad); }
tr.state-paused, tr.state-dormant { opacity: 0.55; }
tr.state-DEAD td:first-child { color: var(--bad); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.85em; margin-top: 1.5em; }

/* Burn section */
section.burn { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid var(--grid); }
section.burn h2 { margin-top: 0; }
section.burn h3 { margin: 1em 0 0.4em; font-size: 0.95em; font-weight: normal; color: var(--muted); }
.rolling-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; margin: 0.6em 0 1.2em; }
.rolling-card { padding: 0.8em 1em; background: var(--row-alt); border-left: 3px solid var(--accent); }
.rolling-card.cap-amber { border-left-color: var(--warn); background: #2a2300; }
.rolling-card.cap-red { border-left-color: #e55; background: #2a0000; }
.rolling-label { color: var(--muted); font-size: 0.85em; }
.rolling-num { font-size: 1.7em; font-variant-numeric: tabular-nums; color: var(--good); }
.rolling-sub { color: var(--muted); font-size: 0.8em; }
.rolling-cost { font-size: 0.95em; font-variant-numeric: tabular-nums; color: var(--accent); margin-top: 0.2em; }
.cost-totals { font-size: 0.85em; color: var(--muted); margin: -0.3em 0 0.8em; }
.cost-totals strong { color: var(--fg); }
table.agents .cost { color: var(--accent); }
.cap-bar-wrap { background: var(--grid); height: 4px; margin: 0.4em 0 0.1em; border-radius: 2px; }
.cap-bar { height: 4px; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
.cap-amber .cap-bar { background: var(--warn); }
.cap-red .cap-bar { background: #e55; }
.cap-pct { color: var(--muted); font-size: 0.75em; }
.calibration-note { font-size: 0.8em; color: var(--muted); margin: -0.6em 0 1em; }

.cost-panels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; margin: 0.8em 0 1.4em; }
.cost-panel { padding: 0.8em 1em; background: var(--row-alt); border-left: 3px solid var(--accent); }
.cost-panel.cap-amber { border-left-color: var(--warn); background: #2a2300; }
.cost-panel.cap-red   { border-left-color: #e55;       background: #2a0000; }
.panel-title  { color: var(--muted); font-size: 0.85em; }
.panel-total  { font-size: 1.7em; font-variant-numeric: tabular-nums; color: var(--good); margin: 0.15em 0 0.25em; }
table.agent-cost-table { width: 100%; border-collapse: collapse; margin-top: 0.5em; font-size: 0.82em; }
table.agent-cost-table td { padding: 0.1em 0.3em 0.1em 0; white-space: nowrap; }
table.agent-cost-table .agent-name { width: 100%; color: var(--fg); }
table.agent-cost-table .num  { font-variant-numeric: tabular-nums; color: var(--accent); text-align: right; }
table.agent-cost-table .pct  { text-align: right; min-width: 3.5em; }

.chart-block { margin: 0.6em 0 1em; }
.chart {
  display: block; width: 100%; height: auto; max-height: 130px;
  background: var(--row-alt); border: 1px solid var(--grid);
}
.chart .bar { fill: var(--accent); opacity: 0.8; }
.chart .bar.zero { fill: var(--grid); }
.chart .bar.hot { fill: var(--warn); }
.chart .bar.ok { fill: var(--accent); }
.chart .bar:hover { opacity: 1; fill: var(--good); }
.chart .tick { fill: var(--muted); font-size: 9px; font-family: ui-monospace, monospace; }
.chart .peak { fill: var(--muted); font-size: 9px; font-family: ui-monospace, monospace; }

section.agents-section h2 { margin-top: 0; }

.routines { margin: 0.8em 0; padding: 0.7em; background: var(--row-alt); border-left: 3px solid var(--accent); }
.routines button {
  font: inherit; background: var(--grid); color: var(--fg);
  border: 1px solid var(--grid); border-radius: 0.3em;
  padding: 0.3em 1em; cursor: pointer; margin: 0 0.3em;
}
.routines button:hover { filter: brightness(1.3); }

dl.kv {
  display: grid; grid-template-columns: 12em 1fr; gap: 0.3em 1em;
  margin: 1em 0;
}
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.controls form {
  margin: 0.6em 0; padding: 0.7em;
  background: var(--row-alt); border-left: 3px solid var(--accent);
}
.controls button {
  font: inherit; background: var(--grid); color: var(--fg);
  border: 1px solid var(--grid); border-radius: 0.3em;
  padding: 0.3em 1em; cursor: pointer; margin: 0 0.5em;
}
.controls button.pause { background: rgba(249, 226, 175, 0.2); color: var(--warn); }
.controls button.unpause { background: rgba(166, 227, 161, 0.2); color: var(--good); }
.controls button:hover { filter: brightness(1.3); }
.controls select { font: inherit; background: var(--grid); color: var(--fg); padding: 0.3em; }
.controls small { color: var(--muted); margin-left: 0.5em; }

a { color: var(--accent); }
code { color: var(--warn); }
ul { margin: 0.3em 0; padding-left: 1.5em; }

.auth-box { max-width: 400px; margin: 3em auto; padding: 2em; background: var(--row-alt); border: 1px solid var(--grid); }
.auth-form { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1em; }
.auth-form label { font-size: 0.85em; color: var(--muted); }
.auth-form input[type="email"] { background: var(--bg); color: var(--fg); border: 1px solid var(--grid); padding: 0.5em 0.7em; font-family: inherit; font-size: 1em; }
.auth-form input[type="email"]:focus { outline: 1px solid var(--accent); }

.transcript { max-height: 600px; overflow-y: auto; border: 1px solid var(--grid); padding: 0.5em; margin: 0.5em 0; }
.turn { margin: 0.4em 0; padding: 0.4em 0.6em; border-left: 3px solid var(--grid); }
.turn-assistant { border-left-color: var(--accent); }
.turn-user { border-left-color: var(--good); }
.turn-meta { color: var(--muted); font-size: 0.78em; display: block; margin-bottom: 0.2em; }
.turn-content { font-size: 0.88em; white-space: pre-wrap; word-break: break-word; }

.btn-secondary {
  display: inline-block; padding: 0.35em 0.8em;
  border: 1px solid var(--good); border-radius: 4px;
  color: var(--good); text-decoration: none; font-size: 0.88em;
}
.btn-secondary:hover { background: rgba(166,227,161,0.12); }

/* ── landing page ─────────────────────────────────────────────────────────
   The dashboard blocks ~8.8s on usage lookups; this page carries none of
   them, so keep it free of anything that needs a per-agent token query. */
.home-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.home-links .tile {
  flex: 1 1 14rem; padding: .85rem 1rem; border: 1px solid #333; border-radius: 6px;
  text-decoration: none; display: block;
}
.home-links .tile:hover { border-color: #888; }
.home-links .tile strong { display: block; margin-bottom: .2rem; }
.home-links .tile small { opacity: .7; }
table.agents td form { display: inline; margin: 0; }
table.agents td small.muted { margin-left: .4rem; }
.state.up { color: #5c5; }