/* mc_name_sniper coordinator — dark "precision instrument" admin panel.
   IBM Plex Sans (chrome) + Plex Mono (every datum). Hairline borders, one
   cold teal accent, semantic green/amber/red reserved for status. No
   gradients, glass, or decoration for its own sake. */

/* Self-hosted IBM Plex (latin subset) — NO third-party font CDN. A render-
   blocking `fonts.googleapis.com` <link> used to stall first paint on every
   page whenever the network throttled/blocked the CDN (the same class of block
   that left the uPlot charts blank). These woff2 files are vendored under
   web/static/fonts/ and served locally with an immutable cache. font-display:
   swap → text paints immediately in the fallback, upgrading to Plex when ready. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/plex-mono-600.woff2') format('woff2'); }

:root {
  --bg:        #0a0c0e;
  --bg-raise:  #101417;
  --bg-inset:  #0d1013;
  --bg-hover:  #151b20;
  --line:      #1b2127;
  --line-2:    #28313a;
  --tx:        #d8dde3;
  --tx-dim:    #99a2ab;
  --tx-mute:   #69727b;
  --accent:    #3db5a6;
  --accent-bg: rgba(61,181,166,.12);
  --ok:        #4cc38a;
  --warn:      #d8a13a;
  --crit:      #ef6b5e;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--tx);
  font: 400 13px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--tx-mute); }
.strong { font-weight: 600; color: #eef1f4; }
.accent { color: var(--accent); }
.pad { padding: 18px; }
.ellipsis { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a { color: var(--accent); text-decoration: none; }

/* ---- layout ---- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 216px; flex: none; background: var(--bg-raise);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px;
  font-weight: 600; letter-spacing: .2px; border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 10px; height: 10px; border-radius: 2px; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
.brand-text { font-size: 13px; color: #eef1f4; }

.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  color: var(--tx-dim); padding: 7px 12px; border-radius: 6px; font-size: 13px;
  border-left: 2px solid transparent; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--bg-hover); color: var(--tx); }
.nav-item.is-active {
  background: var(--accent-bg); color: #eaf6f4; border-left-color: var(--accent);
}
.nav-sep {
  font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-mute); padding: 16px 12px 6px;
}
.sidebar-foot { padding: 12px 18px; border-top: 1px solid var(--line); }
.linkbtn {
  background: none; border: none; color: var(--tx-mute); cursor: pointer;
  font: 400 12px var(--sans); padding: 0;
}
.linkbtn:hover { color: var(--crit); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px; height: 52px;
  background: rgba(10,12,14,.85); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar-title { font-weight: 600; font-size: 14px; text-transform: capitalize; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.sse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tx-mute); }
.sse-dot.live { background: var(--ok); box-shadow: 0 0 0 3px rgba(76,195,138,.16); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.verdict {
  font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 5px; border: 1px solid var(--line-2);
}
.verdict--unknown { color: var(--tx-mute); }
.verdict--collecting { color: var(--ok); border-color: rgba(76,195,138,.35); background: rgba(76,195,138,.08); }
.verdict--degraded { color: var(--warn); border-color: rgba(216,161,58,.4); background: rgba(216,161,58,.08); }
.verdict--critical { color: var(--crit); border-color: rgba(239,107,94,.45); background: rgba(239,107,94,.10); }

.content { padding: 22px; max-width: 1320px; width: 100%; transition: opacity .12s ease; }
/* boosted-nav (app.js) in-flight: a brief functional dim while the next tab's
   content is fetched + swapped — no full-page reload, the SSE link stays up. */
.content.is-loading { opacity: .5; }

