/* ============================================================================
   PDF2UBL — designsysteem
   Mobiel-eerst. Alle waarden komen uit een vaste schaal zodat schermen
   onderling consistent blijven; kleuren zijn gedefinieerd als tokens met
   een variant voor donkere modus.
   ============================================================================ */

:root {
    color-scheme: light dark;

    /* Kleur — merk */
    --kleur-primair: #1d4ed8;
    --kleur-primair-hover: #1e40af;
    --kleur-primair-zacht: #eff6ff;
    --kleur-primair-rand: #bfdbfe;

    /* Kleur — oppervlak */
    --vlak: #ffffff;
    --vlak-zacht: #f8fafc;
    --achtergrond: #f1f5f9;
    --rand: #e2e8f0;
    --rand-sterk: #cbd5e1;

    /* Kleur — tekst */
    --tekst: #0f172a;
    /* Was #64748b. Dat haalde 4,76:1 op een witte kaart maar 4,39:1 op de
       paginabodem (#f1f5f9) — net onder de 4,5 die WCAG AA vraagt, en precies daar
       staat de gedempte tekst: de telling boven een lijst, de subregels, de tekst
       van een stille knop. Deze tint haalt 5,1:1 op de bodem en 5,5:1 op wit. */
    --tekst-zacht: #5c6b7a;
    --tekst-omgekeerd: #ffffff;

    /* Kleur — betekenis */
    --goed: #15803d;      --goed-zacht: #dcfce7;   --goed-rand: #bbf7d0;
    --waarschuwing: #b45309; --waarschuwing-zacht: #fef3c7; --waarschuwing-rand: #fde68a;
    --fout: #b91c1c;      --fout-zacht: #fef2f2;   --fout-rand: #fecaca;
    --info: #6d28d9;      --info-zacht: #ede9fe;   --info-rand: #ddd6fe;

    /* Ruimte — schaal van 4px */
    --r1: .25rem; --r2: .5rem; --r3: .75rem; --r4: 1rem;
    --r5: 1.5rem; --r6: 2rem;  --r7: 3rem;

    /* Typografie */
    --tekst-xs: .75rem; --tekst-sm: .8125rem; --tekst-md: .9375rem;
    --tekst-lg: 1.0625rem; --tekst-xl: 1.375rem;

    /* Vorm */
    --straal-sm: 6px; --straal: 10px; --straal-lg: 14px; --straal-rond: 999px;
    --schaduw-sm: 0 1px 2px rgb(15 23 42 / .06);
    --schaduw: 0 1px 3px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .04);
    --schaduw-lg: 0 10px 30px rgb(15 23 42 / .10);

    /* Maatvoering */
    --topbalk-hoogte: 3.5rem;
    --zijbalk-breedte: 15rem;
    --focus-ring: 0 0 0 3px rgb(29 78 216 / .35);

    /* Kleinste vlak dat een duim betrouwbaar raakt. Apple houdt 44 px aan, Google 48;
       44 is het minimum waar beide het over eens zijn. */
    --raakvlak: 2.75rem;
}

/* ----------------------------------------------------------- Breekpunten --
   Drie maten, en niets ertussen:

     ≤ 760px   telefoon  — één kolom, tabellen worden kaartjes, kop in lagen
     ≤ 899px   tablet    — de zijbalk schuift weg achter de menuknop
     ≤ 1000px  smal      — de detailindeling valt van twee kolommen naar één

   Wie een regel toevoegt, kiest een van deze drie. Een vierde maat erbij maakt
   dat je bij elke wijziging moet raden welke query hem pakt.
   (560px staat nog apart bij .lees-gegevens: een kolombreedte die alleen op de
   allersmalste toestellen knelt.) */

@media (prefers-color-scheme: dark) {
    :root {
        --kleur-primair: #60a5fa;
        --kleur-primair-hover: #93c5fd;
        --kleur-primair-zacht: #1e293b;
        --kleur-primair-rand: #1e40af;

        --vlak: #1e293b;
        --vlak-zacht: #172033;
        --achtergrond: #0f172a;
        --rand: #334155;
        --rand-sterk: #475569;

        --tekst: #e2e8f0;
        --tekst-zacht: #94a3b8;
        --tekst-omgekeerd: #0f172a;

        --goed: #4ade80;      --goed-zacht: #14321f;   --goed-rand: #166534;
        --waarschuwing: #fbbf24; --waarschuwing-zacht: #382c0e; --waarschuwing-rand: #92400e;
        --fout: #f87171;      --fout-zacht: #3b1414;   --fout-rand: #991b1b;
        --info: #c4b5fd;      --info-zacht: #2b2145;   --info-rand: #5b21b6;

        --focus-ring: 0 0 0 3px rgb(96 165 250 / .4);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    font-size: var(--tekst-md);
    line-height: 1.5;
    color: var(--tekst);
    background: var(--achtergrond);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; font-weight: 650; margin: 0; }
h1 { font-size: var(--tekst-xl); letter-spacing: -.01em; }
h2 { font-size: var(--tekst-lg); }
h1:focus, h2:focus { outline: none; }

p { margin: 0 0 var(--r3); }
a { color: var(--kleur-primair); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Eén consistente focusstijl voor alles wat bedienbaar is. */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--kleur-primair);
    outline-offset: 1px;
    border-radius: var(--straal-sm);
}

/* ---------------------------------------------------------------- Schil -- */

.app-schil { min-height: 100dvh; display: flex; flex-direction: column; }

/* De overslaan-link staat er altijd, maar buiten beeld tot ze de focus krijgt. */
.sla-over {
    position: absolute; left: var(--r3); top: -4rem; z-index: 40;
    background: var(--vlak); color: var(--tekst);
    border: 1px solid var(--kleur-primair); border-radius: var(--straal-sm);
    padding: var(--r2) var(--r3); text-decoration: none; font-weight: 600;
    transition: top .12s ease;
}
.sla-over:focus { top: var(--r2); }
#inhoud:focus { outline: none; }

.app-topbalk {
    height: var(--topbalk-hoogte);
    display: flex;
    align-items: center;
    gap: var(--r3);
    padding-inline: var(--r4);
    background: var(--vlak);
    border-bottom: 1px solid var(--rand);
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbalk-logo { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; }
.topbalk-logo-badge, .aanmeld-logo-badge {
    background: var(--kleur-primair);
    color: var(--tekst-omgekeerd);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--straal-sm);
    letter-spacing: .02em;
}
.topbalk-logo-tekst, .aanmeld-logo-tekst { font-weight: 700; color: var(--tekst); letter-spacing: .02em; }

.topbalk-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r3); }
.afmeld-formulier { margin: 0; display: flex; }

/* Snelknop rechtsboven: groot genoeg om met een duim te raken. Enkel op een
   telefoon — daar fotografeer je tickets; op een computer heeft ze geen zin en
   staat de pagina gewoon in het menu. */
.topbalk-icoonknop {
    width: 2.5rem; height: 2.5rem;
    display: none; align-items: center; justify-content: center;
    border-radius: var(--straal-sm); text-decoration: none; font-size: 1.25rem;
    background: var(--kleur-primair-zacht);
}
.topbalk-icoonknop:hover { background: var(--achtergrond); }

.app-romp { flex: 1; display: flex; min-height: 0; }

.app-zijbalk {
    width: var(--zijbalk-breedte);
    flex-shrink: 0;
    background: var(--vlak);
    border-right: 1px solid var(--rand);
    padding: var(--r4) var(--r3);
    overflow-y: auto;
    /* Kolom, zodat Afmelden onderaan kan blijven staan. */
    display: flex; flex-direction: column;
}

.app-inhoud {
    flex: 1;
    min-width: 0;
    padding: var(--r5) var(--r4);
    max-width: 90rem;
    /* Zonder dit plakt de inhoud tegen de zijbalk en blijft op een breed scherm alle
       leegte rechts liggen. Nu staat wat je leest in het midden van wat overblijft. */
    margin-inline: auto;
}

.menu-knop {
    width: 2.5rem; height: 2.5rem;
    display: none;
    flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; border-radius: var(--straal-sm);
    color: var(--tekst);
}
.menu-knop:hover { background: var(--achtergrond); }
.menu-knop span { width: 1.125rem; height: 2px; background: currentColor; border-radius: 1px; }

