/* ============================================================================
   SYB Klantportaal — gedeelde stijl (los van de interne app/syb.css).
   Nagebouwd uit de Claude Design-levering (design-system/claude-design/
   04-ontwerpen/levering_klantportaal) tegen de bevroren tokens.

   EÉN responsive stylesheet met TWEE schillen:
   - mobiel (<768px): smalle kolom + sticky bovenbalk + bottom-nav (.bnav);
   - desktop (>=768px): brede kolom (max 1200) + horizontale top-nav (.d-top).
   Dezelfde component-laag (.kaart .pil .keuzes .md .upload .melding .tbl ...)
   bedient beide. Warm palet + Inter; woordmerk = het SVG-merk.
   ============================================================================ */

/* Inter SELF-HOSTED (screening 2026-07-12, privacy/AVG): het portaal
   toont financiële/fiscale klantdata — geen client-IP's meer naar Google
   Fonts. Zelfde woff2 als de app en de marketingwebsite. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/inter-v20-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/inter-v20-latin-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/inter-v20-latin-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/inter-v20-latin-700.woff2') format('woff2')}

:root{
  --beige:#F4F3F1; --wit:#FFFFFF; --rand:#E8E3DC;
  --donker:#2E2E2E; --grijs:#555555; --taupe:#B8AFA1;
  --oranje:#E05A28; --oranje-d:#C94E24; --oranje-zacht:#FBEEE8;
  /* Fase 5 (WCAG AA): AA-contrast onder witte tekst (4.57:1) / als tekstkleur
     op wit (4.57:1). --oranje (#E05A28) blijft het DECORATIEVE merkaccent:
     borders, accentstreepjes, focus-ringen, iconen — geen tekstdrager. */
  --oranje-vlak:#C94E24; --oranje-vlak-hover:#B44520; --oranje-tekst:#C94E24;
  /* Fase 5 (WCAG AA): gedempte TEKST op licht (5.68:1 op wit) — vervangt
     --taupe als tekstkleur; --taupe blijft voor SVG-strokes/borders. */
  --gedempt:#6B6660;
  --groen:#4A7C59; --rood:#A04545; --blauw:#3A6EA8; --warn:#C0833A;
  --chev:#C3BCB1; --voet:#6B6660;
  --schaduw:0 1px 2px rgba(46,46,46,.05),0 4px 16px rgba(46,46,46,.05);
  --schaduw-h:0 2px 4px rgba(46,46,46,.06),0 8px 24px rgba(46,46,46,.08);
  --ring:0 0 0 3px rgba(224,90,40,.18);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#E7E4DF; color:var(--donker);
  font-family:var(--font); line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--blauw);text-decoration:none}

/* Zichtbare focus voor toetsenbordgebruikers (a11y) — behalve waar een eigen
   focusstijl staat (inputs/keuzes). */
:focus-visible{outline:2px solid var(--oranje);outline-offset:2px;border-radius:6px}

/* Skip-link (Fase 5, WCAG 2.4.1) — zelfde patroon als de interne app: het
   eerste focusbare element in de schil (_shell.html, href="#inhoud");
   onzichtbaar tot toetsenbord-focus, dan zichtbaar linksboven, bóven de
   sticky bovenbalk (z-index 5). */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--donker);color:#fff;font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:0 0 10px 0;text-decoration:none;
}
.skip-link:focus{left:0}

/* ===========================================================================
   1. Responsieve schil
   =========================================================================== */
.pwrap{
  width:100%; max-width:560px; margin:0 auto; min-height:100dvh;
  background:var(--beige); display:flex; flex-direction:column;
}
@media (min-width:560px) and (max-width:767px){
  .pwrap{border-left:1px solid var(--rand);border-right:1px solid var(--rand)}
}
/* Desktop: schermvullend. Het beige canvas + de bovenbalk lopen edge-to-edge
   i.p.v. een smal gecentreerd 'tablet'-eiland op de donkerdere body. */
@media (min-width:768px){
  .pwrap{max-width:none}
}

/* ---- Mobiele bovenbalk (<768px) ---- */
.p-top{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
  background:rgba(244,243,241,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rand);
  padding:14px 18px; padding-top:calc(14px + env(safe-area-inset-top));
}
.p-top .wm{height:22px;width:auto;display:block}
@media (min-width:768px){ .p-top{display:none} }

.p-uit,.p-terug{
  display:inline-flex; align-items:center; min-height:44px;
  border:1px solid var(--rand); background:var(--wit); color:var(--grijs);
  font:inherit; font-size:13px; font-weight:600; border-radius:9px;
  padding:8px 13px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.p-uit{margin-left:auto}
.p-uit:hover,.p-terug:hover{color:var(--donker)}
form.p-uit-form{margin:0 0 0 auto;display:flex}

/* ---- Desktop bovenbalk (>=768px) ---- */
.d-top{display:none}
@media (min-width:768px){
  .d-top{
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:26px;
    background:rgba(244,243,241,.96); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rand); padding:0 40px; height:64px;
  }
  .d-top .wm{height:24px;width:auto;display:block}
}
.d-nav{display:flex;gap:4px;align-items:center}
.d-nav a{
  position:relative; text-decoration:none; color:var(--grijs);
  font-size:14px; font-weight:600; padding:8px 13px; border-radius:9px;
  display:inline-flex; align-items:center;
}
.d-nav a:hover{background:rgba(55,53,47,.05);color:var(--donker)}
.d-nav a.actief{color:var(--donker)}
.d-nav a.actief::after{
  content:""; position:absolute; left:13px; right:13px; bottom:-1px;
  height:2px; background:var(--donker); border-radius:2px;
}
.d-nav a .telt{
  background:var(--oranje-vlak); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:999px; padding:1px 6px; margin-left:6px; line-height:1.5;
}
.d-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.d-klant{font-size:13.5px;color:var(--grijs)}
.d-klant b{color:var(--donker);font-weight:600}
.d-uit{
  border:1px solid var(--rand); background:var(--wit); color:var(--grijs);
  font:inherit; font-size:13px; font-weight:600; border-radius:9px;
  padding:8px 13px; cursor:pointer; text-decoration:none;
}
.d-uit:hover{color:var(--donker)}

/* ---- Mobiele bottom-nav (<768px) ---- */
.bnav{
  position:sticky; bottom:0; z-index:5; display:flex;
  background:rgba(244,243,241,.95); backdrop-filter:blur(8px);
  border-top:1px solid var(--rand);
  padding-bottom:env(safe-area-inset-bottom);
}
.bnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px 11px; text-decoration:none; color:var(--grijs);
  font-size:11px; font-weight:600; min-height:54px; justify-content:center;
}
.bnav a.actief{color:var(--donker)}
.bnav a.actief svg{stroke:var(--oranje)}
.bnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bnav .telt{position:relative}
.bnav .telt::after{
  content:attr(data-telt); position:absolute; top:-5px; right:-9px;
  background:var(--oranje-vlak); color:#fff; font-size:9.5px; font-weight:700;
  min-width:15px; height:15px; border-radius:999px; display:flex;
  align-items:center; justify-content:center; padding:0 3px;
}
@media (min-width:768px){ .bnav{display:none} }

/* ===========================================================================
   2. Inhoud + koppen
   =========================================================================== */
