:root {
  --bg: #f7f7f5;
  --vlak: #ffffff;
  --fg: #1f2328;
  --muted: #59636e;
  --accent: #1a5fb4;
  --accent-fg: #ffffff;
  --border: #d0d7de;
  --pos: #1a7f37;
  --neg: #b3261e;
  --waarsch: #8a5a00;
  --waarsch-bg: #fff8e1;
  --ok-bg: #e8f5e9;
  --fout-bg: #fdecea;
  --kop: #f0f2f4;
  --reeks-1: #1a5fb4;
  --reeks-2: #e66100;
  --reeks-3: #26a269;
  --reeks-4: #9141ac;
  --reeks-5: #c01c28;
  --reeks-6: #986a44;
  --reeks-7: #2ec27e;
  --reeks-8: #613583;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --vlak: #1f2328;
    --fg: #e6e6e6;
    --muted: #9aa4ae;
    --accent: #78aeed;
    --accent-fg: #0d1117;
    --border: #30363d;
    --pos: #7ee2a8;
    --neg: #ff8a80;
    --waarsch: #f2cc60;
    --waarsch-bg: #2b2414;
    --ok-bg: #15291b;
    --fout-bg: #34191a;
    --kop: #262b31;
    --reeks-1: #78aeed;
    --reeks-2: #ffa348;
    --reeks-3: #8ff0a4;
    --reeks-4: #dc8add;
    --reeks-5: #f66151;
    --reeks-6: #cdab8f;
    --reeks-7: #57e389;
    --reeks-8: #c061cb;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--vlak);
}

.brand { color: var(--accent); font-weight: 600; text-decoration: none; }

.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-header nav a { text-decoration: none; color: var(--fg); padding: 0.15rem 0; }
.site-header nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); font-weight: 600; }
.uitloggen { margin-left: auto; }

main { max-width: 80rem; margin: 0 auto; padding: 1rem; }

.kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kop h1 { margin: 0.5rem 0; }

.smal { max-width: 26rem; margin: 2rem auto; }

/* Knoppen */
.knop {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.knop-secundair { background: transparent; color: var(--accent); }
.knop-gevaar { background: transparent; border-color: var(--neg); color: var(--neg); }
.knop-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.knoppen { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }

/* Meldingen */
.melding { padding: 0.6rem 0.9rem; border-radius: 6px; margin: 0.5rem 0 1rem; border: 1px solid var(--border); }
.melding-ok { background: var(--ok-bg); }
.melding-fout { background: var(--fout-bg); border-color: var(--neg); }
.melding-waarschuwing { background: var(--waarsch-bg); border-color: var(--waarsch); }

/* Tegels */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.tegel { background: var(--vlak); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; }
.tegel span { display: block; color: var(--muted); font-size: 0.85rem; }
.tegel b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* Tabellen */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel { border-collapse: collapse; width: 100%; background: var(--vlak); font-size: 0.93rem; }
.tabel th, .tabel td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tabel thead th { background: var(--kop); position: sticky; top: 0; white-space: nowrap; }
.tabel tbody th { font-weight: 500; }
.tabel .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel small { color: var(--muted); display: block; }
.tabel .notitie { color: var(--muted); max-width: 22rem; }
.gedimd { color: var(--muted); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.verouderd { color: var(--waarsch) !important; }
.toelichting { color: var(--muted); font-size: 0.88rem; }
.paginering { display: flex; gap: 1rem; margin: 1rem 0; }

/* Sorteerbare kolomkoppen */
.tabel th a.sorteer { color: inherit; text-decoration: none; display: inline-flex; gap: 0.25rem; align-items: baseline; }
.tabel th a.sorteer:hover, .tabel th a.sorteer:focus-visible { text-decoration: underline; }
.tabel th .pijl { color: var(--muted); font-size: 0.75em; }
.tabel th a.actief .pijl { color: var(--accent); }

/* Grafieken */
section { margin-top: 2rem; }
.periode { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; }
.periode .veld { margin: 0; min-width: 10rem; }
.periode .knoppen { margin: 0; }
.grafiek-vlak { position: relative; height: 22rem; background: var(--vlak); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; }
.grafiek-vlak.klikbaar:hover { border-color: var(--accent); }
.grafiek-melding { color: var(--muted); padding: 1rem; margin: 0; }
.grafiek-samenvatting { color: var(--muted); font-size: 0.9rem; }
.donut-vlak { position: relative; height: 18rem; }
.verdeling-raster { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 1.5rem; align-items: center; }
.verdeling-tabel { max-width: 28rem; }
@media (max-width: 700px) {
  .grafiek-vlak { height: 16rem; }
  .verdeling-raster { grid-template-columns: 1fr; }
}

/* Totaalwaarde */
.bijgewerkt { color: var(--muted); margin: 0 0 0.5rem; }
.totaal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin: 0.5rem 0 1rem; }
.totaal-label { color: var(--muted); width: 100%; }
.totaal-bedrag { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.totaal-verschil { font-size: 1.15rem; font-weight: 600; }
.totaal small { color: var(--muted); }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Rendementsschakelaar */
.schakelaar { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; font-size: 0.9rem; }
.schakelaar > a { padding: 0.15rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; }
.schakelaar > a.actief { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.schakelaar .uitleg { width: 100%; color: var(--muted); }
.schakelaar .uitleg summary { cursor: pointer; }

/* Koersjob-status */
.status { display: inline-block; padding: 0 0.5rem; border-radius: 999px; font-size: 0.85rem; border: 1px solid var(--border); }
.status-ok { background: var(--ok-bg); color: var(--pos); border-color: var(--pos); }
.status-deels, .status-afgekeurd, .status-bezig { background: var(--waarsch-bg); color: var(--waarsch); border-color: var(--waarsch); }
.status-mislukt { background: var(--fout-bg); color: var(--neg); border-color: var(--neg); }
.tabel tr.gekozen td { background: var(--kop); }
.knop[disabled] { opacity: 0.5; cursor: not-allowed; }

.terug { margin: 0 0 0.25rem; }
.nav-groep { color: var(--muted); font-size: 0.85rem; }
.tabel tfoot th, .tabel tfoot td { border-top: 2px solid var(--border); font-weight: 600; }

/* Formulieren */
.formulier, .filters { background: var(--vlak); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; align-items: flex-end; }
.filters .veld { min-width: 12rem; margin: 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; }
.veld { display: flex; flex-direction: column; margin-bottom: 0.9rem; }
.veld label { font-weight: 500; margin-bottom: 0.2rem; }
.veld small { color: var(--muted); font-size: 0.82rem; }
.veld input, .veld select, .veld textarea {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  width: 100%;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.veld-vinkje { flex-direction: row; align-items: center; gap: 0.5rem; }
.veld-vinkje input { width: auto; }
.heeft-fout input, .heeft-fout select, .heeft-fout textarea { border-color: var(--neg); }
.fout-tekst { color: var(--neg); font-size: 0.85rem; }
.verwijderen { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.verwijderen small { color: var(--muted); }

@media (max-width: 600px) {
  main { padding: 0.75rem; }
  .uitloggen { margin-left: 0; }
}