/* Gedeelde opmaak van de monitor en de adminpagina.
   Uitgangspunten: rustig en helder (Apple-achtig), goed leesbaar voor slechtzienden, bruikbaar op telefoon
   en desktop. Alle maten in rem zodat alles meeschaalt met de tekstgrootte van de gebruiker. Status wordt
   nooit alleen met kleur aangegeven. */

:root {
  color-scheme: light dark;

  --canvas: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #515154;
  --line: rgba(0, 0, 0, 0.14);
  --field-line: #86868b;             /* rand van velden en omtrek van balken: minstens 3:1 (WCAG 1.4.11) */
  --track: rgba(0, 0, 0, 0.12);
  --accent: #0066cc;
  --accent-ink: #ffffff;
  --good: #1d7f3a;
  --caution: #9a5600;
  --alert: #c0281d;
  --bar: #0066cc;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
  --bar-glass: rgba(245, 245, 247, 0.82);

  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --touch: 2.75rem;                  /* minimale hoogte van knoppen en velden (44 px) */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text",
          "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --line: rgba(255, 255, 255, 0.2);
    --field-line: #7b7b80;
    --track: rgba(255, 255, 255, 0.18);
    --accent: #2997ff;
    --accent-ink: #00101f;
    --good: #30d158;
    --caution: #ff9f0a;
    --alert: #ff6b61;
    --bar: #2997ff;
    --shadow: none;
    --bar-glass: rgba(0, 0, 0, 0.78);
  }
}

/* Gebruiker vraagt om meer contrast */
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --line: currentColor; --field-line: currentColor; --track: rgba(128, 128, 128, 0.55); }
  .card, .field input, .field select, .btn { border-width: 2px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 1.0625rem/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- hulpklassen ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 20; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

/* Zichtbare focus overal */
:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.125rem; border-radius: 0.375rem; }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }

/* ---------- vaste balk ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bar-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 100rem; margin: 0 auto; padding: 0.625rem max(1rem, env(safe-area-inset-right)) 0.625rem max(1rem, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 0 1rem; flex-wrap: wrap; min-height: 3.25rem;
}
.topbar .brand { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }   /* een lange eigen titel breekt af i.p.v. de balk te verbreden */
.brand { font-weight: 650; letter-spacing: -0.01em; font-size: 1.0625rem; }
.topbar .spacer { flex: 1 1 auto; }
.link {
  flex: none; color: var(--accent); font-weight: 500; text-decoration: none; padding: 0.5rem 0.25rem; min-height: var(--touch);
  display: inline-flex; align-items: center;
}
.link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Verbindingsstatus: symbool + tekst, kleur is bijzaak */
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--ink-2); min-width: 0; }
.status > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status .sdot { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.status[data-state="on"] { color: var(--good); }
.status[data-state="on"] .sdot { background: currentColor; }
.status[data-state="err"] { color: var(--alert); }
.status[data-state="err"] .sdot { border-radius: 0.125rem; background: currentColor; transform: rotate(45deg); }

/* ---------- pagina ---------- */
.page {
  max-width: 80rem; margin: 0 auto;
  padding: 1.5rem max(1rem, env(safe-area-inset-right)) 4rem max(1rem, env(safe-area-inset-left));
}
.large-title {
  margin: 0.25rem 0 1.25rem; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.022em;
}
.lead { color: var(--ink-2); margin: -0.5rem 0 1.25rem; max-width: 60ch; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem;
}
@media (max-width: 30rem) { .card { padding: 1rem; border-radius: 1rem; } }

/* Melding (fouten van het board of de server) */
.notice {
  margin: 0 0 1rem; padding: 0.875rem 1rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--alert); border-left-width: 0.375rem; color: var(--ink); font-weight: 500;
}
.notice:empty { display: none; }

/* ---------- formulierelementen ---------- */
.field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.field > label, .field > .label { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); }
.field input, .field select, input.input, select.input {
  font: inherit; min-height: var(--touch); padding: 0.5rem 0.875rem; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--field-line); border-radius: var(--radius-sm); width: 100%; min-width: 0;
}
.field input::placeholder { color: var(--ink-2); opacity: 0.8; }
.field input[aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert); }
.field .hint { font-size: 0.875rem; color: var(--ink-2); }

