/* ---------------------------------------------------------------------------
   ProRa — een stijlblad, met kleuren als variabelen.

   Regel: nergens een letterlijke kleur in een stijlregel. Alles komt uit de blokken hieronder,
   zodat een schema toevoegen niets anders is dan dezelfde namen andere waarden geven.
   Raakvlakken zijn minstens 44 pixels en invoervelden 16 pixels groot: kleiner en je mist ze op
   een telefoon, of Safari zoomt in bij het tikken en je raakt er in de app-modus niet meer uit.
   --------------------------------------------------------------------------- */

:root {
    --bg: #f6f6f4;
    --oppervlak: #ffffff;
    --zijbalk: #23262b;
    --zijbalk-inkt: #e8eaed;
    --zijbalk-stil: #9aa1ab;
    --inkt: #1b1e23;
    --stil: #6b7280;
    --lijn: #e2e3e0;
    --accent: #2f6f4f;
    --accent-inkt: #ffffff;
    --gevaar: #b3261e;
    --waarschuwing: #8a6d00;
    /* Zacht vlak achter een waarschuwing: opvallend genoeg om te zien, rustig genoeg om ernaast
       te blijven werken. */
    --waarschuwing-vlak: #fdf4d6;
    --waarschuwing-lijn: #e6d193;
    --rustdag: #f0f0ee;
    --rond: 10px;
    --schaduw: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 5%);
    --waas: rgb(0 0 0 / 35%);

    color-scheme: light;
}

:root[data-thema="donker"] {
    --bg: #14161a;
    --oppervlak: #1c2025;
    --zijbalk: #0f1114;
    --zijbalk-inkt: #e8eaed;
    --zijbalk-stil: #8b929c;
    --inkt: #e9ebee;
    --stil: #9aa1ab;
    --lijn: #2b3039;
    --accent: #5aa17c;
    --accent-inkt: #10130f;
    --gevaar: #e5766d;
    --waarschuwing: #d8b74a;
    --waarschuwing-vlak: #2e2814;
    --waarschuwing-lijn: #55491f;
    --rustdag: #21252b;
    --waas: rgb(0 0 0 / 55%);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

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

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: 1.25rem; }
h2 { font-size: 1.1rem; }

a {
    color: inherit;
}

.stille-tekst {
    color: var(--stil);
}

.klein {
    font-size: .875rem;
}

.fout {
    color: var(--gevaar);
}

.tekort {
    color: var(--waarschuwing);
}

/* Twee schrijfwijzen van dezelfde tekst; de breedte van het scherm kiest. */
.smal-alleen {
    display: none;
}

@media (max-width: 700px) {
    .breed-alleen {
        display: none;
    }

    .smal-alleen {
        display: inline;
    }
}

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

/* ---------- raamwerk ---------- */

.app {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100dvh;
}

.zijbalk {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--zijbalk);
    color: var(--zijbalk-inkt);
    overflow-y: auto;
}

.zijbalk-kop {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.merk {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.zijbalk-naam {
    color: var(--zijbalk-stil);
    font-size: .875rem;
}

.zijbalk-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.zijbalk-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 44px;
    padding: 0 .75rem;
    border-radius: var(--rond);
    color: var(--zijbalk-inkt);
    text-decoration: none;
}

.zijbalk-link:hover {
    background: rgb(255 255 255 / 8%);
}

.zijbalk-link.actief {
    background: rgb(255 255 255 / 14%);
    font-weight: 600;
}

.zijbalk-voet {
    margin-top: auto;
}

.hoofd {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.bovenbalk {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--lijn);
    background: var(--oppervlak);
}

.bovenbalk-titel {
    font-weight: 600;
}

/* De knop staat er altijd, op elke breedte. Hem verbergen boven een bepaalde breedte leek netjes,
   maar dan hangt het bereiken van de navigatie af van een goed geraden grens — en een gsm in
   liggende stand of met "desktopweergave" aan zit daar zo overheen. Nu kan je nooit vastlopen. */
.icoonknop.lade-knop {
    display: inline-flex;
}

.inhoud {
    flex: 1;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.lade-waas {
    display: none;
}

/* ---------- knoppen en velden ---------- */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
    color: var(--inkt);
    font: inherit;
    cursor: pointer;
}

.knop:hover:not(:disabled) {
    border-color: var(--stil);
}

.knop:disabled {
    opacity: .5;
    cursor: default;
}

.knop.primair {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-inkt);
}