/* ---- vitals ---- */
.vitals {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; margin-bottom: 22px;
}
.stat { background: var(--bg-raise); padding: 14px 16px; }
.stat-label {
  font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-mute); margin-bottom: 8px;
}
.stat-value { font: 500 21px/1 var(--mono); font-variant-numeric: tabular-nums; color: #eef1f4; white-space: nowrap; }

/* ---- panel ---- */
.panel { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 22px; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; }

/* ---- stats tab (uPlot line charts) ---- */
.stats-controls { display: flex; align-items: baseline; gap: 14px; }
.stats-select {
  background: var(--bg-inset); color: var(--tx); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 3px 6px; font: 500 12px var(--mono); margin-left: 6px;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; padding: 16px;
}
@media (max-width: 1000px) { .stats-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 7px; padding: 12px 12px 6px; }
.chart-title {
  font: 600 11px var(--sans); color: var(--tx-dim); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 8px;
}
.chart { width: 100%; }
/* floating cursor tooltip (the "mouse helper") — shown on the hovered chart only */
.stats-tip {
  position: absolute; z-index: 50; pointer-events: none;
  background: rgba(13, 16, 19, .97); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 7px 9px; font: 11px var(--mono); color: var(--tx);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45); min-width: 132px;
}
.stats-tip-t { color: var(--tx-dim); margin-bottom: 5px; font-weight: 600; }
.stats-tip-r { display: flex; justify-content: space-between; gap: 16px; line-height: 1.55; }
.stats-tip-k { color: var(--tx-dim); display: flex; align-items: center; }
.stats-tip-k i { width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; display: inline-block; }
.stats-tip-v { color: var(--tx); font-variant-numeric: tabular-nums; }

/* ---- fleet cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; padding: 16px; }
.card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 7px; padding: 14px; }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.card-id { font: 600 14px var(--mono); }
.card-prefix { font-size: 11px; margin-bottom: 12px; }
.card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.card-stat-label { font: 600 9px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-mute); }
.card-stat-value { font: 500 15px/1.4 var(--mono); font-variant-numeric: tabular-nums; }

/* ---- live drop feed (the ledger) ---- */
.feed { font-family: var(--mono); }
.feed-head, .feed-row {
  display: grid; grid-template-columns: 1fr 1.3fr 1.3fr 1.6fr; gap: 16px;
  padding: 9px 18px; align-items: center;
}
.feed-head {
  font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-mute); border-bottom: 1px solid var(--line);
}
.feed-body { max-height: 460px; overflow-y: auto; }
.feed-row { border-bottom: 1px solid var(--line); font-size: 13px; }
.feed-row:last-child { border-bottom: none; }
.feed-row.is-new { animation: flash 1.6s ease-out; }
.feed-row.is-suspect { box-shadow: inset 3px 0 0 var(--warn); }
@keyframes flash { from { background: var(--accent-bg); } to { background: transparent; } }
.col-claim.accent { color: var(--accent); }

/* ---- grid tables ---- */
.grid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.grid th {
  text-align: left; font: 600 10px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx-mute); padding: 11px 18px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.grid td { padding: 9px 18px; border-bottom: 1px solid var(--line); color: var(--tx-dim); }
.grid tbody tr:hover { background: var(--bg-hover); }
.grid tr.is-suspect td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.grid tr.is-reclaimed { opacity: .5; }
.grid tr.is-reclaimed td:first-child { box-shadow: inset 3px 0 0 var(--tx-mute); text-decoration: line-through; }

/* ---- pills ---- */
.pill {
  font: 600 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--tx-dim);
}
.pill--up { color: var(--ok); border-color: rgba(76,195,138,.35); background: rgba(76,195,138,.08); }
.pill--down { color: var(--crit); border-color: rgba(239,107,94,.35); background: rgba(239,107,94,.08); }
.pill--draining, .pill--autonomous { color: var(--warn); border-color: rgba(216,161,58,.35); background: rgba(216,161,58,.08); }

