/* Hero-huisstijl (CLAUDE.md §8.1) — UI-overhaul 6 augustus 2026.
   Zelfde selectors en layout-mechanica als voorheen (niets aan gedrag of
   structuur veranderd); alleen het visuele systeem is vernieuwd: tokens,
   typografie, diepte (gelaagde schaduwen), chips, knoppen en dialogen. */
/* Ontwerpsysteem 1.0.5 (punt 4 van Interface, ticket 9777): eerst de tokens,
   ongewijzigd uit tokens/hero-tokens.css van het ontwerpsysteem. Nooit een
   waarde daarin wijzigen; een wens is een ticket aan Interface. */
@import url("hero-tokens.css");
/* De oude namen wijzen naar de rollen van de tokens: het blok van
   adoptie/finance.css van hero-ontwerpsysteem 1.0.5, letterlijk; alle 28
   namen gedekt. Nieuwe code gebruikt de rol (var(--h-tekst), var(--h-rand)),
   niet de oude naam. Tot 1.39.0 stonden hier eigen waarden. */
:root {
  --blauw: var(--hero-blue);
  --oranje: var(--hero-orange);                /* only a dot or a stripe */
  --blauw-black: var(--h-tekst);
  --blauw-bold: var(--hero-blue-bold);
  --blauw-soft: var(--h-info-bg);              /* a surface (15 uses in stijl.css) and a border (31 uses); in the second adoption pull request a border becomes var(--h-info-rand) and the one ring around a field (.va-veld input:focus) var(--h-focus-ring) */
  --soft: var(--h-info-bg);                    /* in stijl.css an alias of --blauw-soft: a surface */
  /* --hairline is a surface and a line in stijl.css (21 uses in the version of 9 October 2026: 8 surfaces, 13 lines).
   * This alias gives it the role of the surface. A line of --h-info-licht on white is nearly invisible, so the second
   * adoption pull request gives every line its role, with the three line roles of rapport 03 chapter 5 (the shell row:
   * --hero-border, -strong and -hairline) and tokens/BRON.md:
   *   line                                         role                  the lines of --hairline in stijl.css
   *   a separation inside a card, list or table    var(--p-lijn-zacht)   border-top or border-bottom of .lf-kop,
   *   (between rows, fields, groups or blocks)                            .levrij, .boek .veld, .boek td, .logrij,
   *                                                                       .duptabel td, .vertrouwen .band,
   *                                                                       .dgk-tabel .dgk-rij, .versie-blok +
   *                                                                       .versie-blok, .regelrij,
   *                                                                       #lijst-projectblokkades .rij,
   *                                                                       .dossier-herkomst (12)
   *   the edge around a card, block, field or      var(--h-rand)         border of .instel (1)
   *   table
   *   an edge that has to stand out (the hover     var(--h-rand-sterk)   none
   *   of a field or a clickable card, the dashed
   *   edge of an empty state)
   * The surfaces keep this alias: the background of .skelet, .skeletrij .blok, .tgstap.wacht, .instelkaart .kaartnoot,
   * .kaarticoon, #sectie-onderhoud .kaarticoon, .rolchip.grijs and .vrijregel.nvt (8). */
  --hairline: var(--h-info-licht);             /* a light surface; each line gets its role from the table above in the second adoption pull request */
  --blauw-hairline: var(--h-info-licht);       /* a surface in all 26 uses */
  --groen: var(--h-goed-stip);
  --rood: var(--h-fout-tekst);
  --geel: var(--hero-geel);
  --grijs: var(--h-tekst-3);
  --grijs-thin: var(--h-rand);
  --kaartrand: var(--h-rand);
  --bg: var(--h-canvas);
  --kaartschaduw: var(--hero-schaduw-s);
  --kaartschaduw-hoog: var(--hero-schaduw-l);
  --groen-bg: var(--h-goed-bg);
  --groen-tekst: var(--h-goed-tekst);
  --groen-rand: var(--h-goed-rand);
  --rood-bg: var(--h-fout-bg);
  --rood-rand: var(--h-fout-rand);
  --geel-bg: var(--h-waarschuwing-bg);
  --geel-tekst: var(--h-waarschuwing-tekst);
  --geel-rand: var(--h-waarschuwing-rand);
  --oranje-bg: var(--h-waarschuwing-bg);       /* the table names no role of its own for it: the surface of a warning */
  --oranje-donker: var(--hero-orange-medium);
  --focusring: var(--h-focus-ring);            /* the whole ring as a box-shadow, not a colour: check every use in the first adoption pull request (see the head) */

  /* Checked against the :root block of server/public/stijl.css of hero-app-finance-poc (head a009117) on 13 October
   * 2026, names only: all 28 names covered, none gone (adoptie/proef/finance-2026-10-13.md). */
}
/* De ring binnen een regel (Interface, commit 09f4f07, punt 4): 2 px Hero
   Blauw met 1 px wit, aan de binnenkant, voor de zes groepskoppen en regels
   van Overzicht, Bewaking en Steekproef. Dezelfde maten en kleuren als
   --h-focus-ring, maar inset. Deze naam staat niet in adoptie/finance.css
   van 1.0.5, daarom een eigen blok na het blok hierboven. */
:root {
  --focusring-binnen: inset 0 0 0 var(--h-focus-breedte) var(--h-focus), inset 0 0 0 calc(var(--h-focus-breedte) + var(--h-focus-afstand)) var(--h-vlak);
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focusring)}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:rgba(7,56,137,.16)}
html{scrollbar-gutter:stable}
body{font-family:'Exo',Arial,sans-serif;background:var(--bg);color:var(--blauw-black);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Zachte gloed bovenin de pagina — geeft de app lucht zonder de leesbaarheid te raken */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 340px at 12% -60px, rgba(7,56,137,.07), transparent 70%),
  radial-gradient(760px 300px at 88% -80px, rgba(244,96,21,.05), transparent 70%),
  var(--bg)}
/* Nette dunne scrollbalken in de interne scrollvakken */
.pdfvak::-webkit-scrollbar,.levlijst::-webkit-scrollbar,.valijst::-webkit-scrollbar,.dialoog::-webkit-scrollbar{width:9px;height:9px}
.pdfvak::-webkit-scrollbar-thumb,.levlijst::-webkit-scrollbar-thumb,.valijst::-webkit-scrollbar-thumb,.dialoog::-webkit-scrollbar-thumb{background:rgba(7,56,137,.18);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.pdfvak::-webkit-scrollbar-thumb:hover,.levlijst::-webkit-scrollbar-thumb:hover{background-color:rgba(7,56,137,.32)}

/* Dagstart (punt 2 van Interface, ticket 9777; component 13 van het ontwerpsysteem): één zin bovenaan, in inkt, met de oranje punt. */
.dagstart{max-width:880px;margin:4px 0 16px}
.dagstart-zin{font-size:var(--h-tekst-dagstart);line-height:var(--h-regel-dagstart);font-weight:600;letter-spacing:-.01em;color:var(--h-tekst);text-wrap:balance}
.dagstart-zin .skelet{min-width:min(520px,80%)}
.dagstart-punt{color:var(--hero-orange)}
.dagstart-sub{margin:8px 0 0;font-size:var(--h-tekst-basis);line-height:var(--h-regel-basis);color:var(--h-tekst-2)}
.dagstart-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:599px){.dagstart-zin{font-size:var(--h-tekst-groot);line-height:var(--h-regel-groot)}}