.btn {
  font: inherit; font-weight: 600; min-height: var(--touch); min-width: var(--touch); padding: 0.5rem 1rem; cursor: pointer;
  color: var(--accent); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(0.97); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn:disabled { opacity: 0.5; cursor: default; }

.check { display: inline-flex; align-items: center; gap: 0.625rem; min-height: var(--touch); cursor: pointer; font-weight: 500; }
.check input { width: 1.375rem; height: 1.375rem; accent-color: var(--accent); margin: 0; }

/* ---------- tunerkaarten ---------- */
.grid {
  display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: minmax(0, 1fr);
}
/* 1 kolom op telefoon, 2 op tablet, 4 vanaf 60rem (ook een 4:3-scherm van 1024 px) */
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } }
.tuner { position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; min-width: 0; }
.head-main { display: contents; }   /* alleen de labels staan erin; die liggen op de rand van de kaart (zie .tags) */
.tuner h2 { margin: 0; font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.01em; }

/* Statuslabels (Geen gegevens, Alleen beheerder, ...) liggen als badge op de bovenrand van de kaart. Zo verschuiven ze de
   inhoud niet en blijven de kaarten in een rij op dezelfde hoogte uitgelijnd, met of zonder label. */
.tags { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0; padding: 0; position: absolute; top: -0.8125rem; left: 1rem; right: 1rem; z-index: 2; pointer-events: none; }
.tag {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
  white-space: nowrap;
}
.tag .tdot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 2px solid currentColor; box-sizing: content-box; width: 0.375rem; height: 0.375rem; }
.tag.ok { color: var(--good); }
.tag.ok .tdot { background: currentColor; }
.tag.nodata { display: none; color: var(--caution); }
.mute {
  flex: none; margin-left: auto; width: var(--touch); height: var(--touch); padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  touch-action: manipulation;
}
.mute:hover { filter: brightness(0.97); }
.mute:active { transform: scale(0.96); }
.mute .cross { display: none; }
.mute.on { color: var(--alert); border: 2px solid var(--alert); }
.mute.on .wave { display: none; }
.mute.on .cross { display: inline; }

/* Knoppen voor squelch en stereo: tonen de stand en wisselen bij een klik */
.modes { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1 1 100%; }
.mode {
  font: inherit; font-size: 0.9375rem; font-weight: 500; flex: 1 1 auto; min-height: var(--touch); padding: 0.25rem 0.75rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  touch-action: manipulation;
}
.mode:hover { filter: brightness(0.97); }
.mode:active { transform: scale(0.98); }
.mode.ok { color: var(--good); }
.mode .tdot { width: 0.375rem; height: 0.375rem; border-radius: 50%; border: 2px solid currentColor; box-sizing: content-box; flex: none; }
.mode.ok .tdot { background: currentColor; }
/* Vaste instelling: dikkere rand, dus niet alleen met kleur te onderscheiden van automatisch */
.mode.fixed { color: var(--ink); border: 2px solid var(--ink); font-weight: 650; padding: calc(0.25rem - 1px) calc(0.75rem - 1px); }
.tuner.stale .mode { opacity: 0.6; }
.tuner.stale .tag.nodata { display: inline-flex; }

.ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.375rem; flex: 1 1 21rem; min-width: 0; }
.ctl .finput {
  flex: 1 1 5.5rem; min-width: 4.25rem; max-width: 9rem; width: auto; text-align: right; font: inherit; font-variant-numeric: tabular-nums; font-weight: 600;
  min-height: var(--touch); padding: 0.5rem 0.75rem; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--field-line); border-radius: var(--radius-sm);
}
.ctl .btn { padding-inline: 0.5rem; flex: 0 0 auto; }
/* Smalle kaart (telefoon of 4 per rij): invoerveld en Tune naast elkaar */
@container (max-width: 24rem) {
  .ctl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; width: 100%; flex: 1 1 100%; }
  .ctl .finput { grid-column: 1 / 4; order: 1; max-width: none; width: 100%; }
  .ctl .fset { grid-column: 4; order: 2; padding-inline: 0.125rem; font-size: 0.9375rem; }   /* "Tune" in een smalle kaart: iets kleiner, zodat het ruim in de knop past */
}

