:root {
  --bg: #f3f4f6;
  --paneel: #ffffff;
  --rand: #dfe3e8;
  --tekst: #14171c;
  --zacht: #5b6472;
  --accent: #0f6fc4;
  --accent-zacht: #e8f1fb;
  --rond: 12px;
  --niveau1: #c62828;
  --niveau2: #e06c00;
  --niveau3: #b58a00;
  --niveau4: #2f7d32;
  --niveau5: #6b7280;
}

html[data-thema='donker'] {
  --bg: #0d1117;
  --paneel: #161b22;
  --rand: #262d38;
  --tekst: #e6e9ee;
  --zacht: #9aa4b2;
  --accent: #58a6ff;
  --accent-zacht: #10243d;
  --niveau1: #ff6b6b;
  --niveau2: #ffa04d;
  --niveau3: #e0c04a;
  --niveau4: #6cc070;
  --niveau5: #9aa4b2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 16px/1.6 -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.balk {
  background: var(--paneel);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}
.balk-binnen {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.merk { flex: 0 0 auto; }
.merk {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
}
.merk:hover { text-decoration: none; }
.merk-logo {
  width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto;
}
.merk-tekst b { display: block; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.merk-tekst span { display: block; font-weight: 400; font-size: 13px; color: var(--zacht); }
nav {
  display: flex; gap: 4px; margin-left: auto;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;              /* anders duwt het menu de pagina breder dan het scherm */
}
nav::-webkit-scrollbar { display: none; }
nav a { white-space: nowrap; }
nav a {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--zacht);
}
nav a:hover { background: var(--bg); color: var(--tekst); text-decoration: none; }
nav a.actief { background: var(--accent-zacht); color: var(--accent); font-weight: 600; }
.icoonknop {
  border: 1px solid var(--rand); background: var(--paneel); color: var(--zacht);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 15px;
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }

h1 { font-size: 27px; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 36px 0 12px; }
h3 { font-size: 16.5px; margin: 22px 0 8px; }
.ondertitel { color: var(--zacht); margin: 0 0 24px; }

.paneel {
  background: var(--paneel);
  border: 1px solid var(--rand);
  border-radius: var(--rond);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.feiten { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.feit {
  background: var(--paneel); border: 1px solid var(--rand); border-radius: 10px;
  padding: 10px 14px; min-width: 120px;
}
.feit b { display: block; font-size: 19px; }
.feit span { font-size: 12.5px; color: var(--zacht); }

/* prioriteitsbadge */
.niveau {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 2px 10px 2px 3px;
  font-size: 12.5px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--rand);
  white-space: nowrap;
}
.niveau i {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal;
  color: #fff; font-size: 12px; font-weight: 700;
}
.n1 i { background: var(--niveau1); } .n1 { color: var(--niveau1); }
.n2 i { background: var(--niveau2); } .n2 { color: var(--niveau2); }
.n3 i { background: var(--niveau3); } .n3 { color: var(--niveau3); }
.n4 i { background: var(--niveau4); } .n4 { color: var(--niveau4); }
.n5 i { background: var(--niveau5); } .n5 { color: var(--niveau5); }

.sleepzone {
  border: 2px dashed var(--rand); border-radius: var(--rond);
  background: var(--paneel); padding: 40px 24px; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 14px;
}
.sleepzone:hover, .sleepzone:focus { border-color: var(--accent); outline: none; }
.sleepzone.sleep-actief { border-color: var(--accent); background: var(--accent-zacht); }
.sleepzone b { display: block; font-size: 18px; margin-bottom: 6px; }
.sleepzone span { color: var(--zacht); font-size: 14.5px; }

/* filters en knoppen op de analysepagina */
.bediening { margin: 0 0 18px; }
.knoprij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.knoprij-label {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--zacht); font-weight: 700; min-width: 78px;
}
.knoprij-uitleg { font-size: 13.5px; color: var(--zacht); margin: 4px 0 0 84px; }
@media (max-width: 640px) {
  .knoprij-label { min-width: 100%; }
  .knoprij-uitleg { margin-left: 0; }
}
.keuze {
  font: inherit; font-size: 14px; padding: 5px 13px; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--paneel); color: var(--zacht);
}
.keuze:hover { border-color: var(--accent); color: var(--tekst); }
.keuze-actief {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
html[data-thema='donker'] .keuze-actief { color: #0d1117; }
.tabelzoek {
  width: 100%; padding: 9px 13px; font: inherit; margin-top: 4px;
  border: 1px solid var(--rand); border-radius: 10px;
  background: var(--paneel); color: var(--tekst);
}
.tabelzoek:focus { outline: none; border-color: var(--accent); }

/* verandering ten opzichte van de vorige periode */
.delta {
  display: inline-block; border-radius: 999px; padding: 1px 9px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.delta-op { background: color-mix(in srgb, var(--niveau1) 15%, transparent); color: var(--niveau1); }
.delta-neer { background: color-mix(in srgb, var(--niveau4) 15%, transparent); color: var(--niveau4); }
.delta-gelijk { color: var(--zacht); }

/* verloop in de tijd */
.tijdlijn {
  display: flex; align-items: flex-end; gap: 2px; height: 90px;
  padding: 0 2px; border-bottom: 1px solid var(--rand);
}
.tijdlijn .balk {
  flex: 1 1 0; min-width: 2px; background: var(--accent); opacity: .55;
  border-radius: 2px 2px 0 0;
}
.tijdlijn .balk:hover { opacity: 1; }
.tijdlijn .balk-urgent { background: var(--niveau1); opacity: .8; }
.tijdlijn-as {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--zacht); margin-top: 6px;
}

/* inklapbare blokken */
.vouw { margin-bottom: 10px; }
.vouw > summary {
  cursor: pointer; list-style: none; padding: 12px 16px;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--rond);
  font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.vouw > summary::-webkit-details-marker { display: none; }
.vouw > summary::before { content: "▸"; color: var(--zacht); }
.vouw[open] > summary::before { content: "▾"; }
.vouw > summary:hover { border-color: var(--accent); }
.vouw .teller {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--zacht);
  background: var(--bg); border-radius: 999px; padding: 1px 10px;
}
.vouw[open] > summary { border-radius: var(--rond) var(--rond) 0 0; border-bottom: none; }

/* telefonisch te begeleiden */
.telefoon {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 2px 11px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--rand); background: var(--bg);
}
.tel-ja { color: var(--niveau4); border-color: color-mix(in srgb, var(--niveau4) 40%, var(--rand)); }
.tel-nee { color: var(--niveau1); border-color: color-mix(in srgb, var(--niveau1) 40%, var(--rand)); }
.tel-onzeker { color: var(--zacht); }
.tel-uitleg { font-size: 13px; color: var(--zacht); margin: 6px 0 0; }
@media (max-width: 640px) {
  /* Op een telefoon is 'Telefonisch te proberen, anders alsnog langs' breder
     dan het scherm. Laat zulke labels dan afbreken. */
  .telefoon, .niveau, .delta { white-space: normal; }
}