/* ---- forms ---- */
.filterbar { display: flex; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.input {
  background: var(--bg-inset); border: 1px solid var(--line-2); border-radius: 6px;
  color: var(--tx); padding: 9px 12px; font: 400 13px var(--sans); width: 100%; max-width: 360px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.btn {
  background: var(--bg-hover); border: 1px solid var(--line-2); border-radius: 6px;
  color: var(--tx); padding: 8px 14px; font: 500 13px var(--sans); cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: #eaf6f4; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #04110f; font-weight: 600; }
.btn--primary:hover { filter: brightness(1.08); color: #04110f; }
.pager { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }

/* ---- mini controls (Phase 4b) ---- */
.controls { display: flex; gap: 6px; white-space: nowrap; }
.btn--mini { padding: 4px 10px; font-size: 11px; border-radius: 5px; }

/* segmented operating-point dial (A/B/C) */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; }
.seg-btn {
  background: var(--bg-hover); border: none; border-right: 1px solid var(--line-2);
  color: var(--tx-dim); padding: 4px 10px; font: 600 11px var(--mono); cursor: pointer;
  transition: background .12s, color .12s;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--tx); background: var(--bg-inset); }
.seg-btn.is-on { background: var(--accent-bg); color: #eaf6f4; box-shadow: inset 0 -2px 0 var(--accent); }
.btn--danger { color: var(--crit); border-color: rgba(239,107,94,.3); }
.btn--danger:hover { border-color: var(--crit); color: #ffd9d4; background: rgba(239,107,94,.1); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { border-color: var(--line-2); color: var(--tx); background: var(--bg-hover); }

/* ---- toasts ---- */
.toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.toast {
  font: 500 12.5px var(--sans); padding: 10px 14px; border-radius: 7px; min-width: 230px; max-width: 420px;
  background: var(--bg-raise); border: 1px solid var(--line-2); color: var(--tx);
  box-shadow: 0 8px 28px rgba(0,0,0,.46); transition: opacity .3s ease, transform .3s ease;
}
.toast--ok { border-left: 3px solid var(--ok); }
.toast--warn { border-left: 3px solid var(--warn); }
.toast--crit { border-left: 3px solid var(--crit); }
.toast--hide { opacity: 0; transform: translateY(6px); }

/* ---- alerts (Phase 5) ---- */
.row-gap { display: flex; align-items: center; gap: 14px; }
.alert-badge {
  font: 600 11px var(--mono); min-width: 20px; text-align: center; padding: 2px 7px;
  border-radius: 10px; color: #2a0c08; background: var(--crit); border: 1px solid var(--crit);
}
.alert-badge[hidden] { display: none; }

.pill--critical { color: var(--crit); border-color: rgba(239,107,94,.4); background: rgba(239,107,94,.10); }
.pill--warn     { color: var(--warn); border-color: rgba(216,161,58,.4); background: rgba(216,161,58,.08); }
.pill--info     { color: var(--accent); border-color: rgba(61,181,166,.4); background: var(--accent-bg); }
.pill--state-open     { color: var(--warn); border-color: rgba(216,161,58,.4); }
.pill--state-ack      { color: var(--tx-dim); }
.pill--state-snoozed  { color: var(--tx-mute); }
.pill--state-resolved { color: var(--ok); border-color: rgba(76,195,138,.35); }

.alert-row.alert--critical td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.alert-row.alert--warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.alert-row.is-resolved { opacity: .55; }
.ellipsis-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- empty state ---- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 24px; text-align: center; color: var(--tx-mute); }
.empty p { max-width: 460px; margin: 0; line-height: 1.6; }
.empty-mark { width: 26px; height: 26px; border: 1px dashed var(--line-2); border-radius: 6px; }

/* ---- login ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; background:
  radial-gradient(900px 500px at 50% -10%, #0e1418 0%, var(--bg) 60%); }
.login-card {
  width: 320px; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: #eef1f4; }
.login-sub { font-size: 11px; color: var(--tx-mute); margin-top: -8px; }
.login-err { background: rgba(239,107,94,.1); border: 1px solid rgba(239,107,94,.35); color: var(--crit); padding: 9px 12px; border-radius: 6px; font-size: 12px; }
.login-card .input { max-width: none; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .brand { border-bottom: none; border-right: 1px solid var(--line); }
  .nav { flex-direction: row; padding: 8px; }
  .nav-sep, .sidebar-foot { display: none; }
  .vitals { grid-template-columns: repeat(3, 1fr); }
  .feed-head, .feed-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .feed-head .col-claim, .feed-row .col-claim, .feed-head .col-meta, .feed-row .col-meta { display: none; }
}