/* Leeswaarde: frequentie en stationsnaam */
.reading { display: grid; gap: 0.25rem; min-width: 0; touch-action: pan-y; }   /* horizontaal vegen stemt af, verticaal scrollt de pagina */
.freqrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.freqrow .freq { min-width: 0; }
.freq { margin: 0; font-size: clamp(1.625rem, 14cqi, 3.25rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.freq .u { font-size: 0.5em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-left: 0.15em; }
.ps { margin: 0; font: 600 clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem)/1.2 var(--mono); letter-spacing: 0.02em; white-space: pre; min-height: 1.2em; }
/* Radiotekst: altijd één regel; is hij te lang dan schuift hij heen en weer (ticker) */
.rt { margin: 0; color: var(--ink); overflow: hidden; white-space: nowrap; min-height: 1.5em; }
.rt.psl { font: 600 clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem)/1.2 var(--mono); letter-spacing: 0.02em; min-height: 1.2em; }   /* Long PS: zelfde letter als de PS */
.rt-track { display: inline-block; }
.rt.scroll .rt-track { animation: rt-ticker var(--dur, 10s) ease-in-out infinite alternate; }
.rt.scroll:hover .rt-track { animation-play-state: paused; }
@keyframes rt-ticker {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--shift, 0)); }
}
/* De lopende radiotekst staat stil zolang je de muis erboven houdt of de focus in de kaart staat; bij bewegingsvermindering
   in het systeem loopt hij nooit en staat de hele tekst er, zo nodig op meer regels. */
.tuner:focus-within .rt.scroll .rt-track { animation-play-state: paused; }
/* Stilgezet met de knop: de hele radiotekst staat er, zo nodig op meer regels, zonder beweging */
.no-ticker .rt { white-space: normal; overflow: visible; }
.no-ticker .rt .rt-track { display: inline; animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rt { white-space: normal; overflow: visible; }
  .rt .rt-track { display: inline; animation: none; transform: none; }
}
/* tekens met een foutniveau: dezelfde grijze tint, zonder streepje (het niveau staat als tooltip bij het teken) */
.ps .cw, .rt .cw, .ps .cb, .rt .cb { color: color-mix(in srgb, var(--ink) 62%, var(--surface)); }

/* Signaalrijen */
.signals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sig { grid-column: 1 / -1; padding: 0.75rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.sig.half { grid-column: auto; }
.sig.half:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.sig:last-child { border-bottom: 0; padding-bottom: 0; }
.sig-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4375rem; }
.sig .lbl { font-weight: 500; }
.sig .lbl small { font-weight: 400; color: var(--ink-2); font-size: 0.9375rem; }
.sig .vals { display: inline-flex; align-items: baseline; gap: 0.625rem; font-variant-numeric: tabular-nums; }
.sig .val { font-size: 1.125rem; font-weight: 600; }
.sig .unit { color: var(--ink-2); font-size: 0.9375rem; margin-left: 0.2rem; }
.sig .state { color: var(--ink-2); font-size: 0.9375rem; min-width: 3.5ch; text-align: right; }

.meter { position: relative; height: 0.5rem; border-radius: 999px; background: var(--track); overflow: hidden; box-shadow: inset 0 0 0 1px var(--field-line); }
.meter.thin { height: 0.375rem; }
.meter .fill { height: 100%; width: 0; background: var(--bar); border-radius: inherit; transition: width 0.2s ease-out; }
.meter .fill.caution { background: var(--caution); }
.meter .fill.alert { background: var(--alert); }
.meter .fill.good { background: var(--good); }
.meter .limit { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: 0.55; }
.tuner.stale .meter, .tuner.stale .offtrack { opacity: 0.4; }
/* Tuner die niet beschikbaar is: houdt zijn plek, uitgegrijsd */
.tuner.offline { opacity: 0.5; filter: grayscale(1); }