.knop.gevaar {
    border-color: var(--gevaar);
    background: var(--gevaar);
    color: var(--accent-inkt);
}

.knop.stil {
    border-color: transparent;
    background: transparent;
    color: inherit;
}

.knop.stil:hover {
    background: rgb(255 255 255 / 8%);
    border-color: transparent;
}

.knop.breed {
    width: 100%;
    justify-content: flex-start;
}

/* Alleen een icoon: de tooltip en het aria-label dragen de betekenis. */
.knop.vierkant {
    width: 44px;
    padding: 0;
}

.icoonknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--rond);
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.icoonknop:hover {
    background: var(--rustdag);
}

.icoonknop.gevaar {
    color: var(--gevaar);
}

/* Zonder deze regel tekent een svg zonder eigen maat zich op driehonderd pixels. */
.icoon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Een veld met zijn naampje erboven. Nooit flex-grow hierop: deze velden staan altijd onder
   elkaar, en "groeien" betekent daar in de hoogte — dan valt er een halve pagina wit tussen twee
   invoervakken. Breedte regel je met width, niet met flex. */
.veld {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: .25rem;
    min-width: 0;
}

.veld > span {
    color: var(--stil);
    font-size: .8125rem;
}

.veld.breed {
    width: 100%;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="date"],
select,
textarea {
    min-height: 44px;
    padding: .375rem .625rem;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
    color: var(--inkt);
    /* Zestien pixels, anders zoomt Safari in bij het tikken. */
    font: inherit;
    width: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

input[readonly] {
    background: var(--rustdag);
    color: var(--stil);
}

.afgeleid {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .375rem .625rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- dagscherm ---------- */

/* De pijlen horen bij de datum, niet bij de randen van het scherm: het geheel krimpt tot wat het
   nodig heeft en staat gecentreerd. Bij een lange datum ("donderdag 3 september 2026") ziet dat er
   hetzelfde uit als vroeger; bij een korte ("augustus 2026") staan de pijlen er nu naast in plaats
   van een halve schermbreedte verderop. */
.datumbalk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin-bottom: .25rem;
}

.datumbalk-midden {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 0;
    text-align: center;
}

.datumbalk h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Het datumveld zelf is onzichtbaar; enkel het kalendericoon is aanklikbaar. */
.datumkiezer {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--rond);
    cursor: pointer;
}

.datumkiezer:hover {
    background: var(--rustdag);
}

.datumkiezer input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Gecentreerd, zodat het onder de datum hangt en niet onder de pijl links ervan. */
.totalen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem;
    margin: 0 0 1rem;
    color: var(--stil);
    text-align: center;
}

.totalen strong {
    color: var(--inkt);
    font-variant-numeric: tabular-nums;
}

.scheiding {
    color: var(--lijn);
}

.acties {
    display: flex;
    align-items: center;
    gap: .75rem;
    /* De hoogte van de knop, ook als er geen knop staat: anders springt de lijst omhoog zodra je
       een afgesloten dag opent. */
    min-height: 44px;
    margin-bottom: .5rem;
}

/* Wat er ook links staat, de plus staat rechts. */
.acties .knop {
    margin-left: auto;
}

.met-icoon {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
}

.bewaarmelding {
    color: var(--stil);
    font-size: .875rem;
    opacity: 0;
    transition: opacity .15s ease-out;
}

.bewaarmelding.zichtbaar {
    opacity: 1;
}

.leeg {
    padding: 2rem 1rem;
    border: 1px dashed var(--lijn);
    border-radius: var(--rond);
    color: var(--stil);
    text-align: center;
}

