:root {
  --bg: #0a0c0f;
  --panel: #0f1318;
  --panel-2: #171c24;
  --border: #243040;
  --text: #e8edf2;
  --muted: #8b98a5;
  --title: #5a7a90;
  --accent: #ffb020;      /* gator gold */
  --accent-2: #3fb950;
  --danger: #f85149;
  --blue: #58a6ff;

  /* value palette — mirrors gui.py */
  --c-blue: #4fc3f7;
  --c-green: #69f0ae;
  --c-amber: #ffcc02;
  --c-yellow: #ffe57f;
  --c-teal: #26c6da;
  --c-ok: #00e676;
  --c-stale: #ff9800;
  --c-fault: #ff1744;

  /* card accent stripes */
  --a-blue: #1565c0;
  --a-amber: #bf5000;
  --a-yellow: #b58c00;
  --a-green: #2e7d32;
  --a-cyan: #006064;
  --a-teal: #00695c;
  --a-gray: #263040;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.muted { color: var(--muted); }
.error { color: var(--danger); }

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; }
.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: min(360px, 90vw);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.login-card h1 { margin: 0; font-size: 22px; }
.login-card p { margin: 0; }
.login-card input, .login-card button, select, button { font: inherit; }
.login-card input {
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
button {
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--accent); color: #1a1200; font-weight: 600; cursor: pointer;
}
button.ghost { background: var(--panel-2); color: var(--text); font-weight: 500; }
button:hover { filter: brightness(1.06); }

/* ---------- app shell ---------- */
header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 500;
}
header h1 { font-size: 16px; margin: 0; letter-spacing: .3px; color: var(--c-blue); }
header .spacer { flex: 1; }
header select {
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text);
}
.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); font-size: 12px; color: var(--muted);
}
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.live-pill.on   .dot { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.live-pill.on   { color: var(--accent-2); }
.live-pill.stale .dot { background: var(--danger); }

/* view nav (Live | History) */
.viewnav { display: inline-flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.viewnav button {
  background: transparent; color: var(--muted); border: 0; padding: 6px 16px;
  border-radius: 8px; font-weight: 600; font-size: 13px;
}
.viewnav button.active { background: var(--a-blue); color: #fff; }
.viewnav button:hover:not(.active) { color: var(--text); }

main { padding: 12px; }

/* ---------- history view ---------- */
.range-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px;
}
.range-controls .ctl { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.range-controls select {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font: inherit; max-width: 340px;
}
.range-presets { display: inline-flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.range-presets button { background: transparent; color: var(--muted); border: 0; padding: 5px 11px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.range-presets button.active { background: var(--a-blue); color: #fff; }
.downsample-badge { margin-left: auto; font-size: 12px; font-family: "Courier New", monospace; }
.export-group { display: inline-flex; gap: 6px; }
.export-group button { font-size: 12px; padding: 6px 10px; }
.export-group button[disabled] { opacity: .5; cursor: default; }
.history-map { height: 360px; width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); margin-bottom: 12px; }

/* replay scrubber */
.replay-bar {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px;
}
.replay-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--title); font-weight: 700; }
.replay-time { font-family: "Courier New", monospace; font-size: 13px; color: var(--c-blue); min-width: 190px; text-align: right; }
#scrubber {
  flex: 1; appearance: none; height: 5px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); outline: none;
}
#scrubber::-webkit-slider-thumb {
  appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-blue); border: 2px solid var(--bg); cursor: pointer;
}
#scrubber::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-blue); border: 2px solid var(--bg); cursor: pointer;
}
.replay-grid { margin-bottom: 12px; }

/* ---------- subsystem card grid (mirrors gui.py rows) ---------- */
.subsystem-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  align-items: start;
}
/* Row 1: Main Battery | Motor | Speed | State of Charge */
.card-main_batt { grid-column: span 3; }
.card-motor     { grid-column: span 3; }
.card-speed     { grid-column: span 3; }
.card-soc       { grid-column: span 3; }
/* Row 2: MPPT Front | Middle | Back | Total Solar */
.card-mppt1, .card-mppt3, .card-mppt2 { grid-column: span 3; }
.card-solar     { grid-column: span 3; }
/* Row 3: Map | Contactors | Frames | Radio */
.card-map        { grid-column: span 5; }
.card-contactors { grid-column: span 3; }
.card-frames     { grid-column: span 2; }
.card-radio      { grid-column: span 2; }

@media (max-width: 1200px) {
  .subsystem-grid { grid-template-columns: repeat(6, 1fr); }
  /* two-up: Main Battery | Motor, then Speed | State of Charge */
  .card-main_batt, .card-motor, .card-speed, .card-soc { grid-column: span 3; }
  .card-mppt1, .card-mppt3, .card-mppt2, .card-solar { grid-column: span 3; }
  .card-map { grid-column: span 6; }
  .card-contactors { grid-column: span 2; }
  .card-frames, .card-radio { grid-column: span 2; }
}
@media (max-width: 760px) {
  .subsystem-grid { grid-template-columns: 1fr; }
  .subsystem-grid > .card { grid-column: 1 / -1 !important; }
}

