:root {
  --rand: #d9dee3;
  --tekst: #1d2733;
  --zacht: #5b6b7c;
  --accent: #1f6f5c;
  --accent-zacht: #e5f0ec;
  --stijgend: #b3261e;
  --dalend: #1f6f5c;
  --achtergrond: #f6f7f8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tekst);
  background: var(--achtergrond);
}

.kop {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}
.merk { display: inline-flex; align-items: center; }
.merk img { display: block; }
.hoofdnav { display: flex; gap: 18px; font-size: 14px; }
.hoofdnav a { color: var(--zacht); text-decoration: none; }
.hoofdnav a:hover { color: var(--accent); }

.inhoud { max-width: 1080px; margin: 24px auto; padding: 0 24px; }
.voet { max-width: 1080px; margin: 24px auto 48px; padding: 0 24px; color: var(--zacht); }
.klein { font-size: 12px; color: var(--zacht); }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}
.filter label { display: flex; flex-direction: column; font-size: 12px; color: var(--zacht); gap: 4px; }
.filter select { padding: 6px 8px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; font: inherit; }
.filter button { padding: 7px 14px; border: 1px solid var(--rand); border-radius: 6px; background: #fff; cursor: pointer; }

h2 { font-size: 16px; margin: 28px 0 12px; }

.radartabel {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 8px;
  overflow: hidden;
}
.radartabel th, .radartabel td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}
.radartabel thead th { background: #fbfcfc; font-size: 12px; color: var(--zacht); font-weight: 600; }
.radartabel tbody tr:last-child td { border-bottom: none; }
.radartabel .num { text-align: right; font-variant-numeric: tabular-nums; }

.ziekte { font-weight: 600; }
.ziekte .regios { display: block; font-weight: 400; font-size: 12px; color: var(--zacht); }

meter { width: 130px; height: 12px; }

.trend { font-size: 13px; white-space: nowrap; }
.trend-stijgend { color: var(--stijgend); }
.trend-dalend { color: var(--dalend); }
.trend-stabiel { color: var(--zacht); }

.spark { width: 120px; height: 26px; display: block; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; }

.datum { font-variant-numeric: tabular-nums; color: var(--zacht); font-size: 13px; }

.meldinglijst { list-style: none; padding: 0; margin: 0; }
.meldinglijst li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rand);
}
.meldinglijst .tag {
  display: inline-block;
  background: var(--accent-zacht);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
}
.meldinglijst .land, .meldinglijst .regio, .meldinglijst .aantal, .meldinglijst .zekerheid {
  font-size: 12px;
  color: var(--zacht);
  margin-right: 6px;
}
.meldinglijst .titel { display: inline; font-weight: 600; color: var(--tekst); }
.meldinglijst .titel:hover { color: var(--accent); }
.meldinglijst .bron { font-size: 12px; color: var(--zacht); margin-left: 6px; }
.meldinglijst .snippet { margin: 4px 0 0; font-size: 13px; color: var(--zacht); }

