/* =========================================================================
   Vormgeving "Kleurvlakken" (ontwerp/mockup-ui-richtingen.html, blok .c).

   Alle kleuren, letters en rondingen staan hieronder als variabelen: dit is de
   ene plek om aan te draaien. auth.css gebruikt dezelfde variabelen.

   Contrast: elke tekstkleur haalt minstens 4,5:1 op zijn eigen achtergrond.
   Waar de mockup daaronder zat, staat de gemeten, iets donkerdere waarde:
     #6E7A88 (4,37:1 op wit)      -> --gedempt #646F7B (5,12:1)
     #8B96A4 (3,00:1 op wit)      -> --zacht   #626E7D (5,19:1; 4,84:1 op --vlak)
     voetregel KPI opacity .72    -> per tegel .72 / .78 / .86 / .80 (4,6-4,7:1)
     witte tekst in verdeelbalk   -> donkere tint op groen en amber (4,7:1)
   ========================================================================= */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/onest-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/onest-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/onest-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/onest-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Letters: Onest voor alles, Bricolage Grotesque voor koppen en grote bedragen.
       Geen monospace: cijfers lijnen uit met tabular-nums. */
    --letter: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --kopletter: "Bricolage Grotesque", "Onest", system-ui, sans-serif;

    /* Basis */
    --pagina: #FFFFFF;
    --tekst: #141B24;
    --tekst-2: #45525F;
    --gedempt: #646F7B;
    --zacht: #626E7D;
    --donker: #141B24;
    --rand: #EBEFF3;
    --rand-veld: #E7EBEF;
    --rand-hover: #C9D1DA;
    --lijn: #F2F5F8;
    --vlak: #F5F7FA;
    --leeg: #EDF1F5;
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-licht: #A9C6F8;
    --focus: rgba(37, 99, 235, .35);

    /* Kerncijfer-tegels: vlak, tekst, stip, dekking van de voetregel */
    --omzet-vlak: #E8F0FE;       --omzet-tekst: #14396E;       --omzet-stip: #2563EB;       --omzet-voet: .72;
    --btw-vlak: #F2F4F7;         --btw-tekst: #3A4757;         --btw-stip: #98A3B3;         --btw-voet: .78;
    --reservering-vlak: #FDF1DD; --reservering-tekst: #7A4E10; --reservering-stip: #D9880F; --reservering-voet: .86;
    --netto-vlak: #E3F5EC;       --netto-tekst: #15563C;       --netto-stip: #0F9D63;       --netto-voet: .80;
    --kosten-vlak: #F1EEFB;      --kosten-tekst: #3F2F7A;      --kosten-stip: #7C5CD6;      --kosten-voet: .80;

    /* Verdeling van de omzet */
    --deel-netto: #0F9D63;  --deel-netto-tekst: #042517;
    --deel-ib: #D9880F;     --deel-ib-tekst: #432A05;
    --deel-zvw: #2563EB;    --deel-zvw-tekst: #FFFFFF;
    --deel-kosten: #7C5CD6; --deel-kosten-tekst: #FFFFFF;
    /* Grafiek: kosten boven de nullijn, verlies eronder */
    --grafiek-kosten: #C9BCF2;
    --grafiek-verlies: #C2413A;

    /* Meldingen en statussen (tekst op eigen vlak) */
    --info-vlak: #E8F0FE;   --info-tekst: #14396E;
    --ok-vlak: #E3F5EC;     --ok-tekst: #15563C;
    --let-op-vlak: #FDF1DD; --let-op-tekst: #7A4E10;
    --fout-vlak: #FDECEA;   --fout-tekst: #9B2C22;
    --stil-vlak: #F2F4F7;   --stil-tekst: #3A4757;

    /* Tekstknoppen in tabelrijen (rij-acties onder Instellingen) */
    --knop-tekst: #45525F;
    --knop-rand-hover: #C9D2DC;
    --knop-gevaar-tekst: #B42318;
    --knop-gevaar-rand: #F3C6C2;

    /* Zijbalk */
    --zijbalk: #141B24;
    --zijbalk-tekst: #AEB6C2;
    --zijbalk-kop: #8E98A6;

    /* Rondingen */
    --radius-kaart: 18px;
    --radius-tegel: 12px;
    --radius-veld: 9px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    color: var(--tekst);
    background: var(--pagina);
    font-family: var(--letter);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

/* ------------------------------------------------------------------ opbouw */
.dashboard-shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 2;
    display: flex;
    width: 240px;
    flex-direction: column;
    padding: 28px 18px;
    color: #F2F4F8;
    background: var(--zijbalk);
}