/* De regels van een dag: één raster, één regel per registratie. Project en activiteit staan onder
   elkaar in de eerste kolom, al de rest ernaast — anders passen er maar drie op een scherm en ben
   je het overzicht van je dag kwijt. */

/* Geen overflow: hidden hier — de tijdkiezer klapt uit een regel open en zou dan afgesneden
   worden. De hoeken worden daarom op de koprij en de laatste regel zelf afgerond. */
.regels {
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
}

.regelkop {
    border-radius: var(--rond) var(--rond) 0 0;
}

.regel:last-child {
    border-radius: 0 0 var(--rond) var(--rond);
}

.regelkop,
.regel {
    display: grid;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
}

.regels.vantot .regelkop,
.regels.vantot .regel {
    grid-template-columns: minmax(0, 2fr) 6.25rem 6.25rem 4rem 4.5rem minmax(0, 2fr) 2.25rem;
    grid-template-areas: "titel van tot totaal km opm wis";
}

.regels.totaal .regelkop,
.regels.totaal .regel {
    grid-template-columns: minmax(0, 2fr) 4.5rem 4.5rem minmax(0, 2fr) 2.25rem;
    grid-template-areas: "titel totaal km opm wis";
}

.regelkop {
    border-bottom: 1px solid var(--lijn);
    background: var(--rustdag);
    color: var(--stil);
    font-size: .8125rem;
}

.regel + .regel {
    border-top: 1px solid var(--lijn);
}

.regel.vergrendeld {
    background: var(--rustdag);
}

.regel-titel {
    grid-area: titel;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.25;
}

/* De titel is een knop zodra de dag bewerkbaar is, maar hij hoort er niet als knop uit te zien:
   pas bij aanwijzen laat hij merken dat je erop kan klikken. */
