/* The look shared by the Events, Archive and Admin pages (the review screen
   has its own dark theme for watching video). DSU Blue for actions on light
   pages, Trojan Blue on dark. */
:root { --bg: #f4f4f4; --card: #fff; --ink: #1c1f24; --muted: #5d6066; --line: #dfe3e7; --accent: #004165; --accent-ink: #fff; --link: #00739a; --rec: #d92d20; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #00111d; --card: #021c2e; --ink: #eaf2f7; --muted: #8ea8bb; --line: #0f3b5a; --accent: #00a9e0; --accent-ink: #001f33; --link: #00a9e0; --rec: #ff5a4e; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 Roboto, system-ui, sans-serif; }
main { max-width: 900px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
section { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
h2 { margin: 0 0 12px; font-size: 15px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.grow { flex: 1; min-width: 160px; }
.muted { color: var(--muted); font-size: 13px; }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); }
.pill.rec { color: #fff; background: var(--rec); border-color: var(--rec); }
.pill.off { color: var(--rec); }
button { font: inherit; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 500; }
button.stop { background: var(--rec); border-color: var(--rec); color: #fff; }
input[type=text] { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
label.cam { display: inline-flex; gap: 6px; align-items: center; margin: 6px 14px 6px 0; }
a { color: var(--link); }
.stats-pick { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.stats-pick select { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.stats-pick input { flex: 1; min-width: 200px; width: auto; }
.add-camera { display: grid; grid-template-columns: auto 1fr 2fr auto; gap: 8px; margin-top: 12px; }
.add-camera select { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; }
.ndi-pick { display: flex; gap: 6px; min-width: 0; }
.ndi-pick select { flex: 1; }
.audio-pick { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 600px) { .add-camera { grid-template-columns: 1fr; } }
.import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.import-grid select, .import-grid input { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; width: 100%; }
.import-grid label { display: flex; align-items: center; gap: 8px; }
.import-grid label input { flex: 1; }
@media (max-width: 600px) { .import-grid { grid-template-columns: 1fr; } }
.videos { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; }
.videos li { display: flex; gap: 8px; align-items: center; }
.videos button { padding: 0 8px; font-size: 12px; }
.clips { margin: 4px 0 0; font-size: 13px; }
.clips .videos li { flex-wrap: wrap; padding: 2px 0; }
.clips .videos li > span:first-child { flex: 1 1 260px; min-width: 0; }
.sync { font-size: 11px; padding: 0 6px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.sync.high { color: #2e9e5b; }
.sync.medium { color: #c08a12; }
.sync.low { color: var(--rec); }
.sync.busy { color: var(--muted); }
.clip-opts { grid-column: 1 / -1; }
progress { vertical-align: middle; width: 160px; }
summary { cursor: pointer; }
.archive-find { display: flex; gap: 8px; margin: 4px 0 8px; }
.archive-find select, .when input { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.when { display: inline-flex; align-items: center; gap: 6px; }
.pill.sport { color: var(--link); border-color: currentColor; }
.sched { color: var(--link); }
.sched.bad { color: var(--rec); }
.edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; padding: 8px 0 4px; }
.edit input[type=text] { width: auto; flex: 1 1 180px; }
.pill.done { color: var(--muted); }
#error { color: var(--rec); }
#error:empty { display: none; }
#health h3 { font-size: 13px; margin: 14px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#health p { margin: 4px 0; }
.health-problems { margin: 4px 0; padding-left: 20px; }
.health-problems li.critical { color: var(--rec); }
.health-problems li.warn::marker { content: "⚠ "; }
.health-problems li.critical::marker { content: "⛔ "; }
#health meter { width: 140px; vertical-align: middle; }
.add-user { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.add-user input { flex: 1 1 160px; }
#user-list input[data-sports] { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 200px; }
.add-user input, .add-user select, #user-list select { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; width: 100%; }
#user-list select { width: auto; }
input[type=password] { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

.add-user select { width: auto; }
/* Set time: when an imported video was shot, under its row. */
.videos li:has(.settime) { flex-wrap: wrap; }
.settime { font-size: 13px; }
.settime .when input { padding: 4px 8px; }
.settime label:has(input[type=checkbox]) { display: inline-flex; align-items: center; gap: 6px; }
.settime .when { white-space: nowrap; }
/* Temperature charts (thermal-charts.js). Series colors: the first slots of the
   validated categorical palette, stepped separately for the dark surface. */
#thermal { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948; }
@media (prefers-color-scheme: dark) {
  #thermal { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; }
}
.th-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.th-head h3 { margin: 0 !important; }
.th-head .seg { display: inline-flex; }
.th-head .seg button { padding: 3px 10px; font-size: 13px; border-radius: 0; margin-left: -1px; }
.th-head .seg button:first-child { border-radius: 8px 0 0 8px; }
.th-head .seg button:last-child { border-radius: 0 8px 8px 0; }
.th-chart { position: relative; margin: 10px 0 0; }
.th-chart figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 13px; margin-bottom: 2px; }
.th-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.th-legend i, .th-tip i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.th-grid { stroke: var(--line); stroke-width: 1; }
.th-axis, .th-end { fill: var(--muted); font-size: 11px; font-family: inherit; }
.th-end { fill: var(--ink); }
.th-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.th-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.th-dot { stroke: var(--card); stroke-width: 2; }
.th-tip { position: absolute; top: 24px; pointer-events: none; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); white-space: nowrap; }