/* ---------------------------------------------------------------------------
   DARES R10 - stijlblad
   Donker als standaard, licht schakelbaar. Mobiel eerst, grote raakvlakken,
   hoog contrast, geen animaties. Frequenties en calls in monospace.
   Geen externe lettertypen: de tool moet offline volledig werken.
   ------------------------------------------------------------------------ */

:root {
  --bg:        #0c1317;
  --vlak:      #141f26;
  --vlak-2:    #1b2a33;
  --rand:      #2c4049;
  --rand-fel:  #40606e;
  --tekst:     #eaf1f5;
  --zacht:     #94a9b4;
  --accent:    #f2a33c;
  --accent-tekst: #1a1206;
  --nood:      #e5484d;
  --ok:        #45b36b;

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --raak: 52px;          /* minimale hoogte van bedienbare elementen */
  --hoek: 6px;
  --breed: 60rem;
}

html[data-thema="licht"] {
  --bg:        #eef1f2;
  --vlak:      #ffffff;
  --vlak-2:    #f4f7f8;
  --rand:      #c2ccd1;
  --rand-fel:  #93a4ac;
  --tekst:     #0e181d;
  --zacht:     #4e626c;
  --accent:    #a35700;
  --accent-tekst: #ffffff;
  --nood:      #b71c22;
  --ok:        #1e7c42;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}

.mono, .freq, .call, .code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-tekst);
  padding: .75rem 1rem; z-index: 10;
}
.overslaan:focus { left: 0; }

/* --- Kop en navigatie ---------------------------------------------------- */

.kop {
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 5;
}

.kop-rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  max-width: var(--breed); margin: 0 auto;
  padding: .5rem .75rem;
}

.kop-naam {
  font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--tekst); text-decoration: none;
}

.kop-rechts { display: flex; align-items: center; gap: .5rem; }

.netstatus {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--zacht);
}
.netstatus-stip {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--ok);
}
.netstatus[data-status="offline"] .netstatus-stip { background: var(--nood); }
.netstatus[data-status="offline"] .netstatus-tekst { color: var(--nood); font-weight: 700; }

.nav {
  display: flex; gap: .25rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: var(--breed); margin: 0 auto;
  padding: 0 .5rem .5rem;
  scrollbar-width: thin;
}

.nav-knop {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  background: var(--vlak-2);
  color: var(--tekst); text-decoration: none;
  font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.nav-knop.is-actief {
  background: var(--accent); color: var(--accent-tekst);
  border-color: var(--accent);
}

/* --- Inhoud -------------------------------------------------------------- */

.inhoud {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 1rem .75rem 3rem;
}

.paginatitel { font-size: 1.5rem; margin: .25rem 0 .25rem; }
.paginatoelichting { color: var(--zacht); margin: 0 0 1rem; }

h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .35rem; }

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  padding: 1rem;
  margin: 0 0 1rem;
}
.kaart-titel { margin: 0 0 .5rem; font-size: 1.05rem; }

.let-op {
  border-left: 5px solid var(--accent);
  background: var(--vlak);
  padding: .85rem 1rem;
  margin: 0 0 1rem;
}
.let-op strong { color: var(--accent); }

.melding { padding: .85rem 1rem; border-radius: var(--hoek); margin: 0 0 1rem; border: 1px solid var(--rand); }
.melding-gelukt { border-color: var(--ok); color: var(--ok); }
.melding-fout { border-color: var(--nood); color: var(--nood); }
.melding-waarschuwing { border-color: var(--accent); color: var(--accent); }
.melding-info { color: var(--zacht); }

.zacht { color: var(--zacht); }
.klein { font-size: .85rem; }

/* --- Tegels op het dashboard --------------------------------------------- */

.tegels {
  display: grid; gap: .75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .tegels { grid-template-columns: 1fr 1fr; } }

.tegel {
  display: block;
  min-height: 84px;
  padding: .9rem 1rem;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-left: 5px solid var(--accent);
  border-radius: var(--hoek);
  color: var(--tekst); text-decoration: none;
}
.tegel-naam { font-weight: 700; font-size: 1.05rem; }
.tegel-uitleg { color: var(--zacht); font-size: .9rem; }
.tegel-uit { border-left-color: var(--rand-fel); opacity: .55; }

/* --- Formulieren --------------------------------------------------------- */

.veld { margin: 0 0 1rem; }
.veld label, .veldnaam { display: block; font-weight: 600; margin: 0 0 .3rem; }
.veld .uitleg { color: var(--zacht); font-size: .85rem; margin: .25rem 0 0; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%;
  min-height: var(--raak);
  padding: .6rem .7rem;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--tekst);
  background: var(--vlak-2);
  border: 1px solid var(--rand-fel);
  border-radius: var(--hoek);
}
input.mono, .veld-mono input, textarea.mono { font-family: var(--mono); letter-spacing: .04em; }
select { appearance: none; background-image: none; }
textarea { min-height: 8rem; }

