:root {
    --groen: #2f6f3e;
    --groen-donker: #1f4d2b;
    --rood: #c0392b;
    --oranje: #b9770e;
    --tekst: #232a24;
    --grijs: #6b7280;
    --lijn: #e5e7eb;
    --vlak: #f6f7f5;
    --wit: #ffffff;
}

* { box-sizing: border-box; }

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

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

/* --- Koptekst en navigatie ------------------------------------------------ */
header.top {
    background: var(--groen-donker);
    color: #fff;
    padding: 0 24px;
}

header.top .binnen {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 58px;
    flex-wrap: wrap;
}

header.top .merk { font-weight: 700; letter-spacing: .2px; }

header.top nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }

header.top nav a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

header.top nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
header.top nav a.actief { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
header.top .uit { color: rgba(255, 255, 255, .7); font-size: 13px; text-decoration: none; }

main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 24px 60px;
}

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 14px; }
.sub { color: var(--grijs); margin: 0 0 22px; font-size: 14px; }

/* --- Kaarten -------------------------------------------------------------- */
.kaart {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.rooster { display: grid; gap: 14px; }
.rooster.k2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rooster.k4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.cijfer { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 16px 18px; }
.cijfer .label { color: var(--grijs); font-size: 13px; }
.cijfer .waarde { font-size: 26px; font-weight: 700; margin-top: 2px; }
.cijfer .extra { color: var(--grijs); font-size: 13px; margin-top: 2px; }

/* --- Meldingen ------------------------------------------------------------ */
.melding { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.melding.ok { background: #e8f4ea; border: 1px solid #bcdcc4; color: #1f4d2b; }
.melding.fout { background: #fdecea; border: 1px solid #f3c2bc; color: #8c2318; }
.melding.waarschuwing { background: #fdf4e3; border: 1px solid #f0dcae; color: #7a5410; }

.aandacht { margin: 0; padding-left: 18px; }
.aandacht li { margin-bottom: 4px; }

/* --- Tabellen ------------------------------------------------------------- */
.tabelhouder { overflow-x: auto; }

table.lijst { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lijst th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--grijs);
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--lijn);
    white-space: nowrap;
}
table.lijst td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
table.lijst tr:last-child td { border-bottom: none; }
table.lijst tr:hover td { background: #fafbfa; }
table.lijst td.nummer { text-align: right; padding-right: 0; white-space: nowrap; }

/* --- Labels --------------------------------------------------------------- */
.label {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    color: var(--grijs);
    white-space: nowrap;
}
.label.groen { background: #e8f4ea; border-color: #bcdcc4; color: #1f4d2b; }
.label.blauw { background: #e8f0f7; border-color: #bcd0e2; color: #1d4468; }
.label.rood { background: #fdecea; border-color: #f3c2bc; color: #8c2318; }
.label.oranje { background: #fdf4e3; border-color: #f0dcae; color: #7a5410; }

.sterren { color: #d9a300; letter-spacing: 1px; white-space: nowrap; }

/* --- Formulieren ---------------------------------------------------------- */
label.veld { display: block; margin-bottom: 16px; }
label.veld .naam { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
label.veld .hint { display: block; color: var(--grijs); font-size: 13px; margin-bottom: 6px; }

input[type=text], input[type=email], input[type=url], input[type=number],
input[type=password], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--lijn);
    border-radius: 7px;
    font: inherit;
    background: #fff;
    color: inherit;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #cfe3d5; border-color: var(--groen); }

.schakelaar { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.schakelaar input { margin-top: 3px; }

.knop {
    display: inline-block;
    background: var(--groen);
    color: #fff;
    border: 1px solid var(--groen);
    border-radius: 7px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.knop:hover { background: var(--groen-donker); border-color: var(--groen-donker); }
.knop.rand { background: #fff; color: var(--groen); }
.knop.rand:hover { background: var(--vlak); color: var(--groen-donker); }
.knop.gevaar { background: #fff; color: var(--rood); border-color: #e5b6b0; }
.knop.gevaar:hover { background: #fdecea; }
.knop.klein { padding: 6px 12px; font-size: 13px; }

.knoprij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Filters -------------------------------------------------------------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters input[type=text] { width: auto; min-width: 220px; }
.chip {
    text-decoration: none;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--lijn);
    background: #fff;
    color: var(--grijs);
}
.chip.actief { background: var(--groen); border-color: var(--groen); color: #fff; }

/* --- Grafiek -------------------------------------------------------------- */
.grafiek { display: flex; align-items: flex-end; gap: 14px; height: 140px; padding-top: 10px; }
.grafiek .balk { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.grafiek .staaf { background: #cfe3d5; border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.grafiek .staaf .ingevuld { position: absolute; bottom: 0; left: 0; right: 0; background: var(--groen); border-radius: 4px 4px 0 0; }
.grafiek .bijschrift { text-align: center; font-size: 11px; color: var(--grijs); margin-top: 6px; }

.legenda { display: flex; gap: 16px; font-size: 13px; color: var(--grijs); margin-top: 10px; }
.legenda span::before {
    content: ""; display: inline-block; width: 10px; height: 10px;
    border-radius: 2px; margin-right: 6px; vertical-align: middle;
}
.legenda .l-verstuurd::before { background: #cfe3d5; }
.legenda .l-ingevuld::before { background: var(--groen); }

/* --- Tijdlijn ------------------------------------------------------------- */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; }
.tijdlijn li:last-child { border-bottom: none; }
.tijdlijn .tijd { color: var(--grijs); white-space: nowrap; min-width: 108px; font-variant-numeric: tabular-nums; }

dl.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 14px; }
dl.gegevens dt { color: var(--grijs); }
dl.gegevens dd { margin: 0; }

.leeg { color: var(--grijs); padding: 26px 0; text-align: center; }
.paginering { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 14px; color: var(--grijs); }

/* --- Inloggen ------------------------------------------------------------- */
body.inlog { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
body.inlog .kaart { max-width: 380px; width: 100%; margin: 0; }