/* FuelDispatch shared theme - the control-room look from the Runout page,
   applied to every other page. Each page keeps its own layout CSS; this file
   loads after it and swaps the palette, header, buttons, fields, panels and
   tables. Dark by default, with a light variant behind the header's ◐ button
   (the choice is shared by every page and remembered in the browser). */

:root {
  --bg: #000000; --bg-glow: rgba(77,163,255,0.10); --th: #8394ad;
  --glass: rgba(15,26,44,0.88); --card: #121c2e; --card-alt: #152238; --card-hover: #1b2b45;
  --line: rgba(160,185,220,0.16); --line-strong: rgba(160,185,220,0.3);
  --ink: #e8eef8; --ink-soft: #b7c4d8; --muted: #8394ad;
  --accent: #4da3ff; --accent-ink: #06121f;
  --red: #ff6159; --amber: #ffb224; --green: #2fd490; --blue: #6aa8ff;
  --track: rgba(160,185,220,0.16); --shadow: 0 8px 24px rgba(0,0,0,0.55);
  --input: #19263d; --modal: #121c2e; --scheme: dark;
  /* names the older page styles use */
  --surface: var(--card); --ok: var(--green); --yellow: var(--amber);
}
:root[data-theme="light"] {
  --bg: #eef2f8; --bg-glow: rgba(77,163,255,0.18); --th: #66758d;
  --glass: rgba(255,255,255,0.78); --card: #ffffff; --card-alt: #fbfcfe; --card-hover: #f0f6ff;
  --line: rgba(20,40,80,0.12); --line-strong: rgba(20,40,80,0.26);
  --ink: #101a2b; --ink-soft: #3c4b63; --muted: #66758d;
  --accent: #1f6fe0; --accent-ink: #ffffff;
  --red: #d6382f; --amber: #c98300; --green: #14935f; --blue: #2b66c9;
  --track: rgba(20,40,80,0.11); --shadow: 0 8px 22px rgba(20,40,80,0.1);
  --input: rgba(20,40,80,0.05); --modal: #ffffff; --scheme: light;
}

html { color-scheme: var(--scheme); }
body { font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; background: var(--bg); background-image: radial-gradient(1200px 520px at 50% -160px, var(--bg-glow), transparent 70%); background-repeat: no-repeat; background-attachment: fixed; color: var(--ink); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }

/* Header: black in both themes, so it carries its own dark palette. */
header { background: #000; color: var(--ink); border-bottom: 1px solid var(--line); --ink: #e8eef8; --ink-soft: #b7c4d8; --muted: #8394ad; --line: rgba(160,185,220,0.16); --line-strong: rgba(160,185,220,0.3); --input: #19263d; --accent: #4da3ff; --amber: #ffb224; --glass: #0b0b0b; --modal: #121c2e; --card: #121c2e; --surface: #121c2e; --card-hover: #1b2b45; }
header h1 { font-weight: 700; letter-spacing: -0.01em; }
header.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
@media (min-width: 721px) { header { padding-top: 0.7rem; padding-bottom: 0.7rem; } }
header .link-btn, header #logoutBtn, header .theme-btn { background: var(--input); border: 1px solid var(--line); color: var(--ink-soft); }
header .link-btn:hover, header #logoutBtn:hover, header .theme-btn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--ink); }
header #logoutBtn { margin-left: 0.5rem; }
header .theme-btn { margin-left: 0.8rem; padding: 0.35rem 0.7rem; background: #000; border-color: var(--line-strong); color: #e8eef8; border-radius: 999px; cursor: pointer; font-size: 0.82rem; font-family: inherit; }

/* Buttons */
.link-btn, #logoutBtn, .btn { border-radius: 999px; background: var(--input); border: 1px solid var(--line); color: var(--ink-soft); font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn { border-color: var(--line-strong); color: var(--ink); }
.link-btn:hover, #logoutBtn:hover, .btn:hover { border-color: var(--accent); color: var(--ink); }
.btn-primary, .btn.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn-primary:hover { filter: brightness(1.1); color: var(--accent-ink); }
.btn-danger, .delete-btn { border-color: var(--red); color: var(--red); background: none; }
.btn-danger:hover, .delete-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.number-btn { border-radius: 10px; background: var(--input); border-color: var(--line-strong); color: var(--ink); }
.number-btn.active, .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Fields */
input, select, textarea { background: var(--input); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.search-row input { border-radius: 999px; border-color: var(--line); }
label { color: var(--muted); }

/* Panels, banners and dropdowns */
.panel, .modal-box, #menuPanel, .reading-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); color: var(--ink); }
.panel h2, .field-section h3, .panel h3 { letter-spacing: -0.01em; }
.panel h3, .field-section h3 { text-transform: none; font-size: 0.8rem; font-weight: 600; color: var(--th); letter-spacing: 0; }
.banner { background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); color: var(--amber); border-radius: 14px; }
.delivery-clock { background: var(--surface); border-color: var(--accent); border-radius: 14px; }

/* Tables: one rounded card with soft row bands */
table { border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--line), var(--shadow); color: var(--ink); }
th { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--th); background: color-mix(in srgb, var(--surface) 70%, #000); }
:root[data-theme="light"] th { background: color-mix(in srgb, var(--surface) 94%, #4a5a78); }
td, th { border-bottom-color: var(--line); }
tbody tr:nth-child(even) { background: var(--card-alt); }
tbody tr:hover { background: var(--card-hover); }
tr:last-child td { border-bottom: none; }
a { color: var(--accent); }
.link-btn, header a, a.btn { color: inherit; }
.link-btn { color: var(--ink-soft); }
#empty, #loading { color: var(--th); }

/* Status colours */
.status-badge.on { background: var(--green); border-color: var(--green); color: #04150e; font-weight: 600; }
.status-badge { border-radius: 999px; }
.split-badge { border-radius: 999px; }
.late-badge, .reason-badge.stale { border-radius: 999px; }
.excluded-badge { border-radius: 999px; }
.reading-card-tag { background: var(--accent); color: var(--accent-ink); }

/* Phone: keep the lighter table shadows off the stacked cards */
@media (max-width: 720px) {
  #resultsTable, .stack-table { box-shadow: none; border-radius: 0; }
}

#loginForm { border-radius: 18px; }
#loginForm button, #loginBtn, .panel > button { border-radius: 999px; }