.brand { display: flex; align-items: center; gap: 12px; color: #F2F4F8; text-decoration: none; }
/* Het beeldmerk als masker: de vorm komt uit rdb-mark-mono.svg, de kleur uit
   background-color. Een <img> kan dat niet, want een extern geladen SVG erft
   'color' niet van de pagina en currentColor wordt dan zwart. */
.brand-mark {
    display: block;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background-color: #F2F4F8;
    -webkit-mask: url("../img/rdb-mark-mono.svg") center / contain no-repeat;
    mask: url("../img/rdb-mark-mono.svg") center / contain no-repeat;
}
.brand-name { font: 700 17px/1.15 var(--kopletter); letter-spacing: -.015em; }
.sidebar-nav { margin-top: 48px; }
.nav-group { margin-bottom: 28px; }
.nav-group h2 { margin: 0 12px 8px; color: var(--zijbalk-kop); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nav-items { display: grid; gap: 4px; }
.nav-item { padding: 10px 12px; border-left: 3px solid transparent; border-radius: var(--radius-veld); color: var(--zijbalk-tekst); font-weight: 500; text-decoration: none; }
.nav-item:hover, .nav-item.is-active { border-left-color: var(--accent); color: #FFFFFF; background: rgba(255, 255, 255, .08); }
/* Regeltje onder een menu-item, zoals de datum van de laatste backup. */
.nav-sub { display: block; margin-top: 2px; color: var(--zijbalk-kop); font-size: 11.5px; font-weight: 400; }
.nav-sub.nav-sub-rood { color: #A61B12; }
.backup-stand h2, .backup-stand + .card h2, .backup-stand + .card + .card h2 { margin: 0 0 12px; font-size: 17px; }
.backup-log { margin: 14px 0 0; overflow-wrap: anywhere; }
/* Paden en logregels hebben geen spaties; zonder afbreken duwen ze de pagina op een telefoon breder dan het scherm. */
.backup-pagina code, .backup-pagina .melding-fout, .backup-pagina dd { overflow-wrap: anywhere; }
/* Gevaarlijke actie: alles vervangen. Rand en knop in #A61B12. */
.card.gevaar-blok { border: 2px solid #A61B12; }
.gevaar-blok h2 { color: #A61B12; }
.btn-vervangen { border: 1px solid #A61B12; background: #A61B12; color: #FFFFFF; }
.btn-vervangen:hover, .btn-vervangen:focus-visible { border-color: #7E140D; background: #7E140D; color: #FFFFFF; }
.vervangen-noten { margin: 16px 0; padding-left: 20px; display: grid; gap: 6px; }
.vervangen-bevestigen { display: grid; gap: 14px; max-width: 520px; }
.vervangen-bevestigen .form-actions { margin-top: 0; }
/* Een kostenpost verwijst naar een bon die niet (meer) op de server staat. */
.bon-ontbreekt { color: var(--fout-tekst); font-size: 12px; white-space: nowrap; }
.backup-log code { font-size: 12.5px; }

.dashboard-main { display: flex; width: calc(100% - 240px); min-height: 100vh; margin-left: 240px; flex-direction: column; background: var(--pagina); }
.topbar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 16px clamp(22px, 5vw, 56px); border-bottom: 1px solid var(--rand); background: var(--pagina); }
.greeting { margin: 0; font-size: 15.5px; font-weight: 600; }
.role-label { margin: 2px 0 0; color: var(--gedempt); font-size: 13px; }
.dashboard-content { width: min(1180px, 100%); flex: 1; margin: 0 auto; padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 44px); }
.dashboard-content h1, .dashboard-content h2, .dashboard-content h3 { font-family: var(--kopletter); letter-spacing: -.02em; }
.dashboard-content h1 { margin-top: 0; font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.dashboard-content h2 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin-bottom: 0; }
.muted { color: var(--gedempt); }
.empty-state { max-width: 640px; }
.page-actions { margin: 18px 0 20px; }
.dashboard-footer { padding: 16px clamp(22px, 5vw, 56px); color: var(--zacht); font-size: 12.5px; text-align: right; }

/* ------------------------------------------------------------------ algemene onderdelen */
.card { padding: 20px 22px 22px; border: 1px solid var(--rand); border-radius: var(--radius-kaart); background: var(--pagina); }
.card h2, .card h3 { margin-top: 0; }
.card h2 { font-size: 17px; line-height: 1.2; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.table th { padding-block: 16px 11px; color: var(--zacht); font-size: 12px; font-weight: 600; line-height: 1.2; }
.table td { border-top: 1px solid var(--lijn); }
.table .number { text-align: right; }
/* position: relative maakt het scrollkader de bevattende blok voor absoluut
   gepositioneerde inhoud, zoals het verborgen kopje 'Acties'. Zonder dat
   ontsnapt zo'n element aan het kader en rekt het de hele pagina op. */
.table-wrap { position: relative; overflow-x: auto; }

.btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 8px 15px; border: 1px solid var(--rand-veld); border-radius: var(--radius-veld); font: 600 14px/1.2 var(--letter); text-decoration: none; cursor: pointer; }
.btn-primary { border-color: var(--accent); color: #FFFFFF; background: var(--accent); }
.btn-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.btn-stil { color: var(--tekst-2); background: var(--pagina); }
.btn-stil:hover { border-color: var(--rand-hover); color: var(--tekst); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-gevaar { border-color: var(--fout-tekst); color: #FFFFFF; background: var(--fout-tekst); }
.btn-gevaar:hover { border-color: #7F231B; background: #7F231B; }
.link-knop { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.link-knop-gevaar { color: var(--fout-tekst); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; color: var(--stil-tekst); background: var(--stil-vlak); font-size: 12.5px; }
.badge-accent { color: var(--info-tekst); background: var(--info-vlak); }
.badge-ok { color: var(--ok-tekst); background: var(--ok-vlak); }

.melding-info, .melding-fout, .melding-ok { margin: 0 0 18px; padding: 13px 16px; border-radius: var(--radius-tegel); font-size: 14px; }
.melding-info { color: var(--info-tekst); background: var(--info-vlak); }
.melding-fout { color: var(--fout-tekst); background: var(--fout-vlak); }
/* Vangnet boven een overzicht: datum buiten alle jaarfilters. Links in dezelfde rode kleur. */
.buiten-jaarfilters { overflow-wrap: anywhere; }
.buiten-jaarfilters a { color: inherit; font-weight: 600; text-decoration: underline; }
.melding-ok { color: var(--ok-tekst); background: var(--ok-vlak); }

.stack-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inline-form { display: inline; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-field { display: grid; gap: 6px; align-content: start; }
.form-field label { color: var(--tekst-2); font-size: 14px; font-weight: 600; }
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--rand-veld); border-radius: var(--radius-veld); background: var(--pagina); color: var(--tekst); font: inherit; }
.form-field input:not([type="checkbox"]):not([type="radio"]):hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--rand-hover); }
.form-field input[type="checkbox"], .form-field input[type="radio"] { width: auto; flex: none; margin: 0; accent-color: var(--accent); }
.form-field textarea { min-height: 100px; resize: vertical; }
.form-error { color: var(--fout-tekst); font-size: 13px; }
.form-hint { margin: 0; color: var(--gedempt); font-size: 12.5px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.heeft-fout input, .heeft-fout select, .heeft-fout textarea { border-color: var(--fout-tekst) !important; }
/* Snelknoppen onder de tijdvelden van het dienstformulier: de vaakst gebruikte
   begin- en eindtijden, in de vorm van de rij-acties. */
.snelknoppen-veld[hidden] { display: none; }
.snelknoppen-kop { color: var(--tekst-2); font-size: 14px; font-weight: 600; }
.snelknoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.snelknoppen .actieknop { font-variant-numeric: tabular-nums; }
.klein { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-heading .muted { margin: 6px 0 0; font-size: 14.5px; }
/* Op een smal scherm mag de knop onder de titel: een lange titel met een lange
   knop ernaast rekt anders de pagina op. */
@media (max-width: 560px) { .page-heading { flex-wrap: wrap; } }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pill-open { color: var(--info-tekst); background: var(--info-vlak); }
.pill-gefactureerd, .pill-ok { color: var(--ok-tekst); background: var(--ok-vlak); }
.pill-stil { color: var(--stil-tekst); background: var(--stil-vlak); }
/* Status van een dienst: vorm van .pill, met een bolletje in de statuskleur. */
.dienststatus::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--stip); }
.dienststatus-gepland { --stip: #7C8CA0; color: #3E4C5C; background: #EDF0F4; }
.dienststatus-te_factureren { --stip: #2563EB; color: var(--info-tekst); background: var(--info-vlak); }
.dienststatus-gefactureerd { --stip: #0F9D63; color: var(--ok-tekst); background: var(--ok-vlak); }
.dienststatus-vervallen { --stip: #98A3B3; color: var(--gedempt); background: var(--stil-vlak); }
.dienst-vervallen td, .dienst-vervallen .cel-hoofd { color: var(--gedempt); }
.dienst-vervallen .bedrag-doorgehaald { text-decoration: line-through; }
/* Geplande diensten waarvan de datum voorbij is: bevestigen of ging niet door. */
.te-bevestigen { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--let-op-vlak); border-radius: var(--radius-tegel); color: var(--let-op-tekst); background: var(--let-op-vlak); }
.te-bevestigen h2 { margin: 0 0 4px; font-size: 16px; color: inherit; }
.te-bevestigen p { margin: 0; font-size: 14px; }
.te-bevestigen-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.te-bevestigen-lijst { margin: 12px 0 0; padding: 0; list-style: none; }
.te-bevestigen-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid rgba(122, 78, 16, .2); }
.te-bevestigen-wat { display: flex; flex: 1 1 220px; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.te-bevestigen-object { font-weight: 600; }
.te-bevestigen-sub { font-size: 13px; }
.te-bevestigen-uren { display: flex; align-items: center; gap: 8px; }
.te-bevestigen-uren label { font-size: 13px; }
.te-bevestigen-uren input { width: 5.5em; padding: 7px 9px; border: 1px solid var(--rand-hover); border-radius: 8px; font: inherit; color: var(--tekst); background: #FFFFFF; }
.te-bevestigen-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
/* Regel onder de kerncijfers: geplande diensten in de komende vier weken. */
.gepland-regel { margin: 0; color: var(--tekst-2); font-size: 14px; }
.gepland-regel a { font-weight: 600; }

/* ------------------------------------------------------------------ planning */
/* Maandkalender: altijd zeven kolommen (table-layout: fixed), dus nooit breder dan de
   kaart. Blokjes in de kleur van hun status, met een streep van 3 px links. */
.kalender-kaart { display: flex; flex-direction: column; gap: 14px; }
.kalender-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kalender-titel { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.kalender-titel h2 { margin: 0; font-size: 20px; }
.kalender-vandaag { font-size: 13px; font-weight: 600; }
.kalender-pijl { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rand-veld); border-radius: var(--radius-veld); color: var(--tekst); font-size: 24px; line-height: 1; text-decoration: none; }
.kalender-pijl:hover { border-color: var(--rand-hover); }
.kalender-pijl.is-uit { visibility: hidden; }
.kalender-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kalender { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kalender th { padding: 6px 6px 8px; color: var(--gedempt); font-size: 12.5px; font-weight: 600; text-align: left; }
.kalender .dagnaam-kort { display: none; }
.kalender-dag { height: 118px; padding: 5px; border: 1px solid var(--rand); vertical-align: top; }
.kalender-dag.is-buiten { background: var(--vlak); }
.kalender-dag.is-buiten .dagnummer { color: var(--gedempt); font-weight: 500; }
.kalender-dag.is-vandaag { outline: 2px solid var(--accent); outline-offset: -2px; }
.dagnummer { display: block; margin: 0 0 4px 2px; color: var(--tekst); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dag-nieuw { display: block; min-height: 106px; border-radius: 6px; color: inherit; text-decoration: none; }
.dag-nieuw:hover { background: var(--vlak); }
.dag-diensten { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.dag-blok { display: block; min-width: 0; padding: 3px 5px 3px 6px; border-left: 3px solid var(--stip); border-radius: 4px; color: var(--blok-tekst); background: var(--blok-vlak); font-size: 12px; line-height: 1.3; text-decoration: none; }
.dag-blok:hover .dag-blok-wat { text-decoration: underline; }
.dag-blok-wat, .dag-blok-uren { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dag-blok-wat { font-weight: 700; }
.dag-blok-gepland { --stip: #7C8CA0; --blok-tekst: #3E4C5C; --blok-vlak: #EDF0F4; }
.dag-blok-te_factureren { --stip: #2563EB; --blok-tekst: var(--info-tekst); --blok-vlak: var(--info-vlak); }
.dag-blok-gefactureerd { --stip: #0F9D63; --blok-tekst: var(--ok-tekst); --blok-vlak: var(--ok-vlak); }
.dag-meer { display: block; margin-top: 3px; padding-left: 2px; color: var(--accent-hover); font-size: 12px; font-weight: 600; }
@media (max-width: 700px) {
    .kalender-kaart { padding: 14px 10px 16px; }
    .kalender th { padding: 4px 1px 6px; text-align: center; }
    .kalender .dagnaam-lang { display: none; }
    .kalender .dagnaam-kort { display: inline; }
    .kalender-dag { height: 70px; padding: 2px; }
    .dagnummer { margin: 0 0 2px 1px; font-size: 12px; }
    .dag-nieuw { min-height: 64px; }
    .dag-diensten { gap: 2px; }
    .dag-blok { padding: 2px 2px 2px 3px; border-radius: 3px; font-size: 10.5px; line-height: 1.25; }
    .dag-meer { margin-top: 2px; padding-left: 1px; font-size: 10.5px; line-height: 1.2; }
}

.samenvatting { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 16px 0 0; }
.samenvatting dt { color: var(--gedempt); }
.samenvatting dd { margin: 0; }

/* ------------------------------------------------------------------ diensten */
.filterbalk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 18px; }
.filterbalk .form-field { min-width: 160px; }
.totalenregel { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 14px; padding: 13px 18px; border: 1px solid var(--rand); border-radius: var(--radius-tegel); background: var(--pagina); font-variant-numeric: tabular-nums; }
.totalenregel > div { display: flex; align-items: baseline; gap: 8px; }
.totalenregel dt { color: var(--gedempt); font-size: 13px; }
.totalenregel dd { margin: 0; font-weight: 700; }
.tabel-kaart { padding: 0; }
.tabel-kaart .number { white-space: nowrap; }
.cel-hoofd { display: block; font-weight: 600; }
.cel-sub { display: block; color: var(--zacht); font-size: 12.5px; }
.rij-acties { text-align: right; white-space: nowrap; }
.rij-acties > * + * { margin-left: 12px; }
/* Rij-acties onder Instellingen (macro instellingen/_rij_acties.html): tekstknoppen
   in één rij, rechts uitgelijnd, in dezelfde vorm als het submenu. */
/* Op een brede kaart altijd één rij; de tekstkolommen breken af in plaats van
   de knoppen. In de blokweergave op een smalle kaart mogen ze doorlopen. De
   negatieve marge zet de knoptekst op één lijn met de tekst in de rij. */
.actieknoppen { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; margin-block: -5px; }
/* Meerdere badges in één cel, zoals Actief en 2FA bij Gebruikers. */
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.actieknop { display: inline-flex; align-items: center; padding: 6px 11px; border: 1px solid var(--rand-veld); border-radius: 8px; background: var(--pagina); color: var(--knop-tekst); font: 500 13.5px/1.2 var(--letter); text-decoration: none; white-space: nowrap; cursor: pointer; }
.actieknop:hover, .actieknop:focus-visible { border-color: var(--knop-rand-hover); color: var(--tekst); }
.actieknop-gevaar:hover, .actieknop-gevaar:focus-visible { border-color: var(--knop-gevaar-rand); color: var(--knop-gevaar-tekst); }
/* Naam met een badge ernaast, zoals 'dit ben jij'. De badge schuift niet onder
   de naam; een lange naam breekt zelf af. In de blokweergave mag het wel. */
.cel-kop { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; }
.cel-kop > .pill { flex: none; }
/* Een te lange naam kapt af met een ellipsis (volledige naam in het title-attribuut),
   zodat hij de tabel niet breder maakt dan de kaart. */
.cel-kop > .cel-hoofd { min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lijstpagina's onder Instellingen niet uitrekken bij weinig rijen. */
.instellingen-inhoud { container: instellingen / inline-size; max-width: 1100px; }
.instellingen-inhoud .table th, .instellingen-inhoud .table td { padding-left: 12px; padding-right: 12px; }
.instellingen-inhoud .table th:first-child, .instellingen-inhoud .table td:first-child { padding-left: 18px; }
.instellingen-inhoud .table th:last-child, .instellingen-inhoud .table td:last-child { padding-right: 18px; }
/* Actiekolom zo smal als de knoppen op één rij; de rest van de breedte gaat
   naar de tekstkolommen. */
.instellingen-inhoud .table .rij-acties { width: 1%; }
/* Smalle kaart (telefoon): elke rij als blok onder elkaar, zonder horizontale
   scroll. Cellen met data-label krijgen dat label ervoor. */
@container instellingen (max-width: 720px) {
    .instellingen-inhoud .table { min-width: 0; }
    .instellingen-inhoud .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .instellingen-inhoud .table, .instellingen-inhoud .table tbody, .instellingen-inhoud .table tr, .instellingen-inhoud .table td { display: block; }
    .instellingen-inhoud .table tr { padding: 14px 18px; border-top: 1px solid var(--lijn); }
    .instellingen-inhoud .table tbody tr:first-child { border-top: 0; }
    .instellingen-inhoud .table td, .instellingen-inhoud .table td:first-child, .instellingen-inhoud .table td:last-child { padding: 3px 0; border-top: 0; text-align: left; }
    .instellingen-inhoud .table td[data-label]::before { content: attr(data-label) ": "; color: var(--gedempt); font-size: 13px; }
    /* Een tweede regel in een gelabelde cel, zoals de tijd bij Laatste login, staat hier gewoon erachter. */
    .instellingen-inhoud .table td[data-label] .cel-sub { display: inline; margin-left: 6px; }
    .instellingen-inhoud .table .rij-acties { width: auto; padding-top: 12px; }
    .instellingen-inhoud .cel-kop { flex-wrap: wrap; }
    .instellingen-inhoud .cel-kop > .cel-hoofd { max-width: none; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
    .instellingen-inhoud .actieknoppen { flex-wrap: wrap; justify-content: flex-start; margin-block: 0; }
}
.selectiebalk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
/* De selectiekolom kost ruimte; iets minder zijmarge per cel houdt de
   dienstentabel binnen de kaart. */
.tabel-met-selectie th, .tabel-met-selectie td { padding-left: 11px; padding-right: 11px; }
.table .kolom-kies { width: 1%; padding-right: 0; }
.kolom-kies input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
/* Dienstenlijst zonder horizontale scroll. Brede kaart: zoals elke tabel, de
   rij-acties naast elkaar. Smallere kaart (1280 px scherm): minder celmarge en
   de knoppen rechts onder elkaar. Smalle kaart (tablet, telefoon): elke dienst
   als blok met labels, zoals onder Instellingen, het vinkje rechtsboven. */
.diensten-lijst { container: diensten / inline-size; }
.diensten-lijst .table { min-width: 0; }
.diensten-lijst .table .rij-acties { width: 1%; }
@container diensten (max-width: 1199px) {
    .diensten-lijst .table th, .diensten-lijst .table td { padding-left: 7px; padding-right: 7px; }
    .diensten-lijst .table th:first-child, .diensten-lijst .table td:first-child { padding-left: 14px; }
    .diensten-lijst .table th:last-child, .diensten-lijst .table td:last-child { padding-right: 14px; }
    .diensten-lijst .table .kolom-kies { padding-right: 0; }
    .diensten-lijst .actieknoppen { flex-direction: column; align-items: flex-end; margin-block: -3px; }
}
@container diensten (max-width: 919px) {
    .diensten-lijst .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .diensten-lijst .table, .diensten-lijst .table tbody, .diensten-lijst .table tr, .diensten-lijst .table td { display: block; }
    .diensten-lijst .table tr { position: relative; padding: 14px 18px; border-top: 1px solid var(--lijn); }
    .diensten-lijst .table tbody tr:first-child { border-top: 0; }
    .diensten-lijst .table td, .diensten-lijst .table td:first-child, .diensten-lijst .table td:last-child { padding: 3px 0; border-top: 0; text-align: left; }
    .diensten-lijst .table td[data-label]::before { content: attr(data-label) ": "; color: var(--gedempt); font-size: 13px; }
    .diensten-lijst .table td[data-label] .cel-sub { display: inline; margin-left: 6px; }
    .diensten-lijst .table .kolom-kies { position: absolute; top: 14px; right: 18px; width: auto; padding: 0; }
    .diensten-lijst .table .kolom-kies:empty { display: none; }
    /* Ruimte voor het vinkje rechtsboven. */
    .diensten-lijst .table td:nth-child(2) { padding-right: 32px; }
    .diensten-lijst .table .rij-acties { width: auto; padding-top: 12px; }
    .diensten-lijst .actieknoppen { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-block: 0; }
}

/* ------------------------------------------------------------------ dashboard */
.dash { container: dash / inline-size; display: flex; flex-direction: column; gap: 22px; }
.dash h1, .dash h2, .dash h3 { margin: 0; }
.dash .melding-info { margin: 0; }
.dash .te-bevestigen { margin: 0; }

.dash-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.dash-titel h1 { font: 700 30px/1.05 var(--kopletter); letter-spacing: -.03em; }
.dash-sub { margin: 4px 0 0; color: var(--gedempt); font-size: 14.5px; }
.dash-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.jaarkeuze { display: flex; align-items: center; gap: 8px; }
.jaarkeuze label { color: var(--gedempt); font-size: 13px; font-weight: 600; }
.jaarkeuze select { height: 36px; padding: 0 10px; border: 1px solid var(--rand-veld); border-radius: var(--radius-veld); background: var(--pagina); color: var(--tekst); font: 600 13.5px var(--letter); }
.periodetabs { display: flex; flex-wrap: wrap; gap: 6px; }
.periodetab { padding: 8px 14px; border: 1px solid var(--rand-veld); border-radius: var(--radius-veld); color: var(--gedempt); font: 600 13.5px/1 var(--letter); text-decoration: none; }
.periodetab:hover { border-color: var(--rand-hover); color: var(--tekst); }
.periodetab.is-actief { border-color: var(--donker); color: #FFFFFF; background: var(--donker); }

/* Kerncijfers: vier kleurtegels */
.kpi-tegels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi-tegel { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 18px 20px 20px; border-radius: var(--radius-kaart); }
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1; }
.kpi-stip { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 999px; }
.kpi-waarde { font: 700 32px/1.02 var(--kopletter); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-voet { font-size: 12.5px; }
.kpi-omzet { color: var(--omzet-tekst); background: var(--omzet-vlak); }
.kpi-omzet .kpi-stip { background: var(--omzet-stip); }
.kpi-omzet .kpi-voet { opacity: var(--omzet-voet); }
.kpi-btw { color: var(--btw-tekst); background: var(--btw-vlak); }
.kpi-btw .kpi-stip { background: var(--btw-stip); }
.kpi-btw .kpi-voet { opacity: var(--btw-voet); }
.kpi-reservering { color: var(--reservering-tekst); background: var(--reservering-vlak); }
.kpi-reservering .kpi-stip { background: var(--reservering-stip); }
.kpi-reservering .kpi-voet { opacity: var(--reservering-voet); }
.kpi-netto { color: var(--netto-tekst); background: var(--netto-vlak); }
.kpi-netto .kpi-stip { background: var(--netto-stip); }
.kpi-netto .kpi-voet { opacity: var(--netto-voet); }
.kpi-kosten { color: var(--kosten-tekst); background: var(--kosten-vlak); }
.kpi-kosten .kpi-stip { background: var(--kosten-stip); }
.kpi-kosten .kpi-voet { opacity: var(--kosten-voet); }
/* Negatief btw-saldo: 'Btw terug te ontvangen', groen. */
.kpi-btw.kpi-btw-terug { color: var(--netto-tekst); background: var(--netto-vlak); }
.kpi-btw.kpi-btw-terug .kpi-stip { background: var(--netto-stip); }
.kpi-btw.kpi-btw-terug .kpi-voet { opacity: var(--netto-voet); }
.kpi-uitleg { margin: 0; color: var(--zacht); font-size: 13px; }
/* Reservering vanaf 2026: link naar de uitleg en de waarschuwing als het loon ontbreekt. */
.kpi-link { color: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kpi-waarschuwing { font-size: 12px; line-height: 1.35; }
.kpi-waarschuwing a { color: inherit; font-weight: 600; }
.reservering-uitleg summary { cursor: pointer; font-weight: 700; }
.reservering-uitleg[open] summary { margin-bottom: 12px; }
.uitleg-regels { display: grid; max-width: 720px; margin: 0; }
.uitleg-regels > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--lijn); }
.uitleg-regels dt { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--tekst-2); font-size: 14.5px; }
.uitleg-regels dd { margin: 0; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uitleg-sub { color: var(--zacht); font-size: 12.5px; }
.uitleg-regels .uitleg-som dt, .uitleg-regels .uitleg-som dd { color: var(--tekst); font-weight: 600; }
.uitleg-regels .uitleg-totaal { border-top: 2px solid var(--rand); }
.uitleg-regels .uitleg-totaal dt, .uitleg-regels .uitleg-totaal dd { color: var(--tekst); font-size: 15px; font-weight: 700; }
.uitleg-zin { margin: 8px 0; color: var(--tekst-2); font-size: 14px; }
.reservering-uitleg .melding-let-op { max-width: 720px; margin-top: 12px; }
.uitleg-noot { max-width: 720px; margin: 12px 0 0; color: var(--zacht); font-size: 12.5px; }
.deel-km { color: var(--deel-kosten-tekst); background: var(--deel-kosten); opacity: .6; }
.stip-deel-km { background: var(--deel-kosten); opacity: .6; }

.dash-rij { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dash-rij-gelijk { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/* Kaarten: witte vlakken met een dunne rand, zonder schaduw */
.kaart { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px 22px 22px; border: 1px solid var(--rand); border-radius: var(--radius-kaart); background: var(--pagina); }
.kaart-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kaart-kop h2 { font: 700 17px/1.1 var(--kopletter); letter-spacing: -.015em; }
.kaart-meta { color: var(--zacht); font-size: 12.5px; }
a.kaart-meta { color: var(--accent); }
.kaart-body, .kaart-body-lijst { padding: 0; }
.kaart-noot { margin: 12px 0 0; color: var(--zacht); font-size: 12.5px; }

/* Omzet per maand */
.grafiek { position: relative; height: 200px; overflow-x: clip; }
.grafiek-raster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.grafiek-raster div { position: relative; border-top: 1px solid var(--lijn); }
.grafiek-raster span { position: absolute; top: -8px; left: 0; padding-right: 8px; background: var(--pagina); color: var(--zacht); font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.grafiek-staven { position: absolute; inset: 0 0 0 46px; display: flex; align-items: flex-end; }
.maand { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding: 0 4px; outline-offset: -2px; }
.maand-stapel { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 30px; height: 100%; }
.seg { width: 100%; }
.seg-netto { border-radius: 9px 9px 0 0; background: var(--accent); }
.seg-reservering { border-radius: 0 0 9px 9px; background: var(--accent-licht); }
.buiten-periode .seg-netto { background: var(--rand-hover); }
.buiten-periode .seg-reservering { background: var(--leeg); }
/* Kosten onderaan de staaf; bij verlies loopt de staaf onder de nullijn door. */
.seg-kosten { border-radius: 0 0 9px 9px; background: var(--grafiek-kosten); }
.seg-reservering:has(+ .seg-kosten) { border-radius: 0; }
.maand-onder { display: flex; flex: none; flex-direction: column; width: 100%; }
.seg-verlies { border-radius: 0 0 9px 9px; background: var(--grafiek-verlies); }
.buiten-periode .seg-kosten { background: var(--leeg); }
.buiten-periode .seg-verlies { background: var(--rand-hover); }
.zonder-omzet .maand-stapel::after { content: ""; display: block; height: 4px; border-radius: 99px; background: var(--leeg); }
.maand-bedrag { position: absolute; left: 50%; color: var(--tekst-2); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); pointer-events: none; }
.maand-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 3; padding: 5px 8px; border-radius: 7px; background: var(--donker); color: #FFFFFF; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .12s; }
.maand:hover .maand-tip, .maand:focus-visible .maand-tip { opacity: 1; }
/* Tooltips aan de randen van de grafiek niet laten uitsteken. */
.maand:nth-child(-n+2) .maand-tip { left: 0; transform: none; }
.maand:nth-last-child(-n+2) .maand-tip { right: 0; left: auto; transform: none; }
.grafiek-as { display: flex; margin-left: 46px; padding-top: 8px; }
.grafiek-as span { flex: 1; color: var(--zacht); font-size: 11.5px; text-align: center; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--gedempt); font-size: 12.5px; }
.legenda li { display: flex; align-items: center; gap: 7px; }
.stip { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; }
.stip-netto { background: var(--accent); }
.stip-reservering { background: var(--accent-licht); }
.stip-buiten { background: var(--rand-hover); }
.stip-deel-netto { background: var(--deel-netto); }
.stip-deel-ib { background: var(--deel-ib); }
.stip-deel-zvw { background: var(--deel-zvw); }
.stip-kosten { background: var(--grafiek-kosten); }
.stip-verlies { background: var(--grafiek-verlies); }
.stip-deel-kosten { background: var(--deel-kosten); }

/* Waar de omzet heen gaat */
.verdeelbalk { display: flex; height: 34px; gap: 2px; overflow: hidden; border-radius: 10px; }
.verdeelbalk > div { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; white-space: nowrap; }
.deel-netto { color: var(--deel-netto-tekst); background: var(--deel-netto); }
.deel-ib { color: var(--deel-ib-tekst); background: var(--deel-ib); }
.deel-zvw { color: var(--deel-zvw-tekst); background: var(--deel-zvw); }
.deel-kosten { color: var(--deel-kosten-tekst); background: var(--deel-kosten); }
.kv { margin: 0; }
.kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.kv dt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; color: var(--tekst-2); font-size: 14.5px; }
.kv dt .stip { width: 8px; height: 8px; }
.kv dd { margin: 0; font-size: 14.5px; white-space: nowrap; }
.kv-sub { color: var(--zacht); font-size: 12.5px; }
.kv .kv-totaal { margin-top: 5px; padding-top: 13px; border-top: 1px solid var(--rand); }
.kv .kv-totaal dt, .kv .kv-totaal dd { color: var(--tekst); font-size: 15px; font-weight: 700; }
/* Winst vóór belasting met daaronder wat ermee gebeurt. */
.kv .kv-winst { border-top: 1px solid var(--lijn); }
.kv .kv-winst dt, .kv .kv-winst dd { color: var(--tekst); font-weight: 600; }
.kv .kv-waarvan { padding-block: 6px; }
.kv .kv-waarvan dt { padding-left: 14px; }

/* Btw per kwartaal: vier tegels, daarna de meldingsregel */
/* Twee kolommen: met drie regels per kwartaal zijn vier tegels naast elkaar te smal. */
.kwartalen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kw { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 14px 14px; border-radius: var(--radius-tegel); background: var(--vlak); }
.kw b { color: var(--zacht); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kw-bedrag { color: var(--tekst); font: 700 20px/1.12 var(--kopletter); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw em { color: var(--zacht); font-size: 11.5px; font-style: normal; }
.kw.is-gekozen { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.kw-melding { margin: 0; }
/* Drie regels per kwartaal: btw verkopen, voorbelasting, saldo. */
.kw-regels { display: grid; gap: 2px; margin: 4px 0 2px; }
.kw-regels > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kw-regels dt { color: var(--zacht); font-size: 12px; }
/* Uitleg achter een term in de kwartaaltegel, zoals "btw op je kosten" achter Voorbelasting. */
.kw-regels .kw-uitleg { color: var(--gedempt); font-size: 11px; }
.kw-regels dd { margin: 0; color: var(--tekst-2); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-regels .kw-saldo { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--rand); }
.kw-regels .kw-saldo dt { color: var(--tekst-2); font-weight: 600; }
.kw-regels .kw-saldo dd.kw-bedrag { font-size: 18px; }
.kw-terug .kw-saldo dt, .kw-terug .kw-saldo dd.kw-bedrag { color: var(--ok-tekst); }
/* Printicoon rechtsboven in een kwartaaltegel en de knop 'Heel jaar' in de kop. */
.kw { position: relative; }
/* Kopregel van een kwartaaltegel: Q1 links, het groene printknopje rechts. */
.kw-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
/* Groen printknopje: #0B7A4D op #E3F5EC is 4,75:1; hover #15563C op #D2EEE1. */
.kw-print { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: #0B7A4D; background: #E3F5EC; box-shadow: none; }
.kw-print svg { display: block; width: 16px; height: 16px; }
.kw-print:hover { color: #15563C; background: #D2EEE1; }
.kw-print:focus-visible { outline: 3px solid #0F9D63; outline-offset: 2px; }
.kaart-kop-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
/* Groene tekstknop (Heel jaar), met de maten van .btn. */
.btn-groen { border-color: #C7E8D8; color: #0B7A4D; background: #E3F5EC; box-shadow: none; }
.btn-groen:hover { border-color: #C7E8D8; color: #15563C; background: #D2EEE1; }
.btn-groen:focus-visible { outline: 3px solid #0F9D63; outline-offset: 2px; }

/* Omzet per opdrachtgever */
.klant { display: flex; flex-direction: column; gap: 7px; padding: 13px 0; }
.klant:first-child { padding-top: 0; }
.klant:last-child { padding-bottom: 0; }
.klant-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.klant-naam { min-width: 0; font-size: 14.5px; font-weight: 600; }
.klant-bedrag { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.klant-sub { color: var(--zacht); font-size: 12.5px; }
.spoor { height: 9px; overflow: hidden; border-radius: 99px; background: var(--lijn); }
.spoor i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* Tabellen op het dashboard */
.tabelwrap { position: relative; overflow-x: auto; }
.dash-tabel { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.dash-tabel th, .dash-tabel td { padding: 12px; text-align: left; }
.dash-tabel th { padding-top: 0; padding-bottom: 11px; color: var(--zacht); font-size: 12px; font-weight: 600; line-height: 1.2; }
.dash-tabel td { border-top: 1px solid var(--lijn); }
.dash-tabel th:first-child, .dash-tabel td:first-child { padding-left: 0; }
.dash-tabel th:last-child, .dash-tabel td:last-child { padding-right: 0; }
.dash-tabel .r { text-align: right; white-space: nowrap; }
/* Facturen in een halve kaart: nummer, datum, bedrag en status breken niet af;
   alleen de opdrachtgever mag over twee regels. Twee klassen, zodat dit wint
   van .dash-tabel { min-width }. */
.dash-tabel.dash-tabel-smal { min-width: 0; }
.dash-tabel.dash-tabel-smal th, .dash-tabel.dash-tabel-smal td { padding-inline: 8px; }
.dash-tabel.dash-tabel-smal th:first-child, .dash-tabel.dash-tabel-smal td:first-child { padding-left: 0; }
.dash-tabel.dash-tabel-smal th:last-child, .dash-tabel.dash-tabel-smal td:last-child { padding-right: 0; }
.dash-tabel-smal td.num, .dash-tabel-smal td.r, .dash-tabel-smal td:last-child { white-space: nowrap; }
.obj { display: flex; flex-direction: column; gap: 1px; }
.obj b { font-size: 14.5px; font-weight: 600; }
.obj span { color: var(--zacht); font-size: 12.5px; }

/* Reiskosten */
.km-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.km-tegel { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px 14px; border-radius: var(--radius-tegel); background: var(--vlak); }
.km-label { color: var(--zacht); font-size: 12.5px; }
.km-waarde { font: 700 20px/1.12 var(--kopletter); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash .tussenkop { margin: 4px 0 0; color: var(--zacht); font-family: var(--letter); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.routes > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--lijn); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.routes > div:first-child { border-top: 0; }
.route-naar { color: var(--tekst-2); }

/* Raster volgens de mockup: onder 860px twee kolommen en gestapeld, onder 470px één kolom */
@container dash (max-width: 860px) {
    .kpi-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-rij, .dash-rij-gelijk { grid-template-columns: minmax(0, 1fr); }
    /* Te weinig ruimte voor een bedrag boven elke staaf; de tooltip blijft. */
    .maand-bedrag { display: none; }
}
@container dash (max-width: 470px) {
    .kpi-tegels { grid-template-columns: minmax(0, 1fr); }
    .dash-titel h1 { font-size: 26px; }
    .km-raster { grid-template-columns: 1fr; }
    /* Twaalf maandnamen op een telefoon: kleiner, zodat ze niet tegen elkaar lopen. */
    .grafiek-as span { font-size: 10px; letter-spacing: -.02em; }
    .grafiek-staven { left: 38px; }
    .grafiek-as { margin-left: 38px; }
    .maand { padding: 0 2px; }
}

/* ------------------------------------------------------------------ smalle schermen */
@media (max-width: 899px) {
    .dashboard-shell { display: block; }
    .sidebar { position: sticky; width: 100%; min-height: 0; padding: 12px 16px; }
    .brand { gap: 10px; }
    .brand-mark { width: 34px; height: 34px; }
    .brand-name { font-size: 15.5px; }
    .sidebar-nav { display: flex; margin-top: 12px; overflow-x: auto; }
    .nav-group { margin: 0; }
    .nav-group h2 { display: none; }
    .nav-items { display: flex; gap: 4px; }
    .nav-item { white-space: nowrap; }
    .dashboard-main { width: 100%; min-height: calc(100vh - 92px); margin-left: 0; }
    .topbar { min-height: 68px; padding: 14px 16px; }
    .dashboard-content { padding: 24px 16px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .wide { grid-column: auto; }
    .table { min-width: 700px; }
    .dashboard-footer { padding: 14px 16px; }
}

/* ------------------------------------------------------------------ wat is er nieuw */
.updates { display: grid; gap: 32px; max-width: 980px; }
.update-dag { display: grid; gap: 16px; }
.update-datum { margin: 0; color: var(--zacht); font-family: var(--letter) !important; font-size: 12px !important; font-weight: 600; letter-spacing: .08em !important; text-transform: uppercase; }
.update-item { display: grid; gap: 12px; min-width: 0; }
.update-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.card .update-kop h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
.update-tekst { max-width: 72ch; margin: 0; }
.update-afbeelding { display: block; overflow: hidden; border: 1px solid var(--rand); border-radius: var(--radius-tegel); background: var(--pagina); }
.update-afbeelding img { display: block; width: 100%; max-width: 100%; height: auto; }
.update-acties { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-update-nieuw { color: var(--ok-tekst); background: var(--ok-vlak); }
.pill-update-verbeterd { color: var(--info-tekst); background: var(--info-vlak); }
.pill-update-opgelost { color: var(--stil-tekst); background: var(--stil-vlak); }

/* ------------------------------------------------------------------ instellingen */
.submenu { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 0 0 24px; }
.submenu a { padding: 8px 14px; border: 1px solid var(--rand-veld); border-radius: var(--radius-veld); color: var(--gedempt); font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.submenu a:hover { border-color: var(--rand-hover); color: var(--tekst); }
.submenu a.is-actief { border-color: var(--donker); color: #FFFFFF; background: var(--donker); }
/* Met .card ervoor, zodat dit wint van .card h2 { margin-top: 0 }. */
.card .formulier-kop { margin: 28px 0 14px; font-size: 17px; }
.card .formulier-kop:first-of-type { margin-top: 0; }
.formulier-uitleg { margin: -8px 0 14px; }
/* Een los blokje onder het formulier, zoals Tweestapsverificatie bij een gebruiker. */
.card.blok-onder { margin-top: 20px; }
.blok-onder .blok-status { margin: 0 0 8px; }
.blok-onder .muted { margin: 0 0 16px; }
.waarschuwingen { margin-top: 18px; }

/* ------------------------------------------------------------------ facturen */
.pill-concept { color: var(--stil-tekst); background: var(--stil-vlak); }
.pill-verstuurd { color: var(--let-op-tekst); background: var(--let-op-vlak); }
.pill-betaald { color: var(--ok-tekst); background: var(--ok-vlak); }
.pill-vervallen { color: var(--fout-tekst); background: var(--fout-vlak); }
.pill-gecrediteerd { color: var(--stil-tekst); background: var(--stil-vlak); }
.pill-creditnota { color: var(--info-tekst); background: var(--info-vlak); }
.soort-badge { margin-top: 3px; }

/* ------------------------------------------------------------------ kosten */
.melding-let-op { margin: 0; padding: 10px 14px; border-radius: 8px; color: var(--let-op-tekst); background: var(--let-op-vlak); font-size: 14px; }
.waarschuwing-blok { display: grid; gap: 8px; }
/* display: grid hierboven wint anders van het hidden-attribuut. */
.waarschuwing-blok[hidden], .form-hint[hidden] { display: none; }
.vinkveld { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; cursor: pointer; }
.vinkveld input { flex: none; width: auto; margin-top: 3px; }
.form-label-los { font-size: 13px; font-weight: 600; }
.berekening { margin: 0; padding: 9px 0; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.kolom-bon { width: 1%; text-align: center; }
.bon-link { display: inline-flex; padding: 4px; border-radius: 6px; color: var(--accent); }
.bon-link:hover { background: var(--info-vlak); }
.table tfoot td { border-top: 2px solid var(--rand); font-weight: 700; }
.table tfoot .cel-sub { font-weight: 400; }
.melding-let-op.klein { margin-top: 6px; padding: 7px 12px; font-size: 13px; }
/* Schakelaar 'Verwijderde kosten tonen' onderaan het overzicht. */
.verwijderd-schakelaar { margin-top: 18px; }
.schakelaar { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst-2); font-size: 14px; text-decoration: none; }
.schakelaar-knop { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--rand-veld); transition: background .15s; }
.schakelaar-knop::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.schakelaar.is-aan .schakelaar-knop { background: var(--accent); }
.schakelaar.is-aan .schakelaar-knop::after { transform: translateX(14px); }
.rij-verwijderd td { color: var(--gedempt); }
.factuur-beheer { display: grid; gap: 14px; margin-bottom: 20px; }
.factuur-beheer > p { margin: 0; }
.beheer-rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.beheer-rij .form-field { min-width: 220px; }
.sectiekop { margin: 28px 0 12px; font-size: 17px; }
/* Eigen factuurnummer voor een factuur van vóór dit systeem: ingeklapt onder de acties,
   als klein grijs regeltje, zodat Markeer als verstuurd de hoofdweg blijft. */
.eigen-nummer { padding-top: 4px; }
.eigen-nummer summary { width: fit-content; color: var(--gedempt); font-size: 13px; font-weight: 400; text-decoration: underline; cursor: pointer; }
.eigen-nummer[open] { display: grid; gap: 10px; }
.eigen-nummer p { margin: 0; }

/* Het factuurblad volgt ontwerp/mockup-factuur.html (richting "Merkkop"). De
   indeling en kleuren blijven; de letters zijn Onest, met Bricolage Grotesque
   voor het woord FACTUUR en het totaalblok. Cijfers met tabular-nums. */
/* Indeling 01 (ontwerp/mockup-factuur-indelingen.html): het blad is een flex-kolom in
   A4-verhouding; de body groeit mee en het onderste blok zakt met margin-top:auto naar
   de onderkant. Bij veel regels groeit het blad gewoon door. */
.factuur-blad { display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; width: min(880px, 100%); margin: 0 auto; border: 1px solid #D9E1E7; background: #FFFFFF; color: #16314A; box-shadow: 0 20px 50px -34px rgba(22, 49, 74, .6); font-family: var(--letter); font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.factuur-blad table { width: 100%; border-collapse: collapse; }
.factuur-blad .r { text-align: right; }
.fb-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 38px; background: #16314A; color: #FFFFFF; }
.fb-merk { display: flex; align-items: center; gap: 13px; }
.fb-band svg { display: block; width: 40px; height: 40px; }
.fb-naam { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.fb-naam small { display: block; margin-top: 3px; color: #8FB0CC; font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.fb-titel { text-align: right; }
.fb-titel b { display: block; font-family: var(--kopletter); font-size: 26px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fb-titel span { display: block; margin-top: 5px; color: #8FB0CC; font-size: 14px; letter-spacing: .04em; }
.fb-body { display: flex; flex: 1 0 auto; flex-direction: column; gap: 22px; padding: 26px 38px 0; }
.fb-partijen { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
.fb-lab { margin-bottom: 6px; color: #5E7284; font: 700 10px/1 var(--letter); letter-spacing: .12em; text-transform: uppercase; }
.fb-klant b { font-size: 16px; font-weight: 700; }
.fb-klant address { color: #42596E; font-size: 13.5px; font-style: normal; line-height: 1.55; }
.fb-gegevens { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 10px 18px; }
.fb-gegevens .w { font-size: 13.5px; }
.fb-tabelwrap { position: relative; overflow-x: auto; }
/* Kolomkoppen links uitgelijnd, net als in de mockup; de cijfers eronder rechts. */
.factuur-blad .fb-regels thead th { padding: 9px 10px; background: #2B78CB; color: #FFFFFF; font: 700 10px/1 var(--letter); letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.fb-regels thead th:first-child, .fb-regels tbody td:first-child { padding-left: 12px; }
.fb-regels thead th:last-child, .fb-regels tbody td:last-child { padding-right: 12px; }
.fb-regels tbody td { padding: 9px 10px; border-bottom: 1px solid #EDF1F4; font-size: 13.5px; }
.fb-regels tbody tr:nth-child(even) { background: #F6F9FC; }
.fb-regels tbody b { display: block; font-size: 13.5px; font-weight: 600; }
.fb-regels tbody small { color: #5E7284; font-size: 12px; }
/* Het onderste blok zakt naar de onderkant: betaalblok links en optelling rechts op
   dezelfde onderlijn, daaronder de voetbalk. */
.fb-laatste { margin-top: auto; }
.fb-onder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 30px; }
.fb-betaal { flex: 1 1 250px; min-width: 0; }
.fb-kader { padding: 14px 16px; border-left: 3px solid #2B78CB; background: #F2F7FD; color: #45525F; font-size: 13.5px; }
/* Alleen hier rood (7,0:1 op #F2F7FD); de IBAN in de voetbalk blijft grijs. */
.fb-iban { display: block; margin-top: 6px; color: #A61B12; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fb-tot { display: flex; flex-direction: column; width: min(290px, 100%); }
.fb-tot div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; }
.fb-tot .l { border-bottom: 1px solid #EDF1F5; }
.fb-tot .eind { align-items: center; margin-top: 10px; padding: 14px 16px; border-radius: 4px; background: #2B78CB; color: #FFFFFF; font-size: 16px; font-weight: 600; }
.fb-tot .eind .num { font: 700 19px/1 var(--kopletter); }
/* De voetbalk staat in de body; de negatieve marge trekt hem terug tot de randen van het blad. */
.fb-voet { display: flex; flex-wrap: wrap; gap: 5px 20px; margin: 18px -38px 0; padding: 12px 38px; border-top: 1px solid #E7EDF2; background: #F6F9FC; color: #5E7284; font-size: 11px; }

/* Btw-overzicht (/btw/...): zelfde blad als de factuur, met blokken en een specificatie. */
.btw-blok { display: grid; gap: 8px; }
.btw-blokkop { margin: 0; color: #16314A; font: 700 12px/1 var(--letter); letter-spacing: .12em; text-transform: uppercase; }
/* De blokkop is een caption: die blijft bij de tabel, ook bij een nieuw vel. */
.btw-tabel caption.btw-blokkop { padding: 0 0 8px; caption-side: top; text-align: left; }
.btw-tabel td.r { white-space: nowrap; }
.btw-tabel .btw-saldo td { border-bottom: 0; font-weight: 600; }
.btw-tabel tbody td small { display: block; color: #5E7284; font-size: 11.5px; }
/* Btw- en KvK-nummer achter de naam van de opdrachtgever in de specificatie. */
.btw-tabel .btw-nummers { color: #5E7284; font-size: 11.5px; white-space: nowrap; }
.btw-tabel tbody td b { font-weight: 600; }
.factuur-blad .btw-tabel tbody tr.btw-totaal { background: #FFFFFF; }
.btw-tabel .btw-totaal td { border-top: 2px solid #16314A; border-bottom: 0; font-weight: 700; }
.btw-tabel .btw-totaal td small { font-weight: 400; }
.btw-tabel .btw-stil td, .btw-tabel .btw-leeg td { color: #5E7284; }
.btw-tabel .btw-leeg td { font-style: italic; }
.btw-tabel .btw-niet-aftrekbaar td:last-child { color: #A61B12; font-size: 12px; }
.btw-noot { margin: 0; color: #5E7284; font-size: 11.5px; }
.factuur-blad.btw-specificatie { margin-top: 24px; aspect-ratio: auto; }

@media (max-width: 640px) {
    .factuur-blad { aspect-ratio: auto; }
    .fb-band, .fb-body, .fb-voet { padding-inline: 18px; }
    .fb-voet { margin-inline: -18px; }
    .fb-partijen { grid-template-columns: minmax(0, 1fr); }
    .fb-regels { min-width: 520px; }
}

/* Afdrukken met de printknop van de browser: alleen het factuurblad, op A4. */
@media print {
    @page { size: A4; margin: 12mm; }
    body { min-width: 0; background: #FFFFFF; }
    .sidebar, .topbar, .dashboard-footer, .niet-afdrukken,
    .melding-info, .melding-fout, .melding-ok { display: none !important; }
    .dashboard-shell { display: block; min-height: 0; }
    .dashboard-main { width: 100%; min-height: 0; margin-left: 0; background: #FFFFFF; }
    .dashboard-content { width: 100%; padding: 0; }
    /* Minstens één A4 binnen de marges (297 - 2 x 12 = 273 mm, 1 mm speling tegen
       een leeg tweede vel). Past het niet, dan loopt het blad door op het volgende vel. */
    .factuur-blad { width: 100%; min-height: 272mm; aspect-ratio: auto; border: 0; box-shadow: none; }
    .factuur-blad, .factuur-blad * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .fb-tabelwrap { overflow: visible; }
    /* Kolomkop op elke pagina; een regel en het onderste blok niet over twee vellen.
       De laatste drie regels blijven bij het onderste blok, zodat er nooit een vel
       met alleen het totaal ontstaat. */
    .fb-regels thead { display: table-header-group; }
    .fb-regels tbody tr { break-inside: avoid; }
    .fb-regels tbody tr:nth-last-child(-n+3) { break-after: avoid; }
    .fb-laatste { break-before: avoid; break-inside: avoid; }
    /* Onderste blok in print iets compacter, zodat het vaker nog op het vel past. */
    .fb-kader { padding: 10px 14px; }
    .fb-iban { margin-top: 4px; }
    .fb-tot div { padding: 5px 0; }
    .fb-tot .eind { margin-top: 6px; padding: 10px 14px; }
    .fb-voet { margin-top: 12px; padding-block: 8px; }
    /* Btw-overzicht: de specificatie begint op een nieuw vel. Het eerste blad is
       compacter, zodat verkopen, voorbelasting en saldo samen op één vel passen;
       de blokken daar worden niet gesplitst. */
    .factuur-blad.btw-specificatie { margin-top: 0; break-before: page; }
    .btw-blad .fb-band { padding-block: 18px; }
    .btw-blad .fb-body { gap: 16px; padding-top: 18px; }
    .btw-blad .fb-regels tbody td { padding-block: 5px; }
    .btw-blad:not(.btw-specificatie) .btw-blok { break-inside: avoid; }
    .btw-tabel caption { break-after: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}