/* Afstemindicator: onder / midden / boven */
.offtrack { position: relative; display: flex; height: 0.875rem; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--field-line); background: var(--surface-2); }
.offtrack .zone { display: block; height: 100%; }
.offtrack .zl, .offtrack .zr { flex: 0 0 37.5%; }
.offtrack .zc { flex: 1 1 auto; border-inline: 1px solid var(--line); }
.offtrack.low .zl, .offtrack.high .zr { background: color-mix(in srgb, var(--caution) 40%, transparent); }
.offtrack.mid .zc { background: color-mix(in srgb, var(--good) 40%, transparent); }
.offneedle { position: absolute; top: 0; bottom: 0; width: 0.25rem; margin-left: -0.125rem; background: var(--ink); border-radius: 0.125rem; left: 50%; transition: left 0.2s ease-out; }

/* ---------- beheerpagina ---------- */
.conn-card, .order-card { margin-bottom: 1rem; display: grid; gap: 0.875rem; align-content: start; }
.conn-card h2, .order-card h2 { margin: 0; font-size: 1.1875rem; font-weight: 650; }
.conn-card p, .order-card p { margin: 0; }
.row-end { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* verbindingen */
.slotlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .slotlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot { display: grid; gap: 0.375rem; align-content: start; }
.slotstate { margin: 0; color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.slotstate[data-state="connected"] { color: var(--good); }
.board-section { margin-top: 1.75rem; }
.board-section > h2 { margin: 0 0 0.25rem; font-size: 1.375rem; font-weight: 650; }
.board-section > h2 small { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); margin-left: 0.5rem; }
.boardid { margin: 0 0 0.75rem; color: var(--ink-2); font: 0.875rem var(--mono); overflow-wrap: anywhere; }
.admin-card h3 { margin: 0 0 1rem; font-size: 1.1875rem; font-weight: 650; }

/* voorbeeldweergave van de volgorde: kleine kaarten, naast elkaar zoals op de pagina */
.preview { margin-top: 0.25rem; }
.mini { padding: 0.75rem; display: grid; gap: 0.5rem; align-content: start; cursor: grab; min-width: 0; }
.mini-cap { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mini-id { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.mini-btns { display: inline-flex; gap: 0.25rem; flex: none; }
.mini-btns .btn { padding: 0; font-size: 1.25rem; line-height: 1; }
.mini-head { display: flex; align-items: center; justify-content: space-between; font-weight: 650; }
.mini-spk { color: var(--ink-2); display: inline-flex; }
.mini-spk.muted { color: var(--alert); opacity: 0.8; }
.mini-freq { margin: 0; font-size: 1.75rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mini-freq .u { font-size: 0.5em; font-weight: 500; color: var(--ink-2); margin-left: 0.15em; letter-spacing: 0; }
.mini-ps { margin: 0; font: 600 1.0625rem/1.2 var(--mono); letter-spacing: 0.02em; white-space: pre; min-height: 1.2em; }
.mini.stale { opacity: 0.55; }
.mini.dragging { opacity: 0.4; }
.mini.drop-before { box-shadow: -5px 0 0 0 var(--accent); }
.mini.drop-after { box-shadow: 5px 0 0 0 var(--accent); }
.admin-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.admin-card h2 { margin: 0 0 1rem; font-size: 1.1875rem; font-weight: 650; }
.fields { display: grid; gap: 0.875rem; grid-template-columns: 1fr 1fr; }
.fields .wide { grid-column: 1 / -1; }
@media (max-width: 24rem) { .fields { grid-template-columns: 1fr; } }
.unit-input { position: relative; }
.unit-input input { padding-right: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.unit-input .suffix { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.results { margin: 1rem 0 0; padding-top: 0.875rem; border-top: 1px solid var(--line); display: grid; gap: 0.375rem; }
.results div { display: flex; justify-content: space-between; gap: 1rem; }
.results dt { color: var(--ink-2); }
.results dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.results dd.problem { color: var(--alert); }
.savebar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; padding: 0.75rem 0;
  position: sticky; bottom: 0; z-index: 5; background: var(--bar-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}
.msg { font-weight: 500; color: var(--ink-2); }
.msg.ok { color: var(--good); }
.msg.err { color: var(--alert); }
.note { color: var(--ink-2); max-width: 70ch; }
.note code { font: 0.9em var(--mono); background: var(--surface-2); padding: 0.05em 0.35em; border-radius: 0.375rem; }

/* ---------- beweging en gedwongen kleuren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .card, .btn, .field input, .field select, .tag, .meter, .offtrack, #log { border: 1px solid CanvasText; }
  .meter .fill, .offneedle { background: Highlight; forced-color-adjust: none; }
  .btn.primary { background: ButtonText; color: ButtonFace; }
}

/* Cijfers en woorden (laag/matig/hoog) van WAM en USN en het getal van de offset worden niet getoond: de balk is genoeg.
   De waarde blijft beschikbaar voor schermlezers via aria-valuetext van de balk. */
.val.wam, .val.usn, .offval, .wamstate, .usnstate, .meter .limit { display: none; }

/* Beheer: de tuners van een board naast elkaar, zoals op de pagina (1, 2 of 4 per rij) */
@media (min-width: 40rem) { .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .admin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } }
.admin-card { container-type: inline-size; min-width: 0; }
@container (max-width: 19rem) { .fields { grid-template-columns: minmax(0, 1fr); } }
.results div { flex-wrap: wrap; }
.mini-freqrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Beheer: bekende boards */
.knownlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.known { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.375rem 0.375rem 0.375rem 0.875rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.known .kname { font-weight: 600; }
.known .kinfo { color: var(--ink-2); font-size: 0.9375rem; flex: 1 1 auto; overflow-wrap: anywhere; }
.subhead { margin: 0; font-size: 1rem; font-weight: 650; }

/* ---------- inloggen en accounts ---------- */
.account { display: inline-flex; align-items: center; gap: 0.75rem; flex: none; }
.link-btn {
  font: inherit; font-weight: 500; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0.5rem 0.25rem;
  min-height: var(--touch); display: inline-flex; align-items: center;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.page.narrow { max-width: 30rem; }
.authcard { display: grid; gap: 0.875rem; margin-bottom: 1rem; }
.authcard p { margin: 0; }
.authform { display: grid; gap: 0.875rem; }
.banner {
  margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line);
  border-left: 0.375rem solid var(--accent); font-weight: 500;
}
.banner a { color: var(--accent); }
/* Alleen kijken: de afstemming is weg en de schakelaars tonen alleen de stand */
.tuner.locked:not(.restricted) .ctl { display: none; }   /* gast: geen afstemming */
.tuner.restricted .ctl { visibility: hidden; }              /* ingelogd maar niet bevoegd: de plek blijft vrij, zodat de kaarten gelijk uitgelijnd blijven */
.tuner.locked .mode, .tuner.locked .mute { pointer-events: none; cursor: default; }
/* Ingelogd maar niet bevoegd voor deze tuner: het label "Alleen beheerder" */
.tag.restricted { display: none; }
.tuner.restricted .tag.restricted { display: inline-flex; }
.btn.danger { color: var(--alert); }

/* beheer: gebruikers en logboek */
.users-card, .log-card { display: grid; gap: 0.875rem; align-content: start; }
.users-card h2, .log-card h2 { margin: 0; font-size: 1.1875rem; font-weight: 650; }
.users-card p, .log-card p { margin: 0; }
.userlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.userrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.375rem 0.5rem 0.375rem 0.875rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.userrow .uname { font-weight: 600; flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.userrow .urole { width: auto; min-width: 9rem; }
.pwrow { flex: 1 1 100%; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pwrow .input { flex: 1 1 12rem; width: auto; }
.adduser { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.logfilters { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.logwrap { overflow: auto; max-height: 30rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.logtable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.logtable th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
.logtable td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.logtable td.when, .logtable td.ip { white-space: nowrap; font-variant-numeric: tabular-nums; }
.logtable td.who, .logtable td.what { white-space: nowrap; }
.logtable td.detail { min-width: 14rem; overflow-wrap: anywhere; }

/* Het hidden-attribuut wint altijd, ook van opmaak die een display instelt */
[hidden] { display: none !important; }

/* Beheer: tussenruimte en kopjes (geen inline stijlen: de Content-Security-Policy staat die niet toe) */
.spaced { margin-top: 1.5rem; }
.log-card { margin-top: 1rem; }
.help-h { margin: 0 0 0.5rem; font-size: 1.1875rem; }

/* De vaste balk bovenaan mag een gefocust element niet verbergen (WCAG 2.4.11) */
html { scroll-padding-top: 8rem; scroll-padding-bottom: 6rem; }

/* Een knop die alleen voor schermlezers, leesregels en toetsenbordgebruikers bedoeld is: niet te zien totdat hij de
   focus krijgt (Tab), dan verschijnt hij linksboven. Net als een "ga naar de inhoud"-link. */
.sr-focus:not(:focus) {
  position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-focus:focus { position: fixed; top: 4.25rem; left: 0.75rem; z-index: 30; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
/* Schakelknop die aan staat: dikke rand en vette tekst, niet alleen een kleur */
.btn[aria-pressed="true"] { color: var(--ink); border: 2px solid var(--ink); font-weight: 650; }

/* ---------- tabbladen (Beheer) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
.tab {
  font: inherit; font-weight: 500; min-height: var(--touch); padding: 0.5rem 1rem; cursor: pointer; background: none; color: var(--ink-2);
  border: 0; border-bottom: 3px solid transparent; border-radius: 0.5rem 0.5rem 0 0; margin-bottom: -1px; touch-action: manipulation;
}
.tab:hover { color: var(--ink); background: var(--surface-2); }
/* Het gekozen tabblad: vette tekst en een dikke streep eronder, niet alleen een kleur */
.tab[aria-selected="true"] { color: var(--ink); font-weight: 650; border-bottom-color: var(--accent); }
.tabpanel { min-width: 0; }
.tabpanel > .card, .tabpanel > .board-section:first-child { margin-top: 0; }
.usercheck { margin: 0.75rem 0 0; font-size: 0.9375rem; }

/* Logboek op een smal scherm: elke gebeurtenis als blokje (tijd en IP-adres bovenaan, dan wie, wat en details) in plaats van
   een tabel die zijwaarts scrolt. De tabelrollen staan expliciet in de HTML, zodat schermlezers het als tabel blijven zien. */
@media (max-width: 40rem) {
  .logtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .logtable, .logtable tbody { display: block; }
  .logtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); }
  .logtable td { display: block; padding: 0; border: 0; min-width: 0; }
  .logtable td.when { grid-column: 1; grid-row: 1; color: var(--ink-2); font-size: 0.875rem; }
  .logtable td.ip { grid-column: 2; grid-row: 1; color: var(--ink-2); font-size: 0.875rem; text-align: right; }
  .logtable td.who { grid-column: 1 / -1; grid-row: 2; font-weight: 600; white-space: normal; }
  .logtable td.what { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
  .logtable td.detail { grid-column: 1 / -1; grid-row: 4; min-width: 0; color: var(--ink-2); }
  .logtable td.detail:empty { display: none; }
}

/* Afstemming en bandbreedte delen een rij: boven elk het label, daaronder één regel van 44 px. De bandbreedte is de waarde met een
   klein keuzeknopje erachter (een keuzelijst zonder tekst, alleen het icoon). */
.sig.half .sig-top { margin-bottom: 0.25rem; }
.sigrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: var(--touch); }
.sigrow .offtrack { flex: 1 1 auto; }
.sigrow .bwval { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; white-space: nowrap; }
.sigrow .bwnum { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sigrow .bwmode { font-size: 0.8125rem; color: var(--ink-2); }
.bwpick {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--touch); display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.bwpick .bwicon { flex: 0 0 auto; color: var(--ink-2); }
/* De keuzelijst ligt onzichtbaar over het hele vlak: klikken waar dan ook opent hem, en de lijst is zo breed als het vlak. */
select.bwsel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.bwpick:has(select:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
select.bwsel option { color: CanvasText; background: Canvas; }