.p-main{padding:20px 16px calc(30px + env(safe-area-inset-bottom));flex:1}
@media (min-width:768px){ .p-main{padding:34px 40px 48px} }
.p-sub{color:var(--grijs);font-size:14.5px;margin:0 2px 16px}
.p-titel{font-size:23px;font-weight:700;letter-spacing:-.3px;margin:4px 2px 2px}
@media (min-width:768px){ .p-titel{font-size:27px;letter-spacing:-.4px} }
.p-lead{color:var(--grijs);font-size:15px;margin:0 0 24px 2px}
h2.sectie,.sectie{
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--grijs);font-weight:600;margin:26px 2px 12px;
}
.sectie:first-child{margin-top:4px}

/* ===========================================================================
   3. Kaarten + rijen + pillen
   =========================================================================== */
.kaart{
  background:var(--wit);border:1px solid var(--rand);border-radius:14px;
  padding:16px;box-shadow:var(--schaduw);margin-bottom:12px;
}
a.kaart,button.kaart{
  display:block;width:100%;text-align:left;color:inherit;text-decoration:none;
  font:inherit;cursor:pointer;transition:transform .12s,box-shadow .12s;
}
a.kaart:hover,button.kaart:hover{box-shadow:var(--schaduw-h)}
a.kaart:active,button.kaart:active{transform:scale(.992)}

