:root {
  --bg: #0c1219;
  --card: #111827;
  --border: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #ef4444;
  --accent: #60a5fa;
  --grid: #33425c;
  --panel: #111827;
  --radius: 6px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: #0a0f15;
  position: sticky; top: 0; z-index: 10;
  font-size: 15px;
}
.topbar strong { letter-spacing: 0.5px; }
.topbar .spacer { flex: 1; }
.topbar .updated { font-size: 13px; color: var(--muted); }
.topbar .live { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
.topbar .live.ok { background: var(--ok); }
.topbar .live.err { background: var(--err); }
.topbar .user { font-size: 14px; color: var(--muted); }
/* App version badge — what's live now (auto-bumped each commit). */
.topbar .appver { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .3px; padding: 2px 8px; border: 1px solid var(--grid); border-radius: 6px; background: #0d1420; }
.login-ver { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .3px; }
.topbar button {
  background: #1f2937; color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.topbar button:hover { background: #2a3445; }

/* ── Layout ─────────────────────────────────────────────────────────────────
   One ".layout" = one SITE row: a bordered strip holding a horizontal set of
   cards + that site's live-log panel on the right. Each row is a fixed 50vh, so
   two sites stack and stay visible at once. The border makes each row a clear,
   distinct category. Cards size to their content and fill the row height; tall
   content scrolls inside a card, and a too-wide row scrolls sideways. */
.layout {
  display: flex; flex-direction: column; gap: 8px;
  height: 50vh;
  margin: 12px; padding: 8px 10px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .015);
}
/* Slim per-row site header — the site URL shown ONCE per row, not on each card. */
.row-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 1px 4px 7px; border-bottom: 1px solid var(--grid);
}
.row-head .rh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.row-head .rh-label { font-size: 10px; text-transform: uppercase; letter-spacing: .9px; color: var(--muted); }
.row-head .rh-url { font-size: 15px; font-weight: 700; color: var(--accent); }

/* Availability surfaced INTO the row header: two status pills, big status word. */
.hdr-avail { display: flex; gap: 10px; margin-left: auto; }
.hap {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 13px; border: 1px solid var(--grid); border-radius: 8px;
  background: #0d1420;
}
.hap-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.hap-mid { line-height: 1.15; }
.hap-name { font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.hap-detail { font-size: 11px; color: var(--text); opacity: .82; white-space: nowrap; }
.hap-freq { color: var(--accent); }
.hap-status { font-size: 22px; font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.hap-ms { font-size: 14px; font-weight: 700; color: var(--text); }
.hap-ms span { font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 1px; }
/* status colors */
.hap.up .hap-dot { background: var(--ok); box-shadow: 0 0 7px #34d39988; } .hap.up .hap-status { color: var(--ok); }
.hap.down .hap-dot { background: var(--err); } .hap.down .hap-status { color: var(--err); }
.hap.unknown .hap-dot { background: var(--warn); } .hap.unknown .hap-status { color: var(--warn); }
.row-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
.grid {
  flex: 0 1 auto; min-width: 0; max-width: max-content; height: 100%;  /* size to the cards, but shrink + scroll internally when space is tight */
  display: flex; gap: 8px; overflow-x: auto;
}
.card, .logpanel { height: 100%; }             /* fill the row-body height */

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 11px 13px;
  flex: 0 0 auto;                              /* width = content, no wasted space */
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;        /* tall content scrolls inside */
}
.grid::-webkit-scrollbar, .card::-webkit-scrollbar { width: 8px; height: 8px; }
.grid::-webkit-scrollbar-thumb, .card::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 5px; }
/* compact engagement columns so the metric name stays on one line */
.card table.kpi.engagement td, .card table.kpi.engagement th { padding-left: 8px; padding-right: 8px; }
.card table.kpi.engagement td:first-child, .card table.kpi.engagement th:first-child { white-space: nowrap; }
/* Any KPI table that's wider than its compact card scrolls sideways. */
.card .kpi-wrap { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }
.card .kpi-wrap::-webkit-scrollbar { height: 8px; }
.card .kpi-wrap::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 5px; }
/* Clean single-line card header, centered. Bleeds to card edges and stays
   pinned to the top while the card body scrolls. */
.card-head {
  margin: -11px -13px 9px; padding: 7px 13px;
  border-bottom: 1px solid var(--grid);
  background: #141d2b;
  border-radius: 8px 8px 0 0;
  position: sticky; top: -11px; z-index: 2;
  text-align: center; white-space: nowrap;
}
.ch-subject { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
/* qualifier (e.g. "Supabase → MySQL") matches the header's font, just dimmer */
.ch-sub { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ch-freq { font-size: 11px; font-weight: 500; color: var(--accent); text-transform: none; letter-spacing: 0; }
.cap { font-size: 11px; color: var(--muted); text-align: center; margin: -4px 0 8px; }
/* legacy centered header (placeholder cards) */
.card-header {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); text-align: center; margin-bottom: 8px;
}
.card .num { text-align: right; }
.card .strong { font-weight: 600; font-size: 17px; }
.card table.kpi { border-collapse: collapse; font-size: 14px; flex: 0 0 auto; }
.card table.kpi th { font-weight: 500; color: var(--muted); }
.card table.kpi td, .card table.kpi th { padding: 6px 12px; border: 1px solid var(--grid); }
.card table.kpi th:first-child, .card table.kpi td:first-child { padding-left: 10px; }
.card table.kpi tr:first-child th { border-bottom-width: 2px; background: rgba(255,255,255,.03); }
.card table.kpi tr:first-child th:first-child { text-align: left; }
/* Engagement: tighter rows */
.card table.kpi.engagement td,
.card table.kpi.engagement th { padding-top: 4px; padding-bottom: 4px; }
.subhead { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); text-align: center; margin: 6px 0; }
/* Scrollable table region (DB Backup MySQL list): ~3 rows visible, frozen header.
   Header is separate-collapsed so position:sticky holds; a box-shadow draws the
   divider that a collapsed border would otherwise drop while scrolling. */
.tscroll { max-height: 132px; overflow-y: auto; border: 1px solid var(--grid); border-radius: 5px; }
.tscroll table.kpi { width: 100%; border-collapse: separate; border-spacing: 0; }
.tscroll table.kpi td, .tscroll table.kpi th { border-left: 0; border-right: 0; }
.tscroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: #141d2b;
  box-shadow: inset 0 -2px 0 var(--grid);   /* divider that survives scrolling */
}
.tscroll::-webkit-scrollbar { width: 9px; }
.tscroll::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 5px; }
.divider { height: 1px; background: var(--grid); margin: 11px -16px; }
.kv { display: flex; gap: 0; margin-top: 8px; }
.kv > div { padding: 0 14px; border-left: 1px solid var(--grid); }
.kv > div:first-child { padding-left: 0; border-left: 0; }

