:root {
  --merk: #1d6b73;
  --merk-donker: #134a50;
  --tekst: #1b2b34;
  --zacht: #5b6b75;
  --lijn: #d9e2e6;
  --vlak: #f4f7f8;
  --wit: #ffffff;
  --groen: #2e7d32;
  --oranje: #e08a00;
  --rood: #c62828;
  --fout: #b3261e;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tekst);
  background: var(--vlak);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--merk); }
header.balk { background: var(--merk); color: var(--wit); }
header.balk .binnen { display: flex; align-items: center; gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 0 1rem; min-height: 3.25rem; flex-wrap: wrap; }
header.balk .logo { font-weight: 700; letter-spacing: .02em; }
header.balk nav { display: flex; gap: .25rem; flex-wrap: wrap; }
header.balk nav a { color: #dcefee; text-decoration: none; padding: .9rem .7rem; border-bottom: 3px solid transparent; }
header.balk nav a.actief, header.balk nav a:hover { color: var(--wit); border-bottom-color: var(--wit); }
header.balk .wie { margin-left: auto; display: flex; gap: .75rem; align-items: center; font-size: .9rem; }
header.balk .wie a { color: var(--wit); }
main { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.rij { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.kpi { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: .75rem 1rem; min-width: 10rem; }
.kpi b { display: block; font-size: 1.5rem; }
.kpi span { color: var(--zacht); font-size: .85rem; }
table { width: 100%; border-collapse: collapse; background: var(--wit); font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { background: #eaf1f2; font-weight: 600; position: sticky; top: 0; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel-schuif { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 8px; }
.klein { font-size: .8rem; color: var(--zacht); word-break: break-all; }
.label { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #e6ecee; color: var(--tekst); }
.label.aan, .label.groen { background: #e3f1e4; color: var(--groen); }
.label.uit { background: #eceff1; color: var(--zacht); }
.label.verboden, .label.rood, .label.mislukt { background: #fbe4e4; color: var(--rood); }
.label.nieuw, .label.oranje, .label.bezig { background: #fff1d6; color: #8a5500; }
.label.geslaagd { background: #e3f1e4; color: var(--groen); }
.stip { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.stip.groen { background: var(--groen); } .stip.oranje { background: var(--oranje); } .stip.rood { background: var(--rood); }
button, .knop { font: inherit; background: var(--merk); color: var(--wit); border: 0; border-radius: 6px; padding: .45rem .9rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .knop:hover { background: var(--merk-donker); }
button.secundair, .knop.secundair { background: var(--wit); color: var(--merk); border: 1px solid var(--merk); }
button.gevaar { background: var(--fout); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select { font: inherit; padding: .4rem .5rem; border: 1px solid #b9c6cc; border-radius: 6px; background: var(--wit); max-width: 100%; }
input.smal { width: 6rem; }
label { display: block; font-size: .85rem; color: var(--zacht); margin-bottom: .2rem; }
form.inline { display: inline; }
.melding { padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.melding.fout { background: #fbe4e4; color: var(--fout); }
.melding.info { background: #e3f0f2; color: var(--merk-donker); }
.melding.ok { background: #e3f1e4; color: var(--groen); }
.login { max-width: 24rem; margin: 4rem auto; }
.login form > div { margin-bottom: .9rem; }
.login input { width: 100%; }
.qr { width: 220px; height: 220px; background: var(--wit); padding: 8px; border: 1px solid var(--lijn); }
.verborgen { display: none; }
.tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a { padding: .35rem .8rem; border: 1px solid var(--lijn); border-radius: 999px; text-decoration: none; background: var(--wit); }
.tabs a.actief { background: var(--merk); color: var(--wit); border-color: var(--merk); }
.foutregel td { color: var(--fout); }
.balkje { height: .6rem; border-radius: 3px; display: flex; overflow: hidden; min-width: 8rem; background: var(--lijn); }
.balkje i { display: block; height: 100%; }
.balkje i.groen { background: var(--groen); } .balkje i.oranje { background: var(--oranje); } .balkje i.rood { background: var(--rood); }
@media (max-width: 700px) {
  header.balk .wie { margin-left: 0; }
  th, td { padding: .35rem .4rem; }
}

/* Verdelingsbalkjes zonder inline styles (CSP): breedte in stappen van 5% */
.balkje i.b0 { width: 0%; } .balkje i.b5 { width: 5%; } .balkje i.b10 { width: 10%; } .balkje i.b15 { width: 15%; } .balkje i.b20 { width: 20%; } .balkje i.b25 { width: 25%; } .balkje i.b30 { width: 30%; } .balkje i.b35 { width: 35%; } .balkje i.b40 { width: 40%; } .balkje i.b45 { width: 45%; } .balkje i.b50 { width: 50%; } .balkje i.b55 { width: 55%; } .balkje i.b60 { width: 60%; } .balkje i.b65 { width: 65%; } .balkje i.b70 { width: 70%; } .balkje i.b75 { width: 75%; } .balkje i.b80 { width: 80%; } .balkje i.b85 { width: 85%; } .balkje i.b90 { width: 90%; } .balkje i.b95 { width: 95%; } .balkje i.b100 { width: 100%; }

/* Rapportvoorbeeld in het dashboard */
.rapport-scherm .r-kop { display: flex; gap: 1.5rem; flex-wrap: wrap; background: var(--vlak); padding: .75rem 1rem; border-radius: 6px; }
.rapport-scherm .r-label { display: block; font-size: .75rem; color: var(--zacht); text-transform: uppercase; }
.rapport-scherm .r-tabel { margin-bottom: .5rem; }
.rapport-scherm .r-aandacht { padding-left: 1.2rem; }

textarea { width: 100%; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 8px;
  border: 1px solid #b9c6cc; border-radius: 6px; background: var(--wit); color: inherit; }
details { margin: 8px 0 12px; }
details summary { cursor: pointer; }