.rij{display:flex;align-items:center;gap:12px}
.muted{color:var(--grijs)}
.klein{font-size:13px}
.bedrag{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.vraag-titel{font-weight:600;font-size:15.5px;line-height:1.32;margin:9px 0 3px}
.chev{color:var(--chev);font-size:22px;line-height:1;margin-left:auto}

.pil{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.pil::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pil.wacht{background:#F6EAD7;color:#855B17} /* was #9A6A20 (3.96:1) → 5.04:1 (Fase 5, AA) */
.pil.beantwoord{background:#E4EFE7;color:#3A6349}
.pil.verwerkt{background:#E3EDF6;color:#345F86}
.pil.info{background:#E3EDF6;color:#345F86}

/* ===========================================================================
   4. Antwoord-keuze (radio's als tap-targets, werkt zonder JS)
   =========================================================================== */
.keuzes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
/* Desktop: drie gelijke kolommen op één rij (conform het ontwerp) i.p.v. 2+1,
   zodat de keuzes de breedte benutten en de detailkop niet half leeg blijft.
   .keuzes .keuze.breed wint qua specificiteit van de latere .keuze.breed-regel. */
@media (min-width:768px){
  .keuzes{grid-template-columns:1fr 1fr 1fr}
  .keuzes .keuze.breed{grid-column:auto}
}
.keuze{position:relative}
.keuze input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.keuze span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:56px;
  border:1.5px solid var(--rand);background:var(--wit);border-radius:13px;
  padding:16px 10px;text-align:center;font-weight:600;font-size:15px;
  cursor:pointer;transition:border-color .14s,background .14s,color .14s;
}
/* Sub-regel ónder het keuzelabel (bv. de weet-niet-boekingsconsequentie).
   Bewust een <small> in de template: '.keuze span' zou een geneste span
   als eigen keuzepil stylen. */
.keuze .keuze-sub{
  display:block;font-weight:400;font-size:12.5px;color:var(--gedempt);
  line-height:1.35;margin-top:2px;
}
.keuze.breed{grid-column:1 / -1}
.keuze input:hover + span{background:#FAF8F5}
.keuze input:checked + span{border-color:var(--oranje);background:var(--oranje-zacht);color:var(--oranje-vlak-hover)}
.keuze input:focus-visible + span{outline:2px solid var(--oranje);outline-offset:2px}

/* ===========================================================================
   5. Formulier
   =========================================================================== */
label.veld{display:block;font-size:13px;color:var(--grijs);font-weight:600;margin:18px 2px 6px}
.inp{
  width:100%;border:1px solid var(--rand);border-radius:11px;padding:12px 13px;
  font-size:16px;font-family:inherit;background:var(--wit);color:var(--donker);
}
.inp::placeholder{color:var(--gedempt)}
.inp:focus{outline:none;border-color:var(--oranje);box-shadow:var(--ring)}
textarea.inp{resize:vertical;min-height:64px}
.veld-fout{display:block;color:var(--rood);font-size:13px;margin:6px 2px 0}

/* Drag&drop / bestand-kiezen (bonnen + bon-bij-vraag) */
.upload{
  border:1.5px dashed var(--rand);border-radius:14px;background:var(--wit);
  padding:22px 16px;text-align:center;cursor:pointer;
  transition:border-color .14s,background .14s;display:block;
}
.upload:hover{border-color:var(--oranje);background:#FCFBF9}
/* Het file-input is visueel verborgen; spiegel zijn focus naar de zichtbare
   label zodat toetsenbordgebruikers de uploadzone zien oplichten (WCAG 2.4.7).
   Zelfde aanpak als .seg/.keuze en .upload-dropzone in de interne syb.css. */
.upload:focus-within,.upload-tweede:focus-within{border-color:var(--oranje);box-shadow:var(--ring)}
.upload svg{width:26px;height:26px;stroke:var(--taupe);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.upload b{display:block;font-size:14.5px;color:var(--donker);font-weight:600;margin-bottom:2px}
.upload .klein{color:var(--grijs)}

/* ===========================================================================
   6. Knoppen — convention: .btn = neutraal, .btn.cta = oranje hoofdactie
   =========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;font-size:15.5px;font-weight:600;
  border-radius:12px;padding:13px 18px;border:1px solid var(--rand);
  background:var(--wit);color:var(--donker);cursor:pointer;font-family:inherit;
  text-decoration:none;
}
.btn:hover{background:#FAF8F5}
.btn.cta{background:var(--oranje-vlak);border-color:var(--oranje-vlak);color:#fff;box-shadow:0 2px 8px rgba(224,90,40,.26)}
.btn.cta:hover{background:var(--oranje-vlak-hover);border-color:var(--oranje-vlak-hover)}
.btn.auto{width:auto}
.btn + .btn{margin-top:10px}
.btn-n{ /* alias voor neutraal naast een cta in een rij */
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;font-size:15px;font-weight:600;border-radius:12px;
  padding:13px 18px;border:1px solid var(--rand);background:var(--wit);
  color:var(--donker);cursor:pointer;font-family:inherit;text-decoration:none;
}
.btn-n:hover{background:#FAF8F5}
.knoprij{display:flex;gap:12px;flex-wrap:wrap}
.knoprij .btn,.knoprij .btn-n{width:auto;margin-top:0}

/* ===========================================================================
   7. Meldingen (flash + inline)
   =========================================================================== */
.alert{border-radius:11px;padding:12px 14px;font-size:14px;margin-bottom:14px;border:1px solid}
.alert-succes{background:#E9F1EC;border-color:#CFE2D5;color:#34603F}
.alert-fout{background:#F6E7E7;border-color:#E6CCCC;color:#8A3A3A}
.alert-info{background:#EAF0F6;border-color:#D3E0EE;color:#345F86}

.melding{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--rand);border-radius:12px;padding:13px 15px;font-size:14px;line-height:1.5;margin-bottom:14px}
.melding b{font-weight:600}
.melding .ic{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;margin-top:1px}
.melding.succes{background:#E4EFE7;border-color:#CBE0D2;color:#2F5640}
.melding.succes .ic{background:var(--groen)}
.melding.info{background:#E3EDF6;border-color:#CFE0EF;color:#2C507A}
.melding.info .ic{background:var(--blauw)}

.leeg{text-align:center;color:var(--grijs);padding:32px 12px;font-size:15px}
.voet{text-align:center;color:var(--voet);font-size:12.5px;margin-top:32px}

/* ===========================================================================
   8. Master-detail (desktop vragen) — mobiel = alleen detail
   =========================================================================== */
.md{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--rand);border-radius:14px;overflow:hidden;background:var(--wit);box-shadow:var(--schaduw)}
@media (min-width:768px){ .md{grid-template-columns:340px 1fr} }
.md-lijst{border-right:1px solid var(--rand);background:#FBFAF8;max-height:640px;overflow:auto}
@media (max-width:767px){ .md-lijst{display:none} }
/* Mobiel: het detailpaneel staat op het beige canvas (geen witte kaart-chrome),
   zoals het ontwerp — luchtiger én geen wit dat onder de sticky bottom-nav lekt.
   Desktop houdt de kaart + border van de master-detail. */
@media (max-width:767px){
  .md{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .md-detail{padding:0}
}
.md-li{display:block;width:100%;text-align:left;border:0;background:transparent;border-bottom:1px solid var(--rand);padding:15px 18px;cursor:pointer;font:inherit;color:inherit;text-decoration:none}
.md-li:hover{background:#F4F1EC}
.md-li.actief{background:var(--wit);box-shadow:inset 3px 0 0 var(--oranje)}
/* Statisch lijstitem (geen link/knop): geen valse klikbaarheid — bv. de
   één-gesprek-rail in Berichten. */
.md-li-statisch{cursor:default}
.md-li-statisch:hover{background:var(--wit)}
.md-li .t{font-weight:600;font-size:14px;line-height:1.34;margin:7px 0 3px;color:var(--donker)}
.md-detail{padding:22px 18px}
@media (min-width:768px){ .md-detail{padding:30px 34px} }
/* Antwoordknop: vol op mobiel (tap-target), compact op desktop. */
@media (min-width:768px){ .md-detail form .btn{width:auto} }
/* Koppen die alleen bij de desktop-master-detail horen. */
.alleen-desktop{display:none}
@media (min-width:768px){ .alleen-desktop{display:block} }

/* Vraag-detail mobiel: de vraag-kop (status + vraag + context) als eigen witte
   kaart op het beige canvas (conform het ontwerp). Desktop = gewoon de bovenkant
   van het witte detailpaneel, dus geen extra kaart-chrome. */
@media (max-width:767px){
  .vraag-kop{
    background:var(--wit);border:1px solid var(--rand);border-radius:14px;
    padding:16px;box-shadow:var(--schaduw);margin-bottom:18px;
  }
}

/* Visueel verborgen, wél voor schermlezers (a11y) — zelfde clip-techniek als
   .upload-input. Met .alleen-mobiel erbij: alleen op mobiel in de boom. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===========================================================================
   9. Dashboard-grid + snapshot (desktop home) — eerlijke rail, geen nepdata
   =========================================================================== */
.dash{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media (min-width:980px){ .dash{grid-template-columns:1.55fr 1fr} }
/* Snapshot-rail alleen op brede schermen (mobiel = gefocuste inbox, zoals de
   ontwerpen voorschrijven). */
.alleen-breed{display:none}
@media (min-width:980px){ .alleen-breed{display:block} }
.snap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:16px;box-shadow:var(--schaduw)}
.stat .lab{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);font-weight:700;margin:0 0 8px}
.stat .big{font-size:26px;font-weight:700;letter-spacing:-.5px}
.stat .sub{font-size:12.5px;color:var(--grijs);margin-top:3px}
.stap{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.stap:last-child{margin-bottom:0}
.stap .nr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--oranje-zacht);color:var(--oranje-vlak-hover);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.stap .tk{font-size:14px;line-height:1.45}
.stap .tk b{font-weight:600}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--grijs);font-weight:700;padding:0 0 10px;border-bottom:1px solid var(--rand)}
.tbl td{padding:13px 0;border-bottom:1px solid var(--rand);color:var(--donker)}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

.bon{display:flex;align-items:center;gap:11px;border:1px solid var(--rand);border-radius:11px;padding:10px 12px;background:#FCFBF9}
.bon .mini{width:38px;height:46px;border-radius:6px;background:#F1ECE4;border:1px solid var(--rand);flex:none;display:flex;align-items:center;justify-content:center;color:var(--gedempt);font-size:9px;font-weight:700;letter-spacing:.04em}

/* ===========================================================================
   10. Inlog-/activatiekaart (gecentreerd, geen nav)
   =========================================================================== */
.auth-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 18px}
.auth-card{width:100%;max-width:400px;background:var(--wit);border:1px solid var(--rand);border-radius:18px;padding:30px 26px;box-shadow:var(--schaduw)}
@media (min-width:768px){ .auth-card{padding:36px 32px} }
.auth-card .wm{height:26px;margin-bottom:18px;display:block}
.auth-card h1{font-size:22px;font-weight:700;margin:0 0 4px;letter-spacing:-.3px}
@media (min-width:768px){ .auth-card h1{font-size:25px;letter-spacing:-.4px} }
.auth-card .label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs);font-weight:600;margin:0 0 2px}

/* ===========================================================================
   11. Aanleveren (bonnen & facturen) — stap B
   =========================================================================== */
/* Spiegel van .alleen-desktop: alleen op de smalle (mobiele) schil. */
.alleen-mobiel{display:block}
@media (min-width:768px){ .alleen-mobiel{display:none} }

/* Soort-keuze: inkoop/verkoop als segmented control (echte radio's → werkt
   zonder JS). Mobiel = volle breedte, desktop = inline naast de hint. */
.aanlever-soort{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.aanlever-soort .veld-inline{font-size:13px;font-weight:600;color:var(--grijs)}
.aanlever-hint{margin:8px 2px 16px}
.seg{display:inline-flex;border:1px solid var(--rand);border-radius:10px;overflow:hidden;background:var(--wit)}
.aanlever-soort .seg{width:100%}
.seg label{position:relative;display:inline-flex;flex:1}
.seg label input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label span{
  display:inline-flex;flex:1;align-items:center;justify-content:center;
  min-height:44px;padding:9px 16px;font-size:13.5px;font-weight:600;
  color:var(--grijs);cursor:pointer;transition:background .14s,color .14s;
}
.seg label input:checked + span{background:var(--donker);color:#fff}
.seg label input:focus-visible + span{outline:2px solid var(--oranje);outline-offset:-2px}
@media (min-width:768px){
  .aanlever-soort{flex-direction:row;align-items:center;gap:14px;margin-bottom:0}
  .aanlever-soort .seg{width:auto}
  .aanlever-soort .seg label{flex:0 0 auto}
  .aanlever-hint{margin:8px 2px 18px}
}

/* Uploadzone: 'Foto maken' (mobiel, camera) of een drag&drop-vlak (desktop).
   De echte file-inputs zijn visueel verborgen maar blijven bedienbaar via hun
   label (a11y) en kunnen bestanden ontvangen bij drag&drop. */
.upload-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#dropzone{padding:30px 16px}
.upload.sleep{border-color:var(--oranje);background:#FCFBF9}
/* Responsieve tekst/icoon/knop binnen de dropzone. id-scope wint bewust van de
   algemene '.upload b'/'.upload svg'-regels (hogere specificiteit), zodat per
   schermbreedte exact één variant toont. */
#dropzone b.alleen-mobiel{display:block}
#dropzone b.alleen-desktop{display:none}
#dropzone .ico-desktop{display:none}
#dropzone .upload-knop{display:none;margin-top:14px}
.upload-tweede{width:100%;margin-top:10px}
@media (min-width:768px){
  #dropzone{padding:46px 16px;max-width:1120px}
  #dropzone svg{width:34px;height:34px}
  #dropzone b.alleen-mobiel{display:none}
  #dropzone b.alleen-desktop{display:block}
  #dropzone .ico-mobiel{display:none}
  /* inline-block i.p.v. block: anders centreert text-align:center het icoon
     niet en plakt het links. */
  #dropzone .ico-desktop{display:inline-block}
  #dropzone .upload-knop{display:block}
  .upload-tweede{display:none}
}

/* Vraagdetail: toelichting + optionele bon naast elkaar (desktop), gestapeld
   op mobiel. */
.vraag-velden{display:grid;grid-template-columns:1fr;gap:14px;max-width:560px;margin-top:6px}
.vraag-velden textarea.inp{max-width:none}
@media (min-width:768px){
  .vraag-velden{grid-template-columns:1fr 240px;gap:18px;max-width:780px;align-items:start}
}

/* ===========================================================================
   12. Documenten (gedeelde stukken + eigen uploads) — stap C
   =========================================================================== */
.doc-kop{align-items:center;margin-bottom:2px}

/* Jaar-filter: segmented control van links. Mobiel verborgen (ontwerp laat het
   weg); desktop = inline-flex. Eigen display-regels i.p.v. .alleen-desktop om
   de specificiteits-botsing met die utility te vermijden (CSS-GOTCHA stap B). */
.jaarseg{display:none}
@media (min-width:768px){
  .jaarseg{
    display:inline-flex;border:1px solid var(--rand);border-radius:10px;
    overflow:hidden;background:var(--wit);
  }
  .jaarseg a{
    border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;
    color:var(--grijs);padding:9px 14px;cursor:pointer;text-decoration:none;
  }
  .jaarseg a:hover{background:#FAF8F5;color:var(--donker)}
  .jaarseg a.aan{background:var(--donker);color:#fff}
}

/* Desktop: tabel links, eigen-stuk-aside rechts. */
.doc-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
@media (min-width:768px) and (max-width:879px){
  .doc-grid{grid-template-columns:1fr 250px;gap:18px}
}

/* Download-/bekijk-link in de tabel (blauw, conform ontwerp). */
.doc-actie{color:var(--blauw);font-weight:600;text-decoration:none;white-space:nowrap}
.doc-actie:hover{text-decoration:underline}

/* Eigen-stuk-uploadzone (compact, desktop-aside). 'Bestand kiezen'-knop staat
   altijd onder de tekst (geen responsieve switch zoals #dropzone in stap B). */
#eigen-dropzone{padding:26px 16px}
.upload-knop2{display:block;margin-top:12px}

/* Lijst 'Je eigen uploads' (compacte rijen in de aside). */
.eigen-rij{
  display:flex;align-items:center;gap:10px;padding:9px 8px;text-decoration:none;
  color:inherit;border-radius:9px;
}
.eigen-rij + .eigen-rij{border-top:1px solid var(--rand)}
.eigen-rij:hover{background:#FAF8F5}
.eigen-rij .mini-i{
  flex:none;width:30px;height:36px;border-radius:5px;background:#F1ECE4;
  border:1px solid var(--rand);display:flex;align-items:center;justify-content:center;
  color:var(--gedempt);font-size:8.5px;font-weight:700;letter-spacing:.04em;
}
.eigen-rij .eigen-naam{
  font-weight:600;font-size:13.5px;color:var(--donker);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.eigen-rij .eigen-dat{margin-left:auto;flex:none}

/* ===========================================================================
   13. Berichten (chat met het kantoor) — stap D
   =========================================================================== */
/* Het chatpaneel hangt in de master-detail (.md). Mobiel = full-bleed (geen
   kaart) + de hoogte-vulling staat als pagina-scoped override in berichten.html
   zelf (alleen daar nodig, raakt geen andere portaal-pagina). Desktop = de
   bordered .md-kaart met links de (één-)gesprekslijst, rechts de thread. */
@media (max-width:767px){
  /* Geen kaart-chrome rond het gesprek; full-bleed zoals het mobiele ontwerp. */
  .md-chat{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
  .chat-detail{padding:0;flex:1;min-height:0}
}
.chat-detail{display:flex;flex-direction:column}
/* Desktop: vaste paneelhoogte zodat de lijn intern scrollt i.p.v. de pagina. */
@media (min-width:768px){ .chat-detail{height:560px;min-height:0} }
.chat-kop{padding-top:2px}

/* De berichtenlijn: scrollt intern; nieuwste onderaan (JS scrollt erheen). */
.chat-thread{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;padding:4px 2px 12px;
}
@media (min-width:768px){ .chat-thread{padding:4px 4px 14px} }
.chat-thread:focus-visible{outline:2px solid var(--oranje);outline-offset:2px;border-radius:8px}
.chat-leeg{margin:auto;text-align:center;color:var(--grijs);font-size:14.5px;max-width:300px;padding:24px 8px}

/* Eén bericht: bubbel + (optionele) bijlage + meta; links = SYB, rechts = jij. */
.bubbel-rij{display:flex;flex-direction:column;gap:5px;max-width:84%}
@media (min-width:768px){ .bubbel-rij{max-width:64%} }
.van-syb{align-self:flex-start;align-items:flex-start}
.van-jij{align-self:flex-end;align-items:flex-end}
.bubbel{
  font-size:14.5px;line-height:1.45;padding:11px 14px;border:1px solid var(--rand);
  word-break:break-word;overflow-wrap:anywhere;
}
.van-syb .bubbel{background:var(--wit);border-radius:14px 14px 14px 4px}
.van-jij .bubbel{background:var(--oranje-zacht);border-color:#F2D7C9;border-radius:14px 14px 4px 14px}
.bubbel-meta{font-size:12px;color:var(--grijs)}
.bubbel-bijlage{max-width:100%;text-decoration:none;color:inherit}
.van-syb .bubbel-bijlage{background:var(--wit)}
.bubbel-bijlage:hover{box-shadow:var(--schaduw)}

/* Composer: + bijlage · tekstveld · Stuur. Vast onderaan het paneel. */
.composer{
  flex:none;border-top:1px solid var(--rand);background:var(--beige);
  padding:12px 2px;
}
@media (min-width:768px){ .composer{background:var(--wit);padding:14px 4px 2px} }
.composer-rij{display:flex;align-items:center;gap:8px}
.composer-inp{flex:1;min-width:0}
.composer-plus{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;
  min-height:48px;padding:0 13px;border:1px solid var(--rand);border-radius:12px;
  background:var(--wit);color:var(--donker);font-weight:600;font-size:15px;cursor:pointer;
}
.composer-plus:hover{background:#FAF8F5}
.composer-plus:focus-within{border-color:var(--oranje);box-shadow:var(--ring)}
.composer-plus svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.composer-stuur{flex:none;width:auto;min-height:48px}
.alleen-desktop-inline{display:none}
@media (min-width:768px){ .alleen-desktop-inline{display:inline} }

/* Gekozen-bijlage-indicator boven de composer (verschijnt via JS na kiezen). */
.composer-bijlage-naam{
  display:flex;align-items:center;gap:9px;margin:0 2px 10px;padding:8px 11px;
  border:1px solid var(--rand);border-radius:11px;background:#FCFBF9;font-size:13.5px;
}
.composer-bijlage-naam[hidden]{display:none}
.composer-bijlage-naam .mini-b{
  flex:none;font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--gedempt);
  background:#F1ECE4;border:1px solid var(--rand);border-radius:5px;padding:4px 5px;
}
.composer-bijlage-naam .bijlage-tekst{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
}
.bijlage-weg{
  /* Tap-target 44px (Fase 5, WCAG 2.5.8): de negatieve verticale marge laat
     de 44px-hitarea precies in de padding van de indicator-balk vallen,
     zodat de balk zelf niet groeit. */
  margin:-8px 0 -8px auto;flex:none;border:0;background:transparent;color:var(--grijs);
  font-size:15px;cursor:pointer;line-height:1;padding:4px 7px;border-radius:8px;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}
.bijlage-weg:hover{background:#F1ECE4;color:var(--donker)}

/* ===========================================================================
   14. Verkoopfacturen (white-label) — uitstraling / factuur-maker
   =========================================================================== */
/* De uitstraling instellen is desktop-werk (besluit Sybren). Onder ~900px
   tonen we een nette verwijzing i.p.v. het brede tweekoloms-formulier; een
   factuur máken mag later ook mobiel met de vastgelegde stijl. */
.fm-gate{display:block}
.fm-desktop{display:none}
@media (min-width:900px){
  .fm-gate{display:none}
  .fm-desktop{display:block}
}

/* Tweekoloms: links de bedieningen, rechts het live voorbeeld. */
.fm{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:32px;align-items:start}

/* Ontwerp-keuze: de gecureerde set als visuele THUMBNAIL-kaarten (radio's;
   werkt zonder JS, a11y). Elke kaart = een mini-voorbeeld van de PDF + label,
   zodat je het ontwerp ziet i.p.v. leest (besluit Sybren B4). */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tpl{position:relative}
.tpl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.tpl-kaart{
  display:block;border:1.5px solid var(--rand);background:var(--wit);
  border-radius:12px;padding:8px;cursor:pointer;
  transition:border-color .14s,background .14s,box-shadow .14s;
}
.tpl input:hover + .tpl-kaart{background:#FAF8F5;box-shadow:var(--schaduw)}
.tpl input:checked + .tpl-kaart{border-color:var(--oranje);background:var(--oranje-zacht)}
.tpl input:focus-visible + .tpl-kaart{outline:2px solid var(--oranje);outline-offset:2px}
/* Thumbnail = A4-portret-miniatuur op wit, scherp begrensd. */
.tpl-thumb{
  display:block;border:1px solid var(--rand);border-radius:7px;overflow:hidden;
  background:#fff;aspect-ratio:1 / 1.414;
}
.tpl-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.tpl-cap{display:block;padding:9px 5px 3px}
.tpl .naam{font-size:13.5px;font-weight:700;color:var(--donker)}
.tpl .font{display:block;font-size:11.5px;color:var(--grijs);margin-top:1px}

/* Accentkleur: ronde swatches (primair) + een vrije-kleur-kiezer in een uitklap. */
.swatches{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.sw{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;padding:0;cursor:pointer;border-radius:50%} /* 44px hitarea; de zichtbare dot blijft 30px */
.sw span{
  display:block;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--wit);box-shadow:0 0 0 1px var(--rand);
}
.sw.is-gekozen span{box-shadow:0 0 0 2px var(--donker)}
.sw:focus-visible{outline:2px solid var(--oranje);outline-offset:2px}
.sw-eigen{
  width:44px;height:44px;padding:2px;border:1px solid var(--rand);border-radius:8px;
  background:var(--wit);cursor:pointer;
}
/* Vrije kleurkiezer bescheiden achter een uitklap (swatches zijn de hoofdkeuze). */
.sw-eigen-wrap{margin-top:12px}
.sw-eigen-wrap>summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;width:max-content;
  font-size:12.5px;color:var(--grijs);list-style:none;
}
.sw-eigen-wrap>summary::-webkit-details-marker{display:none}
.sw-eigen-wrap>summary::before{content:"+";font-weight:700;color:var(--gedempt)}
.sw-eigen-wrap[open]>summary::before{content:"\2013"}
.sw-eigen-wrap>summary:focus-visible{outline:2px solid var(--oranje);outline-offset:2px;border-radius:6px}
.sw-eigen-rij{display:flex;align-items:center;gap:10px;margin-top:9px}

/* Eigen-gegevens-velden in twee kolommen (desktop), gestapeld op smal. */
.fm-velden{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fm-velden .breed{grid-column:1 / -1}

/* Live voorbeeld = de ECHTE factuur-PDF in een iframe (white-label, geen SYB).
   Een ander ontwerp herlaadt de PDF; de PDF-viewer schaalt 'm passend in de
   breedte. Plakt mee (sticky) zodat je 'm ziet terwijl je het formulier vult. */
.fm-preview{
  position:sticky;top:84px;border:1px solid var(--rand);border-radius:12px;
  overflow:hidden;background:#F4F1EC;box-shadow:var(--schaduw);
  height:calc(100vh - 150px);min-height:520px;max-height:860px;
  display:flex;align-items:flex-start;justify-content:center;padding:14px;
}
/* Live voorbeeld als afbeelding (toont/ververst betrouwbaar in elke browser). */
.fm-preview img{display:block;max-width:100%;max-height:100%;object-fit:contain;
  background:#fff;box-shadow:0 1px 6px rgba(46,46,46,.12)}

/* Geavanceerd = maatwerk via SYB (informatief, niet zelf-bewerkbaar). */
.geavanceerd{
  border:1px solid var(--rand);border-radius:12px;background:#FBFAF8;padding:15px 16px;
}
.geavanceerd .btn-n{margin-top:0}

/* Huidig logo + verwijderen-regel. */
.logo-huidig{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.logo-huidig img{max-width:140px;max-height:44px;border:1px solid var(--rand);border-radius:8px;background:#fff;padding:4px}

/* Opslaan-balk onderaan het formulier. */
.fm-acties{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.fm-acties .btn,.fm-acties .btn-n{width:auto;margin-top:0}

/* ===========================================================================
   15. Verkoopfacturen-maker (lijst / maker / detail) — sub-fase 2b
   =========================================================================== */
/* Statuspillen voor verkoopdocumenten (eigen kleuren, los van de vraagpillen). */
.pil.concept{background:#EEEAE3;color:#6B655C}
.pil.open{background:#F6EAD7;color:#855B17} /* was #9A6A20 (3.96:1) → 5.04:1 (Fase 5, AA) */
.pil.goed{background:#E4EFE7;color:#3A6349}
.pil.slecht{background:#F6E7E7;color:#8A3A3A}

/* Tabs Facturen | Offertes. */
.vf-tabs{display:inline-flex;gap:4px;background:#EFEBE4;border-radius:11px;padding:4px;margin:0 0 18px}
.vf-tabs a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--grijs);text-decoration:none;line-height:1.2;
}
.vf-tabs a.actief{background:var(--wit);color:var(--donker);box-shadow:0 1px 3px rgba(46,46,46,.12)}

/* Kop-rij met de tab + de hoofdactie. */
.vf-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.vf-kop .knoprij{margin:0 0 18px}

/* Documentlijst: klikbare rijen. */
.vf-lijst{display:flex;flex-direction:column;gap:10px}
.vf-rij{
  display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;
  border:1px solid var(--rand);border-radius:12px;background:var(--wit);
  padding:14px 16px;text-decoration:none;color:inherit;box-shadow:var(--schaduw);
  transition:box-shadow .14s,transform .05s;
}
a.vf-rij:hover{box-shadow:var(--schaduw-h)}
a.vf-rij:active{transform:scale(.995)}
.vf-rij .nr{font-weight:700;font-size:15px;color:var(--donker)}
.vf-rij .nr .credit{font-weight:600;font-size:12px;color:#8A3A3A;margin-left:6px}
.vf-rij .ontv{font-size:13px;color:var(--grijs);margin-top:2px}
.vf-rij .rechts{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.vf-rij .bedrag{font-weight:600;font-size:15px;color:var(--donker);white-space:nowrap;font-variant-numeric:tabular-nums}
.vf-rij .datum{font-size:12.5px;color:var(--grijs)}
.vf-rij .telaat{color:#8A3A3A;font-weight:600}

/* Maker-formulier. */
.vf-form .veld{display:block;font-size:13px;font-weight:600;color:var(--donker);margin:14px 0 5px}
.vf-form .hintklein{font-size:12.5px;color:var(--grijs);margin:0 0 4px}
.vf-velden2{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:680px){ .vf-velden2{grid-template-columns:1fr 1fr} .vf-velden2 .breed{grid-column:1 / -1} }

/* Regel-editor. */
.regel-kop,.regel-rij{
  display:grid;grid-template-columns:1fr 64px 110px 84px 44px;gap:8px;align-items:center;
}
.regel-kop{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);font-weight:600;
  margin-bottom:6px;padding:0 2px}
.regel-kop .r{text-align:right}
.regel-rij{margin-bottom:8px}
.regel-rij .inp{margin:0}
.regel-rij .num{text-align:right}
.regel-weg{
  border:1px solid var(--rand);background:var(--wit);color:#8A3A3A;border-radius:8px;
  width:44px;height:44px;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.regel-weg:hover{background:#F6E7E7}
@media (max-width:679px){
  /* Mobiel: regel als gestapeld kaartje (kolommen passen niet naast elkaar). */
  .regel-kop{display:none}
  .regel-rij{grid-template-columns:1fr 44px;gap:6px;border:1px solid var(--rand);border-radius:10px;
    padding:10px;margin-bottom:10px;background:#FBFAF8}
  .regel-rij .oms{grid-column:1 / -1}
  .regel-rij .regel-weg{grid-row:1;grid-column:2}
}
.regel-add{margin-top:4px}

/* Live totaal-blok in de maker. */
.vf-totaal{margin-top:18px;border-top:1px solid var(--rand);padding-top:12px;max-width:300px;margin-left:auto}
.vf-totaal .r{display:flex;justify-content:space-between;font-size:14px;color:var(--grijs);padding:3px 0}
.vf-totaal .r .v{color:var(--donker);font-variant-numeric:tabular-nums}
.vf-totaal .r.eind{font-size:16px;font-weight:700;color:var(--donker);border-top:1px solid var(--rand);margin-top:6px;padding-top:9px}

/* Detail: meta + regeltabel + acties. */
.vf-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:2px 0 4px}
.vf-meta .k{font-size:12px;color:var(--grijs)}
.vf-meta .v{font-size:14px;color:var(--donker);font-weight:600}
.vf-tbl{width:100%;border-collapse:collapse;margin-top:6px}
.vf-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grijs);font-weight:600;
  text-align:right;padding:0 0 8px;border-bottom:1px solid var(--donker)}
.vf-tbl th.l{text-align:left}
.vf-tbl td{font-size:13.5px;color:var(--donker);text-align:right;padding:9px 0;border-bottom:1px solid var(--rand);
  font-variant-numeric:tabular-nums;vertical-align:top}
.vf-tbl td.l{text-align:left}
.vf-acties{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.vf-acties form{margin:0}
.vf-acties .btn,.vf-acties .btn-n{width:auto;margin-top:0}
.vf-gevaar{margin-top:22px;border:1px solid #E6CCCC;background:#FBF4F4;border-radius:12px;padding:14px 16px}
.vf-gevaar .btn-weg{
  border:1px solid #D9B8B8;background:var(--wit);color:#8A3A3A;border-radius:10px;padding:9px 14px;
  font-size:14px;font-weight:600;cursor:pointer;width:auto;
}
.vf-gevaar .btn-weg:hover{background:#F6E7E7}

/* Statuspil 'verzonden'/'verstuurd' (blauw). */
.pil.verstuurd{background:#E3EDF6;color:#345F86}

/* Kleine knopvariant (rij-acties). Let op (Fase 5, WCAG 2.5.8): alleen
   padding/font krimpen — de min-height:48px uit de .btn/.btn-n-basis blijft
   staan als tap-target; hier NOOIT een kleinere min-height zetten. */
.btn.klein,.btn-n.klein{padding:7px 12px;font-size:13px}

/* Standalone 'verwijderen'-knop buiten de .vf-gevaar-zone (bv. diensten-lijst).
   .vf-gevaar .btn-weg blijft specifieker → de maker-weggooiknop wijzigt niet. */
.btn-weg{border:1px solid #D9B8B8;background:var(--wit);color:#8A3A3A;border-radius:10px;
  padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;width:auto;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn-weg:hover{background:#F6E7E7}
.btn-weg.klein{padding:7px 12px;font-size:13px}

/* Diensten-catalogus: compacte inline 'toevoegen'-rij. */
.dienst-nieuw{margin-bottom:16px}
.dn-velden{display:grid;grid-template-columns:1fr;gap:10px 12px}
@media (min-width:640px){ .dn-velden{grid-template-columns:1fr 130px 92px auto;align-items:end} }
.dn-velden .veld{display:block;font-size:13px;font-weight:600;color:var(--donker);margin:0 0 5px}
.dn-actie .btn{width:100%;margin:0}
@media (min-width:640px){ .dn-actie .btn{width:auto} }

/* (Verkoop = één werkruimte: de losse top-nav-items + losse klant-kiezer zijn
   vervangen door de tabbalk + combobox hieronder — sectie 16.) */

/* Verkoop-startpagina: KPI's + hub-kaarten. */
.vf-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px}
.kpi{border:1px solid var(--rand);border-radius:12px;background:var(--wit);padding:14px 16px;box-shadow:var(--schaduw)}
.kpi-l{font-size:12.5px;color:var(--grijs)}
.kpi-v{font-size:22px;font-weight:700;color:var(--donker);margin-top:4px;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:12px;margin-top:3px}
.kpi-sub.telaat{color:#8A3A3A;font-weight:600}

.vf-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:6px 0 8px}
.hub-kaart{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rand);border-radius:12px;
  background:var(--wit);padding:16px;text-decoration:none;color:inherit;box-shadow:var(--schaduw);
  transition:box-shadow .14s,transform .05s}
.hub-kaart:hover{box-shadow:var(--schaduw-h)}
.hub-kaart:active{transform:scale(.992)}
.hub-kaart svg{width:26px;height:26px;stroke:var(--oranje);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
.hub-t{font-weight:700;font-size:15px;color:var(--donker)}
.hub-s{font-size:12.5px;color:var(--grijs);line-height:1.4}

/* Klantenlijst: statische rij (link + actie) + archief-sectie. */
.vf-rij-statisch{cursor:default}
.vf-rij-statisch .rij-link{display:block;text-decoration:none;color:inherit}
.vf-rij-statisch .rij-link:hover .nr{color:var(--oranje-tekst)}
.vf-archief{margin-top:18px}
.vf-archief summary{cursor:pointer;font-weight:600;color:var(--donker);padding:6px 0;font-size:14px}

/* ===========================================================================
   16. Verkoop-werkruimte (Batch 1, 2026-06-30) — tabbalk, klant-combobox,
       'Meer opties', home-snelactie. Één ruimte i.p.v. losse modules.
   =========================================================================== */
/* Tabbalk = tabs (Overzicht/Facturen/Offertes/Klanten) + rustige 'Uitstraling'. */
.vf-tabbalk{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 0 20px}
.vf-tabbalk .vf-tabs{margin:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vf-tabbalk .vf-tabs::-webkit-scrollbar{display:none}
.vf-tabs a{white-space:nowrap}
/* Rustige nevenlinks rechts in de tabbalk (Diensten + Uitstraling). */
.vf-neven{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.vf-neven-link{display:inline-flex;align-items:center;gap:6px;color:var(--grijs);font-size:13.5px;font-weight:600;
  text-decoration:none;padding:7px 11px;border-radius:9px;white-space:nowrap;min-height:44px}
.vf-neven-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vf-neven-link:hover{background:rgba(55,53,47,.05);color:var(--donker)}
.vf-neven-link.actief{color:var(--donker);background:rgba(55,53,47,.05)}

/* Home-snelactie naar de eigen verkoopadministratie. */
.snel-verkoop{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.snel-verkoop .btn,.snel-verkoop .btn-n{width:auto;margin-top:0}

/* Klant-combobox in de maker: input + zoek-dropdown. */
.combo{position:relative}
.combo-lijst{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:6px;list-style:none;
  background:var(--wit);border:1px solid var(--rand);border-radius:12px;box-shadow:var(--schaduw-h);max-height:288px;overflow:auto}
.combo-lijst li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;min-height:44px}
.combo-lijst li:hover,.combo-lijst li.actief{background:var(--oranje-zacht)}
.combo-lijst .cb-tekst{display:flex;flex-direction:column;gap:1px;min-width:0}
.combo-lijst .cb-naam{font-size:14.5px;font-weight:600;color:var(--donker);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-lijst .cb-sub{font-size:12.5px;color:var(--grijs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-lijst .cb-sub:empty{display:none}

/* 'Meer opties' / 'Adres & btw' — collapsible (progressive disclosure). */
.meer{margin:14px 0 0}
.meer>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--grijs);padding:7px 0;user-select:none;min-height:44px}
.meer>summary::-webkit-details-marker{display:none}
.meer>summary::before{content:"";width:0;height:0;border:5px solid transparent;border-left-color:var(--grijs);
  transition:transform .15s}
.meer[open]>summary::before{transform:rotate(90deg)}
.meer>summary:hover{color:var(--donker)}
.meer-in{padding:2px 0 4px}
/* 'Meer opties' als een eigen ingeklapte kaart (los van de ontvanger-kaart). */
.meer-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:14px;
  box-shadow:var(--schaduw);margin:14px 0 0;padding:0 16px}
.meer-kaart>summary{padding:15px 0}
.meer-kaart[open]>summary{padding-bottom:6px}
.meer-kaart .meer-in{padding-bottom:14px}

/* ===========================================================================
   17. Lijsten & detail (Batch 2, 2026-06-30) — status-streepjes, inline acties,
       bedrag als blikvanger.
   =========================================================================== */
/* Gekleurd status-streepje links op een document-rij (visueel anker). */
.vf-rij.st-concept{border-left:4px solid #CDC6BB}
.vf-rij.st-open{border-left:4px solid var(--warn)}
.vf-rij.st-verstuurd{border-left:4px solid var(--blauw)}
.vf-rij.st-goed{border-left:4px solid var(--groen)}
.vf-rij.st-slecht{border-left:4px solid var(--rood)}
/* Subtiele hover-affordance op een (statische) rij met klikbare link. */
.vf-rij-statisch:has(.rij-link:hover){box-shadow:var(--schaduw-h)}

/* Bedrag groter en zwaarder = de held op de rij. */
.vf-rij .bedrag{font-size:16.5px;font-weight:700}

/* Rechterkolom: bedrag boven, status + inline-actie eronder. */
.rij-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rij-status form{margin:0}
/* Inline rij-acties (klantenlijst: + Factuur / Archiveren). */
.rij-acties{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rij-acties form{margin:0}

/* Lege staat met een call-to-action eronder. */
.leeg .btn,.leeg .btn-n{width:auto;margin-top:0;display:inline-flex}

/* Detail: het totaal als grote blikvanger bovenaan de kaart. */
.vf-bedrag-groot{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;padding:0 0 14px;
  border-bottom:1px solid var(--rand)}
.vf-bedrag-groot .bedrag-xl{font-size:30px;font-weight:700;letter-spacing:-.6px;color:var(--donker);
  font-variant-numeric:tabular-nums;line-height:1.1}

/* ===========================================================================
   18. Visuele afwerking (Batch 3, 2026-06-30) — initiaal-avatars, lijn-iconen
       bij sectiekoppen + lege staten, fijnere spacing, nettere mobiele tabbalk.
       Clean blijft clean: alleen rust/herkenning uit detail, geen editorial.
   =========================================================================== */

/* --- Initiaal-avatar (klantenlijst + combobox): rustige beige cirkel met de
   eerste 1-2 letters. Tokens-only (geen nieuwe kleuren). --- */
.vf-avatar{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--rand);color:var(--voet);font-weight:700;font-size:13.5px;
  letter-spacing:.01em;line-height:1;text-transform:uppercase;
}
.vf-avatar.gearchiveerd{opacity:.5}

/* Klantenrij/archief-rij: avatar + tekstkolom links, acties rechts. */
.met-avatar{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit}
.met-avatar .rij-tekst{min-width:0}
.met-avatar .rij-tekst .nr,.met-avatar .rij-tekst .ontv{display:block}
.met-avatar .rij-tekst .ontv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Lijn-iconen bij sectiekoppen (subtiel, taupe, stroke 1.7 als de schil). --- */
h2.sectie{display:flex;align-items:center;gap:7px}
h2.sectie>svg{
  width:15px;height:15px;flex:none;fill:none;stroke:var(--taupe);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --- Lijn-icoon in lege staten (warmte i.p.v. kale tekst). --- */
.leeg-ic{
  width:42px;height:42px;display:block;margin:0 auto 14px;fill:none;
  stroke:var(--taupe);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

/* --- Combobox: avatar van de gekozen (bestaande) klant vóór het invoerveld. --- */
.combo.heeft-avatar .inp{padding-left:48px}
.combo-avatar{
  position:absolute;left:9px;top:9px;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;
  background:var(--rand);color:var(--voet);font-weight:700;font-size:11.5px;
  line-height:1;text-transform:uppercase;
}
.combo-avatar[hidden]{display:none}
/* Avatar in de dropdown-opties. */
.combo-lijst .cb-av{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--rand);color:var(--voet);font-weight:700;font-size:11.5px;
  line-height:1;text-transform:uppercase;
}

/* --- Fijnere spacing/hiërarchie binnen de verkoop-werkruimte. --- */
/* Iets meer lucht in de kaarten op desktop; alleen de verkoop-maker/-formulieren
   (binnen .vf-form) en de detail-kaarten — raakt de overige portaalschermen niet. */
@media (min-width:768px){
  .vf-form .kaart,.vf-form .meer-kaart{padding-left:20px;padding-right:20px}
}
.vf-lijst{gap:9px}
.vf-rij .ontv{line-height:1.4}
/* Lege-staat: ruimer en gecentreerd met de CTA eronder. */
.leeg{padding:38px 16px}

/* --- Nettere mobiele tabbalk: compactere tabs zodat alle vier (Overzicht/
   Facturen/Offertes/Klanten) op 390px passen i.p.v. dat 'Klanten' wordt
   afgekapt. De overflow-x:auto blijft als vangnet voor extra-smalle toestellen. --- */
/* De verkleiningen raken alléén horizontale padding + font; de
   min-height:44px uit de .vf-tabs a-basis blijft het tap-target
   (Fase 5, WCAG 2.5.8) — hier nooit een kleinere min-height zetten. */
@media (max-width:600px){
  .vf-tabbalk .vf-tabs{padding:3px}
  .vf-tabs a{padding:8px 12px;font-size:13.5px}
}
@media (max-width:380px){
  .vf-tabs a{padding:8px 10px;font-size:13px}
}

/* --- 19. Paginering (batch 2/3): portaal-huid voor _paginering.html ------- */
.p-paginering{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:18px 0 4px;flex-wrap:wrap}
.p-paginering .btn-n{width:auto;margin-top:0}

/* --- 20. Fase 2: akkoord / stukkenlijst / herhaal / online accept --------- */
/* Kopieerbare link (online akkoord op het offertedetail). */
.kopieer-rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kopieer-rij .kopieer-veld{flex:1 1 220px;min-width:0;font-size:13px;color:var(--grijs)}
.kopieer-rij .btn-n{margin-top:0}

/* Herhaal-formulier op het factuurdetail: interval + datum + knop op een rij
   (desktop); mobiel stapelt vanzelf. */
.herhaal-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.herhaal-form>div{flex:1 1 170px;min-width:0}
.herhaal-form .herhaal-form-actie{flex:0 0 auto}
.herhaal-form .btn-n{margin-top:0}

/* Stukkenlijst-detail: checklist met vink, tekst en acties per item. */
.stuk-lijst{display:flex;flex-direction:column}
.stuk-rij{display:flex;gap:12px;align-items:flex-start;padding:13px 2px;
  border-top:1px solid var(--rand)}
.stuk-rij:first-child{border-top:0}
.stuk-rij.af{opacity:.72}
.stuk-vink{flex:none;width:22px;height:22px;border:1.5px solid var(--rand);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-top:1px;color:#fff;background:var(--wit)}
.stuk-rij.af .stuk-vink{background:var(--groen);border-color:var(--groen)}
.stuk-tekst{flex:1 1 auto;min-width:0}
.stuk-titel{font-weight:600;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.stuk-acties{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.stuk-upload{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  border:1px solid var(--rand);border-radius:10px;background:var(--wit);
  font-size:13.5px;font-weight:600;cursor:pointer;min-height:40px}
.stuk-upload:hover{border-color:var(--taupe)}
.stuk-upload svg{width:15px;height:15px;fill:none;stroke:var(--taupe);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stuk-geregeld{border:0;background:none;padding:2px 4px;font:inherit;
  font-size:12.5px;color:var(--grijs);text-decoration:underline;cursor:pointer;
  min-height:24px}
.stuk-geregeld:hover{color:var(--donker)}
@media (max-width:600px){
  .stuk-rij{flex-wrap:wrap}
  /* Titel blijft naast het vinkje (basis = restbreedte); alléén de acties
     wikkelen naar een eigen regel, ingesprongen onder de tekst. */
  .stuk-tekst{flex:1 1 calc(100% - 40px)}
  .stuk-acties{flex-basis:100%;flex-direction:row;align-items:center;
    justify-content:flex-start;padding-left:34px}
}

/* Publieke offerte-accept: iets bredere kaart + nette meta-rijen. */
.accept-card{max-width:520px}
.accept-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  margin-top:14px;font-size:14.5px;align-items:baseline}
.accept-totaal{font-size:19px;font-weight:700;letter-spacing:-.2px}
.accept-akkoord{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:14px;line-height:1.5;cursor:pointer}
.accept-akkoord input{width:18px;height:18px;margin-top:1px;flex:none;
  accent-color:var(--oranje)}

/* ===========================================================================
   21. Merkbeleving (fase 3): accentstreepje, merk-voet, contactkaart
   =========================================================================== */
/* De SYB-signatuur: kort oranje streepje onder de paginatitel — hetzelfde
   accent dat de PDF's en de website al dragen. Decoratie, geen actie:
   raakt de knopdiscipline (max één oranje CTA) niet. */
.p-titel::after{
  content:"";display:block;width:42px;height:3px;border-radius:2px;
  background:var(--oranje);margin-top:10px;
}
/* Uitzondering: de compacte mobiele chat-kop (berichten) heeft er geen
   verticale ruimte voor. */
.chat-kop .p-titel::after{display:none}

/* Merk-voet in de schil: haarlijn + klein wordmark + kantoorblok. De
   safe-area-inset zit al in .p-main; hier alleen eigen witruimte. */
.p-voet{
  margin-top:44px;padding:22px 2px 6px;border-top:1px solid var(--rand);
  text-align:center;
}
.p-voet-wm{height:15px;display:inline-block}
.p-voet-naam{margin:10px 0 2px;font-size:13px;font-weight:600;color:var(--grijs)}
.p-voet-regel{margin:0;font-size:12.5px;color:var(--voet)}
/* Permanente (subtiele) underline: de tel-/maillinks staan in lopende
   tekst en moeten ook zonder hover herkenbaar zijn als link (touch!). */
.p-voet-regel a{
  color:var(--voet);text-decoration:underline;
  text-decoration-color:var(--chev);text-underline-offset:2px;
}
.p-voet-regel a:hover,.p-voet-regel a:focus-visible{
  color:var(--donker);text-decoration-color:var(--donker);
}

/* Contactkaart 'Je boekhouder' (home): tap-bare telefoon-/mailregels. */
.boekhouder-naam{margin:0;font-size:14.5px;font-weight:600}
.contact-rij{
  display:flex;align-items:center;gap:10px;padding:10px 0;min-height:44px;
  font-size:14px;font-weight:500;color:var(--donker);text-decoration:none;
  border-top:1px solid var(--rand);
}
.contact-rij svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--taupe);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-rij:hover,.contact-rij:focus-visible{color:var(--oranje-d)}

/* Complement van .alleen-breed: zichtbaar op mobiel én tablet (<980px),
   weg zodra de desktop-rail verschijnt. */
.alleen-smal{display:block}
@media (min-width:980px){ .alleen-smal{display:none} }

/* Kop-rijen met een actie naast de titel: op tekst-baseline uitlijnen.
   Het accentstreepje maakt de h1 ~13px hoger; met align-items:center zou
   de knop/jaarfilter onder de tekst-as van de titel zakken. */
.vf-kop,.rij.doc-kop{align-items:baseline}

/* ---- Cijfers & status (portaal-afronding 2026-07-19) --------------------
   "Hoe sta je ervoor?": kerncijfer-kaarten per boekjaar + compacte
   overzichtsrijen (btw/aanslagen/facturen) op /portaal/cijfers. */
.cij-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){ .cij-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
.cij-kaart{margin-bottom:0}
.cij-stat{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:7px 0;border-top:1px solid var(--rand)}
.cij-stat b{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px}
.cij-rij{padding:10px 0;border-top:1px solid var(--rand)}
.cij-rij:first-of-type{border-top:0;padding-top:0}
.cij-rij b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Hulp-pagina: rustige leestekst in de uitlegkaarten. */
.hulp-p{margin:0;font-size:14.5px;line-height:1.6;color:var(--donker)}