button.regel-titel {
    padding: .1875rem .375rem;
    margin: -.1875rem -.375rem;
    border: 0;
    border-radius: calc(var(--rond) - 3px);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.regel-titel:hover {
    background: var(--rustdag);
    box-shadow: inset 0 0 0 1px var(--lijn);
}

.regel-titel strong,
.regel-titel span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* De activiteit hoort bij het project erboven; een inspringing zegt dat sneller dan een kleur. */
.regel-titel span {
    padding-left: .75rem;
    font-size: .8125rem;
}

.veldje {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.veldje.van { grid-area: van; }
.veldje.tot { grid-area: tot; }
.veldje.totaal { grid-area: totaal; }
.veldje.km { grid-area: km; }
.veldje.opm { grid-area: opm; }

.regelkop .van { grid-area: van; }
.regelkop .tot { grid-area: tot; }
.regelkop .totaal { grid-area: totaal; }
.regelkop .km { grid-area: km; }
.regelkop .opm { grid-area: opm; }

.regel-wis {
    grid-area: wis;
    display: flex;
    justify-content: flex-end;
}

/* De koprij draagt de namen; in de regels zelf zouden ze enkel plaats innemen. */
.veldje-naam {
    display: none;
    flex: 0 0 auto;
    color: var(--stil);
    font-size: .75rem;
}

/* Compacter dan de 44 pixels van een losse knop: hier staan de velden in een raster met een naam
   ernaast, en op een aanraakscherm groeien ze hieronder weer mee. */
.regel input,
.regel .afgeleid {
    min-height: 32px;
    padding: .125rem .375rem;
    font-size: .9375rem;
}

.regel .afgeleid {
    justify-content: flex-end;
    color: var(--stil);
}

.regel .icoonknop {
    width: 32px;
    height: 32px;
}

.regel .icoon {
    width: 17px;
    height: 17px;
}

@media (pointer: coarse) {
    .regel input,
    .regel .afgeleid {
        min-height: 38px;
        /* Zestien pixels, anders zoomt Safari in bij het tikken. */
        font-size: 16px;
    }

    .regel .icoonknop {
        width: 38px;
        height: 38px;
    }
}

/* ---------- tijdveld en tijdkiezer ---------- */

.tijdveld {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Op een pc een gewoon tekstveld met onze eigen kiezer erbij, op een aanraakscherm de
   systeemkiezer. Welke van de twee je ziet, beslist het aanwijsapparaat — zo is er geen
   javascript nodig om het toestel te herkennen. */
.tijd-grof {
    display: none;
}

.tijd-fijn {
    padding-right: 1.75rem;
}

.tijd-knop {
    position: absolute;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--stil);
    cursor: pointer;
}

.tijd-knop:hover {
    background: var(--rustdag);
    color: var(--inkt);
}

.tijd-knop .icoon {
    width: 15px;
    height: 15px;
}

/* Deze staat bewust ná de regels hierboven: een mediaquery voegt geen specificiteit toe, dus bij
   gelijke specificiteit wint de laatste. Stond dit blok eerder, dan bleef de eigen kiezer ook op
   een aanraakscherm staan naast de systeemkiezer. */
@media (pointer: coarse) {
    .tijd-fijn,
    .tijd-knop {
        display: none;
    }

    .tijd-grof {
        display: block;
    }

    /* Het klokje van de browser kost breedte die we niet hebben; tikken op het veld zelf opent
       de kiezer toch al. */
    .tijd-grof::-webkit-calendar-picker-indicator {
        display: none;
    }
}

/* Een doorzichtig vlak over de hele pagina: een klik ernaast sluit de kiezer. */
.tijdkiezer-waas {
    position: fixed;
    inset: 0;
    z-index: 19;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

/* Altijd naar rechts uitklappen, nooit naar links: de inhoud van de pagina schuift verticaal, en
   wat links buiten de rand valt is niet meer te bereiken — daar wordt het afgesneden. Naar rechts
   is er altijd plaats, want de tijdvelden staan in de eerste kolommen van een regel. */
.tijdkiezer {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    width: 14rem;
    max-width: calc(100vw - 1.5rem);
    padding: .5rem;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
    box-shadow: var(--schaduw);
}

.tijdkiezer-uren,
.tijdkiezer-minuten {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}

.tijdkiezer-minuten {
    padding-top: .375rem;
    border-top: 1px solid var(--lijn);
}

.tijdkiezer button {
    min-height: 30px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.tijdkiezer button:hover {
    background: var(--rustdag);
}

.tijdkiezer button.actief {
    background: var(--accent);
    color: var(--accent-inkt);
}

/* Een strookje tussen twee regels waar de klok een gat laat. Bewust smal en rustig: het is een
   aanwijzing, geen foutmelding. */
.gat-markering {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .5rem;
    border-top: 1px solid var(--lijn);
    background: repeating-linear-gradient(135deg,
            var(--rustdag) 0 6px,
            var(--oppervlak) 6px 12px);
    color: var(--waarschuwing);
    font-size: .8125rem;
}

.gat-markering .icoon {
    width: 15px;
    height: 15px;
}

/* ---------- tijdbalk ---------- */

/* Blijft onderaan staan terwijl je door de regels scrolt: juist bij een dag met twintig regels
   wil je de gaten kunnen zien zonder terug naar boven te moeten. */
.tijdbalk {
    position: sticky;
    bottom: 0;
    z-index: 5;
    /* De negatieve marges trekken de balk tot tegen de randen van het scherm: hij hoort bij de
       onderkant van het venster, niet bij de inhoud eromheen. */
    margin: 1rem -1rem calc(-1rem - env(safe-area-inset-bottom));
    padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lijn);
    background: var(--oppervlak);
}

.tijdbalk-spoor {
    position: relative;
    height: 22px;
    border-radius: 4px;
    background: var(--lijn);
    overflow: hidden;
}

.tijdbalk-blok,
.tijdbalk-gat,
.tijdbalk-tik {
    position: absolute;
    top: 0;
    bottom: 0;
}

.tijdbalk-blok {
    background: var(--accent);
}

/* Om en om een tint lichter, zodat twee registraties die aan elkaar grenzen te onderscheiden zijn. */
.tijdbalk-blok.wissel {
    background: color-mix(in srgb, var(--accent) 65%, var(--oppervlak));
}

.tijdbalk-gat {
    background: repeating-linear-gradient(135deg,
            var(--waarschuwing) 0 2px,
            transparent 2px 7px);
    opacity: .55;
}

.tijdbalk-tik {
    width: 1px;
    background: var(--oppervlak);
    opacity: .45;
}

.tijdbalk-schaal {
    position: relative;
    height: 1rem;
    margin-top: .125rem;
    color: var(--stil);
    font-size: .6875rem;
}

.tijdbalk-schaal span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.tijdbalk-samenvatting {
    margin: .125rem 0 0;
    color: var(--stil);
    font-size: .8125rem;
}

/* ---------- overzicht ---------- */

.overzicht-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}

.schakelaar {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
}

.zoekveld {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 18rem;
    min-width: 0;
}

.zoekveld .icoon {
    position: absolute;
    left: .5rem;
    width: 16px;
    height: 16px;
    color: var(--stil);
    pointer-events: none;
}

.zoekveld input {
    padding-left: 1.875rem;
}

.detailkeuze {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .875rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.detailkeuze legend {
    float: left;
    padding: 0 .625rem 0 0;
    color: var(--stil);
    font-size: .8125rem;
}

.detailkeuze label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 32px;
    cursor: pointer;
}

.detailkeuze input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.schakel {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 .875rem;
    border-radius: calc(var(--rond) - 3px);
    color: var(--stil);
    text-decoration: none;
}

.schakel.actief {
    background: var(--accent);
    color: var(--accent-inkt);
}

/* Brede inhoud schuift in haar eigen kader; de pagina zelf schuift nooit zijwaarts. */
.tabel-omhulsel {
    overflow-x: auto;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
}

.stat-tabel {
    width: 100%;
    border-collapse: collapse;
}

.stat-tabel th,
.stat-tabel td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--lijn);
    text-align: left;
    font-weight: 400;
}