/* ---------- Header ---------- */
header{background:linear-gradient(118deg,#052a68 0%,var(--blauw) 42%,#0a49ad 100%);color:#fff;padding:14px 28px;display:flex;align-items:center;gap:18px;box-shadow:0 6px 22px rgba(3,21,63,.22);position:relative}
header::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
header img{height:46px;width:54px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
header .apptitel{font-weight:800;font-size:21px;letter-spacing:.3px;line-height:1.15}
header .appsub{font-weight:400;font-size:12.5px;opacity:.72;letter-spacing:.2px}
header .user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
header .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ff8a3d,var(--oranje));display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 0 0 2px rgba(255,255,255,.28),0 3px 8px rgba(0,0,0,.25)}

/* Omgevingsbalk (3 augustus 2026): met welke Business Central-omgeving praat de
   app? Productie is rustig blauw, een testomgeving nadrukkelijk geel — daar
   boek je niets echts en is productie onbereikbaar. */
.omgevingsbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px clamp(16px,2.5vw,48px);background:linear-gradient(180deg,#dcebf5,var(--blauw-soft));color:var(--blauw-black);font-size:13px;border-bottom:1px solid var(--kaartrand)}
.omgevingsbalk[hidden]{display:none}
.omgevingsbalk-naam{font-weight:800;color:var(--blauw);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;display:inline-flex;align-items:center;gap:7px}
.omgevingsbalk-naam::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blauw);box-shadow:0 0 0 3px rgba(7,56,137,.15)}
.omgevingsbalk-uitleg{color:var(--blauw-black);opacity:.8}
.omgevingsbalk-knop{margin-left:auto;border:1px solid rgba(7,56,137,.35);background:#fff;color:var(--blauw);border-radius:999px;padding:6px 14px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s}
.omgevingsbalk-knop:hover{border-color:var(--oranje);color:var(--oranje);box-shadow:0 2px 8px rgba(3,21,63,.08)}
.omgevingsbalk-knop[hidden]{display:none}
.omgevingsbalk-test{background:linear-gradient(180deg,#fff7d9,#ffefb8);border-bottom:2px solid var(--geel)}
.omgevingsbalk-test .omgevingsbalk-naam{color:var(--geel-tekst)}
.omgevingsbalk-test .omgevingsbalk-naam::before{background:#e3a600;box-shadow:0 0 0 3px rgba(227,166,0,.2)}
/* Tijdens het wisselen niets kunnen aanklikken: de app herstart en de data in
   beeld hoort bij de omgeving die je net verlaat. */
body.omgeving-wisselt .wrap{opacity:.45;pointer-events:none}

.wrap{max-width:1800px;margin:0 auto;padding:26px clamp(16px,2.5vw,48px) 64px}

/* ---------- Achtergrondstrip ---------- */
.robotstrip{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:14px 20px;display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap;box-shadow:var(--kaartschaduw)}
.puls{width:10px;height:10px;border-radius:50%;background:var(--groen);position:relative;flex:none;box-shadow:0 0 0 3px rgba(56,189,71,.16)}
.puls::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--groen);opacity:0;animation:puls 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.puls::after{animation:none}}
@keyframes puls{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.robotstrip b{font-weight:700;color:var(--h-tekst)}
.robotstrip .tijd{margin-left:auto;color:var(--grijs);font-size:13px}
/* "Sync nu": de achtergrond-import direct draaien. Verborgen voor niet-finance
   (de server weigert de POST sowieso — dit is alleen de nette kijk-versie). */
.sync-knop{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--kaartrand);background:#fff;color:var(--blauw);border-radius:999px;padding:7px 14px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,color .15s,box-shadow .15s}
.sync-knop svg{width:14px;height:14px;flex:none}
.sync-knop:hover:not(:disabled){border-color:var(--oranje);color:var(--oranje);box-shadow:0 2px 8px rgba(3,21,63,.1)}
.sync-knop:disabled{opacity:.55;cursor:default}
.sync-knop:disabled svg{animation:draai 1.1s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sync-knop:disabled svg{animation:none}}
body.geen-finance .sync-knop{display:none}

/* Rode meldstrip onder de robotstrip: verschijnt alleen als er vandaag een
 * (achtergrond)actie is mislukt; klik springt naar het tabblad Verwerkt.
 * Het kruisje rechts klikt de melding weg tot er een níeuwe fout bijkomt. */
.foutstrip{width:100%;background:var(--rood-bg);border:1px solid var(--rood-rand);border-radius:14px;display:flex;align-items:center;margin:0 0 16px;font-size:14px;color:var(--rood);box-shadow:var(--kaartschaduw)}
.foutstrip:hover{background:#fce7e9}
.foutstrip[hidden]{display:none}
.foutstrip-open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 0 12px 18px;background:none;border:0;font:inherit;font-size:inherit;color:inherit;text-align:left;cursor:pointer}
.foutstrip .foutstip{width:22px;height:22px;border-radius:50%;background:var(--rood);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 6px rgba(183,21,37,.35)}
.foutstrip .foutlink{margin-left:auto;font-weight:800;white-space:nowrap}
.foutstrip-sluit{flex:none;background:none;border:0;color:var(--rood);font-size:20px;line-height:1;padding:12px 16px;cursor:pointer;opacity:.55}
.foutstrip-sluit:hover{opacity:1}
@media (max-width:640px){.foutstrip-open{flex-wrap:wrap}.foutstrip .foutlink{margin-left:34px}}

/* ---------- Statistiektegels ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:24px}
.stat{position:relative;background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:18px 20px 16px;box-shadow:var(--kaartschaduw);overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--blauw),#0a49ad);border-radius:4px 0 0 4px}
/* Een tegel die iets telt, is een knop naar zijn lijst (16 oktober 2026); de tegel tijd bespaard is tekst en beweegt niet. */
button.stat{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.stat .n,button.stat .l{display:block}
button.stat:hover{box-shadow:var(--kaartschaduw-hoog);transform:translateY(-1px);border-color:var(--blauw-soft)}
button.stat:focus-visible{box-shadow:var(--focusring),var(--kaartschaduw-hoog)}
@media (prefers-reduced-motion:reduce){.stat,button.stat:hover{transition:none;transform:none}}
.stat .n{font-weight:800;font-size:32px;color:var(--blauw-black);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat .l{font-size:12.5px;color:var(--grijs);margin-top:4px;font-weight:600}
.stat.oranje::before{background:linear-gradient(180deg,#ff8a3d,var(--oranje))}
.stat.oranje .n{color:var(--blauw-black)}

/* ---------- Tabbladen ----------
 * Sticky: de tab-/drempelbalk blijft bovenaan staan tijdens het scrollen door
 * lange lijsten. Dekkende (geblurde) achtergrond zodat rijen er netjes onder
 * verdwijnen; z-index onder de zwevende divisie-dropdown (30) en dialogen (50+). */
.tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 0}
.tab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--kaartrand);background:#fff;color:var(--blauw);font-family:'Exo';font-weight:700;font-size:13.5px;padding:9px 17px;border-radius:999px;cursor:pointer;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,background-color .15s,box-shadow .15s,color .15s}
.tab svg{width:15px;height:15px;flex:none;opacity:.65}
.tab.actief svg{opacity:1}
.tab:not(.actief):hover{border-color:var(--blauw);box-shadow:0 2px 8px rgba(3,21,63,.09)}
.tab.actief{background:#fff;color:var(--blauw);border-color:var(--kaartrand);box-shadow:inset 0 -2px 0 var(--oranje)}
.tab .badge{display:inline-block;min-width:22px;text-align:center;background:var(--grijs-thin);color:var(--blauw-black);border-radius:999px;font-size:12px;font-weight:600;padding:2px 7px;box-shadow:none}
.tab.actief .badge{background:var(--blauw-soft);color:var(--blauw);box-shadow:none}
.tab.actief:focus-visible{box-shadow:var(--focusring),inset 0 -2px 0 var(--oranje)}
.drempel{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--grijs);font-weight:600}
.drempel input{accent-color:var(--oranje)}
.drempel b{color:var(--blauw);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Filterbalk ---------- */
.filters{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.filters label{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
.filters select{font-family:'Exo';font-size:13px;font-weight:600;color:var(--blauw);border:1px solid var(--kaartrand);border-radius:999px;padding:8px 32px 8px 14px;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073889' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
.filters select:hover{border-color:var(--blauw);box-shadow:0 2px 8px rgba(3,21,63,.09)}
.filters select:focus-visible{box-shadow:var(--focusring),0 1px 3px rgba(3,21,63,.06)}
.filters .wis{font-family:'Exo';font-size:12px;font-weight:700;color:var(--oranje);background:none;border:none;cursor:pointer;display:none;text-decoration:underline;text-underline-offset:3px}
.filters .wis.zien{display:inline}
.filters .zoek{position:relative;display:flex;align-items:center}
.filters .zoek::before{content:"";position:absolute;left:14px;width:14px;height:14px;pointer-events:none;background:var(--grijs);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat}
.filters .zoek input{font-family:'Exo';font-size:13px;font-weight:600;color:var(--blauw);border:1px solid var(--kaartrand);border-radius:999px;padding:8px 14px 8px 36px;background:#fff;min-width:230px;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,box-shadow .15s}
.filters .zoek input::placeholder{color:var(--grijs);font-weight:500}
.filters .zoek input:focus{outline:none;border-color:var(--oranje);box-shadow:var(--focusring)}

/* ---------- Paneelkop en knoppen ---------- */
.paneelkop{display:flex;align-items:center;gap:12px;margin:6px 0 14px;flex-wrap:wrap}
.paneelkop h2{font-weight:800;font-size:19px;color:var(--blauw-black);letter-spacing:-.2px}
.paneelkop .sub{font-size:13px;color:var(--grijs)}
.btn{font-family:'Exo';font-weight:800;font-size:13px;border:none;border-radius:10px;padding:10px 17px;cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .1s,color .15s}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn,.tab{transition:none}.btn:active{transform:none}}
.btn-oranje{background:var(--blauw);color:#fff;box-shadow:none}
.btn-oranje:hover{background:var(--blauw-bold)}
/* In a closed row the actions are secondary: the one blue button sits in the opened invoice. */
.rij:not(.open) .rijkop .btn-oranje{background:#fff;color:var(--blauw);border:1px solid var(--kaartrand);box-shadow:none}
.rij:not(.open) .rijkop .btn-oranje:hover{background:var(--blauw-hairline);border-color:var(--blauw-soft)}
.rij:not(.open) .rijkop .btn-oranje:focus-visible{box-shadow:var(--focusring)}
/* One filled blue button per screen: the answer buttons of each question in Vragen, the sample button and the line editors inside an opened invoice are secondary too. */
.vr-ok.btn-oranje,.vr-verstuur.btn-oranje,#ov-steekproef,.btn-oranje[data-regel-opslaan],.btn-oranje[data-boekregel-oms-opslaan],.btn-oranje[data-boekregel-splits-opslaan]{background:#fff;color:var(--blauw);border:1px solid var(--kaartrand)}
.vr-ok.btn-oranje:hover,.vr-verstuur.btn-oranje:hover,#ov-steekproef:hover,.btn-oranje[data-regel-opslaan]:hover,.btn-oranje[data-boekregel-oms-opslaan]:hover,.btn-oranje[data-boekregel-splits-opslaan]:hover{background:var(--blauw-hairline);border-color:var(--blauw-soft)}
.btn-stil{background:#fff;color:var(--blauw);border:1px solid var(--kaartrand);box-shadow:0 1px 3px rgba(3,21,63,.05)}
.btn-stil:hover{background:var(--blauw-hairline);border-color:var(--blauw-soft)}
/* Afwijzen is stil tot je hem nodig hebt: neutrale rand, pas rood op hover.
 * Alleen de primaire actie per rij (blauw) vraagt om aandacht. */
.btn-rood{background:#fff;color:var(--rood);border:1px solid var(--grijs-thin);box-shadow:0 1px 3px rgba(3,21,63,.04)}
.btn-rood:hover{background:var(--rood-bg);border-color:var(--rood-rand)}
.btn-rood-vol{background:linear-gradient(180deg,#cb1c2c,var(--rood));color:#fff;box-shadow:0 3px 10px rgba(183,21,37,.35)}
.btn-rood-vol:hover{background:#8f1220}
.btn-alles{margin-left:auto}
.acties{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Overlays en dialogen ---------- */
.overlay{position:fixed;inset:0;background:rgba(3,21,63,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.overlay.zien{display:flex}
.dialoog{background:#fff;border-radius:18px;padding:26px;max-width:440px;width:100%;box-shadow:0 30px 80px rgba(3,21,63,.4),0 2px 8px rgba(3,21,63,.12);animation:dialoog-in .22s cubic-bezier(.2,.9,.3,1.1)}
@keyframes dialoog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dialoog{animation:none}}
.dialoog.breed{max-width:600px;max-height:88vh;overflow:auto}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.lf-grid .vol{grid-column:1 / -1}
.lf-kop{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--blauw);border-top:1px solid var(--hairline);margin:16px 0 2px;padding-top:12px}
.lf-kop:first-child{border-top:none;margin-top:2px;padding-top:0}
/* Uitlegregel onder een dialoogveld (bijv. vervaldatum: handmatig vs berekend). */
.lf-noot{font-size:11px;color:var(--grijs);margin-top:3px;line-height:1.35}
/* Urenregels van een teamfactuur: per consultant uren + tarief corrigeren
   (één totaalveld kan niet — zie openLeesfout). */
.lf-regels{margin:4px 0 2px}
.lf-regelrij{display:grid;grid-template-columns:1fr 88px 108px 104px;gap:8px;align-items:center}
.lf-regelrij input{margin-bottom:6px}
.lf-regelkop{font-size:11px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.lf-regelnaam{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:6px}
.lf-regelbedrag{font-size:13px;text-align:right;color:var(--grijs);padding-bottom:6px}
@media (max-width:560px){
  .lf-regelrij{grid-template-columns:1fr 70px 84px}
  .lf-regelkop span:last-child,.lf-regelbedrag{display:none}
}
/* Volledig aanpasbare regeltabel (alles-aanpasbaar, 7 aug 2026): omschrijving,
   consultant, uren × tarief of bedrag, verwijderen en toevoegen. Bij een
   multiperiode-factuur komt er een startdatum-kolom bij. */
.lf-regels-vol .lf-regelrij{grid-template-columns:minmax(90px,1.4fr) minmax(80px,1fr) 64px 88px 92px 62px 34px 26px}
.lf-regels-vol.met-periode .lf-regelrij{grid-template-columns:minmax(80px,1.3fr) minmax(72px,1fr) 128px 60px 84px 88px 62px 34px 26px}
.lf-regels-vol .regelknop.rood{padding:2px 4px;margin-bottom:6px;justify-self:center}
.lf-regel-onk{margin-bottom:6px;justify-self:center}
/* Btw-tarief per gelezen regel: smal, zelfde hoogte als de invoervelden. */
.lf-regel-btw{margin-bottom:6px;width:100%;font-size:12px}
.lf-regel-plus{margin:2px 0 6px;font-size:12px}
@media (max-width:560px){
  .lf-regels-vol .lf-regelrij,.lf-regels-vol.met-periode .lf-regelrij{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
}
/* Live factuurbedrag in de leesfout-dialoog: bij een projectfactuur volgt het
   totaal uit de regels, dus een uren-/tariefcorrectie verandert het te betalen
   bedrag — dat moet zichtbaar zijn vóór het opslaan. */
.lf-totaal{margin:8px 0 2px;padding:10px 12px;border:1px solid var(--blauw-soft);border-radius:10px;background:var(--blauw-hairline);font-size:13px}
.lf-totaal-split{color:var(--grijs)}
.lf-totaal-anders{border-color:var(--geel-rand);background:var(--geel-bg)}
.lf-totaal-anders .lf-noot{color:var(--blauw-black)}
/* Verhogingspoort (7 aug 2026): een correctie die het te betalen bedrag
   verhoogt kleurt rood en vraagt een expliciete bevestiging + reden — de
   server weigert hem anders. Nooit ongemerkt meer betalen dan het document. */
.lf-totaal-hoger{border-color:var(--rood);background:#fdf0f1}
.lf-totaal-hoger .lf-noot{color:var(--rood)}
.lf-verhoog{margin:6px 0 2px;padding:10px 12px;border:1px solid var(--rood);border-radius:10px;background:#fdf0f1}
.lf-verhoog .lf-verhoog-vink{display:flex;gap:8px;align-items:flex-start;font-size:12px;font-weight:700;color:var(--rood);margin:0 0 8px}
.lf-verhoog .lf-verhoog-vink input{width:auto;margin-top:1px}
.dialoog h3{font-weight:800;font-size:17px;color:var(--blauw);margin-bottom:4px;letter-spacing:-.2px}
.dialoog .dsub{font-size:13px;color:var(--grijs);margin-bottom:14px;line-height:1.55}
.dialoog label{display:block;font-size:12px;font-weight:700;color:var(--blauw);margin:10px 0 4px}
.dialoog select,.dialoog textarea,.dialoog input,.dialoog .tekstvak{width:100%;font-family:'Exo';font-size:14px;border:1px solid var(--grijs-thin);border-radius:10px;padding:9px 11px;background:#fff;color:var(--blauw-black);transition:border-color .15s,box-shadow .15s}
.dialoog select:hover,.dialoog textarea:hover,.dialoog input:hover,.dialoog .tekstvak:hover{border-color:var(--blauw-soft)}
.dialoog select:focus,.dialoog textarea:focus,.dialoog input:focus{border-color:var(--oranje)}
/* Bewerkbaar tekstvak in plaats van een <input>: houdt Chrome's "IBAN opslaan
   op dit apparaat?"-popup weg (autofill kijkt alleen naar formuliervelden). */
.dialoog .tekstvak{min-height:35px;line-height:15px;padding:9px 11px;white-space:nowrap;overflow-x:auto;box-sizing:border-box}
.dialoog .tekstvak:focus{outline:none;border-color:var(--oranje);box-shadow:var(--focusring)}
.dialoog textarea{resize:vertical;min-height:64px}
/* Maskeert tekens zoals een wachtwoordveld, maar zonder type="password" —
   anders biedt de browser overal in de app aan om wachtwoorden op te slaan. */
input.gemaskeerd{-webkit-text-security:disc}
.dialoog .dknoppen{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
/* Sluitkruisje rechtsboven in elke dialoog (app.js injecteert het). Het anker is
   sticky met hoogte 0: in een scrollende (brede) dialoog blijft het kruisje in
   beeld zonder de layout te verschuiven. */
.dialoog-sluit-anker{position:sticky;top:0;height:0;display:flex;justify-content:flex-end;z-index:6}
.dialoog-sluit{margin:-13px -13px 0 0;width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:var(--blauw-hairline);color:var(--grijs);cursor:pointer;transition:background-color .15s,color .15s}
.dialoog-sluit:hover{background:var(--blauw-soft);color:var(--blauw)}
/* De titel niet onder het kruisje laten doorlopen. */
.dialoog>h3{margin-right:30px}
/* De generieke bevestiging kan bóven een andere open dialoog verschijnen
   (sluitkruisje met niet-opgeslagen wijzigingen) en moet daar dan op liggen. */
#bevestig-overlay{z-index:55}
.levlijst{max-height:230px;overflow:auto;border:1px solid var(--grijs-thin);border-radius:10px;margin-top:6px}
.levlijst:empty{display:none}
.levrij{display:block;width:100%;text-align:left;font-family:'Exo';font-size:13px;color:var(--blauw-black);background:#fff;border:none;border-bottom:1px solid var(--hairline);padding:9px 12px;cursor:pointer;transition:background-color .12s}
.levrij:last-child{border-bottom:none}
.levrij:hover{background:var(--blauw-hairline)}
.levrij.gekozen{background:var(--blauw-soft)}
.levrij b{font-weight:700;color:var(--blauw)}
.levrij small{color:var(--grijs)}
.levleeg{padding:14px 12px;font-size:13px;color:var(--grijs)}
/* Persoonkiezer (versie 1.8.4, wens van de CFO: scrollen en aanklikken).
   In de doorstuurdialoog staat de lijst vast in de dialoog; in de instellingen
   zweeft hij onder het veld (app.js, plaatsZwevendeLijst). Regels van minstens
   44 px hoog, zodat je ze op een telefoon met de duim raakt. */
.persoonlijst .persoonrij{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:44px}
.persoonlijst .persoonrij b{font-weight:700;color:var(--blauw-black)}
.persoonlijst .persoonrij small{font-size:12px;overflow-wrap:anywhere}
.persoonlijst .persoonrij.gekozen b{color:var(--blauw)}
.persoonlijst .persoonrij.actief{background:var(--blauw-hairline);box-shadow:inset 3px 0 0 var(--oranje)}
#doorstuur-lijst{max-height:260px;margin-bottom:6px}
.persoonlijst.zwevend{position:fixed;z-index:60;margin:0;background:#fff;max-height:300px;box-shadow:0 12px 32px rgba(3,21,63,.18)}
.persoonlijst.zwevend[hidden]{display:none}
/* Teamfactuur: persoonskiezer boven de inzet-lijst ("voor wie koppel je?") */
.inzetpersonen{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 8px}
.inzetpersonen .inzetpersoon{display:inline-block;width:auto;flex:1 1 160px;border:1px solid var(--grijs-thin);border-radius:10px;border-bottom:1px solid var(--grijs-thin)}
.inzetpersonen .inzetpersoon.gekozen{border-color:var(--oranje);box-shadow:0 0 0 1px var(--oranje)}
/* Alles in één keer koppelen (wens finance, 22 september 2026): elke rij is een
 * teamlid of een factuurregel, met de stand rechts en een kies/wijzig-knop
 * erachter. Rijen staan onder elkaar — je loopt ze van boven naar beneden af. */
.inzetpersonen .inzetrij{flex:1 1 100%;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.inzetpersonen .inzetrij b{flex:0 1 auto}
.inzetpersonen .inzetrij small{flex:0 1 auto}
.inzetrij-st{margin-left:auto;font-size:12px;color:var(--grijs);white-space:nowrap}
.inzetrij-st.inzet-klaar{color:var(--groen-tekst);font-weight:700}
.inzetrij-st.inzet-voorstel{color:var(--oranje-donker);font-weight:700}
.inzetrij-st.inzet-leeg{color:var(--rood);font-weight:700}
.inzetrij-knop{font-size:12px;font-weight:800;color:var(--oranje);border:1px solid var(--grijs-thin);border-radius:8px;padding:1px 8px;white-space:nowrap}
.inzetrij:hover .inzetrij-knop{border-color:var(--oranje)}
/* Inzet van een andere leverancier: zichtbaar (een verkeerd herleide afzender
 * moet te repareren blijven) maar onmiskenbaar gemarkeerd. */
.inzet-vreemd{color:var(--rood);font-weight:700}
.levmeer{color:var(--oranje);font-weight:800}
/* Doorzoekbare divisie-dropdown, inline in de boekingskolom: zweeft onder het
 * tekstveld (zelfde lijststijl als de kiezer-dialogen). */
.divcombo{position:relative;display:inline-block}
.divcombo .divlijst{display:none;position:absolute;top:calc(100% + 4px);right:0;z-index:30;width:300px;max-width:70vw;margin-top:0;background:#fff;box-shadow:0 12px 32px rgba(3,21,63,.18);border-radius:10px}
.divcombo .divlijst.zien{display:block}
/* "aanpassen"-linkjes bij elk boekingsveld: standaard rustig grijs zodat de
 * boeking zelf leesbaar blijft; oranje zodra je over de regel beweegt (of met
 * het toetsenbord op de knop staat). "kies" (verplichte keuze, klasse
 * .verplicht) blijft altijd oranje — daar moet nog iets gebeuren. */
.veld .bewerk{font-size:11px;font-weight:700;color:var(--grijs);background:none;border:none;cursor:pointer;padding:0;margin-left:8px;font-family:'Exo';text-decoration:underline dotted;text-underline-offset:3px;transition:color .15s}
.veld:hover .bewerk,.veld:focus-within .bewerk,.veld .bewerk:focus-visible,.veld .bewerk.verplicht{color:var(--oranje)}
/* Potlood-variant (wens ontwikkelaar, 7 aug 2026): het "aanpassen"-tekstknopje is
 * een klein potlood-icoon geworden; "kies" (verplicht) blijft tekst. */
.veld .bewerk.potlood{text-decoration:none;padding:2px 3px;border-radius:6px;display:inline-flex;vertical-align:-2px}
.veld .bewerk.potlood svg{width:12px;height:12px}
.veld .bewerk.potlood:hover{background:var(--blauw-soft)}
/* Klikbare veldwaarde: de waarde zélf opent dezelfde bewerkflow als het
 * potlood. Ziet eruit als gewone tekst; pas bij hover/focus verschijnt de
 * stippellijn zodat de boeking rustig leesbaar blijft. */
.veld .veldklik{background:none;border:none;padding:0;margin-left:auto;font:inherit;color:inherit;text-align:right;cursor:pointer;border-radius:6px}
.veld .veldklik b,.veld .veldklik mark{pointer-events:none}
.veld .veldklik:hover b,.veld .veldklik:focus-visible b{text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--oranje)}
.veld .veldklik:focus-visible{outline:2px solid var(--oranje);outline-offset:2px}
/* Klikbare boekingsregel/totaalregel: klik = direct bewerken. */
tr.regelklik{cursor:pointer}
tr.regelklik:hover td{background:var(--blauw-hairline)}
/* Factuurbrede btw-keuze in de veldrij (kostenfacturen). */
.veld .veldbtw{margin-left:auto}
.veld .veldbtw .regelbtw{margin:0}

/* ---------- Factuurrijen ---------- */
.rij{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;margin-bottom:10px;overflow:hidden;box-shadow:var(--kaartschaduw);transition:opacity .35s,transform .35s,box-shadow .2s,border-color .2s}
.rij:hover,.rij.open{border-color:var(--blauw-soft);box-shadow:var(--kaartschaduw-hoog)}
.rij.open{border-color:rgba(7,56,137,.28)}
.rij.weg{opacity:0;transform:translateX(24px)}
/* Boeking loopt op de achtergrond (24 aug 2026): de rij is zichtbaar bezig —
 * gedimd met een zachte puls — en de knoppen staan op slot; de gebruiker kan
 * intussen gewoon door met de volgende factuur. */
.rij.boeken{opacity:.62;animation:rij-boeken 1.6s ease-in-out infinite}
@keyframes rij-boeken{0%,100%{opacity:.62}50%{opacity:.82}}
/* Gedeelde kolommen over álle rijen heen (subgrid), zodat chips, bedragen en
 * knoppen verticaal uitlijnen in plaats van per rij te verspringen. Vier vaste
 * kolommen, elk met twee regels die op de naam en de detailregel uitlijnen:
 *
 *   [ leverancier          ] [ administratie · type · verval ] [        ] [ knop ]
 *   [ inzet · periode      ] [ status / reden                ] [ bedrag ] [ knop ]
 *
 * De chips staan dus náást de naam en gebruiken de hoogte die de twee
 * tekstregels toch al innemen: elke rij heeft daardoor precies dezelfde vorm
 * en hoogte. Op smalle schermen (media query onderaan) valt dit terug op de
 * oude flex-wrap-layout. */
#lijst-goed,#lijst-uitz,#lijst-tergoed,#lijst-alles{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,auto) max-content max-content;column-gap:16px}
#lijst-goed>*,#lijst-uitz>*,#lijst-tergoed>*,#lijst-alles>*{grid-column:1/-1}
#lijst-goed .rij,#lijst-uitz .rij,#lijst-tergoed .rij,#lijst-alles .rij{display:grid;grid-template-columns:subgrid}
.rij>*{grid-column:1/-1}
.rijkop{display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto;align-items:center;row-gap:4px;padding:15px 18px;cursor:pointer}
.rijkop .hoofd{grid-area:1/1/3/2;min-width:0}
.rijkop .badges{grid-area:1/2/2/3;justify-self:start;align-self:end}
.rijkop .scores,.rijkop .reden,.rijkop .tgstatus{grid-area:2/2/3/3;justify-self:start;align-self:start;min-width:0}
.rijkop .bedrag{grid-area:1/3/3/4;justify-self:end}
/* Actieknoppen rechts, tegen de rechterrand aan: de primaire knop staat op
 * elke rij op dezelfde plek, ook als de ene rij twee knoppen heeft en de
 * andere vier (Terughalen · Doorsturen · Afwijzen · Goedkeuren). */
.rijkop .acties{grid-area:1/4/3/5;display:flex;justify-content:flex-end;flex-wrap:nowrap;gap:8px;align-items:center}
.scores{display:flex;gap:6px;align-items:center}
.rij .lev{font-weight:700;color:var(--blauw-black);font-size:15px}
/* De naam is een knop die de rij opent (punt 7 van Interface, ticket 9777): zonder rand of vlak, met de letter van de rij; de focusring komt van de algemene regel voor knoppen. */
.rijkop .lev{display:block;max-width:100%;background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;font-size:15px;color:var(--blauw-black);text-align:left;cursor:pointer;border-radius:4px}
.rij .det{font-size:13px;color:var(--grijs)}
/* Eén regel per veld, met … bij een lange omschrijving (volledige tekst in de
 * tooltip en in het detail): anders is de ene rij twee regels hoog en de
 * andere één, en dan lijnt niets meer op. */
.rijkop .hoofd .lev,.rijkop .hoofd .det{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Chips: consistent afgerond, rustige tinten, gelijke hoogte */
.bv{font-size:12px;font-weight:700;color:var(--blauw);background:var(--blauw-soft);border-radius:999px;padding:3px 11px;white-space:nowrap}
.type{font-size:12px;font-weight:700;color:var(--geel-tekst);background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:999px;padding:2px 11px;white-space:nowrap}
.type.credit{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand)}
.lev-bc{font-size:12px;font-weight:600;color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:999px;padding:2px 11px;white-space:nowrap}
/* Vervaldatum-badge: blauw = ruim op tijd, geel = vervalt binnen een week, rood = al verstreken */
.verval{font-size:12px;font-weight:600;color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:999px;padding:2px 11px;white-space:nowrap}
.verval.snel{color:var(--geel-tekst);background:var(--geel-bg);border-color:var(--geel-rand)}
.verval.te-laat{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand)}
.badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bedrag{font-weight:800;color:var(--h-tekst);font-size:16.5px;text-align:right;white-space:nowrap;margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.bedrag small{display:block;font-weight:500;font-size:11.5px;color:var(--grijs);letter-spacing:0}
.score{font-size:12px;font-weight:700;border-radius:999px;padding:4px 12px;white-space:nowrap}
.score.hoog{background:var(--groen-bg);color:var(--groen-tekst)}
.score.hoog::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--groen);margin-right:6px;vertical-align:1px}
.reden{font-size:12.5px;font-weight:700;color:var(--rood);background:var(--rood-bg);border-radius:999px;padding:4px 12px;white-space:nowrap}
/* Herkomst-label in de Alles-lijst: uit welke werklijst komt deze rij. */
.lijstlabel{font-size:12px;font-weight:700;border-radius:999px;padding:4px 12px;white-space:nowrap}
.lijstlabel.goed{background:var(--groen-bg);color:var(--groen-tekst)}
.lijstlabel.tergoed{background:var(--blauw-soft);color:var(--blauw)}
.lijstlabel.uitz{background:var(--rood-bg);color:var(--rood)}
.reden.geel{color:var(--geel-tekst);background:var(--geel-bg)}
.reden.opgelost{color:var(--groen-tekst);background:var(--groen-bg)}

/* ---------- Factuurdetail ---------- */
.detail{display:none;border-top:1px solid var(--kaartrand);background:linear-gradient(180deg,#f6f9fc,var(--blauw-hairline));padding:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.rij.open .detail{display:grid}
/* Omwisselbare indeling (wens finance): document rechts zoals in BC. Volle-breedte
 * blokken (redenblok/autoblok/aanpasrij, order 0) blijven bovenaan; de voet
 * krijgt order 3 zodat hij onderaan blijft. */
body.pdf-rechts .detail .kolom-factuur{order:2}
body.pdf-rechts .detail .kolom-boeking{order:1}
body.pdf-rechts .detail .detailvoet{order:3}
/* Voetbalk onder het factuurdetail: de "meer met deze factuur"-acties.
 * Eigen label + scheidingslijn zodat ze niet wegvallen tegen de checks;
 * de knoppen zelf blijven stil — de primaire actie staat in de rijkop. */
.detailvoet{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--grijs-thin);padding-top:14px}
.detailvoet .lbl{font-size:11.5px;font-weight:800;color:var(--grijs);margin-right:4px;text-transform:uppercase;letter-spacing:.05em}
.detailvoet .btn{display:inline-flex;align-items:center;gap:7px}
.detailvoet .btn svg{width:14px;height:14px;flex:none;opacity:.8}
/* Tijdlijn per factuur (§3.6): wie deed wat, wanneer en waarom. Over de volle
 * breedte onder de voetbalk, met de tijd in een vaste kolom zodat de reeks
 * acties van boven naar beneden te scannen is. Fout-regels ("… mislukt") rood,
 * zodat een mislukte her-beoordeling meteen opvalt. */
.historie{grid-column:1/-1;border-top:1px solid var(--grijs-thin);padding-top:12px;margin-top:2px}
.hist-lijst{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.hist-lijst li{display:grid;grid-template-columns:78px minmax(150px,auto) minmax(90px,auto) 1fr;gap:4px 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--grijs-thin);font-size:13px}
.hist-lijst li:last-child{border-bottom:none}
.hist-tijd{color:var(--grijs);font-size:12px;white-space:nowrap}
.hist-actie{font-weight:800;color:var(--blauw)}
.hist-wie{font-size:12px;color:var(--grijs)}
.hist-reden{grid-column:2/-1;font-weight:600;color:var(--blauw-black)}
.hist-detail{grid-column:2/-1;font-size:12px;line-height:1.5;color:var(--grijs)}
.hist-lijst li.hist-fout .hist-actie{color:var(--rood)}
.hist-lijst li.hist-fout .hist-reden{color:var(--rood)}
.hist-leeg,.hist-laad{color:var(--grijs);font-size:13px;padding:10px 0}
.hist-noot{font-size:12px;line-height:1.5;color:var(--grijs);margin-top:8px;padding-top:8px;border-top:1px dashed var(--grijs-thin)}
/* Versie 1.20.0 (ticket 8436): op grond waarvan, en de ketting per regel. */
.hist-grond{grid-column:2/-1;font-size:12px;line-height:1.5;color:var(--blauw-black)}
.hist-grond b{font-weight:700;color:var(--blauw);margin-right:4px}
.hist-ketting{grid-column:2/-1;display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:11px;color:var(--grijs);min-width:0}
.hist-hash{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--grijs);overflow-wrap:anywhere}
.hist-ketting-stand{font-weight:700;border:1px solid var(--grijs-thin);border-radius:6px;padding:1px 6px;white-space:nowrap}
.hist-ketting.ok .hist-ketting-stand,.kolomtitel .tag.hist-ketting-kop.ok{color:var(--groen-tekst);background:var(--groen-bg);border-color:var(--groen-rand)}
.hist-ketting.breuk .hist-ketting-stand,.kolomtitel .tag.hist-ketting-kop.breuk{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand)}
@media (max-width:820px){.hist-lijst li{grid-template-columns:70px 1fr}.hist-wie{grid-column:2}.hist-reden,.hist-detail,.hist-grond,.hist-ketting{grid-column:1/-1}}
/* Kolomtitels in het dossier (punt 8 van Interface, ticket 9777): een kop (h3) in inkt van 16 px, zonder hoofdletters of blauw. Bij het document is alleen de titel de kop (kolomtitel-kop) en staan de knoppen ernaast. */
.kolomtitel{font-weight:var(--hero-gewicht-kop);font-size:var(--h-tekst-lees);line-height:var(--h-regel-lees);color:var(--h-tekst);letter-spacing:0;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.kolomtitel-kop{font:inherit;color:inherit;display:flex;align-items:center;gap:8px;min-width:0}
.kolomtitel .tag{font-weight:600;font-size:11px;color:var(--grijs);background:#fff;border:1px solid var(--grijs-thin);border-radius:6px;padding:1px 8px;text-transform:none;letter-spacing:0}

/* PDF-viewer */
.pdfvak{border:1px solid var(--kaartrand);border-radius:12px;background:#fff;overflow:auto;max-height:min(72vh,860px);box-shadow:inset 0 1px 4px rgba(3,21,63,.05)}
.pdfvak canvas{width:100%;display:block;border-radius:10px}
.pdfvak canvas + canvas{margin-top:10px;border-top:1px solid var(--grijs-thin)}
.pdflaad{padding:40px 20px;text-align:center;color:var(--grijs);font-size:13px}
.pdfdl{display:block;text-align:right;font-size:12px;font-weight:700;color:var(--oranje);text-decoration:none;margin-top:6px}
.pdfdl:hover{text-decoration:underline}
.pdfvolknop{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--blauw-soft);border-radius:999px;padding:3px 11px;font-family:'Exo';font-weight:800;font-size:11px;color:var(--blauw);cursor:pointer;letter-spacing:0;text-transform:none}
.pdfvolknop:hover{background:var(--blauw-hairline)}
.pdfvolknop svg{width:12px;height:12px;flex:none}
.pdfzoom{margin-left:auto;display:flex;align-items:center;gap:2px;flex:0 0 auto}
.pdfzoom button{background:#fff;border:1px solid var(--blauw-soft);border-radius:7px;padding:3px 9px;font-family:'Exo';font-weight:800;font-size:12px;line-height:1.2;color:var(--blauw);cursor:pointer}
.pdfzoom button:hover{background:var(--blauw-hairline)}
.pdfzoom .pdfzoom-stand{min-width:46px;text-align:center;border-color:transparent;background:none;font-weight:600;font-size:11px;color:var(--grijs)}
.pdfvol-balk .pdfzoom{margin-left:0}
.pdfvol-balk .pdfzoom button{border-color:rgba(255,255,255,.35);background:none;color:#fff}
.pdfvol-balk .pdfzoom button:hover{background:rgba(255,255,255,.12)}
.pdfvol-balk .pdfzoom .pdfzoom-stand{border-color:transparent;color:rgba(255,255,255,.85)}
.overlay.pdfvol{padding:0;flex-direction:column;align-items:stretch;background:rgba(3,21,63,.88)}
.pdfvol-balk{display:flex;align-items:center;gap:16px;padding:12px 22px;background:var(--blauw);color:#fff;flex:0 0 auto;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.pdfvol-balk #pdfvol-titel{font-weight:800;font-size:15px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfvol-dl{color:#fff;font-weight:600;font-size:13px;text-decoration:none;opacity:.92;flex:0 0 auto}
.pdfvol-dl:hover{opacity:1;text-decoration:underline}
.pdfvol-sluit{flex:0 0 auto;background:var(--oranje);color:#fff;border:none;border-radius:9px;padding:8px 16px;font-family:'Exo';font-weight:800;font-size:13px;cursor:pointer}
.pdfvol-sluit:hover{background:#d95400}
.pdfvol-doc{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;align-items:center;align-items:safe center;gap:16px}
.pdfvol-doc canvas{width:auto;max-width:min(940px,100%);height:auto;box-shadow:0 6px 30px rgba(0,0,0,.4);border-radius:4px}
.pdfvol-doc .pdflaad{color:#fff}
@media (max-width:640px){.pdfvol-doc{padding:12px}.pdfvol-balk{padding:10px 14px;gap:10px}.pdfvol-balk #pdfvol-titel{font-size:13px}}

/* Boekingskolom */
.boek{background:#fff;border:1px solid var(--kaartrand);border-radius:12px;padding:20px;font-size:var(--h-tekst-basis);line-height:var(--h-regel-basis);overflow-x:auto;box-shadow:0 1px 3px rgba(3,21,63,.05);font-variant-numeric:tabular-nums}
.boek .veld{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:6px 0;border-bottom:1px solid var(--hairline)}
.boek .veld span:first-child{color:var(--grijs)}
/* Label en "aanpassen"-knopje in vaste kolommen: het label krijgt een
 * minimumbreedte zodat alle knopjes over de regels heen verticaal uitlijnen
 * (de labeltekst is het anonieme eerste grid-item). */
.boek .veld>span:first-child{display:grid;grid-auto-flow:column;grid-template-columns:minmax(118px,max-content);grid-auto-columns:max-content;align-items:baseline;column-gap:8px}
.boek .veld>span:first-child .bewerk{margin-left:0}
.boek .veld b{font-weight:600;text-align:right;margin-left:auto;min-width:0;overflow-wrap:anywhere}
/* Uitleg onder een veld (bijv. de divisie-standaardregel) op een eigen regel. */
.boek .veld .veldhint{flex-basis:100%}
@media (max-width:480px){.boek .veld>span:first-child{grid-template-columns:max-content}}
.boek table{width:100%;border-collapse:collapse;margin:10px 0 4px}
.boek th{font-size:10.5px;text-align:left;color:var(--grijs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--grijs-thin);padding:4px 6px}
.boek td{padding:6px;border-bottom:1px solid var(--hairline)}
.boek .r{text-align:right}
.boek .subtot td{color:var(--grijs);border-bottom:none;padding-top:3px;padding-bottom:3px}
.boek .subtot-eerste td{border-top:1px solid var(--grijs-thin);padding-top:7px}
.boek .tot td{font-weight:800;color:var(--blauw);border-top:2px solid var(--blauw);border-bottom:none}
/* Verschilboeking: de regel die het verschil tussen wat Business Central
 * vastgelegd heeft en wat de factuur vraagt bewust wegboekt (wens finance,
 * 22 september 2026). Krijgt een oranje accent zodat in één oogopslag te zien
 * is dát hier gecorrigeerd wordt — hij staat tussen het BC-tussentotaal en
 * "Totaal ex btw", dus de rekensom is in de kolom zelf te volgen. */
.boek .verschilrij td{font-weight:700;border-bottom:none}
.boek .verschilrij td:first-child{border-left:3px solid var(--oranje);padding-left:9px}
.boek .verschilrij td span{display:block;font-weight:400;font-size:11px;color:var(--grijs)}
.regelcel{display:flex;align-items:center;gap:6px}
.regelcel .samvoegkies{flex:1;min-width:0}
.regelcel .samvoegvink{flex:0 0 auto;display:flex;align-items:center;cursor:pointer}
.regelcel .samvoegvink input{accent-color:var(--oranje);width:15px;height:15px}
.regelcel .regeloms{flex:1;min-width:0;cursor:pointer;border-radius:4px;padding:2px 5px;margin:-2px 0}
.regelcel .regeloms:hover{background:var(--blauw-soft)}
.regelacties{display:flex;gap:2px;opacity:.4;flex:0 0 auto;transition:opacity .15s}
tr:hover .regelacties{opacity:1}
.regelknop{background:none;border:none;cursor:pointer;font-size:12px;line-height:1;color:var(--blauw);padding:4px 6px;border-radius:6px;font-family:'Exo'}
.regelknop:hover{background:var(--blauw-soft)}
.regelknop.rood{color:var(--rood)}
.regelknop.rood:hover{background:var(--rood-bg)}
.regeledit td{padding:6px;background:var(--blauw-hairline)}
.regeledit input{width:100%;font-family:'Exo';font-size:13px;border:1px solid var(--blauw-soft);border-radius:8px;padding:6px 8px;background:#fff;color:var(--blauw-black);box-sizing:border-box}
.regeledit input.bedrag{text-align:right;min-width:80px}
.regelknoppen{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.regelknoppen .samvoeghint{margin-right:auto}
.regelknoppen .btn{font-size:12px;padding:5px 11px}
.samvoegkies{display:flex;align-items:center;gap:8px;cursor:pointer}
.samvoegkies input{flex:0 0 auto;accent-color:var(--oranje);width:15px;height:15px}
.samvoegbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 4px}
.samvoegbalk .btn{font-size:12px;padding:5px 11px}
.samvoeghint{color:var(--grijs);font-size:12px}
.checkskop{font-weight:800;font-size:11px;color:var(--blauw);margin:14px 0 8px;text-transform:uppercase;letter-spacing:.06em}
.instel{display:flex;flex-direction:column;gap:8px;font-size:13px;background:var(--blauw-hairline);border:1px solid var(--hairline);border-radius:10px;padding:11px 13px;margin-bottom:4px}
.instel label{display:flex;align-items:center;gap:8px;color:var(--blauw-black)}
.instel select{font-family:'Exo';font-size:13px;border:1px solid var(--blauw-soft);border-radius:8px;padding:5px 8px;background:#fff;color:var(--blauw)}
.instel input[type=checkbox]{accent-color:var(--oranje);width:15px;height:15px}
.instel input[type=month]{font-family:'Exo';font-size:13px;border:1px solid var(--blauw-soft);border-radius:8px;padding:4px 8px;background:#fff;color:var(--blauw)}
.instelhint{margin:0;color:var(--grijs);font-size:12px;line-height:1.4}
/* Doorbelasten (kostenverdeling) */
.doorbelastsectie{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--blauw-soft);padding-top:10px;margin-top:2px}
.db-editor{display:flex;flex-direction:column;gap:8px}
.db-modus{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.db-modus label{display:flex;align-items:center;gap:6px;color:var(--blauw-black)}
.db-modus input[type=radio]{accent-color:var(--oranje);width:15px;height:15px}
.db-basis{margin-left:auto;color:var(--grijs);font-size:12px}
.db-rij{display:flex;align-items:center;gap:10px}
.db-rij .regelgb{max-width:none;flex:1 1 auto;font-size:12px;padding:6px 10px}
.db-invoer{display:inline-flex;align-items:center;gap:2px;color:var(--blauw);font-weight:600;flex:0 0 auto}
.db-invoer input{width:88px;font-family:'Exo';font-size:13px;text-align:right;border:1px solid var(--blauw-soft);border-radius:8px;padding:6px 8px;background:#fff;color:var(--blauw-black)}
.db-invoer input:focus{outline:none;border-color:var(--oranje)}
.db-toevoegen{align-self:flex-start}
.db-sum{font-size:13px;color:var(--blauw-black)}
.db-sum .db-ok{color:var(--groen-tekst);font-weight:700}
.db-acties{display:flex;gap:10px;flex-wrap:wrap}
.db-actief{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--blauw-soft);border-radius:10px;padding:10px 12px}
.db-kop{font-weight:700;color:var(--blauw)}
.db-kop span{color:var(--grijs);font-weight:400;font-size:12px}
.db-actiefrij{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.db-actiefrij em{color:var(--grijs);font-style:normal}
/* Vast activum (§7) — editor in de boekingsinstellingen */
.vasectie{margin:8px 0}
.va-tabs{display:flex;gap:0;font-size:13px;margin:2px 0 6px;background:#fff;border:1px solid var(--blauw-soft);border-radius:10px;padding:3px;width:fit-content}
.instel .va-tabs label{display:flex;align-items:center;gap:7px;cursor:pointer;padding:6px 14px;border-radius:8px;font-weight:600;color:var(--blauw)}
.va-tabs input[type=radio]{accent-color:var(--oranje);margin:0}
@supports selector(label:has(input:checked)){
  .va-tabs label:has(input:checked){background:var(--blauw);color:#fff}
  .va-tabs input[type=radio]{position:absolute;opacity:0;pointer-events:none}
}
.va-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.va-breed{grid-column:1/-1}
.instel .va-veld{display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:13px;color:var(--blauw-black)}
.va-veld>span{font-weight:700;font-size:12px;color:var(--blauw)}
.va-veld em{color:var(--grijs);font-weight:400;font-style:normal}
.instel .va-veld input,.instel .va-veld select,.va-zoek{width:100%;box-sizing:border-box;border:1px solid var(--grijs-thin);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;background:#fff;color:var(--blauw-black)}
.va-veld input:focus,.va-veld select:focus,.va-zoek:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 2px var(--blauw-soft)}
.va-jaren{display:flex;align-items:center;gap:8px}
.instel .va-veld .va-jaren input{width:80px}
.va-zoek{width:100%}
.valijst{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;border:1px solid var(--grijs-thin);border-radius:10px;padding:4px;background:#fff}
.valijst-item{text-align:left;border:0;background:none;padding:7px 9px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;color:var(--blauw-black)}
.valijst-item:hover{background:var(--blauw-hairline)}
.valijst-item.gekozen{background:var(--blauw-soft);font-weight:600}
.va-gekozen{font-size:13px;color:var(--blauw-black)}
.va-voorstel{margin-top:8px;background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--geel-tekst);display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* Checks: het glyph (✓/✕) wordt een rond icoon-badge — leest als echt icoon */
.check{font-size:13px;display:flex;gap:9px;align-items:center;padding:3px 0}
.check .ok,.check .fout{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:11px;flex:none;font-weight:800}
.check .ok{color:#fff;background:var(--groen);box-shadow:0 1px 3px rgba(56,189,71,.4)}
.check .fout{color:#fff;background:var(--rood);box-shadow:0 1px 3px rgba(183,21,37,.4)}
/* Overrulede check ("toch boeken", 20 juli 2026): geslaagd op een menselijke
   bevestiging, niet op de inhoud — geel vinkje + label maken dat zichtbaar. */
.check .ok.ovok{color:#fff;background:#e3a600;box-shadow:0 1px 3px rgba(227,166,0,.4)}
.check .ovtag{background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst);border-radius:999px;padding:0 8px;font-size:11px;font-weight:800}
.ovnoot{background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px;color:var(--geel-tekst)}
.ovnoot .btn{margin-left:6px}
.ovlijst{margin:8px 0;padding-left:18px}
.ovlijst li{margin-bottom:4px}
.ovredenlbl{display:block;margin-top:10px;font-weight:800;font-size:13px}
#ov-reden{width:100%;box-sizing:border-box;margin-top:4px;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--grijs-thin);border-radius:8px}
mark.foutval{background:var(--rood-bg);color:var(--rood);font-weight:800;border-radius:5px;padding:0 4px}
.redenblok{grid-column:1/-1;background:var(--rood-bg);border:1px solid var(--rood-rand);border-left:4px solid var(--rood);border-radius:10px;padding:11px 15px;font-size:13px;color:var(--rood);font-weight:600}
.redenblok.geel{background:var(--geel-bg);border-color:var(--geel-rand);border-left-color:var(--geel);color:var(--geel-tekst)}
.leeg{text-align:center;padding:56px 20px;color:var(--grijs)}
/* Lege staat en laadfout van een werklijst (punt 10 van Interface, ticket 9777; component 10 van het ontwerpsysteem): rustig, een titel in inkt en een zin, hooguit een knop. */
.leeg-vak{padding:32px 20px;border:1px dashed var(--h-rand-sterk);border-radius:var(--hero-radius-l);color:var(--h-tekst-2);font-size:var(--h-tekst-basis);line-height:var(--h-regel-basis)}
.leeg-vak .leeg-titel{font-size:var(--h-tekst-basis);font-weight:800;color:var(--h-tekst);margin-bottom:4px}
.leeg-vak .btn{margin-top:12px}
.leeg-vak.laadfout{border-style:solid;border-color:var(--h-fout-rand);background:var(--h-fout-bg)}
.leeg-vak.laadfout .leeg-titel{color:var(--h-fout-tekst)}
.robotstrip [data-opnieuw-laden]{margin-left:8px}
.robotstrip.laadfout .puls{background:var(--h-fout-stip);box-shadow:none}
.robotstrip.laadfout .puls::after{display:none}
.laadfout-details{margin-top:10px;font-size:12px;color:var(--h-tekst-2)}
.laadfout-details summary{cursor:pointer}
.laadfout-details p{margin:6px 0 0;overflow-wrap:anywhere}

/* Toast */
/* Melding onderin (punt 10 van Interface, ticket 9777): verborgen is hij ook niet met Tab te bereiken (visibility), de sluitknop staat naast de tekst. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(6,26,66,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:12px 12px 12px 22px;border-radius:14px;font-size:14px;line-height:1.45;opacity:0;visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s linear .35s;pointer-events:none;max-width:min(560px,90vw);z-index:60;box-shadow:0 14px 40px rgba(3,21,63,.45);border:1px solid rgba(255,255,255,.12);display:flex;align-items:flex-start;gap:10px}
.toast.zien{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .35s,transform .35s,visibility 0s;pointer-events:auto;cursor:pointer}
.toast .toast-tekst{flex:1 1 auto;min-width:0;padding-top:2px}
/* De twee live-plekken (component 11): altijd aanwezig, alleen voor een schermlezer. */
.toast-plek{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Op de laptop rechtsonder, 20 px van de rand (component 11); op de telefoon over de volle breedte. */
@media (min-width:641px){.toast{left:auto;right:20px;transform:translateY(80px)}.toast.zien{transform:translateY(0)}}
.toast.fout{background:rgba(148,15,28,.97);box-shadow:0 14px 40px rgba(183,21,37,.45)}
.toast .toast-sluit{flex:none;width:32px;height:32px;display:grid;place-items:center;margin:-4px 0 -4px 0;padding:0;border:0;border-radius:8px;background:none;color:#fff;cursor:pointer}
.toast .toast-sluit:hover{background:rgba(255,255,255,.14)}
.toast .toast-sluit:focus-visible{outline:none;box-shadow:0 0 0 2px #fff}

/* ---------- Audit-log ---------- */
.log{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:6px 20px;box-shadow:var(--kaartschaduw);font-variant-numeric:tabular-nums}
.logrij{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:14px}
.logrij:last-child{border-bottom:none}
.logrij .t{color:var(--grijs);font-size:12px;white-space:nowrap;min-width:44px}
.logrij .st{margin-left:auto;font-size:12px;font-weight:700;color:var(--groen-tekst);white-space:nowrap}
.logrij .st.rood{color:var(--rood)}
.logrij .st.blauw{color:var(--blauw)}
.kt-mapping{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-top:8px}
.kt-mapping .btn{font-size:12px;padding:5px 11px}
.kt-vg{display:flex;flex-direction:column;gap:2px;font-size:12px}
.kt-vg>span{font-weight:700;color:var(--blauw)}
.kt-vg>em{color:var(--grijs);font-style:normal;font-size:11px}
.kt-vg input{width:130px;padding:4px 7px;border:1px solid var(--grijs-thin);border-radius:7px}
.logdag{font-weight:800;font-size:12px;color:var(--blauw);padding:16px 0 6px;border-bottom:1px solid var(--grijs-thin);text-transform:uppercase;letter-spacing:.05em}
.logdag:first-child{padding-top:8px}
.log-filters{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.log-filters label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grijs);white-space:nowrap}
.log-filters select{font-family:'Exo';font-size:13px;color:var(--blauw-black);border:1px solid var(--kaartrand);border-radius:9px;padding:6px 10px;background:#fff;cursor:pointer}
.log-filters input[type=search]{font-family:'Exo';font-size:13px;color:var(--blauw-black);border:1px solid var(--kaartrand);border-radius:9px;padding:6px 10px;background:#fff;width:150px}
.log-datums{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--grijs)}
.log-datums input{font-family:'Exo';font-size:13px;color:var(--blauw-black);border:1px solid var(--kaartrand);border-radius:9px;padding:5px 8px;background:#fff}
.logfilterinfo{font-size:13px;color:var(--grijs);padding:8px 0;border-bottom:1px solid var(--grijs-thin)}

/* ---------- Responsief: knoppen op een eigen regel ----------
 * Naam + chips + bedrag + knoppen naast elkaar vraagt ruim 1700px: de knoppen
 * alleen zijn al ~650px breed (Terughalen · Doorsturen · Afwijzen · Goedkeuren)
 * en een rij met een afwijkende BC-leverancier heeft een chip-regel van bijna
 * 600px. Is het smaller, dan zakken de knoppen naar een eigen regel, nog altijd
 * tegen de rechterrand — dus liever een regel erbij dan een platgedrukte
 * chip-kolom die de ene rij twee en de andere drie regels hoog maakt. */
@media (max-width:1700px){
  /* De knoppenkolom is nu leeg, dus de vrije ruimte gaat naar de chips in
   * plaats van naar een gat tussen naam en chips: de naamkolom groeit met de
   * tekst mee (tot 520px, daarna …) en het bedrag blijft rechts staan. */
  #lijst-goed,#lijst-uitz,#lijst-tergoed,#lijst-alles{grid-template-columns:minmax(200px,520px) minmax(0,1fr) max-content}
  .rijkop .acties{grid-area:3/1/4/4;justify-self:end;margin-top:8px}
}
/* ---------- Responsief: smaller dan de kolommenlayout aankan ----------
 * Terug naar flex-wrap: de naamkolom krijgt gegarandeerde ruimte en
 * badges/acties zakken naar een eigen regel in plaats van de
 * leveranciersnaam plat te drukken. */
@media (max-width:1100px){
  #lijst-goed,#lijst-uitz,#lijst-tergoed,#lijst-alles,
  #lijst-goed .rij,#lijst-uitz .rij,#lijst-tergoed .rij,#lijst-alles .rij{display:block}
  .rijkop{display:flex;flex-wrap:wrap;column-gap:14px}
  .rijkop .hoofd{flex:1 1 240px}
  .rijkop .acties{margin-top:0;flex-wrap:wrap}
  /* Zonder kolommen is er ruimte om de omschrijving voluit te laten aflopen. */
  .rijkop .hoofd .lev,.rijkop .hoofd .det{white-space:normal;overflow:visible}
}
/* ---------- Responsief: tablet ---------- */
/* minmax(0,1fr) en niet 1fr (versie 1.8.6): met 1fr is het minimum van de
 * kolom het breedste blok in het detail (het document op 100 procent), en op
 * een telefoon viel dan alles rechts buiten beeld: het redenblok, de knoppen
 * en de noot onder een boekknop die uit staat. Zo blijft de kolom zo breed als
 * het scherm, zoals op de laptop. */
@media (max-width:860px){
  .detail{grid-template-columns:minmax(0,1fr)}
  /* De kopregel van het document (zoom, Indeling, Volledig scherm) breekt
   * dan af in plaats van rechts buiten beeld te lopen. */
  .kolomtitel{flex-wrap:wrap;row-gap:6px}
}
/* ---------- Responsief: smal (grote telefoon / halve vensters) ---------- */
@media (max-width:720px){
  /* Sticky tabbalk kost op smalle schermen te veel hoogte (twee regels). */
  .tabs{position:static;padding:0;margin-bottom:16px;backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
  .rijkop{padding:12px 14px}
  .rijkop .hoofd{flex:1 1 100%}
  .acties{flex:1 1 100%}
  .acties .btn{flex:1 1 auto;padding:12px 10px}
  .bedrag{font-size:17px}
  .drempel{margin-left:0;width:100%}
  .tab{padding:11px 16px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:13px 15px}
  .stat .n{font-size:24px}
  .filters select{flex:1;min-width:0}
  .filters .zoek{flex:1 1 100%}
  .filters .zoek input{width:100%;min-width:0}
  .paneelkop .btn-alles{flex:1 1 100%;margin-left:0;padding:12px 16px}
  .detail{padding:12px}
  .boek{padding:14px}
  .detailvoet .btn{flex:1 1 auto;padding:12px 10px}
  .robotstrip .tijd{margin-left:0;flex-basis:100%}
}
/* ---------- Responsief: telefoon ---------- */
@media (max-width:640px){
  header{padding:12px 16px;gap:12px}
  header img{height:38px;width:44px}
  header .apptitel{font-size:18px}
  header .appsub{display:none}
  header .user span{display:none}
  .wrap{padding-top:16px}
  /* Dialogen worden bottom sheets: context blijft zichtbaar, duim kan erbij. */
  .overlay{padding:0;align-items:flex-end}
  .dialoog,.dialoog.breed{max-width:none;border-radius:20px 20px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;animation:sheet-in .25s cubic-bezier(.2,.9,.3,1)}
  @keyframes sheet-in{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
  .dialoog .dknoppen .btn{flex:1;padding:13px 10px}
  .lf-grid{grid-template-columns:1fr}
  .toast{bottom:14px;width:calc(100vw - 28px);max-width:none;text-align:left}
  .toast .toast-sluit{width:44px;height:44px;margin:-10px -6px -10px 0}
  .logrij{flex-wrap:wrap}
}

/* Loginpagina (§8.7) — volledig scherm tot er een Microsoft-sessie is. */
#login-scherm{position:fixed;inset:0;background:radial-gradient(1100px 500px at 20% -10%,#0a49ad,transparent 60%),radial-gradient(900px 480px at 90% 110%,#052a68,transparent 55%),var(--blauw);display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:20px;z-index:60}
#login-scherm img{height:70px;width:82px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.3))}
#login-scherm .kaart{background:#fff;border-radius:18px;padding:36px 32px;max-width:420px;width:100%;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.4)}
#login-scherm h1{font-weight:800;font-size:24px;color:var(--blauw);margin-bottom:2px}
#login-scherm .sub{font-size:13px;color:var(--grijs);margin-bottom:16px}
#login-scherm p{font-size:14px;color:var(--blauw-black);margin-bottom:20px}
#login-scherm .btn{width:100%;padding:13px 16px;font-size:14px}
#login-scherm .fout{font-size:13px;color:var(--rood);margin-top:12px;display:none}
#login-scherm .fout.zien{display:block}
/* De start wacht even (te veel verzoeken of server niet bereikbaar): knop gedimd, melding in beeld. */
body.start-wacht #login-scherm .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
body.start-wacht #login-scherm .fout{color:var(--blauw-black)}
/* Tot de auth-status bekend is: niets tonen (geen flits van data of login). */
body.auth-laden header,body.auth-laden .wrap{visibility:hidden}
body.login-vereist header,body.login-vereist .wrap{display:none}
body.login-vereist #login-scherm{display:flex}

/* Laadstaat: skeletten tot de eerste data binnen is. */
@keyframes skelet{0%{background-position:130% 0}100%{background-position:-30% 0}}
.skelet{display:inline-block;border-radius:6px;color:transparent!important;user-select:none;background:linear-gradient(90deg,var(--grijs-thin) 25%,var(--hairline) 50%,var(--grijs-thin) 75%);background-size:200% 100%;animation:skelet 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.skelet{animation:none}}
.skeletrij{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:20px 18px;margin-bottom:10px;display:flex;gap:16px;align-items:center;box-shadow:var(--kaartschaduw)}
.skeletrij .blok{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--grijs-thin) 25%,var(--hairline) 50%,var(--grijs-thin) 75%);background-size:200% 100%;animation:skelet 1.4s ease-in-out infinite}
.skeletrij .b1{width:32%}.skeletrij .b2{width:18%}.skeletrij .b3{width:10%;margin-left:auto}.skeletrij .b4{width:12%}
.sugtag{font-size:11px;font-weight:700;color:var(--groen-tekst);background:var(--groen-bg);border-radius:6px;padding:1px 8px;margin-left:4px;vertical-align:1px}

/* --- Demo-uitbouw 10 juli: automatisch, divisies, duplicaten, vertrouwen --- */
.score.auto{background:var(--groen-bg);color:var(--groen-tekst);box-shadow:inset 0 0 0 1px var(--groen-rand)}
.tgstatus{font-size:12px;font-weight:700;color:var(--blauw);background:var(--blauw-soft);border-radius:999px;padding:4px 12px;white-space:nowrap}
/* Doorgezette factuur die op de íngelogde gebruiker wacht (goedkeuringsflow
 * in de app): oranje accent, zodat de goedkeurder zijn facturen direct ziet. */
.tgstatus.mijn{color:#fff;background:linear-gradient(135deg,#ff8a3d,var(--oranje));box-shadow:0 2px 6px rgba(244,96,21,.35)}
/* Editor "Goedkeurders per divisie" op de instellingenpagina. */
.dgk-rij{display:grid;grid-template-columns:1fr 1fr 1.4fr .9fr auto;gap:6px;margin-top:6px}
/* Finance-medewerkers hebben maar drie kolommen (naam · e-mail · ✕). */
.dgk-rij.fin-rij{grid-template-columns:1fr 1.4fr auto}
/* Standaard divisie per grootboekrekening: grootboek · divisie · ✕. */
.dgk-rij.gbd-rij{grid-template-columns:1.4fr 1fr auto}
.dgk-rij input{min-width:0}
.dgk-kop{font-size:10px;font-weight:700;color:var(--grijs);margin-top:8px}
.dgk-kop span:last-child{width:34px}
/* Goedkeurketen op een doorgezette factuur: ✓ klaar → ● nu → nog te gaan. */
.tgketen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:12px}
.tgstap{border-radius:999px;padding:3px 11px;font-weight:600;white-space:nowrap}
.tgstap.klaar{color:var(--groen-tekst);background:var(--groen-bg)}
.tgstap.nu{color:#fff;background:var(--oranje);box-shadow:0 2px 6px rgba(244,96,21,.3)}
.tgstap.wacht{color:var(--grijs);background:var(--hairline)}
.tgpijl{color:var(--grijs)}
.dgk-weg{font-family:'Exo';font-weight:800;color:var(--rood);background:#fff;border:1px solid var(--grijs-thin);border-radius:8px;padding:0 10px;cursor:pointer}
.dgk-weg:hover{border-color:var(--rood)}
.autoblok{grid-column:1/-1;background:var(--groen-bg);border:1px solid var(--groen-rand);border-left:4px solid var(--groen);border-radius:10px;padding:11px 15px;font-size:13px}
.autoblok>b{display:block;font-weight:800;color:var(--groen-tekst);margin-bottom:2px}
.aanpasrij{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px dashed var(--blauw-soft);border-radius:10px;padding:10px 12px}
.aanpasrij .lbl{font-size:12px;font-weight:800;color:var(--blauw)}
.bclink{font-family:'Exo';font-size:12px;font-weight:700;color:#fff;text-decoration:none;border:1px solid var(--blauw);border-radius:999px;padding:5px 14px;margin-left:auto;white-space:nowrap;background:var(--blauw);transition:background-color .15s,border-color .15s}
.bclink:hover{background:var(--blauw-bold);border-color:var(--blauw-bold)}
.subkop{margin-top:30px}
.tandwiel{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--kaartrand);border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--blauw);line-height:1;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,background-color .15s,transform .3s}
.tandwiel svg{width:16px;height:16px}
.tandwiel:hover{background:var(--blauw-hairline);border-color:var(--blauw-soft);transform:rotate(30deg)}
@media (prefers-reduced-motion:reduce){.tandwiel:hover{transform:none}}
.veldhint{font-size:12px;color:var(--grijs);margin-top:4px}
/* Veldhint die om een beslissing vraagt (btw verlegd voorgesteld, 10 aug 2026):
   opvallender dan de gewone grijze toelichting — er moet iemand iets kiezen. */
.veldhint.let-op{color:var(--geel-tekst);background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:6px;padding:6px 8px}
.dialoog .schakel{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:14px}
.dialoog .schakel input{width:15px;height:15px;accent-color:var(--oranje);flex:0 0 auto}
.instelwaarschuwing{background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst);font-size:12px;border-radius:10px;padding:8px 11px;margin-top:8px}
.boek .veld select,.boek .veld input[type=text]{font-family:'Exo';font-size:13px;border:1px solid var(--blauw-soft);border-radius:8px;padding:4px 8px;background:#fff;color:var(--blauw);max-width:230px}
.veldsub{font-size:11px;color:var(--grijs);font-weight:400}
.ibannoot{font-weight:400;font-size:11px;margin-left:6px;color:var(--grijs)}
/* Rekensom onder een boekingsregel die incl. btw geboekt wordt (0% geen
   aftrek): "€ 117,00 + € 10,53 btw" — zodat zichtbaar blijft wat er op het
   document staat. */
.regelnoot{display:block;font-weight:400;font-size:11px;color:var(--grijs);white-space:nowrap}
.ibannoot.ok{color:var(--groen-tekst)}
.ibannoot.fout{color:var(--rood)}
.veld.aandacht{outline:2px solid var(--oranje);outline-offset:2px;border-radius:8px;background:#fff3ec}
.ivblok{border-radius:10px;padding:10px 13px;font-size:13px;border:1px solid;margin-bottom:4px}
.ivblok.groen{background:var(--groen-bg);border-color:var(--groen-rand)}
.ivblok.geel{background:var(--geel-bg);border-color:var(--geel-rand)}
.ivblok.grijs{background:var(--blauw-hairline);border-color:var(--grijs-thin);color:var(--grijs)}
.ivblok table{width:100%;border-collapse:collapse;margin:0 0 6px}
.ivblok th{font-size:11px;text-align:left;color:var(--grijs);font-weight:700;padding:2px 6px}
.ivblok td{padding:3px 6px}
.ivblok .r{text-align:right}
.ivblok .tot td{font-weight:800;border-top:1px solid var(--grijs-thin)}
.ivdetail{font-size:12px}
.ivonkosten{margin-top:10px;padding-top:8px;border-top:1px dashed var(--grijs-thin)}
.ivsubkop{font-weight:800;font-size:11px;color:var(--blauw);margin:0 0 6px;text-transform:uppercase;letter-spacing:.06em}
.ivonkosten small{color:var(--grijs);font-weight:600}
.onktoggle{margin-left:8px;font-size:11px;font-weight:700;color:var(--oranje);background:none;border:1px solid var(--blauw-soft);border-radius:6px;padding:1px 7px;cursor:pointer;vertical-align:middle;white-space:nowrap}
.onktoggle:hover{background:var(--blauw-hairline)}
.onktoggle.aan{color:var(--groen);border-color:var(--groen-rand);background:var(--groen-bg)}
.dialoog.breed{max-width:960px;max-height:92vh;overflow:auto}
.dupgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.dupgrid{grid-template-columns:1fr}}
.dupkaart{border:1px solid var(--blauw-soft);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.dupkop{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px;color:var(--blauw);flex-wrap:wrap;margin-bottom:6px}
.dupstatus{font-size:11px;font-weight:700;color:var(--blauw);background:var(--blauw-soft);border-radius:6px;padding:1px 8px}
.duptabel{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.duptabel th{font-size:11px;text-align:left;color:var(--grijs);font-weight:700;border-bottom:1px solid var(--grijs-thin);padding:3px 6px}
.duptabel td{padding:4px 6px;border-bottom:1px solid var(--hairline)}
.duptabel tr.match td{background:var(--geel-bg)}
.duptabel .m{font-size:11px;font-weight:700;color:var(--geel-tekst);white-space:nowrap}
.dupuitleg{font-size:12px;margin-top:6px}
.dupposten{font-size:12px;color:var(--grijs);margin-top:6px}
.vertrouwen{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:15px 20px;margin-bottom:14px;font-size:13px;box-shadow:var(--kaartschaduw);font-variant-numeric:tabular-nums}
.vertrouwen>b{font-weight:800;color:var(--blauw)}
.vertrouwen .sub{font-size:12px;color:var(--grijs);margin:2px 0 8px}
.vertrouwen .band{display:flex;gap:12px;padding:4px 0;border-bottom:1px solid var(--hairline)}
.vertrouwen .band:last-child{border-bottom:none}
.vertrouwen .bandlabel{font-weight:800;color:var(--blauw);min-width:74px;white-space:nowrap}
.vertrouwen .groen{color:var(--groen-tekst)}
.vertrouwen .geel{color:var(--geel-tekst)}
.uitlegregel{display:block;font-size:12px;color:var(--grijs);font-weight:400;margin-top:1px;white-space:normal}
/* Afgelopen project in de koppel-dialoog (melding finance, 21 aug 2026 — verlengd
   project): de oude en nieuwe projectkaart ogen identiek; dit label maakt de
   afgelopene herkenbaar zodat niemand hem per ongeluk kiest. */
.inzet-afgelopen{color:var(--rood);font-weight:700}
.verwijder{font-family:'Exo';font-size:11px;font-weight:700;color:var(--rood);background:none;border:1px solid var(--rood-rand);border-radius:7px;padding:2px 9px;cursor:pointer;white-space:nowrap;transition:background-color .15s}
.verwijder:hover{background:var(--rood-bg)}
.tgnoot{font-size:12px;color:var(--grijs);margin-top:10px}

/* ----- btw per boekingsregel (meeting 13 juli) ----- */
.regelbtw{font-family:'Exo';font-size:11px;font-weight:600;color:var(--blauw);background:#fff;border:1px solid var(--blauw-soft);border-radius:7px;padding:2px 4px;flex:0 0 auto;max-width:118px;cursor:pointer}
.regelbtw:hover{border-color:var(--blauw)}
/* Btw-tarief als tekst, waar er niets te kiezen valt (team, credit, verlegd) */
.regelbtwlabel{color:var(--grijs);font-weight:400;white-space:nowrap}
.btwsplit{font-size:12px;font-weight:600;color:var(--blauw);background:var(--blauw-hairline);border-radius:8px;padding:6px 9px}
.btwsplit span{font-weight:400;color:var(--grijs)}
/* Btw-controle die niet uitkomt: zelfde blok, maar niet te missen */
.btwsplit.letop{color:var(--rood);background:#fdeef0}
.btwsplit.letop b{color:var(--rood)}

/* Statusregel van de handmatige verschilboeking (22 september 2026): één regel
   die zegt of Business Central de verschilregel écht op het concept heeft
   staan. Groen = ja, oranje = nog niet (met de vernieuw-knop erin), rood = het
   concept boekt iets anders. Vervangt de lange uitleg + de rode voetnoot bij
   "Te boeken incl. btw". */
.vbstatus{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;line-height:1.5}
.vbstatus span{flex:1 1 100%}
.vbstatus .btn-klein{flex:0 0 auto}
.btwsplit.vb-ok{color:#1d7a28;background:#eaf7ec}
.btwsplit.vb-wacht{color:#8a5200;background:#fff6e3}
.btwsplit.vb-fout{color:var(--rood);background:#fdeef0}
.btn-klein{font-size:11px;padding:3px 9px;border-radius:7px}
/* Compacte variant in de kolom "Nog te controleren" */
.veld.vbstatus{border-radius:8px;padding:4px 8px;margin:2px 0}
.veld.vb-ok{background:#eaf7ec}
.veld.vb-wacht{background:#fff6e3}
.veld.vb-fout{background:#fdeef0}

/* ----- grootboek per boekingsregel (meerdere grootboeken op één bon) ----- */
.regelgb{font-family:'Exo';font-size:11px;font-weight:600;color:var(--grijs);background:#fff;border:1px solid var(--blauw-soft);border-radius:7px;padding:2px 6px;flex:0 0 auto;max-width:118px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.regelgb:hover{border-color:var(--blauw);color:var(--blauw)}
.regelgb.eigen{color:var(--oranje);border-color:var(--oranje)}
.koppellink{background:none;border:none;padding:0;margin-left:4px;color:var(--oranje);font-family:'Exo';font-weight:700;font-size:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ----- leesfout-dialoog strakker (demo-feedback 13 juli) ----- */
.dialoog.leesfout{max-width:780px}
.dialoog.leesfout .lf-grid{grid-template-columns:repeat(3,1fr);gap:2px 14px}
.dialoog.leesfout label{margin:8px 0 3px;font-size:11px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.03em}
.dialoog.leesfout input,.dialoog.leesfout select{padding:7px 9px;font-size:13px}
.dialoog.leesfout .lf-kop{margin:14px 0 0;padding-top:10px}
@media (max-width:860px){.dialoog.leesfout .lf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.dialoog.leesfout .lf-grid{grid-template-columns:1fr}}

/* ----- boekingsregels zelf bepalen (projectfactuur, 23 juli 2026) ----- */
.dialoog.handmatig{max-width:720px}
.hm-actief{background:var(--blauw-hairline);border:1px solid var(--soft);border-radius:10px;padding:9px 12px;margin-bottom:12px;font-size:13px;line-height:1.5}
.hm-actief .btn{margin-left:2px}
.hm-kop,.hm-rij{display:grid;grid-template-columns:1fr 80px 100px 110px 150px 28px;gap:8px;align-items:center}
.hm-kop{font-size:11px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px;padding:0 2px}
.hm-rij{margin-bottom:6px}
.hm-rij input{padding:7px 9px;font-size:13px}
.hm-btw{padding:6px 6px;font-size:13px;border:1px solid var(--grijs-thin);border-radius:8px;background:#fff;color:var(--blauw-black)}
/* .dialoog select (padding 9px 11px, 14px) won van de regel hierboven, waardoor
 * de btw-keuze in de smalle kolom werd afgekapt ("0% geen b"). */
.hm-rij .hm-btw{padding:6px 6px;font-size:13px}
.hm-num{text-align:right}
.hm-weg{border:none;background:none;color:var(--grijs);cursor:pointer;font-size:15px;line-height:1;padding:4px;border-radius:7px}
.hm-weg:hover{color:var(--rood);background:var(--rood-bg)}
.hm-toevoeg{margin-top:4px}
.hm-som{margin-top:14px;padding:10px 13px;border-radius:10px;font-size:14px}
.hm-som.goed{background:var(--groen-bg);color:var(--groen-tekst);border:1px solid var(--groen-rand)}
.hm-som.mis{background:var(--rood-bg);color:var(--rood);border:1px solid var(--rood-rand)}
@media (max-width:560px){.dialoog.handmatig .hm-kop{display:none}.hm-rij{grid-template-columns:1fr 1fr;gap:6px}.hm-rij .hm-oms{grid-column:1 / -1}.hm-rij .hm-weg{grid-column:2;justify-self:end}}

/* ----- volwaardige pagina's: instellingen en profiel (15 juli 2026) -----
   Geen dialoog meer: een pagina met eigen adres (?pagina=…). Zolang er een
   pagina open staat verdwijnt de werk-UI (strips, stats, tabs, filters,
   lijsten) — de terugknop of browser-terug brengt je terug op je tab. */
body.pagina-open .wrap>:not(.pagina){display:none!important}
.pagina{max-width:1100px;margin:0 auto;animation:pagina-in .25s ease}
@keyframes pagina-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pagina{animation:none}}
.paginakop{margin:10px 0 24px}
.paginakop h2{font-weight:800;font-size:27px;color:var(--blauw);letter-spacing:-.3px}
.paginakop .sub{font-size:13px;color:var(--grijs);margin-top:3px;max-width:640px}
.terugknop{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--kaartrand);border-radius:999px;padding:7px 15px;margin-bottom:14px;font-family:'Exo';font-weight:800;font-size:12px;color:var(--blauw);cursor:pointer;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,background-color .15s,box-shadow .15s}
.terugknop:hover{border-color:var(--blauw);box-shadow:0 2px 8px rgba(3,21,63,.1)}
/* Twee kolommen op ruime schermen: sectienavigatie links, kaarten rechts. */
.paginagrid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:start}
.paginainhoud{min-width:0;max-width:820px}
.paginainhoud.smal{max-width:820px}
.paginarail{position:sticky;top:24px;display:flex;flex-direction:column;gap:2px}
.railitem{text-align:left;background:none;border:none;border-left:2px solid var(--grijs-thin);border-radius:0 9px 9px 0;padding:9px 14px;font-family:'Exo';font-weight:600;font-size:13px;color:var(--grijs);cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.railitem:hover{color:var(--blauw);background:rgba(255,255,255,.7)}
.railitem.actief{color:var(--blauw);border-left-color:var(--oranje);background:#fff;font-weight:800}
@media (max-width:980px){.paginagrid{grid-template-columns:1fr}.paginarail{display:none}}
/* Kaarten met icoon-kop */
.instelkaart{background:#fff;border:1px solid var(--kaartrand);border-radius:16px;padding:24px 26px;margin-bottom:16px;box-shadow:var(--kaartschaduw);scroll-margin-top:16px}
.instelkaart h3{font-weight:800;font-size:15px;color:var(--blauw);margin-bottom:2px;display:flex;align-items:baseline;gap:8px}
.instelkaart .kaartnoot{font-weight:600;font-size:11px;color:var(--grijs);background:var(--hairline);border-radius:6px;padding:1px 8px;white-space:nowrap}
.instelkaart .kaartsub{font-size:13px;color:var(--grijs);margin-bottom:10px;line-height:1.55}
.kaartkop{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.kaartkop>div{min-width:0}
.kaartkop .kaartsub{margin-bottom:0}
.kaarticoon{width:40px;height:40px;border-radius:12px;background:var(--hairline);color:var(--blauw);display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 0 0 1px rgba(7,56,137,.06)}
.kaarticoon svg{width:20px;height:20px}
/* Elke instellingen-sectie een eigen zachte tint (Hero-palet) — sneller te
 * herkennen bij het scrollen én in de rail. Puur cosmetisch. */
#sectie-grenzen .kaarticoon{background:var(--blauw-soft);color:var(--blauw)}
#sectie-goedkeurders .kaarticoon{background:var(--oranje-bg);color:var(--oranje-donker)}
#sectie-finance .kaarticoon{background:var(--groen-bg);color:var(--groen-tekst)}
#sectie-namens .kaarticoon{background:var(--geel-bg);color:var(--geel-tekst)}
#sectie-abonnementen .kaarticoon{background:var(--blauw-soft);color:var(--blauw)}
#sectie-automatisch .kaarticoon{background:var(--oranje-bg);color:var(--oranje-donker)}
#sectie-onderhoud .kaarticoon{background:var(--hairline);color:var(--grijs)}
.instelkaart label{display:block;font-size:12px;font-weight:800;color:var(--blauw);margin:0 0 5px}
.instelkaart .labelsub{font-weight:600;color:var(--grijs)}
.instelkaart input[type=number],.instelkaart input[type=text],.instelkaart input[type=email]{width:100%;font-family:'Exo';font-size:14px;border:1px solid var(--grijs-thin);border-radius:10px;padding:10px 12px;background:#fff;color:var(--blauw-black);transition:border-color .15s}
.instelkaart input:hover{border-color:var(--blauw-soft)}
/* Nummer-spinners weg: dit zijn bedragen, geen tellers. */
.pagina input[type=number]{appearance:textfield;-moz-appearance:textfield}
.pagina input[type=number]::-webkit-outer-spin-button,.pagina input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.euroveld{position:relative;max-width:280px}
.euroveld>span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--grijs);font-weight:600;font-size:14px;pointer-events:none}
.instelkaart .euroveld input{padding-left:30px}
.grenzengrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
@media (max-width:720px){.grenzengrid{grid-template-columns:1fr}}
.uitklap{margin:2px 0 12px;border:1px solid var(--kaartrand);border-radius:12px;background:var(--blauw-hairline);overflow:hidden}
.uitklap summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--blauw);padding:9px 14px;list-style-position:inside}
.uitklap summary:hover{background:rgba(255,255,255,.6)}
.uitklap[open] summary{border-bottom:1px solid var(--grijs-thin)}
.uitklap .veldhint{padding:12px 14px;margin:0;line-height:1.6}
/* Editor-tabellen (goedkeurders, finance-medewerkers) */
.dgk-tabel{border:1px solid var(--kaartrand);border-radius:12px;overflow:hidden;margin-top:4px}
.dgk-tabel .dgk-rij{margin:0;padding:6px 10px;border-top:1px solid var(--hairline);gap:8px;align-items:center}
.dgk-tabel .dgk-rij.dgk-kop{border-top:none;background:var(--blauw-hairline);padding:8px 10px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs)}
.dgk-tabel input{border-color:transparent;background:transparent;padding:8px 9px}
.dgk-tabel input:hover{border-color:var(--blauw-soft);background:#fff}
.dgk-tabel input:focus{background:#fff;border-color:var(--blauw-soft)}
.dgk-weg{font-family:'Exo';font-weight:800;color:var(--grijs);background:none;border:none;border-radius:8px;padding:6px 10px;cursor:pointer}
.dgk-weg:hover{color:var(--rood);background:var(--rood-bg)}
/* Schakelaar (automatisch goedkeuren) als echte toggle */
.instelkaart .schakel{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--blauw-black);margin:2px 0 0;cursor:pointer}
.instelkaart .schakel input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;background:var(--grijs-thin);position:relative;cursor:pointer;transition:background-color .18s;flex:0 0 auto;margin:0}
.instelkaart .schakel input::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .18s;box-shadow:0 1px 3px rgba(3,21,63,.3)}
.instelkaart .schakel input:checked{background:var(--oranje)}
.instelkaart .schakel input:checked::after{left:23px}
@media (prefers-reduced-motion:reduce){.instelkaart .schakel input,.instelkaart .schakel input::after{transition:none}}
/* Opslaanbalk: zweeft onderin mee, licht doorschijnend */
.opslaanbalk{position:sticky;bottom:14px;z-index:25;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--kaartrand);border-radius:16px;padding:12px 16px;margin-top:6px;box-shadow:var(--kaartschaduw-hoog)}
.opslaantekst{font-size:12px;color:var(--grijs);margin-right:auto}
.kijkhint{display:none;background:var(--geel-bg);border:1px solid var(--geel-rand);color:var(--geel-tekst);font-size:13px;border-radius:12px;padding:10px 14px;margin-bottom:14px}
/* Alleen-kijken op de instellingenpagina (directe link zonder finance-rol):
   formulier zichtbaar maar bevroren, opslaan en onderhoud verdwijnen. */
body.geen-finance #instellingen-kijkhint{display:block}
body.geen-finance #paneel-instellingen .opslaanbalk,
body.geen-finance #paneel-instellingen #hervalideer-knop{display:none}
body.geen-finance #paneel-instellingen .instelkaart input,
body.geen-finance #paneel-instellingen .instelkaart button,
body.geen-finance #paneel-instellingen .instelkaart .dgk-weg{pointer-events:none;opacity:.6}
/* Profielpagina */
#paneel-profiel .paginainhoud{margin:0 auto}
.profielkop-kaart{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,#052a68 0%,var(--blauw) 50%,#0a49ad 100%);border:none;color:#fff}
.profielavatar{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#ff8a3d,var(--oranje));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;flex:0 0 auto;box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.profielwie{display:flex;flex-direction:column;gap:1px;min-width:0}
.profielwie b{font-weight:800;font-size:18px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profielwie span{font-size:13px;color:rgba(255,255,255,.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profielwie .profielbron{font-size:12px;color:rgba(255,255,255,.62);white-space:normal;margin-top:2px}
.rolchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px 52px}
.rolchip{font-size:12px;font-weight:700;border-radius:999px;padding:4px 12px;white-space:nowrap}
.rolchip.groen{color:var(--groen-tekst);background:var(--groen-bg)}
.rolchip.blauw{color:var(--blauw);background:var(--blauw-soft)}
.rolchip.grijs{color:var(--grijs);background:var(--hairline)}
#paneel-profiel .instelkaart>.btn,#paneel-profiel .segkeuze{margin-left:52px}
.segkeuze{display:inline-flex;border:1px solid var(--blauw-soft);border-radius:999px;overflow:hidden;background:#fff}
.segknop{font-family:'Exo';font-weight:600;font-size:13px;color:var(--blauw);background:#fff;border:none;padding:9px 18px;cursor:pointer;transition:background-color .15s}
.segknop:hover{background:var(--blauw-hairline)}
.segknop.actief{background:var(--blauw);color:#fff}
/* De header-gebruiker is nu een knop naar het profiel. */
header .user{background:none;border:none;padding:4px 6px;color:#fff;font-family:'Exo';cursor:pointer;border-radius:999px}
header .user:hover .avatar{box-shadow:0 0 0 3px rgba(255,255,255,.4),0 3px 8px rgba(0,0,0,.25)}
@media (max-width:720px){
  .paginakop h2{font-size:22px}
  .instelkaart{padding:16px}
  .kaartkop{gap:11px}
  .kaarticoon{width:32px;height:32px;border-radius:9px}
  .kaarticoon svg{width:17px;height:17px}
  .rolchips,#paneel-profiel .instelkaart>.btn,#paneel-profiel .segkeuze{margin-left:0}
  .opslaanbalk{bottom:8px;flex-wrap:wrap}
  .opslaantekst{flex-basis:100%;margin-right:0}
  .opslaanbalk .btn{flex:1 1 auto;padding:13px 10px}
  .segkeuze{width:100%;display:flex}
  .segknop{flex:1}
  .euroveld{max-width:none}
  /* Regels met een persoon (goedkeurders per divisie, finance, vrijgevers,
     namens goedkeuren; versie 1.8.4): op een smal scherm onder elkaar in
     plaats van vijf smalle kolommen, zodat naam en e-mail leesbaar zijn. De
     kolomkoppen passen dan niet meer en vervallen; de velden hebben elk een
     eigen voorbeeldtekst. */
  .dgk-tabel:has([data-persoonrij]) .dgk-kop{display:none}
  .dgk-rij[data-persoonrij]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"naam naam weg" "email email email"}
  .dgk-rij[data-persoonrij]:not(.fin-rij){grid-template-areas:"divisie vanaf weg" "naam naam naam" "email email email"}
  .dgk-rij[data-persoonrij] [data-persoonkiezer="naam"]{grid-area:naam}
  .dgk-rij[data-persoonrij] [data-persoonkiezer="email"]{grid-area:email}
  .dgk-rij[data-persoonrij] [data-dgk-veld="divisie"]{grid-area:divisie}
  .dgk-rij[data-persoonrij] [data-dgk-veld="vanafBedrag"]{grid-area:vanaf}
  .dgk-rij[data-persoonrij] .dgk-weg{grid-area:weg}
}

/* ----- rollen: niet-finance kijkt alleen (15 juli 2026) -----
   De server weigert deze acties toch (403); dit verbergt de knoppen zodat
   een collega zonder finance-rol een rustige kijk-versie ziet. De eigen
   goedkeurstap (.eigen-goedkeuring, tab "Nog te controleren") blijft. */
body.geen-finance #instellingen-knop,
body.geen-finance #regel-toevoegen,
body.geen-finance .drempel,
body.geen-finance [data-goedkeuren],
body.geen-finance [data-zetdoor],
body.geen-finance [data-directboeken],
body.geen-finance [data-retour],
body.geen-finance [data-verwijder],
body.geen-finance [data-koppelen],
body.geen-finance [data-leverancier],
body.geen-finance [data-niet-dubbel],
body.geen-finance [data-leesfout],
body.geen-finance [data-type-omzetten],
body.geen-finance [data-inzet],
body.geen-finance [data-regel-inzet],
body.geen-finance [data-periodepatroon],
body.geen-finance [data-administratie],
body.geen-finance [data-terughalen],
body.geen-finance [data-del-soort],
body.geen-finance [data-historie],
body.geen-finance button[data-verschilboeking],
body.geen-finance [data-afwijzen]:not(.eigen-goedkeuring),
body.geen-finance [data-doorsturen]:not(.eigen-goedkeuring),
body.geen-finance [data-goedkeuren-doorgezet]:not(.eigen-goedkeuring){display:none !important}
/* Boekingsinstellingen en regelbewerking in het factuurdetail: alleen kijken. */
body.geen-finance .instel,
body.geen-finance [data-regel-btw],
body.geen-finance [data-regelgb-kies],
body.geen-finance [data-regelgb-reset],
body.geen-finance tr[data-verschilboeking]{pointer-events:none;opacity:.55}
body.geen-finance .instel input,
body.geen-finance .instel select,
body.geen-finance .instel button{pointer-events:none}
/* ----- alleen-goedkeurder: goedkeurder zonder finance-rol (wens finance, 20 juli 2026) -----
   De server stuurt zo'n gebruiker alléén de facturen die op hem/haar wachten;
   hier verdwijnt alles eromheen — geen achtergrondstrip, foutstrip,
   statistieken, tabbladen of filters. Over: één rustige lijst
   "Nog te controleren" met de eigen goedkeurknoppen. */
body.alleen-goedkeurder .robotstrip,
body.alleen-goedkeurder .foutstrip,
body.alleen-goedkeurder .stats,
body.alleen-goedkeurder .tabs,
body.alleen-goedkeurder .filters,
body.alleen-goedkeurder #paneel-goed,
body.alleen-goedkeurder #paneel-uitz,
body.alleen-goedkeurder #paneel-alles,
body.alleen-goedkeurder #paneel-log,
body.alleen-goedkeurder #paneel-geleerd{display:none !important}
/* ----- Versienummer en wijzigingslog (27 september 2026) -----
   Kleine pil naast de apptitel in de blauwe kop; een klik opent "Wat is er
   nieuw". De oranje stip betekent: deze versie nog niet bekeken (per browser).
   De kop blijft voor elke rol staan (body.alleen-goedkeurder en
   body.geen-finance verbergen hem niet), dus iedereen ziet het nummer. De
   indeling via :has() zet de pil naast "Finance" met de ondertitel eronder;
   een browser zonder :has() toont hem gewoon onder de ondertitel. */
header div:has(> .versie){display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
header div:has(> .versie) > .apptitel{order:1}
header div:has(> .versie) > .versie{order:2}
header div:has(> .versie) > .appsub{order:3;flex-basis:100%}
header .versie{position:relative;display:inline-flex;align-items:center;font-family:'Exo',Arial,sans-serif;font-weight:700;font-size:11.5px;line-height:1;letter-spacing:.3px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 9px;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s}
header .versie:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
header .versie:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
header .versie[hidden]{display:none}
header .versie.nieuw::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--oranje);box-shadow:0 0 0 2px var(--blauw)}
.versie-blok{padding:14px 0}
.versie-blok:first-child{padding-top:2px}
.versie-blok + .versie-blok{border-top:1px solid var(--hairline)}
.versie-blok h4{font-weight:800;font-size:14.5px;color:var(--blauw);margin-bottom:6px;letter-spacing:-.1px}
.versie-blok h4 span{font-weight:600;color:var(--grijs)}
.versie-blok ul{padding-left:18px}
.versie-blok li{font-size:13.5px;line-height:1.55;color:var(--blauw-black)}
.versie-blok li + li{margin-top:6px}
.versie-blok li::marker{color:var(--oranje)}
.versie-noot{font-size:13px;color:var(--grijs);padding:6px 0}
/* Knop Melden (30 september 2026): alleen de lijst scrolt, zodat de titel en
   de knoppen Sluiten en Melden ook bij een lang wijzigingslog in beeld staan. */
.versie-dialoog{display:flex;flex-direction:column}
.versie-dialoog .versie-lijst{flex:1 1 auto;min-height:0;overflow:auto}

/* ----- Bedenktijd na "Goedkeuren en boeken" (punt 16 uit het rapport, UX-25) -----
   De rij telt af (standaard drie seconden, versie 1.8.4; daarvoor acht)
   voordat er iets naar de server gaat: de
   oranje balk loopt leeg en "Ongedaan maken" breekt af. De rij zelf blijft
   op volle sterkte (anders dan "Bezig met boeken…"), want er is nog niets
   verstuurd. Opbouw in app.js (toonBedenktijd), logica in bedenktijd.js. */
.rij.in-bedenktijd{border-color:var(--oranje);box-shadow:inset 0 0 0 1px var(--oranje),var(--kaartschaduw)}
.bedenktijd{padding:10px 18px 12px;background:var(--oranje-bg);border-top:1px solid var(--kaartrand)}
.bedenktijd-balk{height:6px;border-radius:999px;background:rgba(244,96,21,.18);overflow:hidden}
.bedenktijd-balk span{display:block;height:100%;width:100%;border-radius:999px;background:var(--oranje);transition:width .25s linear}
.bedenktijd-regel{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:9px}
.bedenktijd-tekst{font-weight:800;font-size:14px;color:var(--blauw-black);font-variant-numeric:tabular-nums}
.bedenktijd-uitleg{font-size:12.5px;color:var(--grijs)}
.bedenktijd-ongedaan{margin-left:auto}
/* Wat tijdens de bedenktijd op slot staat, ziet er ook zo uit: alleen
   "Ongedaan maken" is bruikbaar. */
.rij.in-bedenktijd .rijkop .btn:disabled,.rij.in-bedenktijd .detail button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.bedenktijd-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:640px){.bedenktijd{padding:10px 14px 12px}.bedenktijd-ongedaan{margin-left:0;flex:1 1 100%;padding:12px 10px}}
/* Versie 1.8.4: na de klik op boeken staat de factuur meteen uit de lijst.
   Van de rij blijft één regel over: tijdens de bedenktijd met Ongedaan maken,
   daarna "Wordt geboekt…" zonder knop. Opbouw in app.js (toonBedenktijd,
   markeerRijBoeken). */
.rij.boekregel{border-color:var(--oranje);box-shadow:inset 0 0 0 1px var(--oranje),var(--kaartschaduw)}
.rij.boekregel > :not(.bedenktijd):not(.boekregel-lijn){display:none !important}
.rij.boekregel .bedenktijd{border-top:0}
.rij.boeken.boekregel{opacity:.86}
.boekregel-label{font-weight:800;font-size:14px;color:var(--blauw-black);flex:1 1 100%}
.boekregel-lijn{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;padding:12px 18px;background:var(--oranje-bg)}
.boekregel-lijn:focus{outline:2px solid var(--oranje);outline-offset:-2px}
.boekregel-tekst{font-weight:800;font-size:14px;color:var(--blauw-black)}
.boekregel-uitleg{font-size:12.5px;color:var(--grijs)}
@media (max-width:640px){.boekregel-lijn{padding:10px 14px}}
@media (prefers-reduced-motion:reduce){.bedenktijd-balk span{transition:none}}
/* Versie 1.24.1 (SL-05): de bedenktijd op de achtergrond. Een vaste balk
   onderaan het venster met elke lopende bedenktijd waarvan de eigen regel in
   de rij niet in beeld is; één regel per factuur. z-index 40: boven de
   tabbladen (20) en de opslaanbalk (25), onder elke dialoog (50 en hoger).
   Laptop: compact in het midden; telefoon: volle breedte met 16 px marge.
   Zolang hij staat, schuiven de melding onderin en de opslaanbalk erboven
   (--boekbalk-ruimte, gezet door app.js). Opbouw in app.js (werkBoekbalkBij). */
.boekbalk{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(600px,calc(100vw - 32px));z-index:40;max-height:45vh;overflow-y:auto;background:var(--oranje-bg);border:1px solid var(--oranje);border-radius:14px;box-shadow:var(--kaartschaduw-hoog)}
.boekbalk[hidden]{display:none}
.boekbalk-regel{padding:10px 14px 11px}
.boekbalk-regel + .boekbalk-regel{border-top:1px solid rgba(244,96,21,.28)}
.boekbalk-voortgang{height:5px;border-radius:999px;background:rgba(244,96,21,.18);overflow:hidden}
.boekbalk-voortgang span{display:block;height:100%;width:100%;border-radius:999px;background:var(--oranje);transition:width .25s linear}
.boekbalk-inhoud{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;margin-top:8px}
.boekbalk-label{flex:1 1 100%;min-width:0;font-weight:800;font-size:13.5px;color:var(--blauw-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boekbalk-tekst{flex:1 1 auto;min-width:0;font-weight:800;font-size:13.5px;color:var(--blauw-black);font-variant-numeric:tabular-nums}
.boekbalk-ongedaan{flex:0 0 auto}
body.met-boekbalk .toast{bottom:calc(24px + var(--boekbalk-ruimte,0px))}
body.met-boekbalk .opslaanbalk{bottom:calc(14px + var(--boekbalk-ruimte,0px))}
@media (max-width:720px){body.met-boekbalk .opslaanbalk{bottom:calc(8px + var(--boekbalk-ruimte,0px))}}
@media (max-width:640px){
  .boekbalk{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;width:auto}
  .boekbalk-regel{padding:10px 12px 11px}
  .boekbalk-ongedaan{padding:12px 18px}
  body.met-boekbalk .toast{bottom:calc(14px + var(--boekbalk-ruimte,0px))}
}
@media (prefers-reduced-motion:reduce){.boekbalk-voortgang span{transition:none}}

/* ----- Fouttolerantie-drempel alleen-lezen (punt 15 uit het rapport) -----
   Het potlood gebruikt de ronde knop van het tandwiel, zonder het draaien. */
.drempel-wijzig:hover{transform:none}
#drempel-overlay input[type=range]{width:100%;margin:10px 0 6px;accent-color:var(--oranje)}
.drempel-uitleg{font-size:13px;color:var(--grijs);min-height:1.5em}

/* ----- Verwerkt: wie deed het (punt 15 uit het rapport, UX-27) -----
   Vaste plek rechts, vóór de status; op een smal scherm loopt de rij door. */
.logrij .door{margin-left:auto;font-size:12px;color:var(--grijs);white-space:nowrap}
.logrij .door + .st{margin-left:14px}
/* Zoeken werkt ook op naam en e-mailadres; het veld is breed genoeg voor die hint. */
.log-filters #log-zoek{width:220px}

/* ----- Boeken met blokkade en het tabblad Vrijgeven (versie 1.6.0) ----- */
.noodstopstrip{width:100%;background:var(--rood-bg);border:1px solid var(--rood-rand);border-radius:14px;display:flex;align-items:center;gap:12px;padding:12px 18px;margin:0 0 16px;font-size:14px;color:var(--rood);box-shadow:var(--kaartschaduw)}
.noodstopstrip[hidden]{display:none}
.noodstopstrip .foutstip{width:22px;height:22px;border-radius:50%;background:var(--rood);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.vrijgroep{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--grijs-thin);font-size:13px;color:var(--grijs)}
.vrijgroep:first-child{margin-top:4px}
.vrijgroep b{font-weight:800;font-size:14px;color:var(--blauw)}
.vrijregels{display:inline-flex;gap:3px;align-items:center}
.vrijregel{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 8px;white-space:nowrap}
.vrijregel.ok{background:var(--groen-bg);color:var(--groen-tekst)}
.vrijregel.niet{background:var(--rood-bg);color:var(--rood);border:1px solid var(--rood-rand)}
.vrijregel.nvt{background:var(--hairline);color:var(--grijs)}
.vrijregel.onbekend{background:var(--geel-bg);color:var(--geel-tekst);border:1px solid var(--geel-rand)}
.vrijcode{font-size:12px;font-weight:700;color:var(--blauw);background:var(--blauw-soft);border-radius:999px;padding:4px 12px;white-space:nowrap}
.vrijstand{font-size:12px;font-weight:600;color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:999px;padding:3px 11px;white-space:nowrap}
.vrijstand.fout{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand)}
.kijkhint.zien{display:block}

/* ----- Regels van finance R1 tot en met R6 en de zekerheid (versie 1.5.0) -----
   Zes kleine tekens per rij: kleur én symbool (✓ goed, ✕ niet goed, ? onbekend,
   – niet van toepassing), zodat kleur nooit het enige verschil is. Een oordeel
   uit het dossier van de inkoopstraat heeft een gestippelde rand en het woord
   "dossier" ernaast. */
.rijkop .scores.met-regels{flex-wrap:wrap;row-gap:4px}
.score.midden{background:var(--geel-bg);color:var(--geel-tekst)}
.score.midden::before,.score.laag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px}
.score.midden::before{background:var(--geel)}
.score.laag{background:var(--rood-bg);color:var(--rood)}
.score.laag::before{background:var(--rood)}
.regeltekens{display:inline-flex;gap:3px;align-items:center;white-space:nowrap}
.regelteken{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:800;line-height:1;border-radius:6px;padding:3px 5px;border:1px solid transparent;font-variant-numeric:tabular-nums;cursor:help}
.regelteken b{font-weight:800;font-size:11px}
.regelteken.ok{background:var(--groen-bg);color:var(--groen-tekst);border-color:var(--groen-rand)}
.regelteken.niet{background:var(--rood-bg);color:var(--rood);border-color:var(--rood-rand)}
.regelteken.onbekend{background:var(--geel-bg);color:var(--geel-tekst);border-color:var(--geel-rand)}
.regelteken.nvt{background:#fff;color:var(--grijs);border-color:var(--grijs-thin)}
.regelteken.dossier{border-style:dashed;border-color:var(--blauw)}
/* Het zevende teken C (versie 1.9.6): de checks zonder eigen teken, met een
 * klein streepje ervoor zodat het zich van R1 tot en met R6 onderscheidt. */
.regelteken.controles{margin-left:3px;position:relative}
.regelteken.controles::before{content:"";position:absolute;left:-3px;top:4px;bottom:4px;border-left:1px solid var(--grijs-thin)}
.regeldossier{font-size:10.5px;font-weight:700;color:var(--blauw);border:1px dashed var(--blauw);border-radius:6px;padding:2px 5px;cursor:help}
.regeltekens.klein .regelteken{font-size:9.5px;padding:2px 4px}
.regeltekens.klein .regelteken b{font-size:10px}
/* Blok "Regels van finance" in het detail, over de volle breedte onder het
   document en de boeking. */
.regelsblok{grid-column:1/-1;background:#fff;border:1px solid var(--kaartrand);border-radius:12px;padding:14px 16px}
body.pdf-rechts .detail .regelsblok{order:2}
.regel-zekerheid{font-size:13px;color:var(--blauw-black);margin-bottom:8px}
.regelrijen{display:grid;gap:0}
.regelrij{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content max-content;gap:2px 12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--hairline);font-size:13px}
.regelrij:last-child{border-bottom:none}
.regel-naam{font-weight:700;color:var(--blauw-black)}
.regel-status{font-weight:700}
.regelrij.ok .regel-status{color:var(--groen-tekst)}
.regelrij.niet .regel-status{color:var(--rood)}
.regelrij.onbekend .regel-status{color:var(--geel-tekst)}
.regelrij.nvt .regel-status{color:var(--grijs)}
.regel-herkomst{font-size:12px;color:var(--grijs)}
.regel-reden,.regel-verkoop{grid-column:2/-1;font-size:12.5px;color:var(--grijs);line-height:1.5}
.regel-verkoop{color:var(--blauw-black)}
/* Regel R6, keuze a (versie 1.8.0): welke dagen niet verkocht zijn, de
   totaaltelling en of een medewerker akkoord kan geven. */
.regel-r6{grid-column:2/-1;font-size:12.5px;color:var(--blauw-black);line-height:1.5;background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:8px;padding:6px 10px;margin-top:4px;display:grid;gap:2px;overflow-wrap:anywhere}
.regel-r6 b{font-weight:700}
.regel-r6-akkoord{color:var(--grijs)}
@media (max-width:640px){.regelrij{grid-template-columns:max-content minmax(0,1fr)}.regel-status,.regel-herkomst{grid-column:2}}
/* Zekerheid en regels van één moment in de historie en in Verwerkt. */
.moment-regels{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;margin-left:8px;vertical-align:1px}
.hist-lijst li .moment-regels{grid-column:2/-1;margin-left:0}
.moment-zekerheid{font-size:11px;font-weight:700;color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:6px;padding:1px 6px;white-space:nowrap}
.moment-regeltekst{font-size:11.5px;color:var(--grijs)}
/* Uitzondering "Urenstaat ontbreekt" met de instelling uit: waarom de knop ontbreekt. */
.aanpasnoot{font-size:12.5px;color:var(--grijs)}

/* ----- Stand van de server (versie 1.5.0) -----
   Onder in de strip met achtergrondinformatie; boeken uit krijgt een eigen
   melding boven de lijsten. */
.serverstand{flex-basis:100%;font-size:12.5px;color:var(--grijs);border-top:1px dashed var(--grijs-thin);padding-top:8px;display:grid;gap:2px}
.serverstand[hidden]{display:none}
.boekenuit-melding{display:flex;align-items:center;gap:12px;background:var(--geel-bg);border:1px solid var(--geel-rand);border-left:4px solid var(--geel);border-radius:14px;padding:12px 18px;margin:0 0 16px;font-size:14px;color:var(--geel-tekst);box-shadow:var(--kaartschaduw)}
.boekenuit-melding[hidden]{display:none}
.boekenuit-melding b{color:var(--blauw-black)}
.boekenuit-teken{width:22px;height:22px;border-radius:50%;background:var(--geel);color:var(--blauw-black);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
[data-boeken-uit]:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* Eindklant en verkoopfactuur in de filterbalk (versie 1.5.0): label en
   keuzelijst blijven bij elkaar als de balk naar een tweede regel loopt. */
.filtergroep{display:inline-flex;align-items:center;gap:10px}
.filters select:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
@media (max-width:720px){.filtergroep{flex:1 1 100%}.filtergroep select{flex:1;min-width:0}}

/* ----- Twee processen bij het boeken (versie 1.6.0, procescorrectie finance
   5 oktober 2026) -----
   Een boekknop die volgens de server uit staat (projectfactuur waarvan nog
   niet alles groen is) is zichtbaar uit, met een korte noot eronder. */
.btn[data-boekknop-uit]:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.rijkop .acties:has(.boeknoot){flex-wrap:wrap;max-width:620px}
.boeknoot{flex:0 0 100%;min-width:0;font-size:12px;font-weight:600;color:var(--geel-tekst);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}
/* De klik bevestigt het factuurnummer en de factuurdatum (versie 1.9.6): geen
 * waarschuwing maar een aanwijzing, dus blauw in plaats van geel. */
.boeknoot.bevestig{color:var(--blauw)}
.btn.bevestigbaar{box-shadow:0 0 0 2px var(--blauw-soft)}
.btn.bevestigbaar:focus-visible{box-shadow:var(--focusring),0 0 0 2px var(--blauw-soft)}
@media (max-width:720px){.rijkop .acties:has(.boeknoot){max-width:none}.boeknoot{text-align:left;white-space:normal}}
/* Gele melding bovenaan: projectfacturen met een blokkade die nog weg moet. */
.projectblokkade-melding{background:var(--geel-bg);border:1px solid var(--geel-rand);border-left:4px solid var(--geel);border-radius:14px;margin:0 0 16px;font-size:14px;color:var(--geel-tekst);box-shadow:var(--kaartschaduw)}
.projectblokkade-melding[hidden]{display:none}
.projectblokkade-melding b{color:var(--blauw-black)}
.projectblokkade-open{width:100%;display:flex;align-items:center;gap:12px;padding:12px 18px;background:none;border:0;font:inherit;font-size:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:14px}
.projectblokkade-open .foutlink{margin-left:auto;font-weight:800;white-space:nowrap;color:var(--blauw)}
@media (max-width:640px){.projectblokkade-open{flex-wrap:wrap}.projectblokkade-open .foutlink{margin-left:34px}}
/* Tabblad Verwerkt: het blok met die projectfacturen, boven de audit-log. */
.projectblokkades{background:#fff;border:1px solid var(--rood-rand);border-left:4px solid var(--rood);border-radius:14px;padding:14px 16px;margin:0 0 18px;box-shadow:var(--kaartschaduw)}
.projectblokkades[hidden]{display:none}
.pbkop{display:grid;gap:4px;margin-bottom:8px;font-size:13px;color:var(--grijs)}
.pbkop b{font-size:15px;font-weight:800;color:var(--blauw-black)}
#lijst-projectblokkades .rij{border-top:1px solid var(--hairline)}
.pbregels{padding:0 18px 12px;display:grid;gap:4px}
.pbnoot{font-size:13px;font-weight:700;color:var(--rood)}
.pbwie{font-size:12.5px;color:var(--grijs)}
.kolomtitel .tag.rood{color:var(--rood);border-color:var(--rood-rand);background:var(--rood-bg)}
/* Instellingen, Boeken en vrijgeven: de twee processen naast elkaar. */
.processen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:4px 0 6px}
.processen .veldhint{grid-column:1/-1}
.proces{background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--blauw-black)}
.proces>b{font-weight:800;color:var(--blauw)}
.proces p{margin:6px 0 0;line-height:1.5}
body.geen-finance [data-blokkade-weghalen]{display:none}

/* ----- Het dossier van de inkoopstraat (versie 1.13.0, ontwerpkeuze D9) -----
   Een factuur uit een dossier: een blok over de volle breedte bovenaan het
   detail met het voorstel, de signalen, dubbel, de stand in Business Central,
   de bijlagen en de herkomst. Blauw zoals de omlijnde dossiertekens; rood en
   geel alleen waar de inkoopstraat dat zegt. Lange ids en bestandsnamen
   breken af, zodat het detail op een telefoon niet breder wordt dan het scherm. */
.type.dossier{color:var(--blauw);background:#fff;border:1px dashed var(--blauw)}

/* ----- De BC-wachtrij (V1): een factuur die al in Business Central stond.
   Het kenmerk lijkt op dat van de inkoopstraat, maar met een doorgetrokken
   rand; op de plek van het document een rustige verwijzing in plaats van een
   PDF (de server heeft er in V1 geen). */
.type.bcwachtrij{color:var(--blauw);background:var(--blauw-hairline);border:1px solid var(--blauw)}
/* Versie 1.36.0: wat bij een factuur uit de BC-wachtrij de klik tegenhoudt (niet meer in BC, goedkeuring loopt in BC). */
.type.bcwachtrij-let{color:var(--rood);background:#fff;border:1px solid var(--rood)}
.bcw-geenbeeld{border:1px dashed var(--blauw-soft);border-radius:12px;background:var(--blauw-hairline);padding:28px 20px;display:grid;justify-items:center;gap:8px;text-align:center;font-size:13.5px;line-height:1.55;color:var(--blauw-black);overflow-wrap:anywhere}
.bcw-geenbeeld-icoon{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--blauw-soft);color:var(--blauw);display:grid;place-items:center}
.bcw-geenbeeld-icoon svg{width:22px;height:22px}
/* Review 9215 (B1): bij een factuur uit BC staat op de plek van de boekknop de verwijzing naar Business Central. */
.bcw-boekinbc{font-size:13px;line-height:1.4;color:var(--blauw-black);align-self:center;overflow-wrap:anywhere}
.bcw-boekinbc .bcw-nr{white-space:nowrap}
.bcw-geenbeeld-kop{font-weight:800;font-size:16px;color:var(--blauw)}
.bcw-geenbeeld p{margin:0;max-width:46ch}
.bcw-geenbeeld b{font-weight:800;font-variant-numeric:tabular-nums}
.bcw-geenbeeld .bcw-geenbeeld-tijd{color:var(--grijs);font-size:12.5px}
.pdfvak .bcw-geenbeeld,.pdfvol-doc .bcw-geenbeeld{margin:16px}
.dossierblok{grid-column:1/-1;min-width:0;background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--blauw);border-radius:12px;padding:12px 16px;display:grid;gap:10px;font-size:var(--h-tekst-basis);line-height:var(--h-regel-basis);color:var(--blauw-black);overflow-wrap:anywhere}
.dossierblok .kolomtitel{margin-bottom:0}
.dossier-lbl{font-size:11px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.05em}
.dossier-sectie{display:grid;gap:4px;min-width:0}
.dossier-actie{display:grid;gap:4px}
.dossier-actiekop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dossier-actiesoort{font-weight:800;font-size:12.5px;border-radius:999px;padding:2px 11px;border:1px solid var(--blauw-soft);background:var(--blauw-hairline);color:var(--blauw)}
.dossier-actiesoort.boeken{background:var(--groen-bg);border-color:var(--groen-rand);color:var(--groen-tekst)}
.dossier-actiesoort.wachten,.dossier-actiesoort.handmatig{background:var(--geel-bg);border-color:var(--geel-rand);color:var(--geel-tekst)}
.dossier-actiesoort.afwijzen{background:var(--rood-bg);border-color:var(--rood-rand);color:var(--rood)}
.dossier-actieuitleg{color:var(--grijs)}
.dossier-toelichting{font-weight:600}
.dossier-grond{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12px;color:var(--grijs)}
.dossier-signalen{list-style:none;display:grid;gap:4px}
.dossier-signaal{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start}
.signaalteken{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:1px}
.dossier-signaal.rood .signaalteken{background:var(--rood);color:#fff}
.dossier-signaal.geel .signaalteken{background:var(--geel);color:var(--blauw-black)}
.dossier-signaal.info .signaalteken{background:var(--blauw-soft);color:var(--blauw)}
.signaalinhoud{min-width:0}
.signaalniveau{font-weight:800;font-size:12px;margin-right:2px}
.dossier-signaal.rood .signaalniveau{color:var(--rood)}
.dossier-signaal.geel .signaalniveau{color:var(--geel-tekst)}
.dossier-signaal.info .signaalniveau{color:var(--blauw)}
.signaalregel{font-size:11px;font-weight:700;color:var(--blauw);border:1px dashed var(--blauw);border-radius:6px;padding:0 5px;cursor:help}
.dossier-dubbel{background:var(--rood-bg);border:1px solid var(--rood-rand);border-radius:10px;padding:8px 12px}
.dossier-dubbel ul{padding-left:18px;display:grid;gap:4px}
.dossier-detail{display:block;font-size:12px;color:var(--grijs)}
.dossier-noot{font-size:12.5px;color:var(--grijs)}
.dossier-noot.geel{background:var(--geel-bg);border:1px solid var(--geel-rand);border-radius:10px;padding:8px 12px;color:var(--geel-tekst)}
.dossier-noot.geel b{color:var(--blauw-black)}
.dossier-aanwijzing{background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:10px;padding:8px 12px}
.dossier-stand b{font-weight:700}
.dossier-bewaard{background:var(--geel-bg);border:1px solid var(--geel-rand);border-left:4px solid var(--geel);border-radius:10px;padding:8px 12px;color:var(--geel-tekst)}
.dossier-bewaard b{color:var(--blauw-black)}
.dossier-bijlageknoppen{display:flex;flex-wrap:wrap;gap:8px}
.dossier-bijlage{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;max-width:100%;text-align:left}
.dossier-bijlage svg{width:15px;height:15px;flex:none}
.bijlage-naam{font-weight:600;min-width:0;overflow-wrap:anywhere}
.bijlage-paginas{font-weight:600;font-size:12px;color:var(--grijs)}
.dossier-herkomst{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--grijs);border-top:1px solid var(--hairline);padding-top:8px}
.dossier-herkomst div{display:flex;gap:5px;min-width:0}
.dossier-herkomst dt{font-weight:700;flex:none}
.dossier-herkomst dd{color:var(--blauw-black);min-width:0;overflow-wrap:anywhere}
.dossier-herkomst dd.dossier-id{word-break:break-all}
/* De zekerheid van een dossierfactuur in het blok Regels van finance: het
   dossier, de eigen controle van de app en wat geldt, en per veld bevestigd
   of niet (met een teken: kleur is nooit het enige verschil). */
.zekerheid-opbouw{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.zo-stap{display:inline-flex;flex-direction:column;background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:10px;padding:5px 12px;min-width:0}
.zo-stap small{font-size:11px;font-weight:700;color:var(--grijs)}
.zo-stap b{font-size:15px;font-weight:800;color:var(--blauw)}
.zo-stap.geldt{background:#fff;border-color:var(--blauw)}
.zekerheid-velden{list-style:none;margin:0 0 8px;display:grid;gap:2px;font-size:12.5px}
.zekerheid-velden li{display:grid;grid-template-columns:16px max-content minmax(0,1fr);gap:0 8px;align-items:baseline}
.zv-teken{text-align:center;font-weight:800}
.zekerheid-velden li.ok .zv-teken{color:var(--groen-tekst)}
.zekerheid-velden li.niet .zv-teken{color:var(--geel-tekst)}
.zv-veld{font-weight:700}
.zv-uitleg{color:var(--grijs);min-width:0}
@media (max-width:640px){.dossierblok{padding:10px 12px}.dossier-bijlage{flex:1 1 100%}.zekerheid-velden li{grid-template-columns:16px minmax(0,1fr)}.zv-uitleg{grid-column:2}}

/* Schil-stand (docs/SCHIL-HEROAPP.md): de voorkant in een venster van
   heroapp.nl. De schil toont de app-naam, de gebruiker en de navigatie en
   regelt de login; de app valt er naadloos in (melding van 7 oktober 2026).
   - Geen eigen kopbalk: geen verloop, schaduw of lijn, en geen logo, titel,
     ondertitel of naam. Het profiel staat in de zijbalk van de schil (Mijn
     profiel). Weg met CSS en niet uit de pagina: app.js schrijft de naam en
     melding.js zoekt de knoppen op bij de start.
   - Van de kop blijven de versieknop en de meldknop over, als rustige
     knopjes rechtsboven in de stijl van de knop Terug. Even breed als de
     inhoud, zodat de meldknop rechts uitlijnt met de kaarten. Zo kan elke rol
     een melding doen, ook een goedkeurder die geen tabbladen ziet.
   - De achtergrond van het inhoudsvlak van heroapp.nl (#f6f8fc), zonder
     gloed, ook achter de vaste tabbladenrij.
   - Geen Microsoft-knop en geen Uitloggen. */
body.schil{--bg:#f6f8fc}
body.schil::before{display:none}
body.schil header{background:none;box-shadow:none;color:var(--blauw);max-width:1800px;margin:0 auto;padding:12px clamp(16px,2.5vw,48px) 0;justify-content:flex-end;gap:8px}
body.schil header::after{display:none}
body.schil header img,body.schil header .apptitel,body.schil header .appsub,body.schil header .user{display:none}
body.schil header .versie,body.schil header .melding-knop{height:32px;padding:0 14px;color:var(--blauw);background:#fff;border-color:var(--kaartrand);font-size:12px;font-weight:800;box-shadow:0 1px 3px rgba(3,21,63,.06)}
body.schil header .versie:hover,body.schil header .melding-knop:hover{background:#fff;border-color:var(--blauw);box-shadow:0 2px 8px rgba(3,21,63,.1)}
body.schil header .versie:focus-visible,body.schil header .melding-knop:focus-visible{outline:none;box-shadow:var(--focusring)}
body.schil header .versie.nieuw::after{box-shadow:0 0 0 2px #fff}
body.schil header .melding-knop{margin-left:0}
body.schil .tabs{background:rgba(246,248,252,.88)}
body.schil .wrap{padding-top:12px}
body.schil #login-microsoft{display:none}
body.schil [data-profiel-uitloggen]{display:none}

/* ----- De dossierpagina (versie 1.22.0, ticket 8436 F2) -----
   In het blok Dossier: vier uitklapbare delen (lezing per veld, oordelen,
   revisies, logboek). Op een groot scherm de lezing als tabel, op de
   telefoon per veld een kaartje. Percentages en bronnen met een teken én een
   kleur: kleur is nooit het enige verschil. */
.dossierpagina{display:grid;gap:8px;min-width:0;border-top:1px solid var(--hairline);padding-top:10px}
.dp-sectie{background:var(--blauw-hairline);border:1px solid var(--blauw-soft);border-radius:10px;min-width:0}
.dp-sectie>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:8px 12px;border-radius:10px}
.dp-sectie>summary::-webkit-details-marker{display:none}
.dp-sectie>summary::before{content:"▸";display:inline-block;width:10px;color:var(--blauw);transition:transform .15s}
.dp-sectie[open]>summary::before{transform:rotate(90deg)}
.dp-sectie>summary:focus-visible{outline:none;box-shadow:var(--focusring)}
.dp-titel{font-weight:800;color:var(--blauw)}
.dp-samenvatting{font-size:12px;font-weight:600;color:var(--grijs)}
.dp-inhoud{display:grid;gap:8px;min-width:0;padding:8px 12px 12px;background:#fff;border-top:1px solid var(--blauw-soft);border-radius:0 0 10px 10px}
.dp-zekerheid{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-weight:700}
.dp-opbouw{font-size:12.5px;font-weight:400;color:var(--grijs)}
.dp-waarom{flex-basis:100%;font-weight:400}
.dp-procent{display:inline-block;font-size:12px;font-weight:800;border:1px solid;border-radius:999px;padding:0 8px;white-space:nowrap}
.dp-procent.hoog{background:var(--groen-bg);color:var(--groen-tekst);border-color:var(--groen-rand)}
.dp-procent.midden{background:var(--geel-bg);color:var(--geel-tekst);border-color:var(--geel-rand)}
.dp-procent.laag{background:var(--rood-bg);color:var(--rood);border-color:var(--rood-rand)}
.dp-velden{width:100%;border-collapse:collapse;font-size:12.5px}
.dp-velden th,.dp-velden td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--grijs-thin);min-width:0}
.dp-velden thead th{font-size:11px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.dp-velden tbody th{font-weight:700;white-space:nowrap}
.dp-velden td.dp-w b{font-weight:700;overflow-wrap:anywhere}
.dp-velden tr.onder td.dp-r{color:var(--blauw-black)}
.dp-dossierwaarde,.dp-noot,.dp-bronuitleg,.dp-eigen{display:block;font-size:11.5px;color:var(--grijs)}
.dp-dossierwaarde{color:var(--geel-tekst);font-weight:600}
.dp-leeg{color:var(--grijs);font-style:italic}
.dp-bron{font-weight:700;white-space:nowrap}
.dp-bron.ok{color:var(--groen-tekst)}
.dp-bron.lezing{color:var(--geel-tekst)}
.dp-oordelen,.dp-revisies,.dp-logboek{list-style:none;margin:0;padding:0;display:grid;font-size:12.5px}
.dp-oordeel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 16px;padding:7px 0;border-bottom:1px solid var(--grijs-thin)}
.dp-oordeelkop{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.dp-oordeelnaam{font-weight:700}
.dp-geldt{font-size:12px;color:var(--grijs)}
.dp-kant{min-width:0}
.dp-kantlabel{font-size:11px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
.dp-kantreden{display:block;overflow-wrap:anywhere}
.dp-kort{font-size:11px;font-weight:700;color:var(--blauw);border:1px solid var(--blauw-soft);border-radius:999px;padding:0 6px}
.dp-revisie{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:6px 0;border-bottom:1px solid var(--grijs-thin)}
.dp-revnr{font-weight:800}
.dp-stand{font-size:11.5px;font-weight:800;color:var(--grijs);background:#fff;border:1px solid var(--grijs-thin);border-radius:999px;padding:0 8px}
.dp-stand.geldt{color:var(--blauw);background:var(--blauw-hairline);border-color:var(--blauw)}
.dp-stand.bewaard,.dp-stand.wacht{color:var(--geel-tekst);background:var(--geel-bg);border-color:var(--geel-rand)}
.dp-revdelen{color:var(--grijs)}
.dp-revreden{flex-basis:100%;overflow-wrap:anywhere}
.dp-logboek{font-variant-numeric:tabular-nums}
.dp-logregel{display:grid;grid-template-columns:130px minmax(140px,auto) minmax(90px,auto) minmax(0,1fr);gap:2px 10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--grijs-thin)}
.dp-logregel.fout .dp-logactie{color:var(--rood)}
.dp-logtijd{color:var(--grijs)}
.dp-logactie{font-weight:700}
.dp-logwie{min-width:0;overflow-wrap:anywhere}
.dp-logtekst{grid-column:2/-1;color:var(--grijs);overflow-wrap:anywhere}
/* De ketting en de grond per regel komen van de historie (F1: .hist-ketting,
   .hist-grond); hier alleen hun plek in het raster van het logboek, en de
   kettingkop in de samenvatting van het dichtgeklapte deel. */
.dp-logregel .hist-ketting,.dp-logregel .hist-grond{grid-column:2/-1}
.dp-samenvatting .hist-ketting-kop{display:inline-block;margin-left:6px;font-weight:600;font-size:11px;color:var(--grijs);background:#fff;border:1px solid var(--grijs-thin);border-radius:6px;padding:1px 8px}
.dp-samenvatting .hist-ketting-kop.ok{color:var(--groen-tekst);background:var(--groen-bg);border-color:var(--groen-rand)}
.dp-samenvatting .hist-ketting-kop.breuk{color:var(--rood);background:var(--rood-bg);border-color:var(--rood-rand)}
/* De knop onderaan de dossierpagina (versie 1.27.0, ticket 8436 P3). */
.dp-boeken{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 12px;background:#fff;border:1px solid var(--blauw-soft);border-radius:10px;min-width:0}
.dp-boeken-tekst{flex:1 1 260px;min-width:0;font-size:13px;color:var(--blauw-black);overflow-wrap:anywhere}
.dp-boeken-knop{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 10px;min-width:0}
.dp-boeken-knop .boeknoot{flex:1 1 100%;text-align:right;white-space:normal;overflow:visible}
@media (max-width:640px){
  .dp-boeken-knop{flex:1 1 100%;justify-content:stretch}
  .dp-boeken-knop .btn{flex:1 1 100%;min-height:44px}
  .dp-boeken-knop .boeknoot{text-align:left}
}
@media (prefers-reduced-motion:reduce){.dp-sectie>summary::before{transition:none}}
@media (max-width:640px){
  .dp-sectie>summary{padding:10px 12px}
  .dp-inhoud{padding:6px 10px 10px}
  .dp-velden thead{display:none}
  .dp-velden,.dp-velden tbody{display:block;width:auto}
  .dp-velden tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--grijs-thin)}
  .dp-velden th,.dp-velden td{display:block;border:0;padding:0}
  .dp-velden tbody th{grid-column:1;grid-row:1;white-space:normal}
  .dp-velden td.dp-z{grid-column:2;grid-row:1;text-align:right}
  .dp-velden td.dp-w{grid-column:1/-1;grid-row:2}
  .dp-velden td.dp-b{grid-column:1/-1;grid-row:3}
  .dp-velden td.dp-r{grid-column:1/-1;grid-row:4}
  .dp-velden td.dp-r:empty{display:none}
  .dp-velden td.dp-r:not(:empty)::before{content:"Waarom onder 99: ";font-weight:700}
  .dp-bron{white-space:normal}
  .dp-oordeel{grid-template-columns:minmax(0,1fr)}
  .dp-logregel{grid-template-columns:minmax(0,1fr) auto}
  .dp-logactie,.dp-logtekst,.dp-logregel .hist-ketting,.dp-logregel .hist-grond{grid-column:1/-1}
  .dp-logwie{grid-column:1/-1}
}

/* ----- Anker, ontvangst en vervaldatum, urenstaat (versie 1.22.0) -----
   Het anker: drie waarden per geldveld naast elkaar; een afwijking krijgt
   rood én een teken met de tekst "wijkt af van de eerste lezing". Op de
   telefoon wordt elke rij een kaartje met de waarden onder elkaar. */
.dp-anker{display:grid;gap:6px;min-width:0}
.dp-ankerkop{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.dp-ankeruitleg{font-size:12px;color:var(--grijs)}
.dp-ankertabel{justify-self:start;width:auto;min-width:min(100%,560px);max-width:100%;border-collapse:collapse;font-size:12.5px}
.dp-ankertabel th,.dp-ankertabel td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--grijs-thin)}
.dp-ankertabel thead th{font-size:11px;font-weight:800;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.dp-ankertabel thead th:not(:first-child),.dp-ankertabel td.dp-num{text-align:right}
.dp-ankertabel tbody th{font-weight:700;white-space:nowrap}
.dp-num{font-variant-numeric:tabular-nums;min-width:120px}
.dp-num b{font-weight:700;white-space:nowrap}
.dp-num.afwijking{background:var(--rood-bg);box-shadow:inset 3px 0 0 var(--rood)}
.dp-num.afwijking b{color:var(--rood)}
.dp-wijkt{display:block;font-size:11.5px;font-weight:700;color:var(--rood)}
.dp-ankernoot{display:block;max-width:260px;margin-left:auto;font-size:11px;color:var(--grijs);text-align:right}
.dp-termijn{display:grid;gap:0;margin:0;font-size:12.5px}
.dp-termijn>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:2px 12px;padding:6px 0;border-bottom:1px solid var(--grijs-thin)}
.dp-termijn dt{font-weight:700;color:var(--blauw-black)}
.dp-termijn dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dp-termijnnoot{display:block;font-size:12px;color:var(--geel-tekst);font-weight:600}
.dp-urenstaat{display:grid;gap:10px;min-width:0;font-size:12.5px}
.dp-usuitleg{color:var(--grijs)}
.dp-usprojecten{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dp-usproject{display:grid;gap:6px;min-width:0;border:1px solid var(--grijs-thin);border-radius:8px;padding:8px 10px}
.dp-uskop{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.dp-uskop span{color:var(--grijs)}
.dp-usregels{display:grid;gap:4px;margin:0}
.dp-usregels>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 12px}
.dp-usregels dt{font-weight:700}
.dp-usregels dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dp-usnoot{display:block;font-size:11.5px;color:var(--grijs)}
.dp-usbesluit{display:grid;gap:2px;border-radius:8px;padding:8px 10px;border:1px solid}
.dp-usbesluit.vast{background:var(--groen-bg);border-color:var(--groen-rand);color:var(--groen-tekst)}
.dp-usbesluit.voorstel{background:var(--blauw-hairline);border-color:var(--blauw-soft);color:var(--blauw-black)}
.dp-usbesluit ul{margin:2px 0 0;padding-left:18px}
.dp-usontbreekt{font-weight:700;margin-top:4px}
.dp-usbijlagen{display:grid;gap:4px}
.dp-usvoorstel{display:grid;gap:4px}
.dp-usvoorstel dl{display:grid;gap:2px;margin:0;font-variant-numeric:tabular-nums}
.dp-usvoorstel dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;border-bottom:1px solid var(--grijs-thin);padding:2px 0}
.dp-usvoorstel dt{color:var(--grijs);overflow-wrap:anywhere}
.dp-usvoorstel dd{margin:0}
@media (max-width:640px){
  .dp-ankertabel thead{display:none}
  .dp-ankertabel,.dp-ankertabel tbody{display:block;justify-self:stretch;width:auto;min-width:0}
  .dp-ankertabel tr{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 0;border-bottom:1px solid var(--grijs-thin)}
  .dp-ankertabel th,.dp-ankertabel td{display:block;border:0;padding:0}
  .dp-ankertabel td.dp-num{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;min-width:0;text-align:right;padding:2px 6px;border-radius:6px}
  .dp-ankertabel td.dp-num::before{content:attr(data-label);text-align:left;color:var(--grijs);font-size:12px}
  .dp-ankertabel td.dp-num .dp-wijkt,.dp-ankertabel td.dp-num .dp-ankernoot{grid-column:1/-1;max-width:none;text-align:right}
  .dp-termijn>div,.dp-usregels>div{grid-template-columns:minmax(0,1fr)}
}