/* DirtOps Theme — fleet console
 *
 * Ported from the KronoStream tracker-management prototype: an industrial dark
 * console, monospace body, condensed display type, one dust-amber accent for
 * action, and status colours that stay legible in a dense table.
 *
 * Two layers:
 *   1. Raw brand tokens (--do-*) — the source of truth for the palette.
 *   2. shadcn semantic vars      — remapped onto the brand tokens so both
 *      Tailwind utilities and BlazorBlueprint components adopt the identity
 *      with no per-component work.
 *
 * The prototype is dark-only. Dark is the intended look and gets the exact
 * prototype values; :root carries a faithful light counterpart so the header
 * toggle still works and no screen is unusable in a bright pit. Values stay
 * hex/rgba — canvas JS reads them via getComputedStyle, and Canvas 2D can't
 * parse oklch().
 */

:root {
  /* ── Raw palette — the prototype's ink ramp ─────────────────────────── */
  --do-bg: #131519;
  --do-panel: #1a1d23;
  --do-panel-2: #20242c;
  --do-panel-3: #262b34;
  --do-line: #2b303a;
  --do-line-2: #3a4150;

  --do-ink: #e9e5da;
  --do-dim: #8d919b;
  --do-faint: #5c616b;

  /* Dust amber — the single action colour */
  --do-dust: #d99a3d;
  --do-dust-bright: #e8ab4f;
  --do-dust-bg: #2b2416;
  --do-on-dust: #16130b;

  /* Status signals */
  --do-ok: #63c46f;
  --do-ok-bg: #17281b;
  --do-warn: #e3ad42;
  --do-warn-bg: #2b2312;
  --do-bad: #e2594d;
  --do-bad-bg: #2c1815;
  --do-sync: #5da4dd;
  --do-sync-bg: #152230;
  --do-lora: #a98fd9;
  --do-lora-bg: #221c30;

  /* ── Semantic mappings — LIGHT (bright-pit counterpart) ─────────────── */
  --background: #f4f5f7;
  --foreground: #1a1d23;

  --card: #ffffff;
  --card-foreground: #1a1d23;
  --popover: #ffffff;
  --popover-foreground: #1a1d23;

  /* Layered surfaces: canvas < panel < raised */
  --surface-1: #f4f5f7;
  --surface-2: #ffffff;
  --surface-3: #e9ebef;

  --primary: #a3701f;
  --primary-foreground: #ffffff;
  --secondary: #4c5563;
  --secondary-foreground: #ffffff;

  --muted: #e9ebef;
  --muted-foreground: #5c616b;
  --accent: #e2e5ea;
  --accent-foreground: #1a1d23;

  --destructive: #b4392e;
  --destructive-foreground: #ffffff;

  --border: rgba(26, 29, 35, 0.14);
  --input: rgba(26, 29, 35, 0.28);
  --ring: #a3701f;

  /* The prototype's hard 3px corners — this is machinery, not a marketing site. */
  --radius: 0.25rem;

  --chart-1: #a3701f;
  --chart-2: #3f7f97;
  --chart-3: #2f8f5b;
  --chart-4: #7b5ea8;
  --chart-5: #b4392e;
}

/* ── Night sheet — the prototype's actual look ───────────────────────── */
.dark {
  --background: var(--do-bg);
  --foreground: var(--do-ink);

  --card: var(--do-panel);
  --card-foreground: var(--do-ink);
  --popover: var(--do-panel);
  --popover-foreground: var(--do-ink);

  --surface-1: var(--do-bg);
  --surface-2: var(--do-panel);
  --surface-3: var(--do-panel-2);

  --primary: var(--do-dust);
  --primary-foreground: var(--do-on-dust);
  --secondary: var(--do-panel-3);
  --secondary-foreground: var(--do-ink);

  --muted: var(--do-panel-2);
  --muted-foreground: var(--do-dim);
  --accent: var(--do-panel-3);
  --accent-foreground: var(--do-ink);

  --destructive: var(--do-bad);
  --destructive-foreground: #16090a;

  --border: var(--do-line);
  --input: var(--do-line-2);
  --ring: var(--do-dust);

  --chart-1: var(--do-dust);
  --chart-2: var(--do-sync);
  --chart-3: var(--do-ok);
  --chart-4: var(--do-lora);
  --chart-5: var(--do-bad);
}

/* ── Console chrome ──────────────────────────────────────────────────── */

body {
  font-family: var(--font-mono-stack, 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace);
  font-size: 13px;
  line-height: 1.45;
}

::selection {
  background: var(--do-dust);
  color: #131519;
}

/* Condensed display face for headings and big numbers. Applied through the
   .display utility rather than a bare h1 rule so Blueprint's own headings
   aren't hijacked. */
.display {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Status chip. One class + a state class, matching the prototype's vocabulary.
   Kept as plain CSS (not Tailwind utilities) because the state name arrives as
   a string from the view model. */
.chip {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip.ok, .chip.online, .chip.wifi, .chip.synced, .chip.acked, .chip.active {
  color: var(--do-ok);
  background: var(--do-ok-bg);
  border-color: #20361f;
}
.chip.warn, .chip.drift {
  color: var(--do-warn);
  background: var(--do-warn-bg);
  border-color: #3a2f16;
}
.chip.bad, .chip.expired, .chip.fail {
  color: var(--do-bad);
  background: var(--do-bad-bg);
  border-color: #4a2622;
}
.chip.sync, .chip.delivered, .chip.pending {
  color: var(--do-sync);
  background: var(--do-sync-bg);
  border-color: #1e3247;
}
.chip.lora {
  color: var(--do-lora);
  background: var(--do-lora-bg);
  border-color: #332a4a;
}
.chip.muted, .chip.queued, .chip.offline, .chip.none {
  color: var(--do-faint);
  background: #1c1e23;
  border-color: var(--do-line);
}
.chip.org {
  color: var(--do-dust);
  background: var(--do-dust-bg);
  border-color: #3d331f;
}

/* Light mode needs opaque chip grounds — the dark tints vanish on white. */
:root:not(.dark) .chip.muted,
:root:not(.dark) .chip.queued,
:root:not(.dark) .chip.offline,
:root:not(.dark) .chip.none {
  color: #5c616b;
  background: #e9ebef;
  border-color: rgba(26, 29, 35, 0.14);
}

/* Battery meter */
.batt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.batt .bar {
  width: 44px;
  height: 8px;
  border: 1px solid var(--input);
  border-radius: 2px;
  overflow: hidden;
  background: var(--background);
}
.batt .fill { height: 100%; }
.batt .pct {
  font-size: 11px;
  color: var(--muted-foreground);
  width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.batt .fill.ok { background: var(--do-ok); }
.batt .fill.warn { background: var(--do-warn); }
.batt .fill.bad { background: var(--do-bad); }
.batt .fill.muted { background: var(--do-faint); }

/* Fleet strip — one cell per tracker, colour by reachability */
.fcell {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--muted-foreground);
  cursor: pointer;
  position: relative;
}
.fcell:hover {
  border-color: var(--do-dust);
  color: var(--foreground);
}
.fcell.online {
  background: var(--do-ok-bg);
  border-color: #234226;
}
.fcell.offline { background: #17181c; }
:root:not(.dark) .fcell.online { background: #dff0e0; border-color: #a8ceab; }
:root:not(.dark) .fcell.offline { background: #e9ebef; }
.fcell .dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.fcell .dot.drift { background: var(--do-warn); }
.fcell .dot.ota {
  background: var(--do-sync);
  animation: do-blink 1.2s infinite;
}
@keyframes do-blink { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}