/* ═══════════════════════════════════════════════════════════════════════
   APPROACH 3 — "Control Room"
   Design system: an operational command centre.

   Dark by default, because that is what a room full of screens actually
   looks like, and because a dark ground lets status colour carry signal
   instead of competing with a white page. A light theme is available.

   Everything is tuned for density that still reads: 13px base, tabular
   numerals everywhere, hairline rules instead of cards, and colour
   reserved almost entirely for state.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Graphite ground. Four steps, so panes separate without borders. */
  --bg: 13 15 19;
  --bg-1: 18 21 26;
  --bg-2: 24 28 35;
  --bg-3: 32 37 46;
  --rule: 42 48 59;
  --rule-2: 58 66 80;
  --fg: 233 237 243;
  --fg-2: 158 168 183;
  --fg-3: 112 122 137;

  /* Signal palette. Each is legible as text on --bg (7:1 or better). */
  --key: 96 165 250;        /* the one interactive colour            */
  --key-ink: 8 12 20;
  --key-dim: 30 58 96;
  --ok: 52 199 142;         /* money in, done, healthy               */
  --ok-dim: 14 55 42;
  --warn: 245 178 66;       /* needs a person                        */
  --warn-dim: 62 45 14;
  --bad: 248 113 113;       /* money out, late, failed               */
  --bad-dim: 62 26 26;
  --info: 103 199 226;      /* neutral emphasis                      */
  --info-dim: 15 50 60;

  --div-fleet: 74 222 128;
  --div-logistics: 96 165 250;
  --div-warehouse: 250 204 21;
  --div-freight: 248 113 113;

  --focus: 96 165 250;
  --row-h: 2.25rem;
}

.light {
  --bg: 244 246 249;
  --bg-1: 255 255 255;
  --bg-2: 248 250 252;
  --bg-3: 238 242 247;
  --rule: 219 225 234;
  --rule-2: 190 199 212;
  --fg: 17 22 31;
  --fg-2: 78 89 105;
  --fg-3: 116 127 144;

  --key: 29 88 190;
  --key-ink: 255 255 255;
  --key-dim: 226 237 254;
  --ok: 13 122 84;
  --ok-dim: 219 246 235;
  --warn: 158 96 8;
  --warn-dim: 253 243 219;
  --bad: 191 40 40;
  --bad-dim: 253 231 231;
  --info: 15 110 140;
  --info-dim: 222 243 250;

  --div-fleet: 21 118 66;
  --div-logistics: 27 86 179;
  --div-warehouse: 146 96 6;
  --div-freight: 173 47 47;

  --focus: 29 88 190;
}