.stat-tabel thead th {
    color: var(--stil);
    font-size: .8125rem;
}

.stat-tabel .rechts {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stat-tabel tbody tr.rustdag {
    background: var(--rustdag);
}

.stat-tabel tbody tr.vandaag th {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Met details staan er meerdere regels onder dezelfde dag; een streep laat zien waar de dag
   omslaat. De regels binnen een dag houden enkel een haarlijn. */
.stat-tabel.detail tbody td,
.stat-tabel.detail tbody th {
    border-bottom: 0;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
}

.stat-tabel.detail tbody tr.dagstart td,
.stat-tabel.detail tbody tr.dagstart th {
    border-top: 1px solid var(--lijn);
}

/* Een lange opmerking mag de tabel niet uitrekken. */
.stat-tabel .opmerking {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-tabel tfoot th,
.stat-tabel tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--lijn);
    font-weight: 600;
}

.weekdag {
    display: inline-block;
    width: 2.25rem;
    color: var(--stil);
}

/* ---------- venster ---------- */

.venster-waas {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--waas);
}

.venster {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(480px, 100%);
    max-height: min(90dvh, 720px);
    padding: 1rem;
    overflow-y: auto;
    border-radius: var(--rond);
    background: var(--oppervlak);
    box-shadow: var(--schaduw);
}

.venster.breed {
    width: min(640px, 100%);
}

/* Zo groot als het scherm toelaat. De vaste hoogte is er met opzet: dan vullen de keuzelijsten
   altijd dezelfde ruimte en verspringt het venster niet terwijl je typt. */
.venster.groot {
    width: min(1040px, 100%);
    height: min(86dvh, 780px);
    max-height: none;
    gap: .625rem;
    overflow: hidden;
}

/* De kiezer is het enige dat mag groeien. */
.venster.groot > .kiezer {
    flex: 1 1 auto;
}

.venster-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* .veld.breed groeit mee in een rij vélden; hier is het venster zelf de rij, en dan zou een
   zoekbalk de hele hoogte opeten. Alles in een venster houdt zijn eigen hoogte, behalve wat
   uitdrukkelijk mag groeien. */
