:root {
    --achtergrond: #ffffff;
    --tekst: #1d2733;
    --kop: #12324f;
    --kop-tekst: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --achtergrond: #14181d;
        --tekst: #e6e9ed;
        --kop: #0b1f33;
    }
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--achtergrond);
    color: var(--tekst);
}

.kop {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--kop);
    color: var(--kop-tekst);
}

.merk {
    font-weight: 600;
}

.inhoud {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem;
}

:root {
    --groen: #d4edda;
    --groen-rand: #2e7d32;
    --oranje: #ffe5b4;
    --oranje-rand: #b36200;
    --rood: #f8d0d0;
    --rood-rand: #b42318;
    --uit: #eceff2;
    --uit-tekst: #5a6672;
    --lijn: #c4ccd4;
    --link: #0b5cad;
}

@media (prefers-color-scheme: dark) {
    :root {
        --groen: #1d3b25;
        --oranje: #4a3410;
        --rood: #4a1d1d;
        --uit: #20262d;
        --uit-tekst: #9aa6b2;
        --lijn: #3a444e;
        --link: #7db7f2;
    }
}

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

a:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
}

.alleen-scherm-lezer {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

.maandtitel {
    flex: 1;
    margin: 0;
    text-align: center;
    text-transform: capitalize;
}

.raster {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.raster th,
.raster td {
    border: 1px solid var(--lijn);
    padding: 0.25rem;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.dag {
    height: 5rem;
    font-size: 0.8rem;
}

.dagnummer {
    display: block;
    font-weight: 600;
}

.daglabel {
    display: block;
}

.eigen {
    display: block;
    margin-top: 0.25rem;
    padding: 0.1rem 0.25rem;
    border-left: 3px solid var(--tekst);
    background: var(--achtergrond);
}

.dag-groen {
    background: var(--groen);
    border-bottom: 3px solid var(--groen-rand);
}

.dag-oranje {
    background: var(--oranje);
    border-bottom: 3px solid var(--oranje-rand);
}

.dag-rood {
    background: var(--rood);
    border-bottom: 3px solid var(--rood-rand);
}

.dag-uit {
    background: var(--uit);
    color: var(--uit-tekst);
}

.lijst {
    width: 100%;
    border-collapse: collapse;
}

.lijst th,
.lijst td {
    padding: 0.4rem;
    border-bottom: 1px solid var(--lijn);
    text-align: left;
}

@media (max-width: 40rem) {
    .dag {
        height: auto;
        font-size: 0.7rem;
    }

    .lijst {
        font-size: 0.85rem;
    }
}

.lijst-wrap {
    overflow-x: auto;
}

.formulier {
    display: grid;
    gap: 0.5rem;
    max-width: 24rem;
}

.formulier select,
.formulier input,
.formulier button {
    font: inherit;
    padding: 0.4rem;
}

.melding {
    max-width: 40rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--rood-rand);
    background: var(--rood);
}

.gegevens dt {
    font-weight: 600;
}

.gegevens dd {
    margin: 0 0 0.5rem;
}