/* ---------- card ---------- */
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-top: 3px solid var(--a-gray);
  border-radius: 6px; overflow: hidden;
  padding: 8px 14px 12px;
}
.card--blue   { border-top-color: var(--a-blue); }
.card--amber  { border-top-color: var(--a-amber); }
.card--yellow { border-top-color: var(--a-yellow); }
.card--green  { border-top-color: var(--a-green); }
.card--cyan   { border-top-color: var(--a-cyan); }
.card--teal   { border-top-color: var(--a-teal); }
.card--gray   { border-top-color: var(--a-gray); }

.card > h2 {
  margin: 0 0 6px; padding: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--title); font-weight: 700; border: 0;
}
.card-hr { border: 0; border-top: 1px solid var(--border); margin: 7px 0; }

.card-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 2px 0;
}
/* greyed-out: value shown but stale (>1 min, <5 min) */
.card-row.row-dim { opacity: .4; }
.card-big.dim { opacity: .4; }
.row-label { color: var(--muted); font-size: 14px; }
/* value + unit as one right-aligned group so numbers line up in a column.
   The number is right-aligned; the unit slot is fixed-width and left-aligned so
   every row's number shares the same right edge regardless of unit width. */
.row-valwrap { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.row-value {
  font-family: "Courier New", monospace; font-size: 18px; font-weight: 700;
  color: var(--text); text-align: right;
}
.row-unit {
  font-size: 12px; color: var(--muted); font-weight: 400;
  display: inline-block; width: 26px; text-align: left;
}

/* big numeral cards (Speed / Total Solar) */
.card-big {
  font-family: "Courier New", monospace; font-weight: 700;
  font-size: 68px; line-height: 1.05; text-align: center; color: var(--c-blue);
  padding: 10px 0 2px;
}
.card-big-unit { text-align: center; color: var(--muted); letter-spacing: 3px; font-size: 13px; }

/* map inside a card. NOT .card-map — that class is on the card <section> itself
   (grid span), and sharing the name shrank the whole card to 300px, clipping the
   bottom of the map against the card's overflow:hidden. */
.card-mapbox { height: 300px; width: 100%; border-radius: 4px; background: var(--panel-2); }

/* follow-the-car toggle (Leaflet control) */
.map-follow {
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.map-follow.on { background: var(--a-blue); color: #fff; border-color: var(--a-blue); }

/* fault badges */
.row-faults { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: var(--c-fault); color: #fff; font-weight: 700; }
.badge--ok { background: var(--c-ok); color: #052; }
.badge--na { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.badge--fault { background: var(--c-fault); color: #fff; }

/* value colors */
.v-text   { color: var(--text); }
.v-blue   { color: var(--c-blue); }
.v-green  { color: var(--c-green); }
.v-amber  { color: var(--c-amber); }
.v-yellow { color: var(--c-yellow); }
.v-teal   { color: var(--c-teal); }
.v-ok     { color: var(--c-ok); }
.v-warn   { color: var(--c-stale); }
.v-stale  { color: var(--c-stale); }
.v-fault  { color: var(--c-fault); }
.v-na     { color: var(--muted); font-weight: 500; }

/* ---------- trend charts ---------- */
.charts {
  margin-top: 14px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px;
}
.chart-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 14px; }
.chart-card h3 {
  margin: 0 0 8px; font-size: 12px; color: var(--text); text-transform: uppercase;
  letter-spacing: .6px; font-weight: 700; display: flex; align-items: baseline; gap: 6px;
}
.chart-card h3 .unit { color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: .3px; }
.chart-card canvas { width: 100% !important; height: 200px !important; }
.section-title { grid-column: 1 / -1; margin: 2px 2px -2px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* clickable chart cards */
.chart-card { cursor: zoom-in; transition: border-color .12s ease, transform .12s ease; }
.chart-card:hover { border-color: var(--a-blue); }
.chart-placeholder { min-height: 1px; }

/* ---------- expanded chart window ---------- */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 9, .66);
  backdrop-filter: blur(2px);
  animation: modal-fade .14s ease-out;
}
.modal[hidden] { display: none; }
.modal-window {
  position: relative;
  width: min(1400px, 92vw); height: 86vh;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
  padding: 16px; display: flex; flex-direction: column;
  animation: modal-pop .16s cubic-bezier(.2, .8, .3, 1);
}
.modal-body { flex: 1; display: flex; min-height: 0; }
.modal-body .chart-card {
  flex: 1; border: 0; background: transparent; padding: 0; cursor: default;
  display: flex; flex-direction: column; min-height: 0;
}
.modal-body .chart-card:hover { border-color: transparent; }
.modal-body .chart-card h3 { font-size: 14px; margin-bottom: 12px; }
.modal-body .chart-card canvas { flex: 1; height: auto !important; min-height: 0; }
.modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; width: 32px; height: 32px; padding: 0;
  font-size: 20px; line-height: 1; font-weight: 400;
}
.modal-close:hover { color: var(--text); border-color: var(--a-blue); }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}