/* ── base ─────────────────────────────────────────────────────────── */
* { min-width: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;               /* the workspace scrolls, not the page */
}
body.scrollable { overflow: auto; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.n { font-variant-numeric: tabular-nums; }

.t-xl { font-size: 1.375rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; }
.t-lg { font-size: 1.0625rem; line-height: 1.3; font-weight: 640; letter-spacing: -0.01em; }
.t-md { font-size: 0.875rem; font-weight: 620; }
.t-sm { font-size: 0.8125rem; }
.t-xs { font-size: 0.75rem; }
.t-cap {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgb(var(--fg-3));
}
.big { font-size: 1.75rem; line-height: 1; font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.dim { color: rgb(var(--fg-2)); }
.dimmer { color: rgb(var(--fg-3)); }

/* ── focus ────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--focus));
  outline-offset: 1px;
  border-radius: 3px;
}
.skip {
  position: absolute; left: .5rem; top: -3rem; z-index: 200;
  background: rgb(var(--key)); color: rgb(var(--key-ink));
  padding: .5rem .875rem; border-radius: 5px; font-weight: 650;
}
.skip:focus { top: .5rem; }

/* ── the workspace frame ──────────────────────────────────────────── */
.frame { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.bar {
  display: flex; align-items: center; gap: .5rem; flex: none;
  height: 2.75rem; padding: 0 .625rem;
  background: rgb(var(--bg-1)); border-bottom: 1px solid rgb(var(--rule));
}
.panes { flex: 1; display: grid; min-height: 0; grid-template-columns: 13rem minmax(0, 1fr); }
.panes.with-ctx { grid-template-columns: 13rem minmax(0, 1fr) 23rem; }
@media (max-width: 1280px) { .panes.with-ctx { grid-template-columns: 11rem minmax(0, 1fr) 20rem; } }
@media (max-width: 1024px) {
  .panes, .panes.with-ctx { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .ctx { display: none; }
  .panes.show-rail .rail { display: flex; position: absolute; inset: 2.75rem auto 0 0; width: 15rem; z-index: 60; }
  .panes.show-ctx .ctx {
    display: flex; position: fixed; inset: auto 0 0 0; height: 78vh; z-index: 70;
    border-left: 0; border-top: 1px solid rgb(var(--rule-2)); border-radius: 12px 12px 0 0;
  }
}

.rail {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  background: rgb(var(--bg-1)); border-right: 1px solid rgb(var(--rule));
}
.work { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ctx {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  background: rgb(var(--bg-1)); border-left: 1px solid rgb(var(--rule));
}

/* ── rail entries: one click to a subset, count always visible ────── */
.v {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .375rem .625rem; border: 0; background: none; cursor: pointer;
  color: rgb(var(--fg-2)); font: inherit; text-align: left;
  border-left: 2px solid transparent;
}
.v:hover { background: rgb(var(--bg-2)); color: rgb(var(--fg)); }
.v[aria-current="true"] {
  background: rgb(var(--bg-2)); color: rgb(var(--fg));
  border-left-color: rgb(var(--key)); font-weight: 600;
}
.v .k {
  font: 600 .6875rem/1 ui-monospace, monospace; color: rgb(var(--fg-3));
  border: 1px solid rgb(var(--rule-2)); border-radius: 3px; padding: .125rem .25rem; flex: none;
}
.v .c { margin-left: auto; font-variant-numeric: tabular-nums; font-size: .75rem; font-weight: 650; flex: none; }
.v .c.hot { color: rgb(var(--warn)); }
.v .c.crit { color: rgb(var(--bad)); }
.v .c.zero { color: rgb(var(--fg-3)); font-weight: 400; }

/* ── controls ─────────────────────────────────────────────────────── */
.b {
  display: inline-flex; align-items: center; justify-content: center; gap: .3125rem;
  height: 1.75rem; padding: 0 .5rem; border-radius: 4px; white-space: nowrap;
  font-size: .75rem; font-weight: 600; border: 1px solid transparent; cursor: pointer;
  color: rgb(var(--fg-2)); background: none; transition: background-color 100ms, color 100ms;
}
.b:hover:not(:disabled) { background: rgb(var(--bg-3)); color: rgb(var(--fg)); }
.b:disabled { opacity: .4; cursor: not-allowed; }
.b svg { width: 14px; height: 14px; flex: none; }
.b-key { background: rgb(var(--key)); color: rgb(var(--key-ink)); }
.b-key:hover:not(:disabled) { background: rgb(var(--key) / .85); }
.b-line { border-color: rgb(var(--rule-2)); background: rgb(var(--bg-2)); color: rgb(var(--fg)); }
.b-line:hover:not(:disabled) { background: rgb(var(--bg-3)); }
.b-bad { background: rgb(var(--bad)); color: #fff; }
.b-sq { width: 1.75rem; padding: 0; }
.b-lg { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }

.f {
  height: 1.75rem; padding: 0 .375rem; border-radius: 4px; font-size: .75rem;
  background: rgb(var(--bg-2)); color: rgb(var(--fg));
  border: 1px solid rgb(var(--rule-2)); max-width: 100%;
}
.f:focus { outline: none; border-color: rgb(var(--key)); box-shadow: 0 0 0 2px rgb(var(--key) / .25); }
select.f { appearance: none; padding-right: 1.125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a8496' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center; background-size: 12px; }
textarea.f { height: auto; padding: .375rem; line-height: 1.45; }
.f::placeholder { color: rgb(var(--fg-3)); }

.search {
  flex: 1; max-width: 24rem; height: 1.875rem; border-radius: 5px;
  background: rgb(var(--bg-2)); border: 1px solid rgb(var(--rule));
  display: flex; align-items: center; gap: .375rem; padding: 0 .5rem;
  color: rgb(var(--fg-3)); cursor: pointer; font-size: .75rem;
}
.search:hover { border-color: rgb(var(--rule-2)); }

.chk {
  appearance: none; width: .875rem; height: .875rem; flex: none; cursor: pointer;
  border: 1px solid rgb(var(--rule-2)); border-radius: 3px; background: rgb(var(--bg-2)); position: relative;
}
.chk:checked { background: rgb(var(--key)); border-color: rgb(var(--key)); }
.chk:checked::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/.625rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}

/* ── signals: colour + glyph + word, never colour alone ───────────── */
.s {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  font-size: .6875rem; font-weight: 650; line-height: 1.5;
  padding: 0 .3125rem; border-radius: 3px; border: 1px solid transparent;
}
.s::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: currentColor; flex: none; }
.s-ok   { background: rgb(var(--ok-dim)); color: rgb(var(--ok)); border-color: rgb(var(--ok) / .3); }
.s-warn { background: rgb(var(--warn-dim)); color: rgb(var(--warn)); border-color: rgb(var(--warn) / .3); }
.s-bad  { background: rgb(var(--bad-dim)); color: rgb(var(--bad)); border-color: rgb(var(--bad) / .3); }
.s-info { background: rgb(var(--info-dim)); color: rgb(var(--info)); border-color: rgb(var(--info) / .3); }
.s-key  { background: rgb(var(--key-dim)); color: rgb(var(--key)); border-color: rgb(var(--key) / .3); }
.s-mute { background: rgb(var(--bg-3)); color: rgb(var(--fg-2)); border-color: rgb(var(--rule-2)); }

/* ── the grid: the primary workspace ──────────────────────────────── */
.gridwrap { flex: 1; min-height: 0; overflow: auto; }
table.g { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
table.g thead th {
  position: sticky; top: 0; z-index: 3; text-align: left; white-space: nowrap;
  background: rgb(var(--bg-2)); color: rgb(var(--fg-3));
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .3125rem .5rem; border-bottom: 1px solid rgb(var(--rule));
}
table.g thead th.r, table.g td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.g tbody td {
  padding: .25rem .5rem; border-bottom: 1px solid rgb(var(--rule) / .55);
  height: var(--row-h); vertical-align: middle;
}
table.g tbody tr { cursor: pointer; }
table.g tbody tr:hover > td { background: rgb(var(--bg-2)); }
table.g tbody tr[aria-selected="true"] > td {
  background: rgb(var(--key-dim));
  border-bottom-color: rgb(var(--key) / .35);
}
table.g tbody tr[aria-selected="true"] > td:first-child { box-shadow: inset 2px 0 0 rgb(var(--key)); }
table.g tbody tr.exp > td { background: rgb(var(--bg-2)); }
table.g td.pad0 { padding: 0; }
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: rgb(var(--fg)); }

/* Inline edit: a cell that becomes a control without a dialog. */
.ie {
  width: 100%; height: 1.5rem; border-radius: 3px; font-size: .75rem; font-weight: 600;
  background: transparent; color: inherit; border: 1px solid transparent;
  padding: 0 1rem 0 .25rem; cursor: pointer; appearance: none; text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a8496' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .125rem center; background-size: 11px;
}
.ie:hover { background-color: rgb(var(--bg-3)); border-color: rgb(var(--rule-2)); }
.ie:focus { outline: none; background-color: rgb(var(--bg-1)); border-color: rgb(var(--key)); box-shadow: 0 0 0 2px rgb(var(--key) / .25); }
.ie-num { text-align: right; padding-right: .25rem; background-image: none; font-variant-numeric: tabular-nums; }
.ie-flash { animation: flash 700ms ease; }
@keyframes flash { 0% { background-color: rgb(var(--ok) / .35); } 100% { background-color: transparent; } }

/* Expanded row body: sub-records inline, never a new page. */
.exp-body { background: rgb(var(--bg-2)); border-bottom: 1px solid rgb(var(--rule)); padding: .625rem .75rem .75rem 2rem; }
.twist { transition: transform 120ms ease; }
tr[aria-expanded="true"] .twist { transform: rotate(90deg); }

/* ── context pane ─────────────────────────────────────────────────── */
.ctx-sec { border-bottom: 1px solid rgb(var(--rule)); padding: .625rem .75rem; }
.ctx-sec:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .1875rem .5rem; align-items: baseline; }
.kv dt { font-size: .6875rem; color: rgb(var(--fg-3)); }
.kv dd { margin: 0; font-size: .8125rem; }

/* ── lanes on the control room ────────────────────────────────────── */
.lane {
  display: block; text-align: left; width: 100%; padding: .625rem .75rem; cursor: pointer;
  background: rgb(var(--bg-1)); border: 1px solid rgb(var(--rule)); border-radius: 6px;
  border-left-width: 3px; transition: border-color 120ms, background-color 120ms;
}
.lane:hover { background: rgb(var(--bg-2)); border-color: rgb(var(--rule-2)); }
.lane-warn { border-left-color: rgb(var(--warn)); }
.lane-bad  { border-left-color: rgb(var(--bad)); }
.lane-info { border-left-color: rgb(var(--info)); }
.lane-ok   { border-left-color: rgb(var(--ok)); }

.panel { background: rgb(var(--bg-1)); border: 1px solid rgb(var(--rule)); border-radius: 6px; }
.panel-h {
  display: flex; align-items: center; gap: .5rem; padding: .4375rem .625rem;
  border-bottom: 1px solid rgb(var(--rule));
}

/* ── bars & meters ────────────────────────────────────────────────── */
.meter { height: 4px; border-radius: 2px; background: rgb(var(--bg-3)); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 2px; background: rgb(var(--key)); }
.spark { display: flex; align-items: flex-end; gap: 1px; height: 1.75rem; }
.spark > i { flex: 1; background: rgb(var(--key) / .55); border-radius: 1px 1px 0 0; min-height: 1px; }
.spark > i.now { background: rgb(var(--key)); }

/* ── overlays ─────────────────────────────────────────────────────── */
dialog::backdrop { background: rgb(6 8 11 / .7); }
dialog[open] {
  border: 1px solid rgb(var(--rule-2)); border-radius: 8px; padding: 0;
  background: rgb(var(--bg-1)); color: rgb(var(--fg));
  box-shadow: 0 24px 64px -12px rgb(0 0 0 / .7); width: min(94vw, 40rem);
}
dialog.wide[open] { width: min(94vw, 56rem); }

.toasts { position: fixed; right: .75rem; bottom: .75rem; z-index: 100; display: flex; flex-direction: column; gap: .375rem; }
.toast {
  display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 550;
  background: rgb(var(--bg-3)); color: rgb(var(--fg));
  border: 1px solid rgb(var(--rule-2)); border-left: 2px solid rgb(var(--ok));
  border-radius: 5px; padding: .4375rem .625rem; box-shadow: 0 8px 24px -6px rgb(0 0 0 / .6);
  animation: slide 160ms ease;
}
.toast.bad { border-left-color: rgb(var(--bad)); }
@keyframes slide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* ── editing ──────────────────────────────────────────────────────────
   Edit mode is a state of the whole workspace, not a separate screen, so
   it is announced once in a band and then simply true of every field. */
.eb {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; flex: none;
  padding: .3125rem .625rem; font-size: .75rem;
  background: rgb(var(--key-dim)); border-bottom: 1px solid rgb(var(--key) / .4);
}
.eb .kbd { margin-left: .25rem; }

/* A live field: it must look like a control, because it behaves like one. */
.ctx .f { width: 100%; }
.kv dd > .f { margin: .0625rem 0; }
.fh { display: block; font-size: .6875rem; color: rgb(var(--fg-3)); margin-top: .125rem; }
[data-fedit][data-warn] { border-color: rgb(var(--warn) / .7); }
[data-fedit]:disabled { opacity: .55; cursor: not-allowed; }

/* Marking rows, for the one-field-many-rows case. */
.mk { display: inline-flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; }
td.mk-cell { padding-left: .375rem; padding-right: 0; }
table.g tbody tr[data-marked="true"] > td { background: rgb(var(--key) / .10); }
table.g tbody tr[data-marked="true"][aria-selected="true"] > td { background: rgb(var(--key-dim)); }
.bulk {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; flex: none;
  padding: .375rem .625rem;
  background: rgb(var(--bg-3)); border-top: 1px solid rgb(var(--rule-2));
}

/* The session's change history, in the rail. This is what stands in for
   a confirmation dialog: not "are you sure?" but "here, put it back". */
.hi { display: flex; align-items: center; gap: .25rem; padding: .0625rem .375rem; border-radius: 3px; }
.hi:hover { background: rgb(var(--bg-2)); }
.hi button { opacity: .65; }
.hi:hover button { opacity: 1; }
.toast .ta { margin-left: .25rem; flex: none; }

/* ── helpers ──────────────────────────────────────────────────────── */
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kbd {
  font: 600 .6875rem/1 ui-monospace, monospace; color: rgb(var(--fg-2));
  border: 1px solid rgb(var(--rule-2)); border-bottom-width: 2px; border-radius: 3px;
  padding: .1875rem .25rem; background: rgb(var(--bg-2));
}
.rows > * + * { border-top: 1px solid rgb(var(--rule)); }
.sk { background: rgb(var(--bg-3)); border-radius: 3px; animation: pulse 1.3s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
@media print { body { overflow: visible; } .noprint { display: none !important; } }