.venster > * {
    flex: 0 0 auto;
}

.venster-acties {
    display: flex;
    justify-content: flex-end;
}

/* Twee kolommen naast elkaar: welk project je aanwijst en welke activiteiten daarbij horen, in
   één blik. Onder elkaar was het scrollen op scrollen. */
.kiezer {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: .75rem;
}

.kiezer-kolom {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 0;
}

.kiezer-kop {
    color: var(--stil);
    font-size: .8125rem;
}

.kieslijst {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: .25rem;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
}

/* In een kolom neemt de lijst de hoogte die er is, in plaats van een vaste vijftien regels. */
.kiezer .kieslijst {
    flex: 1;
    max-height: none;
}

/* Met een muis mag dit compacter: hoe meer er in één blik past, hoe minder je moet zoeken. Op een
   aanraakscherm groeit het hieronder terug naar een raakvlak waar je niet naast tikt. */
.kiesregel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 30px;
    padding: .1875rem .5rem;
    border: 0;
    border-radius: calc(var(--rond) - 3px);
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.kiesregel .stille-tekst {
    font-size: .8125rem;
}

@media (pointer: coarse) {
    .kiesregel {
        min-height: 44px;
        padding: .375rem .625rem;
    }
}

.kiesregel:hover {
    background: var(--rustdag);
}

.kiesregel.actief {
    background: var(--accent);
    color: var(--accent-inkt);
}

.kiesregel.actief .stille-tekst {
    color: inherit;
    opacity: .8;
}

/* ---------- skelet ---------- */

.skelet {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.skelet-tegel {
    height: 5rem;
    border-radius: var(--rond);
    background: linear-gradient(90deg, var(--rustdag), var(--lijn), var(--rustdag));
    background-size: 200% 100%;
    animation: schuif 1.4s linear infinite;
}

@keyframes schuif {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skelet-tegel { animation: none; }
}

/* ---------- boodschappagina en aanmelden ---------- */

.boodschap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    max-width: 32rem;
}

.boodschap.breed {
    max-width: 34rem;
    width: 100%;
}

.gelukt {
    margin: 0;
    color: var(--accent);
}

/* ---------- account ---------- */

.formulier {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
}

.formulier hr {
    width: 100%;
    margin: .25rem 0;
    border: 0;
    border-top: 1px solid var(--lijn);
}

.formulier-acties {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.melding {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    width: 100%;
    padding: .75rem;
    border: 1px solid var(--waarschuwing-lijn);
    border-left: 3px solid var(--waarschuwing);
    border-radius: var(--rond);
    background: var(--waarschuwing-vlak);
}

.melding p {
    margin: .25rem 0 0;
}

.melding .icoon {
    flex: 0 0 auto;
    margin-top: .125rem;
    color: var(--waarschuwing);
}

/* Het balkje bovenaan de inhoud, met dezelfde boodschap in één regel. */
.herinnering {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .625rem .75rem;
    border: 1px solid var(--waarschuwing-lijn);
    border-left: 3px solid var(--waarschuwing);
    border-radius: var(--rond);
    background: var(--waarschuwing-vlak);
    color: inherit;
    text-decoration: none;
    font-size: .875rem;
}

.herinnering span {
    flex: 1;
}

.herinnering .icoon {
    flex: 0 0 auto;
    color: var(--waarschuwing);
}

.herinnering:hover {
    border-color: var(--stil);
}

/* Een stipje naast de link in de zijbalk, zodat de herinnering ook zichtbaar is met de lade dicht. */
.stip {
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--waarschuwing);
}

.poort-pagina {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 1rem;
}

.poort {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(360px, 100%);
    padding: 1.5rem;
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    background: var(--oppervlak);
    box-shadow: var(--schaduw);
}

.poort-naam {
    margin: 0;
    font-size: 1.5rem;
}

.poort-uitleg {
    margin: -.75rem 0 0;
    color: var(--stil);
}

