:root {
    --vlak: #f9f9f7;
    --kaart: #fcfcfb;
    --inkt: #0b0b0b;
    --inkt-2: #52514e;
    --gedempt: #898781;
    --lijn: #e1e0d9;
    --accent: #1c5cab;
    --accent-donker: #104281;
    --fout: #a32020;
    --fout-vlak: #fbeaea;
    --goed: #006300;
    --goed-vlak: #e8f5e8;
}

* { box-sizing: border-box; }

/* het hidden-attribuut moet ook winnen van klassen die zelf een display zetten */
[hidden] { display: none !important; }

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

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

.kop {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: var(--kaart);
    border-bottom: 1px solid var(--lijn);
    flex-wrap: wrap;
}
.kop .merk { font-weight: 600; color: var(--inkt); text-decoration: none; }
.kop nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.kop nav a { text-decoration: none; color: var(--inkt-2); }
.kop nav a:hover { color: var(--accent); }
.kop .account { display: flex; align-items: center; gap: 12px; }
.kop .account form { margin: 0; }

main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }

.kaart {
    background: var(--kaart);
    border: 1px solid var(--lijn);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.smal { max-width: 420px; }
.kaart.smal { margin-left: auto; margin-right: auto; }

h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.kaart h2:not(:first-child) { margin-top: 28px; }

.toelichting { color: var(--inkt-2); margin: 8px 0; }

label { display: block; margin-bottom: 12px; color: var(--inkt-2); font-size: 13px; }
label.inline { display: flex; align-items: center; gap: 6px; font-size: 14px; }
label.inline input { width: auto; margin: 0; }

input:not([type=checkbox]) {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 10px;
    font: inherit;
    color: var(--inkt);
    background: #fff;
    border: 1px solid #c3c2b7;
    border-radius: 6px;
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
    padding: 8px 16px;
    font: inherit;
    font-weight: 500;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
}
button:hover { background: var(--accent-donker); }
button:disabled { opacity: .6; cursor: default; }
button.secundair { color: var(--accent); background: transparent; }
button.secundair:hover { background: #eef3fa; }
button.link { padding: 0; color: var(--accent); background: none; border: none; font-weight: 400; text-decoration: underline; }

.werkbalk { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.werkbalk label { margin-bottom: 0; }
.werkbalk label.inline { padding-bottom: 8px; }
.werkbalk input[type=search] { width: 280px; margin-top: 0; }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.knoppen form, form.rij { margin: 0; }
form.rij { display: flex; gap: 8px; }
form.rij input { margin-top: 0; }

.melding { padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; }
.melding.fout { color: var(--fout); background: var(--fout-vlak); }
.melding.goed { color: var(--goed); background: var(--goed-vlak); }

.bezig { display: flex; align-items: center; gap: 10px; color: var(--inkt-2); }
.draaier {
    width: 16px; height: 16px;
    border: 2px solid var(--lijn);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.grafiek { position: relative; height: 380px; }

.tabelwrap { overflow-x: auto; }
.tabelwrap.hoog { max-height: 60vh; overflow-y: auto; border: 1px solid var(--lijn); border-radius: 6px; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
thead th { color: var(--inkt-2); font-weight: 600; font-size: 13px; background: var(--kaart); position: sticky; top: 0; }
thead th small { display: block; font-weight: 400; color: var(--gedempt); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
td label { margin: 0; font-size: inherit; color: inherit; cursor: pointer; }
td input[type=checkbox] { margin: 0; }

table.cijfers thead th:not(:first-child) { text-align: right; }
table.cijfers thead th small { margin-left: auto; }
.getal { text-align: right; font-variant-numeric: tabular-nums; }
td.totaal { font-weight: 600; }
tfoot th { border-top: 2px solid #c3c2b7; border-bottom: none; }
td.leeg { color: var(--gedempt); text-align: center; padding: 24px; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0 0 12px; }
dt { color: var(--inkt-2); }
dd { margin: 0; }
code { font-size: 13px; background: #f0efec; padding: 1px 5px; border-radius: 4px; }
details { margin-top: 20px; }
summary { cursor: pointer; color: var(--accent); }