/* ============================================================================
   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;
    --tekst-zacht: #64748b;
    --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);
}

@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; }

.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;
}

.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); }
}

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

/* ----------------------------------------------------------- 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; }

.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, op een eigen regel onder de actieknoppen. Kleiner dan
   de gewone knoppen: het is navigatie, geen actie. */
.record-navigatie {
    display: flex; gap: var(--r1); align-items: center; flex-wrap: wrap;
    justify-content: flex-end; margin-top: var(--r2); width: 100%;
}
.record-navigatie .knop {
    padding: 2px var(--r2);
    font-size: var(--tekst-xs);
    border-color: transparent;
    background: none;
}
.record-navigatie .knop:hover { background: var(--kleur-primair-zacht); border-color: var(--rand); }
.record-teller {
    color: var(--tekst-zacht); font-size: var(--tekst-xs);
    font-variant-numeric: tabular-nums; padding: 0 var(--r1);
}
.knop.uit { opacity: .35; pointer-events: none; }
/* Een kaart die op een formulier volgt, plakt er anders tegenaan: het formulier
   is geen .kaart, dus de regel hierboven grijpt niet. */
.detail-indeling form + .kaart { margin-top: var(--r4); }

.kaart-raster { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.kaart-titel { font-size: var(--tekst-md); color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .05em; font-size: var(--tekst-xs); 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); }
.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); }

/* ---------------------------------------------------- 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 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; }

.melding { padding: var(--r3) var(--r4); border-radius: var(--straal-sm); margin-bottom: var(--r4); font-size: var(--tekst-md); border: 1px solid; }
.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); }
.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; }
.vink-rij { display: flex; 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; }
.vink-rij { align-items: center; flex-wrap: wrap; }
.vies-uitslag { margin-top: var(--r3); background: var(--vlak-zacht); box-shadow: none; }

/* Zoekveld met knop ernaast, op een smal scherm onder elkaar. */
.zoek-rij { display: flex; gap: var(--r2); align-items: center; flex-wrap: wrap; }
.zoek-rij .veld-invoer { flex: 1 1 12rem; }

.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); }

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

.tabel-kaart {
    background: var(--vlak);
    border: 1px solid var(--rand);
    border-radius: var(--straal);
    box-shadow: var(--schaduw-sm);
    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;
}
.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; }

    /* Lange bestandsnamen zonder spaties breken netjes af in plaats van de kaart uit
       te rekken. */
    .tabel td .sub-tekst { 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); }
.label-open { background: var(--fout-zacht); color: var(--fout); border-color: var(--fout-rand); }
.label-hold { background: var(--waarschuwing-zacht); color: var(--waarschuwing); border-color: var(--waarschuwing-rand); }
.label + .label { margin-left: var(--r1); }
.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); }
/* Een UBL zonder ingesloten PDF: die moet je herstellen vóór het verwerken. */
.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 { display: flex; gap: var(--r2); margin-bottom: var(--r3); }
.zoek-balk .veld-invoer { max-width: 29rem; }
.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); }
}

.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-kader {
    width: 100%; height: 34rem; display: block;
    border: 1px solid var(--rand); border-radius: var(--straal-sm);
    background: #fff;
}
/* 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; }

/* Het bedrijf waar een factuur of document bij hoort, onder de naam in de lijst.
   Ontbreekt het, dan staat er geen leegte maar een waarschuwing: zonder bedrijf
   blijft het stuk staan en kan het niet naar Briljant. */
.dossier-merk-rij { margin-top: 2px; }
.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)); }
.zoek-raster .veld-label { margin-top: 0; }

/* ------------------------------------------------- Ticket fotograferen -- */

/* Smal gehouden: dit scherm wordt met één hand op een telefoon gebruikt. */
.ticket-scherm { max-width: 30rem; }
.ticket-titel { margin-bottom: var(--r4); }
.ticket-kaart .veld-label:first-child { margin-top: 0; }
.veld-optioneel {
    font-weight: 400; color: var(--tekst-zacht); font-size: var(--tekst-xs);
    text-transform: lowercase; margin-left: var(--r1);
}

/* Het bestandsveld ligt onzichtbaar over de knop; zo hoeft er geen JavaScript aan te pas. */
.ticket-knop {
    position: relative; margin-top: var(--r5);
    display: flex; align-items: center; justify-content: center;
    min-height: 3.5rem; padding: var(--r3) var(--r4);
    background: var(--kleur-primair); color: var(--tekst-omgekeerd);
    border-radius: var(--straal); font-weight: 650; font-size: var(--tekst-lg);
    cursor: pointer;
}
.ticket-knop.bezig { opacity: .6; }
.ticket-knop-veld {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.ticket-hulp { margin-top: var(--r3); }
.ticket-verstuur { width: 100%; margin-top: var(--r4); }
.verborgen-veld { display: none; }

/* 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; }
.blad-voorbeeld {
    width: 3rem; height: 4rem; object-fit: cover;
    border-radius: var(--straal-sm); background: var(--achtergrond);
}
.blad-naam { flex: 1; font-weight: 600; }

.ticket-lijst { margin-top: var(--r4); }
.ticket-genomen { list-style: none; padding: 0; margin: 0 0 var(--r3); }
.ticket-genomen li {
    display: flex; gap: var(--r3); align-items: baseline;
    padding: var(--r2) 0; border-bottom: 1px solid var(--rand);
}
.ticket-genomen li:last-child { border-bottom: none; }
.ticket-tijd { color: var(--tekst-zacht); font-size: var(--tekst-sm); flex-shrink: 0; }
.ticket-omschrijving { overflow: hidden; text-overflow: ellipsis; }

/* 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; }

    .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; }
    .record-navigatie .knop { flex: 1 1 auto; text-align: center; }
    .record-teller { width: 100%; text-align: center; order: -1; }

    .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);
}

.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); }

.betaal-hoofdknop { width: 100%; padding-block: var(--r3); font-size: var(--tekst-lg); }
.betaal-onderschrift {
    margin: var(--r2) 0 0;
    text-align: center;
    font-size: var(--tekst-xs);
    color: var(--tekst-zacht);
}
.betaal-uitklap {
    margin-top: var(--r3);
    padding: var(--r2) 0 0;
    border: none;
    border-top: 1px solid var(--rand);
    background: none;
    color: var(--kleur-primair);
    font-size: var(--tekst-sm);
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* Breed: de QR staat er, de knop niet. */
.betaal-smal { display: none; }

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

    .betaal-qr { display: none; width: 100%; max-width: 17rem; margin: 0 auto; }
    .betaal-qr.open { display: block; }

    .betaal-smal { display: block; margin-top: var(--r4); }
    .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);
}