@media (max-width: 899px) {
    .menu-knop { display: inline-flex; }
    .topbalk-icoonknop { display: inline-flex; }
    .app-zijbalk {
        position: fixed; inset: var(--topbalk-hoogte) auto 0 0;
        z-index: 25;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    .app-zijbalk.open { transform: translateX(0); box-shadow: var(--schaduw-lg); }
    /* De sluier staat er altijd en wordt met een klasse getoond: het menu wordt door
       app.js geopend, ook op schermen zonder levende verbinding. */
    .zijbalk-sluier.zichtbaar {
        position: fixed; inset: var(--topbalk-hoogte) 0 0 0;
        background: rgb(15 23 42 / .45); z-index: 20;
    }
    .app-inhoud { padding: var(--r4) var(--r3); }
    /* De kop loopt hier mee met de smallere paginapadding. */
    .pagina-kop { margin-inline: calc(-1 * var(--r3)); padding-inline: var(--r3); }
}

/* Wie beweging heeft uitgezet in zijn systeem, krijgt ze nergens: niet bij de zijbalk,
   niet bij een knop die van kleur wisselt. Dekte eerst alleen de zijbalk. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------- Print -- */

/* Een boekhoudtoepassing wordt afgedrukt: een journaal bij een boeking, een fiche bij
   een dossier. Zonder dit kwam de zijbalk mee op papier en werden de tegels afgekapt.
   Alles wat je op papier niet kunt indrukken, gaat eruit. */
@media print {
    .app-topbalk, .app-zijbalk, .zijbalk-sluier, .sla-over,
    .kop-acties, .blader, .filterbalk, .sleepzone, .werkbalk,
    .mini-knop, .tabel-actie, .klap-cel, .kies-cel, .acties-cel { display: none !important; }

    .app-schil, .app-romp { display: block; }
    .app-inhoud { max-width: none; padding: 0; }

    body { background: #fff; color: #000; font-size: 10pt; }

    /* Tegels en tabellen op papier: een rand in plaats van een schaduw, en niet
       middenin een rij afbreken. */
    .kaart, .tabel-kaart {
        border: 1px solid #999; box-shadow: none; background: #fff;
        break-inside: avoid;
    }
    .tabel th { position: static; background: #eee; color: #000; }
    .tabel tr { break-inside: avoid; }
    thead { display: table-header-group; }

    /* De paginakop plakt niet op papier — daar bestaat scrollen niet. */
    .pagina-kop:has(> .kop-acties-gegroepeerd) {
        position: static; margin: 0 0 var(--r4); padding: 0; background: none;
    }

    a { text-decoration: none; color: #000; }
}

/* ----------------------------------------------------------- Navigatie -- */

.nav-groep + .nav-groep { margin-top: var(--r5); }
.nav-groep-titel {
    display: block;
    font-size: var(--tekst-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tekst-zacht);
    padding: 0 var(--r3) var(--r2);
}
.nav-item {
    display: flex; align-items: center; gap: var(--r2);
    padding: var(--r2) var(--r3);
    border-radius: var(--straal-sm);
    color: var(--tekst);
    text-decoration: none;
    font-size: var(--tekst-md);
}
.nav-item + .nav-item { margin-top: 2px; }
.nav-item:hover { background: var(--achtergrond); }
.nav-item.active { background: var(--kleur-primair-zacht); color: var(--kleur-primair); font-weight: 650; }
.nav-icoon { width: 1.35em; text-align: center; flex-shrink: 0; }

/* Wie er aangemeld is: bovenaan het menu, niet meer in de topbalk. */
.nav-gebruiker {
    display: flex; align-items: center; gap: var(--r2);
    padding: var(--r2) var(--r3) var(--r3);
    margin-bottom: var(--r3);
    border-bottom: 1px solid var(--rand);
    color: var(--tekst-zacht); font-size: var(--tekst-sm);
}
.nav-gebruiker-naam { font-weight: 650; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; }

/* Afmelden onderaan, losgetrokken van de menugroepen. */
.nav-voet { margin-top: auto; padding-top: var(--r4); }
.nav-afmelden {
    width: 100%; background: none; border: none; cursor: pointer;
    font: inherit; text-align: left;
}
.nav-afmelden:hover { background: var(--achtergrond); }

/* -------------------------------------------------- Knoppen en velden -- */

.knop {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--r1);
    padding: var(--r2) var(--r4);
    border-radius: var(--straal-sm);
    border: 1px solid var(--rand-sterk);
    background: var(--vlak);
    color: var(--tekst);
    font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease;
}
.knop:hover { background: var(--achtergrond); }
.knop:active { transform: translateY(.5px); }

.knop-primair { background: var(--kleur-primair); border-color: var(--kleur-primair); color: var(--tekst-omgekeerd); }
.knop-primair:hover { background: var(--kleur-primair-hover); border-color: var(--kleur-primair-hover); }

.knop-stil { background: none; border-color: transparent; color: var(--tekst-zacht); font-weight: 550; }
.knop-stil:hover { background: var(--achtergrond); color: var(--tekst); }

.knop-gevaar { background: none; border-color: var(--fout-rand); color: var(--fout); }
.knop-gevaar:hover { background: var(--fout-zacht); }

.veld-label { display: block; font-weight: 600; font-size: var(--tekst-sm); margin: var(--r4) 0 var(--r1); }
.veld-label:first-child { margin-top: 0; }

.veld-invoer {
    width: 100%;
    padding: var(--r2) var(--r3);
    border: 1px solid var(--rand-sterk);
    border-radius: var(--straal-sm);
    font: inherit;
    color: var(--tekst);
    background: var(--vlak);
}
.veld-invoer::placeholder { color: var(--tekst-zacht); }
.veld-invoer:focus-visible { outline: none; border-color: var(--kleur-primair); box-shadow: var(--focus-ring); }
.veld-invoer:disabled { background: var(--achtergrond); color: var(--tekst-zacht); cursor: not-allowed; }

select.veld-invoer { cursor: pointer; }

/* Safari (iPad, iPhone) geeft een datum- of tijdveld een eigen breedte en hoogte uit
   het toestel zelf. Zonder dit duwt zo'n veld zijn kolom open — op het zoekscherm liep
   Factuurdatum over het veld Bedrag heen — en staat het hoger dan de velden ernaast. */
input[type="date"].veld-invoer,
input[type="time"].veld-invoer,
input[type="datetime-local"].veld-invoer {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    text-align: left;
}

.veld-hulp { color: var(--tekst-zacht); font-size: var(--tekst-sm); margin: var(--r2) 0 0; }
.verplicht { color: var(--fout); }
.valid.modified:not([type=checkbox]) { border-color: var(--goed); }
.invalid { border-color: var(--fout); }
.validation-message { color: var(--fout); font-size: var(--tekst-sm); }

/* ------------------------------------------------------------- Kaarten -- */

.kaart {
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: var(--straal);
    box-shadow: var(--schaduw-sm);
    padding: var(--r4) var(--r5);
}
/* Kaarten raken elkaar nooit: ook een kaart naast een tabelkaart of een tegel met
   tabbladen krijgt lucht. Zonder dit plakten de dossierkeuze en de lijst eronder
   aan elkaar tot één blok. */
.kaart + .kaart,
.kaart + .tabel-kaart,
.tabel-kaart + .kaart,
.tabel-kaart + .tabel-kaart { margin-top: var(--r4); }

/* Bladeren door records gebeurt overal met hetzelfde blokje: zie .blader verderop. */
.knop.uit { opacity: .35; pointer-events: none; }
/* Een kaart naast een formulier plakt er anders tegenaan: het formulier is geen
   .kaart, dus de regel hierboven grijpt niet. Beide kanten op, want de zoektegel
   staat boven het formulier en de bestandentegel eronder. */
.detail-indeling form + .kaart,
.detail-indeling .kaart + form { margin-top: var(--r4); }

.kaart-raster { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
/* Stond met font-size twee keer in dezelfde regel; de eerste deed niets. En op 12px
   hoofdletters was een <h2> kleiner dan de gewone tekst eronder — de sprong van 22px
   (h1) naar 12px was te groot om nog als hiërarchie te lezen. Nu 13px. */
.kaart-titel {
    font-size: var(--tekst-sm);
    color: var(--tekst-zacht);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--r3);
}
.kaart-titel:not(:first-child) { margin-top: var(--r5); }

.stat-kaart-kop { font-weight: 650; margin-bottom: var(--r3); }
.stat-rij { display: flex; gap: var(--r5); flex-wrap: wrap; }
.stat-getal { font-size: 1.625rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--tekst-zacht); font-size: var(--tekst-sm); }
.stat-open { color: var(--fout); } .stat-hold { color: var(--waarschuwing); } .stat-klaar { color: var(--goed); }
/* Wat er nog naar Briljant moet, staat buiten de app (in de extractiemap) en is dus geen
   vierde status: een merkje op een eigen regel, dat oplicht zodra er iets wacht. */
.stat-briljant-rij { margin-top: var(--r4); }
.stat-merk {
    display: inline-block; padding: 2px var(--r2); border-radius: 999px;
    font-size: var(--tekst-sm); font-weight: 600;
    background: var(--vlak-zacht); color: var(--tekst-zacht); border: 1px solid var(--rand);
}
.stat-merk.aan { background: var(--info-zacht); color: var(--info); border-color: var(--info-rand); }

/* De kaartkop en de cijfers blijven samen de koppeling naar de facturenlijst; de
   merkjes eronder zijn eigen klikvlakken en horen daar niet meer bij. */
.stat-koppeling { display: block; text-decoration: none; color: inherit; }

/* Geboekte facturen zonder PDF: dat is een probleem, dus waarschuwingskleur — en
   het merkje is een knop die de nummers toont. */
button.stat-merk { cursor: pointer; font: inherit; font-size: var(--tekst-sm); font-weight: 600; }
.stat-merk.ontbreekt { background: var(--waarschuwing-zacht); color: var(--waarschuwing); border-color: var(--waarschuwing-rand); }
.ontbreek-lijst { display: flex; flex-wrap: wrap; gap: var(--r1) var(--r2); margin-top: var(--r1); }
.ontbreek-nr {
    display: inline-block; padding: 1px var(--r2);
    border: 1px solid var(--rand); border-radius: var(--straal-sm);
    font-size: var(--tekst-sm); text-decoration: none; color: var(--tekst);
    background: var(--vlak);
}
a.ontbreek-nr:hover { background: var(--kleur-primair-zacht); border-color: var(--kleur-primair); }

/* ---------------------------------------------------- Kop en meldingen -- */

.pagina-kop {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--r4); flex-wrap: wrap; margin-bottom: var(--r4);
}

/* De kop blijft staan terwijl je scrolt — maar enkel op de bewerkschermen. Daar staan
   veertien tegels onder elkaar en moest je vanaf het journaal helemaal terug naar boven
   om te bewaren. Op de lijstschermen doet de tabelkop dat werk: twee plakkende balken
   boven elkaar afstemmen lukt niet in CSS, want de hoogte van de kop hangt af van wat
   erin staat — de tabelkop schoof er negen pixel onder door.

   De marker is dezelfde die de gelaagde telefoonkop aanstuurt: die staat precies op de
   detailschermen. De kop draagt de paginakleur mee, anders schemeren de tegels erdoor. */
.pagina-kop:has(> .kop-acties-gegroepeerd) {
    position: sticky;
    top: var(--topbalk-hoogte);
    z-index: 10;
    background: var(--achtergrond);
    padding-block: var(--r3);
    margin-top: calc(-1 * var(--r3));
    /* Even breed uitlopen als de padding van .app-inhoud, zodat er geen streepje inhoud
       naast de kop doorschuift. */
    margin-inline: calc(-1 * var(--r4));
    padding-inline: var(--r4);
}
/* De acties staan op één regel; de navigatie krijgt met haar volle breedte een
   eigen regel eronder, rechts uitgelijnd. */
.kop-acties { display: flex; gap: var(--r2); flex-wrap: wrap; justify-content: flex-end; }

/* Groepjes binnen de kop bestaan enkel voor de telefoon: daar krijgt elk groepje een
   eigen regel. Op een breed scherm lossen ze op (display:contents), zodat alles één
   rij blijft zoals voorheen. */
.kop-groep { display: contents; }

/* De weg terug is een knop, geen zwevende tekst. .knop-stil haalt de rand weg; hier
   zetten we ze terug, zodat je ziet waar je moet mikken. De bladerpijlen ernaast
   blijven wel kaal: dat is één blokje, geen vijf losse knoppen. */
.kop-groep-terug > .knop { border-color: var(--rand-sterk); }

.melding { padding: var(--r3) var(--r4); border-radius: var(--straal-sm); margin-bottom: var(--r4); font-size: var(--tekst-md); border: 1px solid; }
/* Een melding of een losse tegel die middenin de pagina opduikt, hoort lucht boven zich
   te hebben. Stond op elf plaatsen als style="margin-top:…" in de markup omdat de
   stroomafstand hier ontbrak. */
.melding:not(:first-child), .kaart:not(:first-child) { margin-top: var(--r4); }

/* Een lijst zonder rijen. Geen kale zin meer maar een tegel met wat lucht, een korte
   uitleg en — als er iets te doen valt — de knop die het gat vult. */
.lege-lijst {
    text-align: center;
    padding: var(--r6) var(--r4);
    color: var(--tekst-zacht);
}
.lege-lijst-titel { display: block; font-weight: 650; color: var(--tekst); margin-bottom: var(--r1); }
.lege-lijst-actie { margin-top: var(--r4); }
.melding-goed { background: var(--goed-zacht); color: var(--goed); border-color: var(--goed-rand); }
.melding-fout, .aanmeld-fout { background: var(--fout-zacht); color: var(--fout); border-color: var(--fout-rand); }
.melding-waarschuwing { background: var(--waarschuwing-zacht); color: var(--waarschuwing); border-color: var(--waarschuwing-rand); }
.aanmeld-fout { padding: var(--r3) var(--r4); border-radius: var(--straal-sm); border: 1px solid var(--fout-rand); margin-top: var(--r3); font-size: var(--tekst-sm); }

/* --------------------------------------------------------- Formulieren -- */

.formulier-kaart { max-width: 36rem; }
.formulier-kolommen { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
.formulier-kolommen .formulier-kaart { max-width: none; }
.veld-rij { display: grid; grid-template-columns: 1fr 2fr; gap: var(--r4); }

/* Omgekeerd: het eerste veld is het lange. Voor IBAN naast BIC — een Poolse rekening
   telt 28 tekens, een BIC hoogstens elf. */
.veld-rij-lang-eerst { grid-template-columns: 2fr 1fr; }
.veld-rij-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r4); }
.formulier-acties { display: flex; align-items: center; gap: var(--r2); margin-top: var(--r5); flex-wrap: wrap; }
/* Stond twee keer, tien regels uit elkaar; de tweede vulde de eerste aan in plaats van
   hem te vervangen — samengevoegd tot één regel die alles zegt. */
.vink-rij {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--r5); margin-top: var(--r4);
}
.vink { display: inline-flex; align-items: center; gap: var(--r1); font-weight: 600; font-size: var(--tekst-sm); cursor: pointer; }
.vies-uitslag { margin-top: var(--r3); background: var(--vlak-zacht); box-shadow: none; }

/* Zoekveld met knop ernaast, op een smal scherm onder elkaar. */
/* Eén zoekregel voor de hele app. .zoek-rij was hetzelfde met een andere naam en andere
   marges; de klasse blijft bestaan zodat bestaande markup blijft werken, maar ze wijst
   naar dezelfde regels. Verschil met vroeger: hier stond geen ondermarge, en die hoort
   er wel — er komt altijd iets onder (treffers of niets-gevonden). */
.zoek-balk, .zoek-rij {
    display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap;
    margin-bottom: var(--r3);
}
.zoek-balk .veld-invoer, .zoek-rij .veld-invoer { flex: 1 1 12rem; max-width: 29rem; }

.koppel-blok:not(:first-child) { margin-top: var(--r4); }
.koppel-blok .zoek-balk { margin-bottom: var(--r2); }
.treffer-lijst {
    list-style: none; margin: var(--r2) 0 0; padding: 0;
    max-height: 16rem; overflow-y: auto;
    border: 1px solid var(--rand); border-radius: var(--straal-sm);
}
.treffer-lijst li + li { border-top: 1px solid var(--rand); }
.treffer {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    padding: var(--r2) var(--r3); font: inherit; color: var(--tekst);
}
.treffer:hover { background: var(--kleur-primair-zacht); }
.treffer .sub-tekst { display: block; }

/* De hele regel is de knop; dit maakt zichtbaar wat een klik doet. Bewust een span en
   geen knop: een knop in een knop mag niet. */