.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--raak); padding: .6rem 1.2rem;
  font-size: 1.05rem; font-weight: 700; font-family: inherit;
  color: var(--accent-tekst); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--hoek);
  cursor: pointer; text-decoration: none;
}
.knop-stil {
  background: var(--vlak-2); color: var(--tekst); border-color: var(--rand-fel);
}
.knop-gevaar { background: var(--nood); border-color: var(--nood); color: #fff; }
.knop-klein { min-height: 40px; padding: .35rem .7rem; font-size: .9rem; }
.knop-breed { width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.checkrij { display: flex; align-items: center; gap: .6rem; min-height: var(--raak); }
.checkrij input[type=checkbox] { width: 24px; height: 24px; }

/* --- Tabellen ------------------------------------------------------------ */

.tabelwikkel { overflow-x: auto; }

table.data {
  width: 100%; border-collapse: collapse; margin: 0 0 1rem;
}
table.data th, table.data td {
  text-align: left; padding: .6rem .55rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
table.data th {
  font-size: .8rem; color: var(--zacht); font-weight: 700;
  border-bottom: 2px solid var(--rand-fel);
}
table.data td.freq { font-family: var(--mono); font-size: 1.1rem; white-space: nowrap; }
table.data tr.eigen-regio td { background: var(--vlak-2); }
table.data tr.eigen-regio td:first-child { box-shadow: inset 4px 0 0 var(--accent); }

.merkteken {
  display: inline-block; padding: .1rem .45rem; border-radius: 3px;
  background: var(--accent); color: var(--accent-tekst);
  font-size: .75rem; font-weight: 700;
}
.merkteken-stil { background: var(--vlak-2); color: var(--zacht); border: 1px solid var(--rand); }

/* --- Grote uitkomst (QSY, alarmcode) ------------------------------------- */

.uitkomst {
  font-family: var(--mono);
  font-size: clamp(2rem, 12vw, 3.5rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--accent);
  word-break: break-all;
}
.uitkomst-bron { font-family: var(--mono); color: var(--zacht); font-size: 1rem; }

/* --- Voet ---------------------------------------------------------------- */

.voet {
  max-width: var(--breed); margin: 0 auto;
  padding: 1rem .75rem 2.5rem;
  border-top: 1px solid var(--rand);
  color: var(--zacht); font-size: .9rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center;
}
.voet-blok { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.voet-noot { flex-basis: 100%; margin: .25rem 0 0; font-size: .8rem; }

/* --- Inlogscherm --------------------------------------------------------- */

.inlogvel {
  max-width: 24rem; margin: 2rem auto;
}

/* --- Filterbalk (groepsfilter module 1) ---------------------------------- */

.filterbalk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0 0 1rem;
}
.filterlabel { color: var(--zacht); font-size: .85rem; margin-right: .25rem; }
.filterknop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 56px; padding: 0 .8rem;
  border: 1px solid var(--rand-fel); border-radius: var(--hoek);
  background: var(--vlak); color: var(--tekst);
  font-family: var(--mono); font-weight: 700; text-decoration: none;
}
.filterknop.is-actief { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }

/* --- Gemarkeerde rij (link vanuit de alarmcode-decoder) ------------------ */

table.data tr.gemarkeerd td { background: var(--vlak-2); }
table.data tr.gemarkeerd td:first-child { box-shadow: inset 4px 0 0 var(--nood); }

/* --- QSY ----------------------------------------------------------------- */

input.groot { font-size: 1.6rem; min-height: 64px; letter-spacing: .04em; }

.qsy-paneel {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: flex-end; justify-content: center;
}
.qsy-paneel-binnen {
  width: 100%; max-width: 30rem;
  background: var(--vlak);
  border: 1px solid var(--rand-fel);
  border-bottom: none;
  border-radius: var(--hoek) var(--hoek) 0 0;
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
}
.qsy-paneel-binnen p { margin: 0 0 .4rem; }
.qsy-paneel-binnen .knop { margin-top: .75rem; width: 100%; }

tr.kiesbaar { cursor: pointer; }
html.js tr.kiesbaar td:first-child::before { content: "\203A\00a0"; color: var(--accent); }

/* --- Alarmcode ----------------------------------------------------------- */

.cijferveld {
  font-size: 2.4rem; min-height: 76px; letter-spacing: .35em;
  text-align: center; font-weight: 700;
}

.codesplitsing {
  display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap;
}
.codedeel {
  flex: 1 1 5rem;
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem .25rem;
  border: 1px solid var(--rand-fel); border-radius: var(--hoek);
  background: var(--vlak-2);
}
.codedeel .mono { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.codelabel { font-size: .75rem; color: var(--zacht); }

/* --- Uitklapbaar blok ---------------------------------------------------- */

.uitklap { border: 1px solid var(--rand); border-radius: var(--hoek); background: var(--vlak); margin: 0 0 1rem; }
.uitklap > summary {
  min-height: var(--raak); display: flex; align-items: center;
  padding: .5rem 1rem; cursor: pointer; font-weight: 600;
}
.uitklap[open] > summary { border-bottom: 1px solid var(--rand); }
.uitklap > .tabelwikkel { padding: 0 1rem 1rem; }

/* --- Zonder JavaScript --------------------------------------------------- */

html.js .geenjs { display: none; }

/* --- Printen ------------------------------------------------------------- */

@media print {
  :root {
    --bg: #fff; --vlak: #fff; --vlak-2: #fff; --rand: #999; --rand-fel: #666;
    --tekst: #000; --zacht: #333; --accent: #000; --accent-tekst: #fff;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kop-rechts, .nav, .voet-blok, .knop, .geenprint, .qsy-paneel,
  .filterbalk { display: none !important; }
  .uitklap > summary { display: none; }
  .uitklap > .tabelwikkel { display: block !important; }
  details > .tabelwikkel { display: block !important; }
  .kop { position: static; border-bottom: 2px solid #000; }
  .inhoud { max-width: none; padding: 0; }
  .kaart, .let-op { border: 1px solid #666; page-break-inside: avoid; }
  table.data { page-break-inside: auto; }
  table.data tr { page-break-inside: avoid; }
  table.data tr.eigen-regio td { outline: 1px solid #000; }
  a { color: #000; text-decoration: none; }
}