/* ============================================================================
   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); }
    .zijbalk-sluier { 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);
}
.kaart + .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; }

.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; }
.vies-uitslag p:last-of-type { margin-bottom: var(--r2); }

/* ------------------------------------------------------------ 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. */
    .tabel td[data-kolom="Leverancier"] { display: block; margin: var(--r1) 0 var(--r2); }
    .tabel td[data-kolom="Leverancier"]::before { display: none; }

    /* Openklappen en aanvinken staan samen op de eerste regel. */
    .tabel .klap-cel, .tabel .kies-cel { flex: 0 0 auto; width: auto; padding: 0 var(--r2) 0 0 !important; }

    .tabel td[data-kolom]:empty { display: none; }
    .tabel-actie { display: none; }
    .acties-cel { justify-content: flex-end; padding-top: var(--r2) !important; }
    .rechts { text-align: left; }
    .veld-rij, .veld-rij-drie { grid-template-columns: 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; }

.dossier-balk { display: flex; flex-wrap: wrap; gap: var(--r1); margin-bottom: var(--r3); }
.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; }

/* Openklapbaar voorbeeld per rij */
.klap-cel { width: 2.25rem; padding-right: 0 !important; }
.klap-knop {
    background: none; border: none; cursor: pointer;
    color: var(--tekst-zacht); font-size: var(--tekst-md);
    width: 1.75rem; height: 1.75rem; border-radius: var(--straal-sm);
}
.klap-knop:hover { background: var(--kleur-primair-zacht); color: var(--kleur-primair); }
.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; }

/* 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; }
}
.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);
}
.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); }
/* Reserveknop: het formulier verstuurt normaal zichzelf zodra de opname er is. */
.ticket-verstuur { width: 100%; margin-top: var(--r3); }

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

/* 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) {
    .detail-indeling { grid-template-columns: 1fr; }
    .pdf-kader { height: 26rem; }
}
@media (max-width: 760px) {
    .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); }