.poort .blok {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.poort .blok > span {
    color: var(--stil);
    font-size: .8125rem;
}

.poort-actie .knop {
    width: 100%;
}

/* ---------- gsm ---------- */

@media (max-width: 900px) {
    .app {
        grid-template-columns: 1fr;
    }

    .zijbalk {
        position: fixed;
        inset: 0 auto 0 0;
        width: 280px;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
    }

    .app.lade-open .zijbalk {
        transform: none;
    }

    .lade-waas {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 39;
        border: 0;
        padding: 0;
        background: var(--waas);
    }

    @media (prefers-reduced-motion: reduce) {
        .zijbalk { transition: none; }
    }
}

/* Op een breed scherm staat de zijbalk gewoon als kolom, en klapt dezelfde knop hem weg. Dat geeft
   het registratierooster de volle breedte. De toestand geldt tot je ergens naartoe navigeert; het
   is een handeling, geen instelling. */
@media (min-width: 901px) {
    /* Eén kolom, geen "0 1fr": een zijbalk op display:none is geen rasteronderdeel meer, dus de
       inhoud schuift op naar de eerste kolom. Was die nul breed, dan stond je naar een lege
       pagina te kijken. */
    .app.lade-open {
        grid-template-columns: 1fr;
    }

    .app.lade-open .zijbalk {
        display: none;
    }
}

/* Onder de 820 pixels past één regel niet meer op één lijn. Dan valt de koprij weg, dragen de
   velden hun eigen naampje, en klapt de regel open naar drie compacte lijnen. */
@media (max-width: 820px) {
    .regelkop {
        display: none;
    }

    /* Km en Opmerkingen krijgen hun naampje terug, want een los getal in een vakje zegt niets.
       Van, Tot en Uren staan naast elkaar: daar volstaan een streepje en een isgelijkteken, en
       dat scheelt drie labels aan breedte. */
    .veldje.km .veldje-naam,
    .veldje.opm .veldje-naam {
        display: inline;
    }

    .veldje.tot::before,
    .veldje.totaal::before {
        color: var(--stil);
        font-size: .8125rem;
    }

    .veldje.tot::before {
        content: "–";
    }

    .veldje.totaal::before {
        content: "=";
    }

    .regels.vantot .regel {
        grid-template-columns: 5.75rem 6.25rem 1fr 2.25rem;
        grid-template-areas:
            "titel titel titel  wis"
            "van   tot   totaal totaal"
            "km    opm   opm    opm";
    }

    .regels.totaal .regel {
        grid-template-columns: 5.75rem 5.75rem 1fr 2.25rem;
        grid-template-areas:
            "titel  titel titel wis"
            "totaal km    opm   opm";
    }

    .regel {
        padding: .375rem .5rem;
        row-gap: .25rem;
        column-gap: .375rem;
    }

    /* De regel is hier drie lijnen hoog; dan mag de titel er niet nog eens twee bij nemen. */
    .regel-titel strong,
    .regel-titel span {
        white-space: nowrap;
    }

    .veldje.totaal .afgeleid {
        padding-left: .25rem;
    }
}

/* Op een smal scherm passen twee kolommen niet naast elkaar. Dan onder elkaar, maar wel allebei
   met hun eigen hoogte binnen het volledige venster, zodat er nog altijd meer te zien is dan
   vroeger. */
@media (max-width: 700px) {
    .kiezer {
        grid-template-columns: 1fr;
        grid-template-rows: 1.4fr 1fr;
    }

    .venster.groot {
        height: min(92dvh, 780px);
    }
}

@media (max-width: 560px) {
    .smal-weg {
        display: none;
    }

    .datumbalk h1 {
        font-size: 1.0625rem;
    }

    /* Drie stukjes op één lijn in plaats van een blok dat over twee regels valt. */
    .totalen {
        gap: .25rem;
        font-size: .875rem;
    }

    .acties .knop.primair {
        min-height: 40px;
    }

    .knop.vierkant {
        width: 40px;
    }
}