/* Project Varda - dispatch board.
   Visual polish pass 2026-10-28 (D28) + refined dark mode (D29):
   presentation only - every selector, id and class the JS relies on is
   unchanged; no behaviour change. */
:root {
  /* Refined dark mode (D29): near-black layered surfaces, hairline cool
     borders, restrained glows. Dark is the board's native mode. */
  --bg:#0a0d12; --panel:#12161e; --panel-2:#171e29;
  --line:#263144; --line-soft:#1d2739;
  --text:#e8eef6; --muted:#97a5ba; --faint:#6b7a90;
  --accent:#c9a227; --accent-soft:rgba(201,162,39,.13);
  --green:#2e5e4e; --green-hi:#37906f;
  --ai:#7c6bd9; --ai-soft:rgba(124,107,217,.12);
  --danger:#e5534b; --shadow:0 8px 28px rgba(0,0,0,.45);
  --radius:12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scrollbar-color: var(--line) var(--bg); }
body {
  margin:0; color:var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(201,162,39,.05) 0%, transparent 60%),
    radial-gradient(1100px 520px at 8% -12%, rgba(55,144,111,.07) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#26314a; border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-track { background:transparent; }
::selection { background: var(--accent-soft); }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ---- top bar ---- */
#topbar {
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px;
  background: linear-gradient(180deg, rgba(13,17,24,.97), rgba(13,17,24,.92));
  backdrop-filter: blur(6px);
  border-bottom:2px solid var(--accent);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.brand { font-size:21px; font-weight:700; letter-spacing:.04em; }
.brand .tag { color:var(--accent); font-size:13px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; }
.session { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.session label { margin-left:12px; font-size:12px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.ws { font-size:12px; color:var(--muted); margin-left:12px; }
.ws::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--green-hi); margin-right:6px; vertical-align:1px; box-shadow:0 0 6px var(--green-hi); }

/* ---- controls ---- */
select, input {
  background:#0a0e14; color:var(--text);
  border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:13.5px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  transition: border-color .15s ease;
}
select:hover, input:hover { border-color:#3a4c6d; }
select:focus, input:focus { border-color:var(--accent); outline:none; }
input::placeholder { color:var(--faint); }
button {
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:7px;
  padding:6px 12px; cursor:pointer; margin:2px; font-size:13.5px; font-weight:600;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
button:hover { filter:brightness(1.15); box-shadow:0 4px 12px rgba(0,0,0,.4); }
button:active { transform: translateY(1px); }
#aiPanel button { background: linear-gradient(180deg, #8b7ce0, #6656c4); }

/* ---- layout ---- */
#panes { display:grid; grid-template-columns: 1.12fr 1fr 1fr; gap:14px; padding:14px; align-items:start; }
section {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px;
  min-height:70vh; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), var(--shadow);
}
#statsPane { grid-column: 1 / -1; min-height:0; }
h2 { margin:0 0 12px; font-size:16.5px; letter-spacing:.05em; text-transform:uppercase;
  padding-bottom:8px; border-bottom:1px solid var(--line-soft); }
h2::before { content:""; display:inline-block; width:9px; height:9px; border-radius:2px;
  background:var(--accent); margin-right:8px; }
h3 { font-size:13px; margin:16px 0 6px; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; }
ul { list-style:none; padding:0; margin:0; }
.filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }

/* ---- call cards ---- */
#callList li {
  padding:10px 12px; border:1px solid var(--line-soft); border-radius:9px; margin-bottom:8px;
  cursor:pointer; background:rgba(255,255,255,.015);
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
  line-height:1.45;
}
#callList li:hover { border-color:#3d5173; background:rgba(255,255,255,.04); transform:translateY(-1px); }
#callList li.selected { border-color:var(--accent); background:var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent); }
#callList li.pinned { border-left:4px solid var(--danger); }
.pri { font-weight:800; letter-spacing:.03em; display:inline-block; padding:1px 9px 1px 7px;
  border-radius:999px; border:1px solid; vertical-align:1px; }
.pri::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:currentColor; margin-right:6px; vertical-align:1px;
  box-shadow:0 0 7px currentColor; }
.P1{color:#ff8a7a;background:rgba(229,83,75,.13);border-color:rgba(229,83,75,.45)}
.P2{color:#ffab5e;background:rgba(255,140,0,.11);border-color:rgba(255,140,0,.4)}
.P3{color:#e8c34a;background:rgba(201,162,39,.11);border-color:rgba(201,162,39,.42)}
.P4{color:#82c3ff;background:rgba(88,166,255,.11);border-color:rgba(88,166,255,.4)}
.status { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.18);
  padding:1px 8px; border-radius:999px; white-space:nowrap; }
.muted { color:var(--muted); }
.kv { font-size:13.5px; line-height:1.55; } .kv b { color:var(--muted); font-weight:400; }

/* ---- timeline ---- */
#timelineList li { border-bottom:1px solid var(--line-soft); padding:7px 0 7px 14px; font-size:13px;
  position:relative; line-height:1.45; }
#timelineList li::before { content:""; position:absolute; left:0; top:13px; width:6px; height:6px;
  border-radius:50%; background:var(--accent); }
#timelineList .ts { color:var(--faint); font-size:11px; }
#unitList li, #presenceList li, #handoverList li, #onCallList li {
  font-size:13.5px; padding:5px 0; border-bottom:1px solid var(--line-soft); line-height:1.45; }
form { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
form input { flex:1; min-width:120px; }

/* ---- AI panel ---- */
#aiPanel { margin-top:14px; border:1px solid rgba(124,107,217,.45); border-radius:10px;
  padding:12px; background:var(--ai-soft); }
#aiPanel:empty { display:none; }

/* ---- stats ---- */
#statsBody table { border-collapse:collapse; width:100%; font-size:13.5px; }
#statsBody th, #statsBody td { border-bottom:1px solid var(--line-soft); padding:5px 8px; text-align:left; }
#statsBody th { color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* ---- light systems: dark is native, but never broken on a light OS ---- */
@media (prefers-color-scheme: light) {
  :root {
    --bg:#eef1f5; --panel:#ffffff; --panel-2:#f7f9fc;
    --line:#c3cedd; --line-soft:#dde4ee;
    --text:#17222f; --muted:#54657c; --faint:#8494ab;
    --accent-soft:rgba(201,162,39,.16); --ai-soft:rgba(124,107,217,.1);
    --shadow:0 8px 24px rgba(23,34,47,.12);
    color-scheme: light;
  }
  body { background: var(--bg); }
  #topbar { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.92)); }
  select, input { background:#ffffff; box-shadow: inset 0 1px 3px rgba(23,34,47,.08); }
  section { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow); }
  #callList li { background: rgba(23,34,47,.015); }
  #callList li:hover { background: rgba(23,34,47,.045); }
  ::-webkit-scrollbar-thumb { background:#b9c6d8; border-color: var(--bg); }
  .P1{color:#c23327}.P2{color:#b25f00}.P3{color:#8a6d00}.P4{color:#1f5fb0}
}

/* ---- responsive + motion ---- */
@media (max-width: 1150px) {
  #panes { grid-template-columns: 1fr 1fr; }
  section { min-height:0; }
}
@media (max-width: 720px) {
  #panes { grid-template-columns: 1fr; padding:10px; }
  #topbar { padding:10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
}