.treffer-actie {
    display: inline-block; margin-top: var(--r2);
    padding: 0.1rem 0.5rem; border-radius: var(--straal-sm);
    border: 1px solid var(--rand); color: var(--tekst-zacht); font-size: var(--tekst-xs);
}
.treffer:hover .treffer-actie { border-color: var(--kleur-primair); color: var(--kleur-primair); }
.vies-uitslag p:last-of-type { margin-bottom: var(--r2); }

/* Een treffer op enkel een naam is de zwakste: die kan net zo goed de bank zijn die
   in een contract genoemd wordt. Ze staat onderaan en valt minder op. */
.treffer.zwak { opacity: .72; }
.treffer.zwak:hover { opacity: 1; }

/* De tegel met wat de herkenning vond. Ze blijft staan zolang het document bestaat. */
.kaart-herkend { border-left: 3px solid var(--info); }
.tegel-kopje {
    font-size: var(--tekst-xs); font-weight: 650; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tekst-zacht);
    margin: var(--r4) 0 0;
}
.tegel-kopje:first-of-type { margin-top: 0; }

/* Een tegelkop met een knop ernaast, zoals "+ Nieuw" bij Relatie. */
.tegel-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--r3); }
.tegel-kop .kaart-titel { margin-bottom: 0; }
.tegel-kop-acties { display: flex; gap: var(--r2); }
.knop-klein { padding: var(--r1) var(--r3); font-size: var(--tekst-sm); }

.label-nieuw { background: var(--goed-zacht); color: var(--goed); border-color: var(--goed-rand); }

/* Bankscherm: de verrichtingenlijst zoals Briljants "Ingeven financiële verrichtingen". */
.bank-maandkop { display: flex; align-items: baseline; gap: var(--r3); flex-wrap: wrap; }
.bank-maandkop .kaart-titel { margin-bottom: 0; }
.bank-saldoveld { max-width: 12rem; text-align: right; }

/* Het beginsaldo zoals Briljant het bijhoudt: een gegeven, geen invulveld. */
.bank-saldo-uit-briljant { font-size: var(--tekst-lg); font-weight: 650; margin: 0 0 var(--r2); }


/* De keuze facturen/documenten staat in de paginakop waar anders de titel staat. Ze
   mag niet meekrimpen met de knoppen ernaast: het is de hoofdkeuze van het scherm. */
.inbox-keuze { flex: 0 0 auto; margin-right: auto; }
.inbox-keuze .knop-schakel { text-decoration: none; }

@media (max-width: 760px) {
    .inbox-keuze { flex: 1 1 100%; margin-right: 0; }
    .inbox-keuze .knop-schakel { flex: 1; text-align: center; }
}


/* --------------------------------------------------- Toegang per machine -- */

/* De vraag om een onbekende machine vrij te geven. Ze staat boven de inhoud van elk
   scherm: dit is niets om weg te scrollen. */
.toestel-vraag {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3) var(--r4);
    justify-content: space-between;
    background: var(--waarschuwing-zacht);
    border: 1px solid var(--waarschuwing-rand);
    border-radius: var(--straal);
    padding: var(--r3) var(--r4);
    margin-bottom: var(--r4);
}
.toestel-vraag-tekst { display: flex; align-items: center; gap: var(--r4); min-width: 0; }
.toestel-vraag-tekst .sub-tekst { display: block; }
.toestel-vraag-code {
    flex: none;
    font-size: var(--tekst-xl); font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--waarschuwing);
}
.toestel-vraag-knoppen { display: flex; gap: var(--r2); margin-left: auto; }

/* Hetzelfde getal op het wachtscherm van de machine die binnen wil. */
.wacht-code {
    font-size: 3rem; font-weight: 700; text-align: center;
    font-variant-numeric: tabular-nums;
    margin: var(--r4) 0 var(--r3);
    color: var(--kleur-primair);
}
.wacht-uitleg { text-align: center; margin: 0 0 var(--r3); }
.wacht-details { text-align: center; }

.toegang-kop { margin-top: var(--r6); }

/* De titel met de wisknop ernaast, op één regel. */
.toegang-kop-rij { display: flex; align-items: baseline; gap: var(--r2); flex-wrap: wrap; }
.toegang-kop-rij .kaart-titel { margin-bottom: 0; margin-right: auto; }


@media (max-width: 760px) {
    .toestel-vraag-knoppen { flex: 1 1 100%; margin-left: 0; }
    .toestel-vraag-knoppen .knop { flex: 1; }
}


/* ------------------------------------------------- Kaart om in te klappen -- */

/* Anders dan de zoekkaart blijft deze ook op een breed scherm dichtklapbaar: waar de
   kaart bijzaak is en wat eronder staat de hoofdzaak, wil je ze niet elke keer zien.
   Dicht staat er enkel een titel met een samenvatting. */
.klapkaart .klapknop {
    display: flex; align-items: baseline; gap: var(--r2); width: 100%;
    background: none; border: none; padding: 0; cursor: pointer; text-align: left;
    color: inherit; font: inherit;
}
.klapkaart.open .klapknop { margin-bottom: var(--r4); }
.klapknop-titel { font-weight: 600; }
.klapknop-samenvatting {
    flex: 1; min-width: 0; color: var(--tekst-zacht); font-size: var(--tekst-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klapkaart.open .klapknop-samenvatting { display: none; }
.klapkaart:not(.open) > :not(.klapknop) { display: none; }
.klap-pijl { color: var(--tekst-zacht); }


/* --------------------------------------------------------- Filterbalk -- */

/* Het bedrijf kiezen en het zoekveld stonden als twee losse blokken tussen de kop en de
   eerste rij. Samen met het importpaneel, de meldingen, de sleepzone en de telling zat
   je op een telefoon zes blokken diep voor je de eerste factuur zag — ruwweg een half
   scherm. Ze klappen nu samen tot één regel die zegt wat er aan staat.

   Op een breed scherm is er ruimte genoeg: daar staat alles gewoon open en bestaat de
   knop niet. Zelfde afspraak als bij de zoekkaart op de zoekschermen. */
.filterbalk-knop { display: none; }

@media (max-width: 760px) {
    .filterbalk {
        background: var(--vlak);
        border: 1px solid var(--rand);
        border-radius: var(--straal);
        padding: var(--r2) var(--r3);
        margin-bottom: var(--r3);
    }
    .filterbalk-knop {
        display: flex; align-items: baseline; gap: var(--r2); width: 100%;
        min-height: var(--raakvlak);
        background: none; border: none; padding: 0; cursor: pointer; text-align: left;
        color: inherit; font: inherit;
    }
    .filterbalk-titel { font-weight: 600; flex-shrink: 0; }
    .filterbalk-samenvatting {
        flex: 1; min-width: 0; color: var(--tekst-zacht); font-size: var(--tekst-sm);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .filterbalk:not(.open) > :not(.filterbalk-knop) { display: none; }
    .filterbalk.open > .filterbalk-knop { margin-bottom: var(--r3); }
    /* De dossierbalk loopt binnen de filterbalk niet meer tot buiten de paginarand. */
    .filterbalk .dossier-balk { margin-inline: 0; padding-inline: 0; }
    .filterbalk > :last-child { margin-bottom: 0; }
}


/* -------------------------------------------------------- Leveranciers -- */

/* De fiche: velden naast elkaar zolang er plaats is, en de brede velden (naam, straat,
   adres) nemen de volle regel — die hebben twee invoerregels onder elkaar. */
.lev-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0 var(--r4);
}
.lev-raster .veld-invoer { margin-bottom: var(--r2); }
.lev-veld-kort { grid-column: span 1; }
.lev-veld-breed { grid-column: 1 / -1; }

/* Land · postnummer · gemeente vormen samen één adresregel, zoals in Briljant. */
.lev-gemeente { display: grid; grid-template-columns: 4rem 7rem 1fr; gap: var(--r2); }

/* Door de leveranciers bladeren: vier smalle knoppen met de stand ertussen, als één
   blokje zodat ze bij het afbreken niet los van elkaar op twee regels belanden. */
.blader { display: inline-flex; align-items: center; gap: var(--r1); }
.blader-knop { padding-inline: var(--r2); min-width: 2.25rem; }
.blader-stand {
    font-size: var(--tekst-sm); color: var(--tekst-zacht);
    font-variant-numeric: tabular-nums; padding-inline: var(--r1); white-space: nowrap;
}

/* Twee rijen van twee: boekjaar · sortering, dan periode van · tot. Op een breed
   scherm schuiven die twee rijen naast elkaar, zodat de vier velden op één lijn staan. */
.lev-filters { display: grid; gap: 0 var(--r5); }
.lev-filter-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r4); align-items: end; }
.lev-filters > .vink { margin-top: var(--r2); }

@media (min-width: 900px) {
    .lev-filters { grid-template-columns: 1fr 1fr; align-items: start; }
    .lev-filters > .vink { grid-column: 1 / -1; }
}

/* Saldo, omzet en wat je aangevinkt hebt: de drie cijfers waar je op het scherm naar
   kijkt terwijl je aanvinkt. */
.lev-standen {
    display: flex; flex-wrap: wrap; gap: var(--r5);
    margin-top: var(--r4); padding-top: var(--r4);
    border-top: 1px solid var(--rand);
}
.lev-stand { display: flex; flex-direction: column; }
.lev-stand-titel {
    font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .05em;
    color: var(--tekst-zacht);
}
.lev-stand strong { font-size: var(--tekst-lg); font-variant-numeric: tabular-nums; }

.lev-tabel td[data-kolom="Debet"], .lev-tabel td[data-kolom="Credit"] { font-variant-numeric: tabular-nums; }
.lev-tabel .tabel-rij.gekozen { background: var(--kleur-primair-zacht); }

@media (max-width: 760px) {
    /* Op een gsm wordt elke rij een kaartje (zie de tabelregels hieronder). Het vinkje
       hoort dan bovenaan links, naast de stand — daar zoekt je duim het. */
    .lev-tabel td[data-kolom="Boek"] { order: 3; flex: 1 1 auto; justify-content: flex-end; }
    .lev-tabel td[data-kolom="Boek"]::before { display: none; }
    .lev-tabel td[data-kolom="Afgepunt"] { order: 3; flex: 0 0 auto; }
    .lev-tabel td[data-kolom="Afgepunt"]::before { display: none; }

    /* Lege cellen (geen debet óf geen credit) laten op een kaartje enkel hun etiket
       achter; die regel mag weg. */
    .lev-tabel td[data-kolom]:empty { display: none; }

    .lev-gemeente { grid-template-columns: 3.5rem 6rem 1fr; }
}
.bank-tabel .veld-invoer { margin-bottom: 0; }
.bank-tabel td[data-kolom="Soort"] .veld-invoer { max-width: 9rem; }
.bank-tabel td[data-kolom="Nummer"] .veld-invoer { max-width: 6.5rem; }
.bank-tabel .bank-naam { display: block; font-weight: 550; }
.bank-tabel .bank-naam:empty { display: none; }
.bank-plus { color: var(--goed); font-weight: 600; }
.bank-betreft { white-space: nowrap; }

/* De lijn is voorgesteld door het bankgeheugen. Zichtbaar maar rustig: het is een
   hulpje, geen waarschuwing. De ✕ ernaast vergeet de koppeling. */
.bank-geheugen { display: block; font-style: italic; }
.bank-geheugen .knop { padding: 0 var(--r2); }
.bank-betreft-cel { text-align: right; }

/* Elke verrichting is twee tabelregels die als één rij lezen: bovenaan de velden,
   daaronder de mededeling van onder de naam tot de rand. De scheidingslijn hoort
   dus enkel onder de mededelingsregel. */
.bank-tabel .bank-rij td { border-bottom: none; }
.bank-tabel .bank-vervolg td { padding-top: 0; }
.bank-tabel .bank-mededeling { display: block; overflow-wrap: anywhere; }
/* Een lijn zonder bestemming moet eruit springen: die houdt het boeken tegen. */
.bank-open { background: var(--waarschuwing-zacht); }
.bank-open:hover { background: var(--waarschuwing-zacht); }
.bank-acties { display: flex; align-items: center; justify-content: flex-end; gap: var(--r3); }

/* De treffers op wat er in het nummerveld getypt is, onder de actieve rij. */
.bank-zoek-rij td { background: var(--vlak-zacht); }
.bank-zoek-rij .treffer-lijst { background: var(--vlak); margin: var(--r1) 0; }