/* DB Backup card: two columns — backup stats (left) | MySQL table list (right).
   The table fills the right column's full height so there's no empty space. */
.bak-split { display: flex; flex: 1; min-height: 0; }
.bak-left { display: flex; flex-direction: column; justify-content: center; padding-right: 14px; }
.bak-left .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 10px; }
.bak-left .kv > div { padding: 0; border-left: 0; }
.bak-right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 14px; border-left: 1px solid var(--grid); }
.bak-right .subhead { margin: 0 0 6px; }
.bak-right .tscroll { max-height: none; flex: 1; min-height: 0; }
.dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.ph-nums { display: flex; gap: 0; margin: 2px 0; }
.ph-nums > div { padding: 0 16px; border-left: 1px solid var(--grid); }
.ph-nums > div:first-child { padding-left: 0; border-left: 0; }

/* Utility classes used by renderers */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.big   { font-size: 20px; font-weight: 600; }
.ok    { color: var(--ok); }
.warn  { color: var(--warn); }
.err   { color: var(--err); }
.row   { display: flex; gap: 24px; align-items: flex-end; }
.empty { color: var(--muted); padding: 48px; text-align: center; font-size: 18px; }

/* Top bar additions */
.topbar .logo svg { display: block; }
.topbar .mon-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.topbar .mon-url { color: var(--accent); font-weight: 600; }
.rollup { display: flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 20px; border: 1px solid var(--border); }
.rollup .dot { width: 10px; height: 10px; }
.rollup.green { background:#0f1a14; border-color:#1f3a2c; } .rollup.green .rollup-text { color: var(--ok); } .rollup.green .dot { background: var(--ok); box-shadow: 0 0 8px #34d39988; }
.rollup.amber .dot { background: var(--warn); } .rollup.amber .rollup-text { color: var(--warn); }
.rollup.red .dot { background: var(--err); } .rollup.red .rollup-text { color: var(--err); }
.incident-badge { display:flex; align-items:center; gap:6px; padding:4px 11px; background:#2a0f0f; border:1px solid #5b1d1d; border-radius:6px; color:#fca5a5; font-weight:600; cursor:pointer; }
.uptime { font-size: 13px; color: var(--muted); }

/* Live activity log panel */
/* Live-log console — grows to fill the empty space left of it. */
.logpanel { flex: 1 1 0; min-width: 380px; align-self: stretch; background:#0a0f15; border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; }
.logpanel-head { display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--border); }
.logpanel-head .log-title { font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--text); font-weight:600; }
.logpanel-head .log-meta { margin-left:auto; font-size:11px; color:#6b7280; }
.logpanel-head .dot.live { width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok); animation: livepulse 2s ease-in-out infinite; }
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.logfeed { flex:1; overflow:auto; padding:5px 0; font:12.5px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.logfeed .day { color:#7b8794; font-size:10px; text-transform:uppercase; letter-spacing:.8px; padding:8px 14px 3px; font-family: ui-sans-serif, system-ui, sans-serif; }
/* one streaming row: time · colored badge · message */
.logrow { display:grid; grid-template-columns: 62px 100px 1fr; gap:10px; align-items:start; padding:3px 14px; }
.logrow:hover { background: rgba(255,255,255,.035); }
.lr-time { color:#5b6675; font-variant-numeric: tabular-nums; white-space:nowrap; overflow:hidden; }
.lr-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; text-align:center; padding:1px 0; border-radius:4px; background:#1f2937; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-msg { color:#cdd6e3; word-break:break-word; }
.lr-msg b { color:#fff; font-weight:600; }   /* emphasised values (counts, sizes) */
/* newest line flashes once */
.logrow.fresh { animation: rowflash 1.2s ease-out; }
@keyframes rowflash { from { background: rgba(96,165,250,.18) } to { background: transparent } }
/* per-type badge colors (text + translucent bg of same hue) */
.log-ping        { color:#93c5fd; background:#60a5fa26; }
.log-refresh     { color:#cbd5e1; background:#9ca3af26; }
.log-posthog     { color:#c4b5fd; background:#a78bfa26; }
.log-betterstack { color:#5eead4; background:#2dd4bf26; }
.log-supabase    { color:#6ee7b7; background:#34d39926; }
.log-backup      { color:#fcd34d; background:#fbbf2426; }
.log-webhook     { color:#fda4af; background:#fb718526; }
.log-prune       { color:#94a3b8; background:#64748b26; }
.log-error       { color:#fca5a5; background:#ef444433; }

/* Login */
.login {
  max-width: 420px;
  margin: 120px auto;
  padding: 36px 32px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px;
}
.login h1 { margin: 0 0 24px; font-size: 26px; letter-spacing: 0.5px; }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.login input {
  padding: 12px 14px; font-size: 16px;
  background: #0a0f15; border: 1px solid var(--border);
  color: var(--text); border-radius: 6px;
}
.login input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.login button {
  padding: 14px; font-size: 16px;
  background: var(--accent); color: #0a0f15;
  border: 0; border-radius: 6px;
  font-weight: 600; cursor: pointer;
  margin-top: 6px;
}
.login button:hover { background: #7eb6fc; }
.login .error { color: var(--err); font-size: 14px; margin: 0; }

/* Edit mode */
body.editing .card {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  cursor: move;
}
body.editing .card .card-header span:last-child,
body.editing .card .card-head .ch-subject {
  background: var(--accent);
  color: #0a0f15;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
.cog-menu {
  margin-top: 14px; padding: 14px;
  background: #0a0f15;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 10px;
}
.cog-menu label {
  font-size: 13px; color: var(--muted);
  display: flex; gap: 8px; align-items: center;
}
.cog-menu select,
.cog-menu input[type=checkbox] {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 8px; border-radius: 4px;
  font-size: 14px;
}
.cog-menu .cog-close {
  background: var(--border); color: var(--text);
  border: 0; padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px; cursor: pointer;
  align-self: flex-start;
}
.cog-menu .cog-close:hover { background: #2a3445; }

.badge-stale {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  background: var(--warn);
  color: #0a0f15;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Settings modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal[hidden] { display: none; }
.modal-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; width: 440px; max-width: 92vw; display: flex; flex-direction: column; gap: 12px; }
.modal-head { font-size: 16px; font-weight: 600; }
.modal-card label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.modal-card input { padding: 9px 11px; font-size: 14px; background: #0a0f15; border: 1px solid var(--border); color: var(--text); border-radius: 6px; }
.modal-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.modal-actions button { background: var(--accent); color: #0a0f15; border: 0; padding: 9px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.modal-actions button.secondary { background: #1f2937; color: var(--text); }

/* header activity pills (PostHog raw-events store) */
.row-stats { display: flex; gap: 8px; align-items: stretch; flex: 1 1 auto; justify-content: center; min-width: 0; overflow: hidden; }
.statcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.05; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 3px 11px; min-width: 52px; }
.statcard.ok { border-color: rgba(63,185,80,.4); }
.statcard.amber { border-color: rgba(210,153,34,.5); }
.statcard.dim { opacity: .5; }
.statcard.wide { min-width: 90px; }
.statcard .sc-val { font-weight: 700; font-size: 15px; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statcard .sc-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.statcard.live .sc-val { color: var(--ok); }
.pulsecard { color: var(--ok); min-width: 70px; }
.pulsecard .sc-pulse-wrap { width: 64px; height: 20px; }
.sc-pulse { width: 100%; height: 20px; }