.veiligheid {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--niveau1) 35%, var(--rand));
  background: color-mix(in srgb, var(--niveau1) 7%, var(--paneel));
  font-size: 14.5px;
}
.veiligheid b { color: var(--niveau1); }

/* bevindingen */
.bevinding { border-left: 4px solid var(--rand); }
.bevinding.urgent { border-left-color: var(--niveau1); }
.bevinding.keten { border-left-color: var(--accent); }
.bevinding.volume { border-left-color: var(--niveau2); }
.bevinding.piek { border-left-color: var(--niveau3); }
.bevinding.communicatie { border-left-color: #7c4dff; }
.bevinding .soort {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--zacht); font-weight: 700;
}
.bevinding h3 { margin: 4px 0 6px; font-size: 18px; }
.bevinding .bewijs { color: var(--zacht); font-size: 14.5px; margin: 0 0 12px; }

.kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .kolommen { grid-template-columns: 1fr; } }
.kolommen h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--zacht); }
.kolommen ul { margin: 0; padding-left: 20px; }
.kolommen li { margin-bottom: 4px; }

.keten { margin-top: 12px; padding: 12px 14px; background: var(--accent-zacht); border-radius: 10px; }
.keten ol { margin: 6px 0 0; padding-left: 20px; }

code, .code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.92em; background: var(--bg); border: 1px solid var(--rand);
  padding: 1px 6px; border-radius: 6px;
}

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); }
tbody tr:hover { background: var(--bg); }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelomhulsel { overflow-x: auto; }

#zoek {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 1px solid var(--rand); border-radius: 10px;
  background: var(--paneel); color: var(--tekst); margin-bottom: 14px;
}
#zoek:focus { outline: none; border-color: var(--accent); }

.tijd { color: var(--zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.let-op {
  border-left: 4px solid var(--niveau2); background: var(--paneel);
  border-radius: 0 var(--rond) var(--rond) 0; padding: 14px 18px; margin: 18px 0;
}
footer {
  max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px;
  color: var(--zacht); font-size: 13.5px; border-top: 1px solid var(--rand);
}

@media print {
  .balk, #zoek, footer { display: none; }
  body { background: #fff; }
  .paneel { break-inside: avoid; border-color: #ccc; }
}