.leeg { color: var(--zacht); background: #fff; border: 1px dashed var(--rand); border-radius: 8px; padding: 16px; }
code { background: #eef1f2; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.filter input[type="text"] { padding: 6px 8px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; }

.waarschuwing { background: #fff4e5; border: 1px solid #f0c78a; border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.context { background: var(--accent-zacht); border-radius: 8px; padding: 10px 14px; font-size: 13px; }

.status { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-right: 6px; text-transform: uppercase; letter-spacing: .02em; }
.status-bevestigd { background: #fde7e5; color: #b3261e; }
.status-verdacht { background: #eef1f2; color: #5b6b7c; }
.herkomst { font-size: 11px; color: var(--zacht); border: 1px solid var(--rand); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.precisie, .afstand, .verval { font-size: 12px; color: var(--zacht); margin-right: 6px; }
.afstand { font-weight: 600; color: var(--tekst); }

/* beheer */
.kpi { list-style: none; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.kpi li { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 10px 16px; }
.radartabel tr.bron-uit td { color: var(--zacht); background: #fbfbfb; }
.radartabel td.fout { color: var(--stijgend); font-size: 12px; max-width: 320px; }
.radartabel form { display: inline; }
.radartabel button, .meldinglijst .acties button {
  font: inherit; font-size: 12px; padding: 3px 8px; border: 1px solid var(--rand);
  border-radius: 5px; background: #fff; cursor: pointer;
}
.meldinglijst .acties { display: inline-flex; gap: 8px; margin-left: 8px; }
.meldinglijst .acties button.gevaarlijk { color: var(--stijgend); border-color: #e6b3b0; }
details.run { margin: 6px 0; }
details.run summary { cursor: pointer; font-size: 13px; }
details.run pre { background: #fff; border: 1px solid var(--rand); border-radius: 6px;
  padding: 10px; overflow-x: auto; font-size: 12px; }

.beheernav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; }
.beheernav a { text-decoration: none; color: var(--zacht); font-size: 14px; }
.beheernav a:hover { color: var(--accent); }
.beheernav .uit { margin-left: auto; display: inline; }
.beheernav .uit button { font: inherit; font-size: 13px; padding: 3px 10px; border: 1px solid var(--rand);
  border-radius: 5px; background: #fff; cursor: pointer; }
.kpi a { color: inherit; text-decoration: none; }
.kpi a:hover { color: var(--accent); }

/* formulieren (publiek) */
.formulier { display: flex; flex-direction: column; gap: 14px; max-width: 560px; background: #fff;
  border: 1px solid var(--rand); border-radius: 10px; padding: 20px; }
.formulier.smal { max-width: 320px; }
.formulier > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--zacht); }
.formulier input[type="text"], .formulier input[type="email"], .formulier input[type="password"],
.formulier input[type="number"], .formulier input[type="date"], .formulier select, .formulier textarea {
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; font: inherit; background: #fff; }
.formulier fieldset { border: 1px solid var(--rand); border-radius: 8px; padding: 12px; }
.formulier legend { font-size: 12px; color: var(--zacht); padding: 0 6px; }
.formulier label.checkbox { flex-direction: row; align-items: center; gap: 8px; color: var(--tekst); font-size: 14px; }
.formulier button[type="submit"] { align-self: flex-start; padding: 9px 18px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; border-radius: 6px; font: inherit; cursor: pointer; }
.formulier .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* infoblok onder de grafiek */
.infoblok { margin-top: 24px; }
.infoblok .hint { color: var(--zacht); }
.ziekte-info { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 18px 20px; }
.ziekte-info h2 { margin-top: 0; }
.ziekte-info h2 .sluit { font-size: 13px; font-weight: 400; color: var(--zacht); text-decoration: none; margin-left: 10px; }
.ziekte-info .bronlinks { font-size: 13px; color: var(--zacht); }
.ziekte-info .bronlinks a { color: var(--accent); }
.badge-aangifte { display: inline-block; background: #fde7e5; color: #b3261e; font-size: 12px; font-weight: 700;
  border-radius: 4px; padding: 2px 8px; }
.radartabel tr.gekozen td { background: var(--accent-zacht); }
.radartabel .ziekte a { color: var(--tekst); font-weight: 600; text-decoration: none; }
.radartabel .ziekte a:hover { color: var(--accent); text-decoration: underline; }
.samenvatting-regel { font-size: 14px; }
.gevallen-kort { list-style: none; padding: 0; margin: 8px 0 0; }
.gevallen-kort li { padding: 6px 0; border-bottom: 1px solid var(--rand); font-size: 13px; }
.gevallen-kort li:last-child { border-bottom: none; }
.gevallen-kort .regio { font-weight: 600; color: var(--tekst); margin-right: 8px; }

@media (max-width: 720px) {
  .radartabel { display: block; overflow-x: auto; }
}