/* Op de gsm worden de twee tabelregels van een verrichting elk een kaartje; hier
   smelten ze weer samen tot één. Dubbele klasse: de algemene kaartjesregel voor
   .tabel tr staat verderop in dit bestand en zou anders winnen. */
@media (max-width: 760px) {
    .tabel.bank-tabel .bank-rij {
        margin-bottom: 0; padding-bottom: var(--r1);
        border-bottom: none;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    .tabel.bank-tabel .bank-vervolg {
        margin-bottom: var(--r3); padding-top: 0;
        border-top: none;
        border-top-left-radius: 0; border-top-right-radius: 0;
    }
    .tabel.bank-tabel .bank-leeg { display: none; }
    .tabel.bank-tabel .bank-vervolg td[data-kolom="Mededeling"] { display: block; }
    .tabel.bank-tabel .bank-vervolg td[data-kolom="Mededeling"]::before { display: none; }
}


/* ------------------------------------------------------------ Tabellen -- */

/* Let op bij het wijzigen: een element met overflow anders dan visible wordt zelf het
   scrollvlak, en dan plakt de tabelkop eraan vast in plaats van aan het venster — dus
   nergens, want dit vlak scrolt zelf niet verticaal. Vandaar dat de horizontale scroll
   enkel aan staat in de band waar hij nodig is (zie de media-query hieronder): breed
   genoeg voor kaartjes is het scherm daar nog niet, breed genoeg voor de tabel ook niet.
   Boven 1000px past de tabel en plakt de kop. */
.tabel-kaart {
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: var(--straal);
    box-shadow: var(--schaduw-sm);
}

@media (max-width: 1000px) {
    .tabel-kaart { overflow-x: auto; }

    /* Niet elke tabel zit in een tabelkaart: op het bankscherm staan ze in een gewone
       tegel met een titel erboven. Die kreeg de horizontale scroll nooit en duwde op een
       smal scherm de hele pagina open. Enkel in deze band: eronder worden het kaartjes. */
    .kaart:has(> .tabel) { overflow-x: auto; }
}
.tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-md); }
.tabel th {
    text-align: left;
    padding: var(--r3) var(--r4);
    border-bottom: 1px solid var(--rand);
    background: var(--vlak-zacht);
    color: var(--tekst-zacht);
    font-size: var(--tekst-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;

    /* De kolomnamen blijven staan terwijl je door tweehonderd rijen scrolt. Ze schuiven
       tot onder de paginakop, die zelf tot onder de topbalk schuift. border-collapse
       laat een sticky cel haar rand verliezen, vandaar de schaduw als onderlijn. */
    position: sticky;
    top: var(--topbalk-hoogte);
    z-index: 5;
    box-shadow: inset 0 -1px 0 var(--rand);
}
/* Zonder overflow op de kaart knipt niets de hoeken meer af: de koprij doet het zelf. */
.tabel thead tr:first-child th:first-child { border-top-left-radius: var(--straal); }
.tabel thead tr:first-child th:last-child { border-top-right-radius: var(--straal); }
.tabel td { padding: var(--r3) var(--r4); border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel-rij { cursor: pointer; }
.tabel-rij:hover { background: var(--kleur-primair-zacht); }
.tabel-actie { text-align: right; width: 2rem; }
.chevron { color: var(--tekst-zacht); }
.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.sub-tekst { color: var(--tekst-zacht); font-size: var(--tekst-sm); word-break: break-word; }

/* Op een telefoon wordt elke rij een kaartje: de kolomkoppen passen daar niet,
   dus elk veld draagt zijn eigen etiket. */
@media (max-width: 760px) {
    .tabel thead { display: none; }
    .tabel, .tabel tbody { display: block; width: 100%; }

    .tabel tr {
        display: flex; flex-wrap: wrap; align-items: center;
        border: 1px solid var(--rand); border-radius: var(--straal);
        background: var(--vlak);
        padding: var(--r3) var(--r4);
        margin-bottom: var(--r3);
    }
    .tabel td { display: block; border: none; padding: 2px 0; flex: 1 0 100%; }

    /* Etiket links, waarde rechts — dat scheelt de helft van de hoogte. */
    .tabel td[data-kolom] {
        display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3);
    }
    .tabel td[data-kolom]::before {
        content: attr(data-kolom);
        flex: none;
        font-size: var(--tekst-xs);
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--tekst-zacht);
    }

    /* De naam is de titel van het kaartje en heeft geen etiket nodig. Ze staat over de
       volle breedte: er hangen een nummerchip, het bedrijf en de bestandsnaam aan, en
       die passen niet naast een etiket — dan wordt de bestandsnaam letter per letter
       afgebroken. Geldt voor beide lijsten: facturen zeggen "Leverancier", documenten "Naam". */
    .tabel td[data-kolom="Leverancier"],
    .tabel td[data-kolom="Naam"] { display: block; margin: var(--r1) 0 var(--r2); }
    .tabel td[data-kolom="Leverancier"]::before,
    .tabel td[data-kolom="Naam"]::before { display: none; }

    /* Het bedrijfsmerkje rechtsboven, op dezelfde regel als de leverancier — niet als
       eigen regel eronder. De bestandsnaam houdt haar eigen regel op volle breedte. */
    .tabel td[data-kolom="Leverancier"],
    .tabel td[data-kolom="Naam"] {
        display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--r2);
    }
    /* De regel met nummer, naam en bedrijf neemt de volle breedte van het kaartje:
       anders krimpt ze tot haar inhoud en heeft de margin-left:auto van het merkje
       geen ruimte om het naar rechts te duwen. */
    .tabel td[data-kolom="Leverancier"] .lev-regel,
    .tabel td[data-kolom="Naam"] .lev-regel { flex-basis: 100%; }
    .tabel td[data-kolom="Leverancier"] .sub-tekst,
    .tabel td[data-kolom="Naam"] .sub-tekst { flex-basis: 100%; }

    /* Lange bestandsnamen zonder spaties breken netjes af in plaats van de kaart uit
       te rekken. */
    .tabel td .sub-tekst { overflow-wrap: anywhere; }

    /* Het journaal blijft óók op een telefoon een tabel. Als kaartje verloor het net
       waar het over gaat: een bedrag zonder kolom zegt niet of het debet of credit is,
       en de lege cel van de andere kant werd een blinde regel. Vier smalle kolommen
       passen; de benaming van de rekening mag afbreken. */
    .tabel-journaal { display: table; table-layout: fixed; font-size: var(--tekst-sm); }
    .tabel-journaal thead { display: table-header-group; }
    .tabel-journaal tbody { display: table-row-group; }
    .tabel-journaal tfoot { display: table-footer-group; }
    .tabel-journaal tr {
        display: table-row; border: none; border-radius: 0;
        background: none; padding: 0; margin: 0;
    }
    .tabel-journaal th,
    .tabel-journaal td {
        display: table-cell; flex: none;
        padding: var(--r2) var(--r1);
        border-bottom: 1px solid var(--rand);
    }
    .tabel-journaal th { font-size: var(--tekst-xs); }
    /* Rekening en de twee bedragen krijgen een vaste breedte, de benaming de rest. */
    .tabel-journaal th:first-child, .tabel-journaal td:first-child { width: 22%; }
    .tabel-journaal th:nth-child(3), .tabel-journaal td:nth-child(3),
    .tabel-journaal th:nth-child(4), .tabel-journaal td:nth-child(4) { width: 24%; }
    .tabel-journaal td:nth-child(2) { overflow-wrap: anywhere; }

    /* Openklappen, aanvinken, de status en de actieknop staan samen op de eerste regel.
       Status en Acties stonden elk op een eigen regel met een etiket ernaast dat niets
       toevoegde — je ziet aan het bolletje zelf wel wat het is. Dat scheelt twee regels
       per kaartje, en de knoppen staan waar je duim toch al zit. */
    .tabel .klap-cel, .tabel .kies-cel { flex: 0 0 auto; width: auto; padding: 0 var(--r2) 0 0 !important; }
    .tabel tbody tr > * { order: 5; }
    .tabel .klap-cel { order: 1; }
    .tabel .kies-cel { order: 2; }

    .tabel td[data-kolom="Status"] {
        order: 3; flex: 1 1 auto; justify-content: flex-end; padding: 0 !important;
    }
    .tabel td[data-kolom="Status"]::before { display: none; }

    .tabel .acties-cel { order: 4; flex: 0 0 auto; padding: 0 0 0 var(--r2) !important; }
    .tabel .acties-cel::before { display: none; }

    .tabel td[data-kolom]:empty { display: none; }

    /* Het pijltje naar rechts hoort bij een tabelrij; op een kaartje is de hele kaart
       aanklikbaar en stond het als los teken op een eigen regel. De regel moet even
       zwaar wegen als ".tabel td" hierboven, anders wint die van deze. */
    .tabel .tabel-actie { display: none; }
    .acties-cel { justify-content: flex-end; padding-top: var(--r2) !important; }
    .rechts { text-align: left; }
    /* Ook hier de nul: anders bepaalt de breedste inhoud de kolom in plaats van het scherm. */
    .veld-rij, .veld-rij-drie { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* --------------------------------------------------------- Etiketten -- */

.label {
    display: inline-block;
    padding: 1px var(--r2);
    border-radius: var(--straal-rond);
    font-size: var(--tekst-xs);
    font-weight: 650;
    white-space: nowrap;
    border: 1px solid;
}
.label + .label { margin-left: var(--r1); }

/* Vijf betekenissen, en een etiket draagt er precies één. Kies op wat het zegt, niet
   op welke kleur toevallig past — een gebruiker leert de kleur en gelooft ze daarna.

     label-neutraal  een soort of categorie, geen oordeel  (Leverancier, Klant)
     label-open      er moet nog iets gebeuren             (Te doen, Openstaand)
     label-hold      staat bewust stil                     (On hold)
     label-klaar     afgehandeld, niets meer te doen       (Klaar, Verwerkt, Reeds betaald)
     label-fout      er is iets mis en dat blokkeert        (Ongeldig, XML-fout)

   label-dubbel en label-protest zijn signalen op een factuur: geen fout, wel iets om
   naar te kijken. Ze delen de paarse tint met elkaar en met niets anders. */
/* Neutraal is een omtrek zonder vulling, on hold een gevuld grijs vlak: zo blijven ze
   uit elkaar te houden waar ze naast elkaar staan, zonder dat een van de twee zich als
   waarschuwing voordoet. */
.label-neutraal { background: none; color: var(--tekst-zacht); border-color: var(--rand-sterk); }
.label-open { background: var(--waarschuwing-zacht); color: var(--waarschuwing); border-color: var(--waarschuwing-rand); }
.label-hold { background: var(--vlak-zacht); color: var(--tekst-zacht); border-color: var(--rand-sterk); }
.label-klaar { background: var(--goed-zacht); color: var(--goed); border-color: var(--goed-rand); }
.label-dubbel, .label-protest { background: var(--info-zacht); color: var(--info); border-color: var(--info-rand); }
.label-fout { background: var(--fout-zacht); color: var(--fout); border-color: var(--fout-rand); font-weight: 600; }

/* ------------------------------------------------------ Facturenlijst -- */

.status-schakelaar {
    display: inline-flex; gap: 2px;
    background: var(--vlak); padding: 3px;
    border-radius: var(--straal-sm); border: 1px solid var(--rand);
}
.knop-schakel { background: none; border: none; color: var(--tekst-zacht); padding: var(--r1) var(--r3); font-weight: 550; border-radius: var(--straal-sm); }
.knop-schakel:hover { background: var(--achtergrond); }
.knop-schakel.actief { background: var(--kleur-primair); color: var(--tekst-omgekeerd); font-weight: 650; }

/* Tabbladen boven een kaart, zoals bij Instellingen. Op een smal scherm schuiven ze
   opzij in plaats van over drie regels te vallen. */
.tabbalk {
    display: flex; gap: var(--r1); margin-bottom: calc(-1px);
    border-bottom: 1px solid var(--rand);
    overflow-x: auto; scrollbar-width: none;
}
.tabbalk::-webkit-scrollbar { display: none; }
.tabknop {
    flex: 0 0 auto;
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: var(--r2) var(--r4); margin-bottom: -1px;
    color: var(--tekst-zacht); font: inherit; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.tabknop:hover { color: var(--tekst); }
.tabknop.actief { color: var(--kleur-primair); border-bottom-color: var(--kleur-primair); }
.tabbalk + .kaart { border-top-left-radius: 0; border-top-right-radius: 0; }

.dossier-balk { display: flex; flex-wrap: wrap; gap: var(--r1); margin-bottom: var(--r3); }

/* Op een telefoon namen zeven bedrijven vier regels in en stond de eerste factuur
   pas onder de vouw. Ze staan nu op één regel die je opzij schuift. */
@media (max-width: 760px) {
    .dossier-balk {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-inline: calc(-1 * var(--r3)); padding-inline: var(--r3);
        scroll-padding-inline: var(--r3);
    }
    .dossier-balk::-webkit-scrollbar { display: none; }
    .dossier-knop { flex: 0 0 auto; }
}
.dossier-knop {
    display: inline-flex; align-items: center; gap: var(--r1);
    padding: var(--r1) var(--r3);
    border-radius: var(--straal-rond);
    border: 1px solid var(--rand-sterk);
    background: var(--vlak); color: var(--tekst);
    font: inherit; font-size: var(--tekst-sm); cursor: pointer;
}
.dossier-knop:hover { background: var(--kleur-primair-zacht); border-color: var(--kleur-primair-rand); }
.dossier-knop.actief { background: var(--kleur-primair); color: var(--tekst-omgekeerd); border-color: var(--kleur-primair); }
.dossier-knop.heeft-open { font-weight: 650; }
.dossier-teller {
    background: var(--fout); color: #fff;
    border-radius: var(--straal-rond); padding: 0 var(--r1);
    font-size: var(--tekst-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.dossier-knop.actief .dossier-teller { background: rgb(255 255 255 / .28); }

.import-paneel { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; margin-bottom: var(--r3); }
.import-stap { color: var(--kleur-primair); font-size: var(--tekst-sm); font-weight: 600; }
.import-log { margin-bottom: var(--r3); font-size: var(--tekst-sm); }
.import-log summary { cursor: pointer; color: var(--tekst-zacht); }
.import-regels {
    margin: var(--r2) 0 0; padding: var(--r3) var(--r5);
    background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--straal-sm);
    max-height: 14rem; overflow-y: auto;
    font-family: ui-monospace, Consolas, monospace; font-size: var(--tekst-xs);
    list-style: none;
}
.import-regels li { padding: 1px 0; }

/* .zoek-balk staat bij de andere zoekregels, hierboven. */
.lijst-telling { color: var(--tekst-zacht); font-size: var(--tekst-sm); margin: 0 0 var(--r2); }

.acties-cel { white-space: nowrap; }

/* Sleepzone voor facturen */
.sleepzone {
    position: relative;
    border: 2px dashed var(--rand-sterk);
    border-radius: var(--straal);
    background: var(--vlak-zacht);
    padding: var(--r4);
    margin-bottom: var(--r3);
    text-align: center;
    transition: border-color .12s ease, background-color .12s ease;
}
.sleepzone:hover, .sleepzone:focus-within { border-color: var(--kleur-primair); background: var(--kleur-primair-zacht); }
.sleepzone.bezig { border-style: solid; border-color: var(--kleur-primair); }
.sleepzone-veld {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.sleepzone-veld:disabled { cursor: not-allowed; }
.sleepzone-inhoud { display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.sleepzone-knoptekst { display: none; }

/* De cameraknop hoort bij een telefoon; op een computer heeft ze geen zin.
   De regel in de media-query hieronder zet ze daar aan. */
.sleepzone-foto { display: none; }

/* Compacte variant, voor het toevoegen van een stuk bij een bestaande factuur. */
.sleepzone-klein { padding: var(--r2) var(--r3); margin-bottom: var(--r3); }
.sleepzone-klein .sub-tekst { font-size: var(--tekst-xs); }

/* Op een telefoon valt er niets te slepen: daar wordt het een gewone knop die
   de bestandskiezer opent. */
@media (max-width: 760px) {
    .sleepzone {
        display: inline-block;
        border: 1px solid var(--kleur-primair);
        border-radius: var(--straal-sm);
        background: var(--kleur-primair-zacht);
        padding: var(--r2) var(--r4);
        width: 100%;
    }
    .sleepzone-inhoud > .sleepzone-sleeptekst { display: none; }
    .sleepzone-knoptekst { display: block; font-weight: 600; color: var(--kleur-primair); }
    .sleepzone-foto { display: inline-block; margin-top: var(--r2); }

    /* Een tegel die niets anders draagt dan een sleepzone is dubbel gevoerd: op een
       telefoon ís die zone al een knop met een eigen rand. De tegelvulling gaat omlaag
       en de marge onder de zone valt weg — er komt toch niets meer achter. */
    .kaart:has(> .sleepzone:only-child) { padding: var(--r3); }
    .kaart > .sleepzone:only-child { margin-bottom: 0; }
}

.werkbalk { display: flex; align-items: flex-start; gap: var(--r4); flex-wrap: wrap; }
.werkbalk .import-paneel { margin-bottom: 0; }

.kies-cel { width: 2rem; text-align: center; padding-inline: 0 !important; }
.kies-cel input { cursor: pointer; }
.niet-verwerkbaar { color: var(--tekst-zacht); cursor: help; }
.verwijder-lijst { margin: var(--r2) 0; padding-left: var(--r5); font-size: var(--tekst-sm); }
.verwijder-lijst li { padding: 1px 0; }

/* Een ja-of-nee-vraag midden op het scherm, in plaats van het venster van de browser.
   Dat laatste zet er "… meldt het volgende" boven en ziet er op elk toestel anders uit. */
.vraag-sluier {
    position: fixed; inset: 0; z-index: 220;
    background: rgb(2 6 23 / .55);
    display: flex; align-items: center; justify-content: center;
    padding: var(--r4);
}
.vraag-kaart {
    max-width: 24rem; width: 100%;
    border-left: 4px solid var(--fout);
    box-shadow: var(--schaduw-lg);
}
.vraag-kaart p { margin: 0 0 var(--r4); }
.vraag-kaart .kop-acties { justify-content: flex-end; }
body.vraag-open { overflow: hidden; }

/* Een vraag die je moet lezen vóór je ja zegt: die mag niet als gewone kaart voorbijgaan. */
.bevestig-kaart {
    border-color: var(--fout-rand);
    border-left: 4px solid var(--fout);
}
.bevestig-kaart p { margin: 0 0 var(--r3); }

/* Openklapbaar voorbeeld per rij */
.klap-cel { width: 2.25rem; padding-right: 0 !important; }
/* Het pijltje om een rij open te klappen. Het zag eruit als een leesteken en niet als
   iets waar je op drukt — nu een echte knop met een rand, en op een telefoon groot
   genoeg voor een duim. */
.klap-knop {
    background: var(--vlak-zacht); cursor: pointer;
    border: 1px solid var(--rand-sterk); border-radius: var(--straal-sm);
    color: var(--tekst); font-size: var(--tekst-md); line-height: 1;
    width: 1.9rem; height: 1.9rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.klap-knop:hover {
    background: var(--kleur-primair-zacht);
    border-color: var(--kleur-primair); color: var(--kleur-primair);
}

/* Ruimer aan te tikken dan met een muis. Deze regel staat hier en niet bij de andere
   telefoonregels hierboven: die staan eerder in het bestand en zouden het van de
   basisregel hierboven verliezen. */
@media (max-width: 760px) {
    .klap-knop { width: 2.4rem; height: 2.4rem; font-size: var(--tekst-lg); }
}
.tabel-rij.open { background: var(--kleur-primair-zacht); }
.tabel-rij.open .klap-knop { color: var(--kleur-primair); }

.voorbeeld-rij > td { background: var(--vlak-zacht); padding: var(--r3) var(--r4) var(--r4); }
.voorbeeld-rij:hover > td { background: var(--vlak-zacht); }
/* Voorbeeld als afbeelding: scrolt bij meerdere pagina's. */
.voorbeeld-blad {
    max-height: 52rem; overflow-y: auto;
    border: 1px solid var(--rand); border-radius: var(--straal-sm);
    background: var(--achtergrond); padding: var(--r2);
}
.voorbeeld-pagina {
    display: block; width: 100%; height: auto;
    min-height: 6rem;              /* houdt het kader op maat tot de pagina binnen is */
    background: #fff; box-shadow: var(--schaduw);
    border-radius: 2px;
}
.voorbeeld-pagina + .voorbeeld-pagina { margin-top: var(--r3); }
.voorbeeld-acties { display: flex; gap: var(--r2); margin-top: var(--r2); flex-wrap: wrap; }

/* Nummer, naam en bedrijf op één regel; het bedrijf schuift naar rechts, zodat de
   bedrijven onder elkaar staan en je ze in één blik overloopt. Ontbreekt het bedrijf,
   dan staat er geen leegte maar een waarschuwing: zonder bedrijf blijft het stuk staan
   en kan het niet naar Briljant. */
.lev-regel { display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap; }
.lev-regel .lev-nummer { margin-right: 0; }
.lev-regel .dossier-merk { margin-left: auto; }
.dossier-merk {
    display: inline-block;
    padding: 0.05rem 0.4rem; border-radius: var(--straal-rond);
    border: 1px solid var(--rand-sterk);
    background: var(--vlak); color: var(--tekst-zacht);
    font-size: var(--tekst-xs); font-weight: 650;
}
.dossier-merk.leeg {
    background: var(--waarschuwing-zacht); color: var(--waarschuwing);
    border-color: var(--waarschuwing-rand);
}

/* Leveranciersnummer uit Briljant, vóór de naam in de facturenlijst. */
.lev-nummer {
    display: inline-block; margin-right: var(--r2);
    padding: 0.05rem 0.35rem; border-radius: var(--straal-sm);
    background: var(--info-zacht); color: var(--info);
    font-size: var(--tekst-xs); font-variant-numeric: tabular-nums;
    vertical-align: 1px;
}

/* Alle bestanden die met dezelfde mail binnenkwamen; het gekozene wordt getoond.
   Compacte chips, zodat een factuur met bijlagen niet meteen een halve pagina vult. */
.bestand-keuzes { display: flex; flex-wrap: wrap; gap: var(--r1); margin-bottom: var(--r2); }
.bestand-chip {
    display: inline-flex; align-items: stretch; max-width: 100%;
    background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: var(--straal-sm);
    overflow: hidden;
}
.bestand-chip:hover { border-color: var(--kleur-primair); }
.bestand-chip.gekozen { background: var(--info-zacht); border-color: var(--info-rand); }
.bestand-chip.gekozen .chip-kies { color: var(--info); }

.chip-kies {
    background: none; border: none; cursor: pointer; color: var(--tekst);
    font: inherit; font-size: var(--tekst-sm); padding: 0.2rem var(--r2);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-kies:hover { background: var(--kleur-primair-zacht); }
.chip-weg {
    background: none; border: none; border-left: 1px solid var(--rand);
    cursor: pointer; color: var(--tekst-zacht);
    font: inherit; font-size: var(--tekst-xs); padding: 0.2rem var(--r2);
}
.chip-weg:hover { background: var(--fout-zacht); color: var(--fout); }
.chip-maat { opacity: .65; font-size: var(--tekst-xs); margin-left: var(--r1); }

@media (max-width: 760px) {
    .voorbeeld-kader { height: 24rem; }
    /* Een voorbeeldrij vult het hele kaartje. */
    .voorbeeld-rij td { flex: 1 0 100%; padding-top: var(--r2) !important; }
}
/* Ook als link te gebruiken (het potloodje naar het bewerkscherm), vandaar het
   uitlijnen met flex en het weghalen van de onderstreping: een <a> is standaard
   tekst en zette het teken links bovenin in plaats van in het midden. */
.mini-knop {
    background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: var(--straal-sm);
    width: 2rem; height: 2rem; cursor: pointer; color: var(--tekst); font-size: var(--tekst-md);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; text-decoration: none; padding: 0;
    vertical-align: middle;
}
.mini-knop + .mini-knop { margin-left: var(--r1); }
.mini-knop:hover { background: var(--kleur-primair-zacht); border-color: var(--kleur-primair); }
.mini-knop.aan { background: var(--info-zacht); border-color: var(--info-rand); color: var(--info); }

.zoek-raster { display: grid; gap: var(--r3) var(--r4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Een rastervak mag nooit breder worden dan zijn kolom: een veld met een eigen
   minimumbreedte (zoals een datumveld in Safari) duwt de kolom anders open. */
.zoek-raster > div { min-width: 0; }
.zoek-raster .veld-label { margin-top: 0; }

/* ------------------------------------------------------------- Scanner -- */

.veld-optioneel {
    font-weight: 400; color: var(--tekst-zacht); font-size: var(--tekst-xs);
    text-transform: lowercase; margin-left: var(--r1);
}

/* Factuur of document: twee even grote knoppen, groot genoeg voor een duim. */
.soort-keuze { display: flex; gap: var(--r2); }
.soort-optie {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--r2);
    padding: var(--r3); cursor: pointer;
    border: 1px solid var(--rand); border-radius: var(--straal); font-weight: 600;
}
.soort-optie:has(input:checked) {
    border-color: var(--kleur-primair); background: var(--kleur-primair-zacht); color: var(--kleur-primair);
}

/* De genomen bladen, in de volgorde waarin ze in de PDF komen. */
.bladen-lijst { list-style: none; margin: var(--r4) 0 0; padding: 0; }
.blad {
    display: flex; align-items: center; gap: var(--r3);
    padding: var(--r2) 0; border-bottom: 1px solid var(--rand);
}
.blad:last-child { border-bottom: none; }

/* De tekst van een binnengekomen mail. Wit vlak: mailopmaak gaat van een witte
   achtergrond uit en wordt anders onleesbaar in een donker thema. */
.bericht-kader {
    width: 100%; height: 26rem; background: #fff;
    border: 1px solid var(--rand); border-radius: var(--straal-sm);
    margin-bottom: var(--r3);
}
@media (max-width: 760px) { .bericht-kader { height: 20rem; } }

/* Platte tekst van een mail: zelf getoond, met behoud van de regelindeling. */
.bericht-tekst {
    max-height: 26rem; overflow: auto; margin: 0 0 var(--r3);
    padding: var(--r3); background: var(--vlak-zacht);
    border: 1px solid var(--rand); border-radius: var(--straal-sm);
    white-space: pre-wrap; word-break: break-word;
    font-family: inherit; font-size: var(--tekst-sm);
}

/* Memo van een document uit Briljant: vrije tekst met eigen regelovergangen. */
.brief-memo {
    white-space: pre-wrap; margin: 0 0 var(--r3);
    padding-left: var(--r3); border-left: 3px solid var(--rand);
    color: var(--tekst-zacht); font-size: var(--tekst-sm);
}

/* Inklapbare zoekvelden. De knop bestaat enkel op een smal scherm: daar nemen acht
   velden anders het volledige beeld in en zie je de resultaten niet staan. */
.zoek-klapknop { display: none; }

@media (max-width: 760px) {
    .zoek-kaart { padding: var(--r3) var(--r4); }
    .zoek-klapknop {
        display: flex; align-items: baseline; gap: var(--r2); width: 100%;
        background: none; border: none; padding: 0; cursor: pointer; text-align: left;
        color: inherit; font: inherit;
    }
    .zoek-kaart.open .zoek-klapknop { margin-bottom: var(--r3); }
    .zoek-klapknop-titel { font-weight: 600; }
    .zoek-klapknop-samenvatting {
        flex: 1; min-width: 0; color: var(--tekst-zacht); font-size: var(--tekst-sm);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .zoek-kaart.open .zoek-klapknop-samenvatting { display: none; }
    .klap-pijl { color: var(--tekst-zacht); }
    .zoek-kaart:not(.open) .zoek-raster { display: none; }
}

/* -------------------------------------------------------- Factuurdetail -- */

/* De rechterkolom draagt de factuur zelf en krijgt daarom de meeste ruimte. */
.detail-indeling { display: grid; gap: var(--r4); grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
.detail-indeling .formulier-kaart { max-width: none; }
.pdf-kader { width: 100%; height: 52rem; border: 1px solid var(--rand); border-radius: var(--straal-sm); margin-bottom: var(--r3); background: #fff; display: block; }

/* Een telefoon toont een PDF in een kader niet, maar zet er een knop "Openen" neer.
   Daarom komt daar de afbeeldingsweergave in de plaats — dezelfde die een UBL-factuur
   altijd al gebruikt. Op een breed scherm blijft de echte PDF staan. */
.enkel-smal { display: none; }

@media (max-width: 1000px) {
    /* minmax(0, 1fr) en niet 1fr: een gewone 1fr-kolom mag niet smaller worden dan
       haar inhoud, en één lange bestandsnaam zonder spaties duwde zo de hele kaart
       met alle invoervelden voorbij de rand van het scherm. Met de nul erbij wint
       het scherm, en breekt de tekst hieronder mee. */
    .detail-indeling { grid-template-columns: minmax(0, 1fr); }
    .pdf-kader { height: 26rem; }
}

/* Een naam of pad zonder spaties mag de kaart niet openbreken. */
.detail-indeling .kaart { overflow-wrap: break-word; }
@media (max-width: 760px) {
    /* Op een telefoon staat alles onder elkaar, en dan kwam de tegel Dossier pas na het
       hele formulier. Net die twee heb je als eerste nodig: bij welk bedrijf hoort dit,
       en welke relatie hangt eraan. De twee kolommen worden hier opgeheven met
       display:contents, zodat de kaarten zelf roosteritems worden en met order in de
       juiste volgorde kunnen. Op een breed scherm blijft de indeling in twee kolommen. */
    .detail-indeling .detail-kolom { display: contents; }
    .detail-indeling .kaart-dossier { order: -2; }
    .detail-indeling .kaart-zoeken { order: -1; }

    /* Met de kolommen opgeheven is elke tegel een roosteritem en zorgt de rasterafstand
       al voor lucht. De marges die op een breed scherm nodig zijn, kwamen daar bovenop —
       en enkel tussen tegels die toevallig ook in de HTML naast elkaar staan. Zo was de
       kloof onder de zoektegel twee keer die erboven. Hier telt alleen de gap. */
    .detail-indeling .kaart + .kaart,
    .detail-indeling .kaart + .tabel-kaart,
    .detail-indeling .tabel-kaart + .kaart,
    .detail-indeling .tabel-kaart + .tabel-kaart,
    .detail-indeling form + .kaart,
    .detail-indeling .kaart + form { margin-top: 0; }

    /* De zoektegel is één invoerveld: ze hoeft niet even veel lucht te dragen als een
       tegel vol gegevens. Zonder treffers valt de marge onder het veld ook weg. */
    .kaart-zoeken { padding: var(--r3); }
    .kaart-zoeken .zoek-balk:last-child,
    .kaart-zoeken .zoek-rij:last-child { margin-bottom: 0; }

    /* Bovenaan een telefoonscherm telt elke regel. De tegel Dossier is dan enkel haar
       keuzelijst: de titel zegt niets wat de lijst zelf niet toont, en de datum van
       ontvangst is hier het minst dringende gegeven van het scherm. */
    .kaart-dossier .kaart-titel,
    .kaart-dossier > .sub-tekst { display: none; }

    .status-schakelaar { width: 100%; }
    .knop-schakel { flex: 1; }

    /* Acties over de volle breedte: op een smal scherm is een halve knop
       lastiger te raken dan een hele. */
    .kop-acties { width: 100%; }
    .kop-acties > .knop { flex: 1 1 auto; text-align: center; }
    /* Het bladerblokje blijft ook op een telefoon bij elkaar en groeit niet mee met de
       andere knoppen: vijf gelijke vakjes naast elkaar leest slechter dan één blokje
       met de stand in het midden. Iets smallere vakjes, zodat het blokje samen met
       "Terug naar lijst" op één regel past. */
    .blader { flex: none; }
    .blader-knop { min-width: 2rem; padding-inline: var(--r1); }

    /* Terug naar de lijst en het bladeren staan naast elkaar op de onderste regel van
       de kop — je bent daar toch aan het navigeren. Ze delen de regel: de teruglink
       neemt wat overblijft, het bladerblokje houdt zijn eigen maat. */
    .kop-groep-terug {
        display: flex; flex-wrap: nowrap; align-items: center;
        gap: var(--r2); justify-content: flex-end; width: 100%;
    }
    .kop-groep-terug > .knop { flex: 1 1 auto; min-width: 0; text-align: center; }

    /* Een kop met groepjes leest op een telefoon van boven naar onder: de stand van de
       factuur naast de titel — daar hoort ze bij, en ze steelt geen knoprij — dan de
       knoppen waar je iets mee doet, en pas onderaan terug naar de lijst en het
       bladeren. De groepjes worden hier echte rijen; de kop zelf wordt een rooster van
       twee kolommen zodat het etiket naast de titel past. */
    .pagina-kop:has(> .kop-acties-gegroepeerd) {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        align-items: center; row-gap: var(--r3); column-gap: var(--r3);
    }
    /* Niet op h1 mikken maar op het eerste kind: op de leverancierspagina zit de titel
       in een blokje met de subregel erbij, en dan greep de regel er niet op — het
       bladeren belandde bóven de titel in plaats van eronder. */
    .pagina-kop:has(> .kop-acties-gegroepeerd) > :first-child { grid-column: 1; grid-row: 1; }

    .kop-acties-gegroepeerd { display: contents; }
    .kop-acties-gegroepeerd > .kop-groep-stand {
        display: flex; gap: var(--r2); flex-wrap: wrap; justify-content: flex-end;
        grid-column: 2; grid-row: 1;
    }
    /* Zonder etiket blijft de cel leeg; ze mag dan geen breedte opeisen. */
    .kop-acties-gegroepeerd > .kop-groep-stand:empty { display: none; }

    .kop-acties-gegroepeerd > .kop-groep-acties {
        display: flex; gap: var(--r2); flex-wrap: wrap; justify-content: flex-end;
    }
    /* Beide groepjes staan over de volle breedte van het rooster; .kop-groep-terug haalt
       zijn eigen indeling uit de regel hierboven. Het navigeren staat bovenaan, meteen
       onder de titel: waar je heen wil beslis je vóór je aan de knoppen begint, en zo
       staat die regel op elk scherm op dezelfde plek — ook als er daaronder één knop
       staat of vier. */
    .kop-acties-gegroepeerd > .kop-groep-acties,
    .kop-acties-gegroepeerd > .kop-groep-terug { grid-column: 1 / -1; }
    .kop-acties-gegroepeerd > .kop-groep-terug { order: -1; }
    .kop-acties-gegroepeerd > .kop-groep > .knop { flex: 1 1 auto; text-align: center; }

    /* Raakvlakken. Op een telefoon bedien je dit met één duim; 32 px is te klein om
       betrouwbaar te raken. De rijknopjes (potlood, klaarzetten, on hold, meer) worden
       een volle 44 px.

       De bladerknoppen krijgen wél de hoogte maar niet de breedte: vijf vakjes van
       44 px plus de teller plus "Terug naar lijst" passen niet op één regel, en die
       regel naast elkaar houden is een uitdrukkelijke keuze. De hoogte is hier wat
       telt — de rij was 28 px hoog. */
    .mini-knop { width: var(--raakvlak); height: var(--raakvlak); }
    .blader-knop { min-height: var(--raakvlak); }
    .knop { min-height: var(--raakvlak); }

    .tabel-kaart { border: none; background: none; box-shadow: none; overflow: visible; }
    .voorbeeld-blad { max-height: 26rem; }

    /* Wisselen: het PDF-kader werkt hier niet, de afbeelding wel. */
    .pdf-kader { display: none; }
    .enkel-smal { display: block; }
}

/* ------------------------------------------------------- Aanmeldscherm -- */

.aanmeld-scherm {
    min-height: 100dvh;
    display: grid; place-items: center;
    padding: var(--r4);
    background: linear-gradient(160deg, var(--kleur-primair-zacht), var(--achtergrond) 60%);
}
.aanmeld-kaart {
    width: 100%; max-width: 24rem;
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: var(--straal-lg);
    box-shadow: var(--schaduw-lg);
    padding: var(--r6);
}
.aanmeld-logo { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: var(--tekst-xl); }
.aanmeld-ondertitel { text-align: center; color: var(--tekst-zacht); margin: var(--r1) 0 var(--r5); font-size: var(--tekst-sm); }
.aanmeld-vink { margin-top: var(--r4); font-weight: 500; color: var(--tekst-zacht); }
.aanmeld-knop { width: 100%; margin-top: var(--r5); }

/* ------------------------------------------------------- Blazor-foutbalk -- */

#blazor-error-ui {
    background: var(--waarschuwing-zacht);
    color: var(--waarschuwing);
    border-top: 1px solid var(--waarschuwing-rand);
    bottom: 0; left: 0; width: 100%;
    display: none;
    padding: var(--r3) var(--r5);
    position: fixed;
    z-index: 100;
    box-shadow: 0 -1px 4px rgb(15 23 42 / .15);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--r3); top: var(--r2); }


/* ------------------------------------------------------------------ Scanner --
   /scan werkt in drie stappen: verzamelen, gegevens, verwerken. Gemaakt voor een
   telefoon: brede raakvlakken en de hoofdknop onderaan, onder de duim. */
.scan-scherm { max-width: 34rem; }

/* De stappenbalk. Wat af is kleurt groen, waar je zit blauw. */
.scan-stappen {
    display: flex; gap: var(--r2); list-style: none;
    margin: 0 0 var(--r5); padding: 0;
}
.scan-stappen li {
    flex: 1; display: flex; align-items: center; gap: var(--r2);
    font-size: var(--tekst-sm); font-weight: 650; color: var(--tekst-zacht);
    padding-top: var(--r2); border-top: 3px solid var(--rand);
}
.scan-stappen li.actief { color: var(--kleur-primair); border-top-color: var(--kleur-primair); }
.scan-stappen li.klaar { color: var(--goed); border-top-color: var(--goed); }
.scan-stapnr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: var(--straal-rond);
    background: var(--achtergrond); font-size: var(--tekst-xs);
}
.scan-stappen li.actief .scan-stapnr { background: var(--kleur-primair); color: var(--tekst-omgekeerd); }
.scan-stappen li.klaar .scan-stapnr { background: var(--goed); color: var(--tekst-omgekeerd); }

/* De drie manieren om iets toe te voegen. */
.scan-bronnen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r2); }
.scan-bron {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: var(--r2); padding: var(--r4) var(--r2);
    background: var(--vlak); color: var(--tekst);
    border: 1px solid var(--rand); border-radius: var(--straal);
    cursor: pointer; text-align: center; font: inherit;
}
.scan-bron:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); }
.scan-bron input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.scan-bron-icoon { font-size: 1.5rem; line-height: 1; }
.scan-bron-tekst { font-size: var(--tekst-sm); font-weight: 650; }

/* De zoeker met het camerabeeld en de groene rand erover: die neemt het hele scherm in.
   Het beeld zelf blijft volledig zichtbaar (nooit bijgesneden), want wat je in de zoeker
   ziet is precies wat er vastgelegd wordt — en de groene rand wordt over díé afmetingen
   getekend. Vandaar het aparte beeldvlak: dat is even groot als het beeld, terwijl de
   knoppen en de melding aan de randen van het scherm blijven hangen. */
.scan-zoeker {
    position: fixed; inset: 0; z-index: 200;
    margin: 0; border-radius: 0;
    background: #000; line-height: 0;
    display: flex; align-items: center; justify-content: center;
}
.scan-beeldvlak { position: relative; line-height: 0; max-width: 100%; max-height: 100%; }
.scan-video { display: block; max-width: 100vw; max-height: 100dvh; width: auto; height: auto; }
.scan-rand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Zolang de zoeker openstaat, mag de pagina eronder niet meescrollen. */
body.scan-zoeker-open { overflow: hidden; }

.scan-stand {
    position: absolute; top: calc(var(--r3) + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    background: rgb(15 23 42 / .65); color: #fff;
    padding: var(--r2) var(--r3); border-radius: var(--straal-rond);
    font-size: var(--tekst-sm); line-height: 1.2; white-space: nowrap;
}
.scan-knoppen {
    position: absolute; bottom: calc(var(--r5) + env(safe-area-inset-bottom)); left: 0; right: 0;
    display: flex; justify-content: center;
}
.scan-sluiter {
    width: 4.5rem; height: 4.5rem; border-radius: 50%;
    background: #fff; border: 5px solid rgb(255 255 255 / .45);
    box-shadow: 0 2px 10px rgb(0 0 0 / .35); cursor: pointer;
}
.scan-sluiter:disabled { opacity: .4; cursor: default; }
.scan-bezig .scan-sluiter { opacity: .5; }
.scan-sluitknop {
    position: absolute; top: calc(var(--r3) + env(safe-area-inset-top)); right: var(--r3);
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: rgb(15 23 42 / .55); color: #fff; border: none;
    font-size: 1rem; line-height: 1; cursor: pointer;
}

.scan-bericht { margin: var(--r3) 0 0; }
.scan-voetnoot { margin-top: var(--r5); }

/* De verzamelde stukken. */
.scan-lijst-kaart { margin-top: var(--r4); }
.scan-lijst-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--r3); }
.scan-lijst-kop .kaart-titel { margin: 0; }
.scan-teller { font-size: var(--tekst-sm); color: var(--tekst-zacht); }
.scan-leeg { margin: var(--r3) 0 0; }

.blad-rij {
    display: flex; align-items: center; gap: var(--r3);
    padding: var(--r3) 0; border-bottom: 1px solid var(--rand);
}
.blad-rij:last-child { border-bottom: none; }
.blad-mini {
    width: 3rem; height: 4rem; object-fit: cover; flex-shrink: 0;
    border-radius: var(--straal-sm); background: var(--achtergrond);
}
.blad-mini-klikbaar { cursor: zoom-in; }
.blad-icoon { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; }

/* Een gescand blad schermvullend, om te zien of de bon leesbaar is. */
.blad-groot {
    position: fixed; inset: 0; z-index: 210;
    background: rgb(2 6 23 / .92);
    display: flex; align-items: center; justify-content: center;
    padding: var(--r4);
    cursor: zoom-out;
}
.blad-groot img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; background: #fff;
    border-radius: var(--straal-sm); box-shadow: var(--schaduw-lg);
}
.blad-groot-naam {
    position: absolute; top: calc(var(--r3) + env(safe-area-inset-top)); left: 50%;
    transform: translateX(-50%);
    background: rgb(15 23 42 / .65); color: #fff;
    padding: var(--r2) var(--r3); border-radius: var(--straal-rond);
    font-size: var(--tekst-sm); line-height: 1.2;
}
.blad-groot-weg {
    position: absolute; top: calc(var(--r3) + env(safe-area-inset-top)); right: var(--r3);
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: rgb(15 23 42 / .55); color: #fff; border: none;
    font-size: 1rem; line-height: 1; cursor: pointer;
}
.blad-naam { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blad-naam strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blad-uitleg { font-size: var(--tekst-sm); color: var(--tekst-zacht); }
.blad-knop {
    background: none; border: 1px solid var(--rand); border-radius: var(--straal-sm);
    width: 2.5rem; height: 2.5rem; flex-shrink: 0; cursor: pointer; color: var(--tekst);
}
.blad-knop:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); }

/* Het verloop in stap 3. */
.scan-verloop { list-style: none; margin: var(--r3) 0 0; padding: 0; }
.scan-verloop li {
    display: flex; gap: var(--r3); align-items: flex-start;
    padding: var(--r3) 0; border-bottom: 1px solid var(--rand);
}
.scan-verloop li:last-child { border-bottom: none; }
.scan-verloop .vink { color: var(--goed); flex-shrink: 0; }
.scan-verloop strong { display: block; }
.scan-verloop span { display: block; font-size: var(--tekst-sm); color: var(--tekst-zacht); }

/* De hoofdknop van elke stap staat onderaan, waar de duim zit. */
.scan-voetbalk { display: flex; gap: var(--r3); align-items: center; margin-top: var(--r5); }
.scan-verder { flex: 1; padding-block: var(--r3); font-size: var(--tekst-lg); }

/* Handmatig bijstellen: de opname met vier verspringbare punten erover. */
.scan-hoeken { margin-top: var(--r4); }
.scan-hoeken-beeld { position: relative; line-height: 0; margin: var(--r3) 0; }
.scan-hoeken-beeld img { width: 100%; height: auto; display: block; border-radius: var(--straal-sm); }
.scan-hoeken-beeld canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

.scan-verborgen { display: none; }

/* --------------------------------------------------------- Betaaltegel -- */
/* De QR is bedoeld voor een ánder toestel: op het bureaublad scan je het scherm
   met je gsm. Op de gsm zelf staat de code dus weggeklapt en komt de knop
   "Nu betalen" in de plaats — die opent de bankapp, meer kan hij niet, want
   betaalgegevens in een adres aanvaardt geen enkele bank. */

.betaal-kaart { margin-bottom: var(--r4); }

.betaal-indeling {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--r5);
    align-items: start;
}

.betaal-qr {
    background: #fff;
    border-radius: var(--straal);
    padding: var(--r3);
    width: 13.5rem;
    text-align: center;
}
.betaal-qr img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.betaal-qr-tekst {
    display: block;
    margin-top: var(--r2);
    font-size: var(--tekst-xs);
    font-weight: 600;
    color: #334155;
}

.betaal-gegevens {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, auto) auto;
    gap: 0 var(--r4);
    margin: 0;
    align-items: center;
    justify-content: start;
}
.betaal-gegevens dt {
    color: var(--tekst-zacht);
    font-size: var(--tekst-sm);
    padding: var(--r2) 0;
    border-top: 1px solid var(--rand);
}
.betaal-gegevens dd {
    margin: 0;
    padding: var(--r2) 0;
    border-top: 1px solid var(--rand);
}
.betaal-gegevens dt:first-of-type,
.betaal-gegevens dt:first-of-type ~ dd:nth-of-type(-n+2) { border-top: none; }

.betaal-bedrag { font-size: var(--tekst-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.betaal-knop-cel { text-align: right; }

.knop-kopieer {
    border: 1px solid var(--rand);
    background: var(--vlak-zacht);
    color: var(--tekst-zacht);
    border-radius: var(--straal-sm);
    padding: var(--r1) var(--r2);
    font-size: var(--tekst-xs);
    cursor: pointer;
    white-space: nowrap;
}
.knop-kopieer:hover { color: var(--tekst); border-color: var(--rand-sterk); }

.betaal-bron {
    display: inline-block;
    margin-top: var(--r3);
    font-size: var(--tekst-xs);
    color: var(--goed);
    background: var(--goed-zacht);
    border: 1px solid var(--goed-rand);
    border-radius: var(--straal-rond);
    padding: 0 var(--r2);
}

/* De rekening wijkt af van die van de leverancier: staat vlak onder de gegevens,
   met de knop die ze in Briljant rechtzet. */
.betaal-afwijking {
    margin-top: var(--r3);
    padding: var(--r3) var(--r4);
    border: 1px solid var(--waarschuwing-rand);
    border-radius: var(--straal-sm);
    background: var(--waarschuwing-zacht);
    color: var(--waarschuwing);
    font-size: var(--tekst-sm);
}
.betaal-afwijking p { margin: 0 0 var(--r3); }

/* ------------------------------------------------ Boeken in Briljant -- */

/* De tabbladen van Briljant: Detail, BTW, Journaal. Zelfde volgorde en dezelfde
   namen, zodat wie het ene scherm kent het andere ook kent. */
.boek-tabs {
    display: flex; gap: var(--r1);
    margin: var(--r4) 0 var(--r3);
    border-bottom: 1px solid var(--rand);
}
.boek-tab {
    padding: var(--r2) var(--r4);
    border: 1px solid transparent; border-bottom: none;
    border-radius: var(--straal-sm) var(--straal-sm) 0 0;
    background: none; color: var(--tekst-zacht);
    font: inherit; font-size: var(--tekst-sm); cursor: pointer;
    margin-bottom: -1px;
}
.boek-tab:hover { color: var(--tekst); }
.boek-tab.actief {
    color: var(--tekst); font-weight: 600;
    background: var(--vlak); border-color: var(--rand); border-bottom-color: var(--vlak);
}

/* De kostenlijnen: rekening, btw-code en bedrag naast elkaar, zo compact dat er
   drie lijnen op een scherm passen zonder te scrollen. */
.boeklijn-tabel { margin-bottom: 0; table-layout: fixed; width: 100%; }
/* Alles bovenaan uitlijnen: onder het rekeningnummer hangt nog een benaming, en met
   gecentreerde cellen stond dat veld daardoor een paar pixels hoger dan de rest. */
.boeklijn-tabel td { padding: 0.2rem 0.3rem; vertical-align: top; }
/* De kopbalk draagt de "+ lijn"-knop: krappe hoogte, knop rechts en verticaal
   gecentreerd, zodat ze in de balk zit en er niet bovenuit steekt. */
.boeklijn-tabel th { padding: 0.25rem 0.3rem; vertical-align: middle; }
.boeklijn-tabel thead th:last-child { text-align: right; }
.boeklijn-tabel .veld-invoer { margin-bottom: 0; width: 100%; }

/* Vaste kolommen: de rekening krijgt de ruimte (daar staat een benaming onder), de
   bedragen staan rechts uitgelijnd onder elkaar. Zonder vaste maten schoven de velden
   met elke ingetikte benaming op. */
.boeklijn-tabel:not(.btw-tabel) th:nth-child(1) { width: 42%; }
.boeklijn-tabel:not(.btw-tabel) th:nth-child(2) { width: 24%; }
.boeklijn-tabel:not(.btw-tabel) th:nth-child(3) { width: 24%; }
.boeklijn-tabel:not(.btw-tabel) th:last-child { width: 10%; }
/* Het rekeningveld is meteen het zoekveld: tik een nummer of een stuk van de benaming
   en druk op Enter. De trefferlijst opent onder díé lijn. */
.boeklijn-tabel .boeklijn-rekening { display: flex; gap: var(--r1); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; }
.boeklijn-tabel .boeklijn-rekening .veld-invoer { max-width: none; }
/* De "+ lijn"-knop staat in de tabelkop, boven de ✕'jes van de lijnen: de kop is de
   plek van de tabel zelf, niet van één rij. In de btw-tabel is de kolom smal, dus daar
   mag ze niet afbreken. */
.boeklijn-tabel thead .knop {
    font-weight: 600; white-space: nowrap;
    padding: 0.1rem 0.5rem; font-size: var(--tekst-xs); line-height: 1.6;
    vertical-align: middle;
}
.btw-tabel thead .knop { padding: 0.1rem 0.4rem; }

/* De benaming onder het nummer: een rekeningnummer alleen zegt niets. */
.boeklijn-benaming {
    flex: 1 1 100%;
    font-size: var(--tekst-xs); color: var(--tekst-zacht);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.boeklijn-zoekrij td { padding-top: 0; }
.boeklijn-zoekrij .treffer-lijst { margin: 0 0 var(--r2); }
.boeklijn-tabel .boeklijn-bedrag .veld-invoer { max-width: 8rem; text-align: right; }
.boeklijn-tabel .boeklijn-weg { width: 2.5rem; }

/* Het btw-tabblad zet vier velden naast elkaar in dezelfde tegel. Met de smalle maat
   van de kostenlijnen valt "95,28" er niet meer in te lezen — je ziet 95 staan en denkt
   dat het bedrag fout is. Ze vullen hier dus hun kolom, en de basis krijgt het meest. */
.btw-tabel { table-layout: fixed; width: 100%; }
.btw-tabel th, .btw-tabel td { padding-inline: 0.15rem; }
/* Binnenmarge krap: die 12 px links en rechts is ruimte die het bedrag zelf nodig heeft. */
.btw-tabel .veld-invoer { max-width: none; width: 100%; padding-inline: 0.35rem; }

/* De kolommen liggen vast (code · basis · aftrekbaar · na bedrijf · weg); bij een vaste
   tabelindeling telt de eerste rij, dus de maat hoort op de koppen. De basis krijgt het
   meest: daar staan de grootste bedragen. */
.btw-tabel th:nth-child(1) { width: 20%; }
.btw-tabel th:nth-child(2) { width: 26%; }
.btw-tabel th:nth-child(3) { width: 22%; }
/* "BTW na bedr." is leestekst en mag smaller; de laatste kolom draagt "+ lijn". */
.btw-tabel th:nth-child(4) { width: 15%; }
.btw-tabel th:last-child { width: 17%; }
.btw-tabel .boeklijn-weg .knop { padding-inline: 0.25rem; }

/* Wat niet in te tikken valt, ziet er ook niet uit als een veld: het niet-aftrekbare
   deel komt van de rekening. */
.btw-tabel .veld-lees {
    display: block; padding: 0.35rem 0.35rem;
    text-align: right; color: var(--tekst-zacht);
}

/* De pijltjes van een getalveld vreten in deze smalle kolommen de helft van de ruimte
   op, terwijl niemand een btw-bedrag omhoog klikt. */
.btw-tabel input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.btw-tabel input[type="number"]::-webkit-outer-spin-button,
.btw-tabel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sluiten de lijnen op de factuur? Dat hoort in één oogopslag te zien te zijn. */
.boek-totalen {
    display: flex; flex-wrap: wrap; gap: var(--r1) var(--r4);
    margin: var(--r2) 0 var(--r3);
    padding: var(--r2) var(--r3);
    background: var(--vlak-zacht);
    border: 1px solid var(--rand);
    border-radius: var(--straal-sm);
    font-size: var(--tekst-sm); color: var(--tekst-zacht);
}
.boek-totalen strong { color: var(--tekst); }
.boek-totalen .klopt { color: var(--goed); font-weight: 600; }
.boek-totalen .klopt-niet { color: var(--fout); font-weight: 600; }

/* Op een telefoon wordt elke lijn een kaartje: etiket links, veld rechts, één per
   regel. Twee kolommen naast elkaar gaven halve velden en een ✕ die los onderaan
   hing — daar valt niets in te tikken. */
@media (max-width: 760px) {
    .tabel.boeklijn-tabel { table-layout: auto; }

    .tabel.boeklijn-tabel tr {
        display: grid; grid-template-columns: 1fr; gap: var(--r2);
        border: 1px solid var(--rand); border-radius: var(--straal-sm);
        background: var(--vlak-zacht);
        padding: var(--r3); margin-bottom: var(--r2);
    }

    .tabel.boeklijn-tabel td { padding: 0; width: auto; }

    /* Etiket links, veld rechts — met het veld breed genoeg om te bedienen. */
    .tabel.boeklijn-tabel td[data-kolom] {
        display: flex; align-items: center; justify-content: space-between; gap: var(--r3);
    }
    .tabel.boeklijn-tabel td[data-kolom] > * { flex: 0 1 60%; }

    /* De rekening is de kop van het kaartje: volle breedte, met de benaming eronder. */
    .tabel.boeklijn-tabel .boeklijn-rekening { display: block; }
    .tabel.boeklijn-tabel .boeklijn-rekening .veld-invoer,
    .tabel.boeklijn-tabel .boeklijn-bedrag .veld-invoer { max-width: none; }

    /* Het ✕ hoort rechts, op de hoogte van de laatste regel. */
    .tabel.boeklijn-tabel .boeklijn-weg { width: auto; justify-self: end; margin-top: calc(var(--r2) * -1); }

    /* De zoekregel loopt over de volle breedte, anders staat de lijst in één kolom. */
    .tabel.boeklijn-tabel .boeklijn-zoekrij { display: block; background: none; border: 0; padding: 0; }
    .tabel.boeklijn-tabel .boeklijn-zoekrij td { display: block; }
}

.betaal-melding { margin: var(--r2) 0 0; font-size: var(--tekst-sm); color: var(--goed); }
.betaal-hint { margin: var(--r4) 0 0; font-size: var(--tekst-sm); color: var(--tekst-zacht); }
.betaal-hint strong { color: var(--tekst); }

@media (max-width: 760px) {
    .betaal-indeling { grid-template-columns: 1fr; gap: var(--r4); }
    .betaal-gegevens { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }

    /* De QR staat er meteen, ook hier: hem eerst moeten opendoen was een klik te veel. */
    .betaal-qr { width: 100%; max-width: 17rem; margin: 0 auto; }

    /* Breed: de hint over de bankapp hoort er niet, daar betaal je niet op. */
    .betaal-breed { display: none; }
}

/* De knop die de betaaltegel openklapt. Groen, want het is de enige knop in de
   kop die geld beweegt in plaats van gegevens. */
.knop-betalen {
    background: var(--goed-zacht);
    border-color: var(--goed-rand);
    color: var(--goed);
    font-weight: 600;
}
.knop-betalen:hover { border-color: var(--goed); }

/* Alleen-lezen gegevens, zoals een geboekte factuur uit Briljant: etiket links,
   waarde rechts, zonder invoervelden. */
.lees-gegevens {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0 var(--r4);
    margin: 0;
    align-items: baseline;
}
.lees-gegevens dt {
    color: var(--tekst-zacht);
    font-size: var(--tekst-sm);
    padding: var(--r2) 0;
}
.lees-gegevens dd {
    margin: 0;
    padding: var(--r2) 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.lees-gegevens dd.getal { font-variant-numeric: tabular-nums; }
.lees-gegevens dt + dd { border-top: 1px solid transparent; }

.mono { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; }

@media (max-width: 560px) {
    .lees-gegevens { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* Een etiket in de rij met de actieknoppen, waar anders een knop zou staan:
   bij een afgepunte factuur of een creditnota valt er niets te betalen. */
.kop-label { align-self: center; }

/* De gevonden leveranciers onder het zoekveld in stap 2 van de scanner. */
.scan-treffers { list-style: none; margin: var(--r2) 0 0; padding: 0; }
.scan-treffer + .scan-treffer { margin-top: var(--r2); }
.scan-treffer button {
    width: 100%; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--r3); font: inherit; color: var(--tekst);
    background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--straal-sm);
}
.scan-treffer button:hover { border-color: var(--kleur-primair); }
.scan-treffer span { font-size: var(--tekst-sm); color: var(--tekst-zacht); }

/* Alles kiezen naast de telling. Op een breed scherm zit dat vinkje in de tabelkop;
   die valt weg zodra de rijen kaartjes worden, dus verschijnt het hier. */
/* "Alles selecteren" staat links en de telling rechts: het vinkje hoort boven de
   vinkjes van de kaartjes eronder, en niet aan de overkant van het scherm. */
.lijst-telling-rij {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--r3); flex-wrap: wrap;
}
.lijst-telling-rij .lijst-telling { order: 2; }
.lijst-telling-rij .alles-kiezen { order: 1; }
.alles-kiezen { display: none; font-size: var(--tekst-sm); gap: var(--r2); }
.alles-kiezen .sub-tekst { color: var(--tekst-zacht); }

@media (max-width: 760px) {
    .alles-kiezen { display: inline-flex; align-items: center; }
}

/* Lopend of afgehandeld: twee knoppen die als één schakelaar lezen. Groen voor
   afgehandeld, oranje voor lopend — dezelfde kleuren als de labels in de lijsten. */
.status-keuze { display: flex; gap: var(--r2); }
.status-optie {
    flex: 1; padding: var(--r3); cursor: pointer; font: inherit; font-weight: 600;
    background: var(--vlak); color: var(--tekst-zacht);
    border: 1px solid var(--rand); border-radius: var(--straal-sm);
}
.status-optie:hover { border-color: var(--rand-sterk); }
.status-optie.aan.lopend {
    background: var(--waarschuwing-zacht); color: var(--waarschuwing);
    border-color: var(--waarschuwing-rand);
}
.status-optie.aan.afgehandeld {
    background: var(--goed-zacht); color: var(--goed); border-color: var(--goed-rand);
}

/* De kop van de zoekkaart: links de titel (op een smal scherm de inklapknop), rechts
   Zoeken en Velden wissen. Die twee horen bij de velden en niet bij de pagina, dus
   staan ze in de kaart zelf. */
.zoek-kaart-kop {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--r3); flex-wrap: wrap; margin-bottom: var(--r4);
}
.zoek-acties { display: flex; gap: var(--r2); margin-left: auto; }

/* Op een breed scherm bestaat de inklapknop niet; dan draagt de kop enkel de knoppen. */
.zoek-kaart-kop:has(.zoek-klapknop:only-child) { justify-content: flex-end; }

@media (max-width: 760px) {
    .zoek-kaart-kop { margin-bottom: 0; }
    .zoek-kaart.open .zoek-kaart-kop { margin-bottom: var(--r3); }
    .zoek-kaart-kop .zoek-klapknop { flex: 1 1 100%; }
    .zoek-kaart.open .zoek-klapknop { margin-bottom: 0; }
    .zoek-acties { width: 100%; }
    .zoek-acties .knop { flex: 1; }
}

/* Bladeren door een lange lijst: rechtsonder, onder de tabel. */
.pagina-balk {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--r3); margin-top: var(--r3); font-size: var(--tekst-sm);
}
.pagina-stand { color: var(--tekst-zacht); }
.pagina-knop {
    background: none; border: none; padding: var(--r2) var(--r2);
    font: inherit; font-weight: 650; color: var(--kleur-primair); cursor: pointer;
}
.pagina-knop:disabled { color: var(--tekst-zacht); cursor: default; }

@media (max-width: 760px) {
    /* Ingeklapt hoort de zoekkaart één regel te zijn: dan hebben de knoppen er ook
       niets te zoeken, want er valt niets in te vullen. */
    .zoek-kaart:not(.open) .zoek-acties { display: none; }
}