/* ===== Werkbon – binnenkant van de app (inloggen, startpagina, review vragen, reviews, monteurs) =====
   Dezelfde wereld als Takenbord en Offertes: de doorschrijf-werkbon van Braam. Voordruk (rubrieken,
   lijnen, kopstrook, iconen) in logoblauw, invulling in inktzwart. Wit bonpapier op een koel bureaublad,
   rechte bovenhoeken met een blauwe voordrukrand, echte papierschaduw. Kleur heeft altijd een taak:
   bakjeskleuren alleen op de tabstrook en het icoon, geel is de doorslag (afgerond/ingevuld),
   stempelrood alleen voor alarm, te laat, verwijderen en fouten. Eén lettertype: Fira Sans;
   400 leest, 500 vult in, 600 leidt, 700 stempelt. Het donkere thema is dezelfde bon bij avondlicht.
   De klantpagina's (review, ervaring, privacy) houden style.css. */
@font-face{font-family:"Fira Sans";src:url("/fonts/fira-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("/fonts/fira-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("/fonts/fira-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Sans";src:url("/fonts/fira-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --font:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* bureau en papier */
  --grond:#e8edf1;
  --papier:#ffffff; --papier-2:#f5f8fa; --veld:#ffffff;
  --papier-rand:rgba(23,32,41,.09);
  /* invulling */
  --inkt:#172029; --inkt-2:#33404c; --inkt-3:#4f5b68; --inkt-4:#5f6a76;
  /* voordruk */
  --voordruk:#0c70b8; --voordruk-tekst:#0b5f9c; --knop:#0c70b8; --knop-op:#0a5d99;
  --lijn:rgba(12,112,184,.20); --lijn-sterk:rgba(12,112,184,.38); --voordruk-zacht:rgba(12,112,184,.08); --voordruk-zacht-2:rgba(12,112,184,.14);
  --ring:rgba(12,112,184,.32);
  /* stempels en doorslag */
  --stempel:#c4302b; --stempel-zacht:rgba(196,48,43,.09);
  --oranje:#9a4f00; --oranje-zacht:rgba(154,79,0,.09);
  --geel:#f7eec4; --geel-rand:#e6d793; --geel-tekst:#6b5300;
  --groen:#176c40; --groen-zacht:rgba(23,108,64,.10);
  --ster:#e09a00; --ster-uit:rgba(79,91,104,.32);
  /* bakjes: op volle sterkte alleen op de tabstrook en het icoon */
  --c-taken:#0c70b8; --c-offertes:#a87f00; --c-reviews:#0e8584; --c-monteurs:#7448c0;
  /* mensen: alleen als vulling van ronde initialen */
  --p-Rob:#0c70b8; --p-Igor:#c76a00; --p-Davey:#5a52c9; --p-Louise:#c2457a; --p-Zoe:#0e8584; --p-anders:#74808c;
  /* papier ligt op het bureau */
  --schaduw:0 1px 1px rgba(23,32,41,.07),0 3px 8px -2px rgba(23,32,41,.16);
  --schaduw-op:0 2px 2px rgba(23,32,41,.06),0 14px 28px -10px rgba(23,32,41,.32),0 4px 10px -4px rgba(23,32,41,.14);
  --schaduw-vel:0 1px 1px rgba(23,32,41,.06),0 18px 44px -22px rgba(10,30,50,.40),0 6px 14px -8px rgba(10,30,50,.14);
  --schaduw-venster:0 30px 80px -24px rgba(10,30,50,.45),0 10px 28px -12px rgba(10,30,50,.22);
  --band:#0c70b8; --band-veld:rgba(255,255,255,.14); --band-veld-op:rgba(255,255,255,.22);
  --intern:#33404c; --intern-tekst:#ffffff;
  --r:3px; --r-2:5px;
  --uit:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
[data-theme=dark]{
  --grond:#0d1115;
  --papier:#262c32; --papier-2:#20262c; --veld:#1b2026;
  --papier-rand:rgba(255,255,255,.07);
  --inkt:#e9eef3; --inkt-2:#c5d0d9; --inkt-3:#99a7b4; --inkt-4:#8794a0;
  --voordruk:#3f97dc; --voordruk-tekst:#7dbcee; --knop:#1f6aa8; --knop-op:#2577ba;
  --lijn:rgba(110,180,240,.20); --lijn-sterk:rgba(110,180,240,.36); --voordruk-zacht:rgba(110,180,240,.10); --voordruk-zacht-2:rgba(110,180,240,.17);
  --ring:rgba(110,180,240,.40);
  --stempel:#ff6f61; --stempel-zacht:rgba(255,111,97,.13);
  --oranje:#f2a14a; --oranje-zacht:rgba(242,161,74,.12);
  --geel:#2c2a1d; --geel-rand:#4a4426; --geel-tekst:#e6d48a;
  --groen:#4cc985; --groen-zacht:rgba(76,201,133,.12);
  --ster:#f0b43c; --ster-uit:rgba(153,167,180,.35);
  --c-taken:#3f97dc; --c-offertes:#d9b44a; --c-reviews:#33b5b3; --c-monteurs:#a385ec;
  --p-Rob:#1f78bd; --p-Igor:#b86200; --p-Davey:#5a52c9; --p-Louise:#c2457a; --p-Zoe:#12807f; --p-anders:#5d6873;
  --schaduw:0 1px 1px rgba(0,0,0,.35),0 4px 10px -2px rgba(0,0,0,.55);
  --schaduw-op:0 14px 30px -10px rgba(0,0,0,.8),0 4px 10px -4px rgba(0,0,0,.6);
  --schaduw-vel:0 1px 1px rgba(0,0,0,.4),0 20px 50px -20px rgba(0,0,0,.8);
  --schaduw-venster:0 30px 90px -20px rgba(0,0,0,.85),0 10px 30px -12px rgba(0,0,0,.6);
  --band:#0b3d63; --band-veld:rgba(255,255,255,.10); --band-veld-op:rgba(255,255,255,.16);
  --intern:#c5d0d9; --intern-tekst:#172029;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.45;color:var(--inkt);background:var(--grond);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;caret-color:var(--voordruk);
  -webkit-tap-highlight-color:transparent}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--voordruk-zacht-2);color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)!important}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
*{scrollbar-width:thin;scrollbar-color:var(--lijn-sterk) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--lijn-sterk);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
a{color:var(--voordruk-tekst);text-underline-offset:3px;text-decoration-thickness:1px}
.overslaan{position:absolute;left:12px;top:-60px;z-index:50;background:var(--papier);color:var(--inkt);padding:8px 12px;border-radius:var(--r)}
.overslaan:focus{top:12px}

/* rubriek: de kleine voorgedrukte kop boven of naast een vak met een waarde */
.rk,.rubriek dt,.rk-scores-kop,.lijst th{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--voordruk-tekst)}

/* ---- knoppen: stempelknoppen op een bureau ---- */
.btn,.knop{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r);border:1px solid var(--papier-rand);
  background:var(--papier);color:var(--inkt);font-weight:500;font-size:13.5px;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 1px rgba(23,32,41,.05);transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn:hover,.knop:hover{border-color:var(--lijn-sterk)}
.btn:active,.knop:active{transform:translateY(1px)}
.btn.primary,.knop.hoofd{background:var(--knop);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.primary:hover,.knop.hoofd:hover{background:var(--knop-op)}
.btn:disabled,.knop:disabled{opacity:.55;cursor:default;transform:none}
.btn.groot{height:44px;padding:0 18px;font-size:15px}
.btn.breed{width:100%}
.btn.ghost,.knop.stil{background:transparent;border-color:transparent;box-shadow:none;color:var(--inkt-3)}
.btn.ghost:hover,.knop.stil:hover{background:var(--voordruk-zacht);color:var(--inkt)}
.knop.stil{color:var(--voordruk-tekst);font-weight:600}
.btn.danger,.knop.gevaar{color:var(--stempel);background:transparent;border-color:transparent;box-shadow:none}
.btn.danger:hover,.knop.gevaar:hover{background:var(--stempel-zacht)}
.knop.gevaar.zeker{background:var(--stempel);color:#fff}
.knop.klein{height:30px;padding:0 10px;font-size:13px}
.icon-btn{width:34px;padding:0}
.btn svg.i,.knop svg.i{width:15px;height:15px}

/* ---- kopstrook: de blauwe kop van de werkbon ---- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;height:58px;padding:0 24px;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));
  background:var(--band);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08),0 6px 18px -12px rgba(10,40,70,.6)}
.brand{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto;color:#fff;text-decoration:none}
.logo-merk{height:22px;width:auto;flex:none;filter:brightness(0) invert(1);display:block}
.brand h1,.brand .naam{margin:0;padding-left:16px;border-left:1px solid rgba(255,255,255,.32);font-size:15px;font-weight:600;letter-spacing:.01em;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-rechts{display:flex;align-items:center;gap:4px;flex:none;justify-content:flex-end}
.top .btn.ghost{color:rgba(255,255,255,.86)}
.top .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.top .btn.ghost:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.45)!important}
.top .btn.ghost[aria-current=page]{background:rgba(255,255,255,.14);color:#fff}
.top .uitlog{width:34px;padding:0}
.top .uitlog .tekst{display:none}
.gebruiker{display:flex;align-items:center;gap:8px;padding:0 8px 0 6px;color:#fff;font-weight:500;font-size:13px;white-space:nowrap}
.gebruiker:empty{display:none}
.gebruiker .avatar{box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}

.avatar{--av:var(--p-anders);width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex:none;
  text-transform:uppercase;letter-spacing:0;background:var(--av)}
.avatar.sm{width:22px;height:22px;font-size:10px}
.avatar.groot{width:34px;height:34px;font-size:13px}
.p-Rob{--av:var(--p-Rob)}.p-Igor{--av:var(--p-Igor)}.p-Davey{--av:var(--p-Davey)}.p-Louise{--av:var(--p-Louise)}.p-Zoe{--av:var(--p-Zoe)}

/* ---- voorgedrukte regel: datum en begroeting ---- */
.kopbalk{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin:22px 24px 0;padding:0 0 14px;border-bottom:1px solid var(--lijn-sterk)}
.kopbalk .datum{font-size:19px;font-weight:600;letter-spacing:-.005em;color:var(--inkt)}
.kopbalk .datum::first-letter{text-transform:uppercase}
.kopbalk .groet{color:var(--inkt-3);font-size:14px}
/* tellers zoals de voorgedrukte regel van het takenbord: cijfer vet, kleur alleen voor tijd en alarm */
.tellers{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;font-size:13.5px;color:var(--inkt-3)}
.tellers>span{padding:0 12px;border-left:1px solid var(--lijn-sterk);line-height:1.1}
.tellers>span:first-child{border-left:0;padding-left:0}
.tellers b{font-weight:600}
.tellers .rood{color:var(--stempel)}
.tellers .oranje{color:var(--oranje)}
.tellers .rustig{color:var(--inkt-4)}
.kopbalk .rechts{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ---- pills en labels ---- */
.pill,.label{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 7px;border-radius:var(--r);font-size:11.5px;font-weight:500;white-space:nowrap;
  color:var(--inkt-2);border:1px solid var(--lijn);background:transparent;line-height:1}
.pill svg.i,.label svg{width:12px;height:12px}
.pill.blauw,.label.geopend{background:var(--voordruk-zacht);border-color:transparent;color:var(--voordruk-tekst);font-weight:600}
.pill.geel,.label.ingevuld{background:var(--geel);border-color:var(--geel-rand);color:var(--geel-tekst);font-weight:600}
.pill.groen,.label.toestemming-ja{background:var(--groen-zacht);border-color:transparent;color:var(--groen);font-weight:600}
.pill.rood,.label.mislukt{background:var(--stempel-zacht);border-color:transparent;color:var(--stempel);font-weight:600}
.pill.oranje{background:var(--oranje-zacht);border-color:transparent;color:var(--oranje);font-weight:600}
.label.test{border-style:dashed;border-color:var(--lijn-sterk);color:var(--inkt-3)}
.label.toestemming-nee{color:var(--inkt-3)}
.intern-label{display:inline-flex;align-items:center;height:21px;padding:0 7px;border-radius:var(--r);background:var(--intern);color:var(--intern-tekst);font-size:11.5px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;line-height:1;vertical-align:middle;text-transform:none}
.intern-label.klein{height:19px;padding:0 6px;font-size:11px}

/* sterren: goud alleen voor sterren */
.mini-sterren{display:inline-flex;gap:1px;vertical-align:-2px}
.mini-sterren svg{width:13px;height:13px;fill:var(--ster)}
.mini-sterren svg.uit{fill:var(--ster-uit)}
.mini-sterren.groot svg{width:17px;height:17px}

/* ---- de stempel: alleen voor hoge prioriteit op een taak ---- */
.stempel{position:absolute;top:-9px;right:10px;z-index:1;display:inline-flex;align-items:center;height:22px;padding:0 7px;border:2px solid currentColor;border-radius:3px;color:var(--stempel);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-7deg);background:color-mix(in srgb,var(--papier) 70%,transparent);pointer-events:none}

/* ---- rubriekcellen: vakken op de bon ---- */
.rubrieken{display:flex;margin:0;border:1px solid var(--lijn-sterk);border-radius:2px;min-width:0}
.rubriek{min-width:0;display:flex;flex-direction:column;gap:1px;padding:4px 8px 5px;flex:1}
.rubriek+.rubriek{border-left:1px solid var(--lijn-sterk)}
.rubriek.vast{flex:none;max-width:48%}
.rubriek dt{font-size:10px}
.rubriek dd{margin:0;font-size:12.5px;font-weight:500;color:var(--inkt-2);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rubriek.telaat{box-shadow:inset 0 0 0 1.5px var(--stempel);border-radius:1px}
.rubriek.telaat dt,.rubriek.telaat dd{color:var(--stempel)}
.rubriek.telaat dd{font-weight:700}
.rubriek.vandaag dd{color:var(--oranje);font-weight:600}
.rubriek dd svg.i{width:12px;height:12px;stroke-width:2.2;vertical-align:-1px;margin-right:3px}

/* ---- leeg: gestippeld kader ---- */
.leeg,.leeg-beheer{display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 14px 18px;text-align:center;color:var(--inkt-4);font-size:13px;
  border:1px dashed var(--lijn-sterk);border-radius:var(--r)}
.leeg b,.leeg-beheer b{color:var(--inkt-2);font-weight:600;font-size:13.5px}
.leeg .btn{margin-top:8px}

/* ---- meldingen ---- */
.melding{padding:10px 12px;border-radius:var(--r);font-size:13.5px;font-weight:500;line-height:1.45}
.melding.fout{background:var(--stempel-zacht);color:var(--stempel)}
.melding.goed{background:var(--groen-zacht);color:var(--groen)}
.melding.info{background:var(--voordruk-zacht);color:var(--voordruk-tekst)}
.melding a{color:inherit;font-weight:600}
.melding .knop{margin-left:6px;vertical-align:middle}

/* ==================================================================
   STARTPAGINA: vier bakjes, één per onderdeel
   ================================================================== */
.start{padding-bottom:48px}
.pagina-melding{margin:16px 24px 0}
.bakjes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px 24px 0;align-items:start}
.bakjes.enkel{grid-template-columns:minmax(0,560px);justify-content:center}
.bakje{--kc:var(--c-taken);display:flex;flex-direction:column;gap:12px;min-width:0}
.bakje.taken{--kc:var(--c-taken)}.bakje.offertes{--kc:var(--c-offertes)}.bakje.reviews{--kc:var(--c-reviews)}.bakje.monteurs{--kc:var(--c-monteurs)}
.bakje-kop{display:flex;align-items:center;gap:9px;min-height:46px;padding:9px 0 10px 2px;border-top:3px solid var(--kc);border-bottom:1px solid var(--lijn-sterk);
  color:var(--inkt);text-decoration:none;border-radius:0}
.kicoon{display:inline-flex;color:var(--kc);flex:none}
.kicoon svg.i{width:18px;height:18px;stroke-width:2}
.bakje-kop h2{font-size:16px;font-weight:600;letter-spacing:-.005em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bakje-kop .open{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--voordruk-tekst);padding:5px 6px 5px 8px;border-radius:var(--r);
  transition:background .15s}
.bakje-kop .open svg.i{width:14px;height:14px;stroke-width:2.2;transition:transform .2s var(--uit)}
.bakje-kop:hover .open{background:var(--voordruk-zacht)}
.bakje-kop:hover .open svg.i{transform:translateX(2px)}

/* de stand van het onderdeel: één voorgedrukte strook met vakken */
.stand{background:var(--papier);box-shadow:var(--schaduw);border-color:var(--lijn-sterk)}
.stand .rubriek{padding:7px 10px 8px;gap:2px}
.stand .rubriek dd{font-size:21px;font-weight:600;color:var(--inkt);line-height:1.1;letter-spacing:-.01em}
.stand .rubriek.nul dd{color:var(--inkt-4);font-weight:500}
.stand .rubriek.let-op dd{color:var(--stempel)}
.stand .rubriek.let-op dt{color:var(--stempel)}
.stand .rubriek.oranje dd{color:var(--oranje)}

/* mini-werkbonnen: wat er bovenop het bakje ligt */
.bonnen{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.bon{position:relative;display:flex;flex-direction:column;gap:7px;padding:10px 12px 11px;background:var(--papier);color:var(--inkt);text-decoration:none;
  border:1px solid var(--papier-rand);border-top:2px solid var(--voordruk);border-radius:0 0 var(--r) var(--r);box-shadow:var(--schaduw);
  transition:box-shadow .18s var(--uit),transform .18s var(--uit)}
a.bon:hover{box-shadow:var(--schaduw-op);transform:translateY(-1px)}
a.bon:active{transform:none}
.bon.hoog{border-color:color-mix(in srgb,var(--stempel) 30%,transparent);border-top-color:var(--stempel);padding-top:18px}
.bon .titel{font-weight:600;font-size:14px;line-height:1.32;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bon .kop{display:flex;align-items:center;gap:8px;justify-content:space-between}
.bon .kop .nr{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--voordruk-tekst)}
.bon .kop time{font-size:12px;color:var(--inkt-4)}
.bon .citaat{font-size:13px;color:var(--inkt-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bon .citaat.leeg-tekst{color:var(--inkt-4);font-style:italic}
.bon .voet{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bon .voet .rechts{margin-left:auto}
.bon .bedrag{font-weight:600;color:var(--inkt)}
.bon.mens{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
.bon.mens .wie{display:flex;flex-direction:column;min-width:0;flex:1}
.bon.mens .wie>b{font-weight:600;font-size:14px}
.bon.mens .wie>span{font-size:12px;color:var(--inkt-4)}
.bon.mens.uit{background:var(--papier-2);box-shadow:none}
.bakje-voet{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bakje-voet .meer{font-size:12.5px;color:var(--inkt-4);margin-left:auto}
.btn.gestippeld{border-style:dashed;border-color:var(--lijn-sterk);box-shadow:none;background:transparent;color:var(--voordruk-tekst);font-weight:600}
.btn.gestippeld:hover{background:var(--voordruk-zacht);border-color:var(--voordruk)}
.bakje-voet .btn:not(.primary) svg.i{color:var(--voordruk)}
.bakje .leeg{padding:18px 12px}

/* laden: lege bonnen die nog ingevuld worden */
.bon.laden{height:74px;border-top-color:var(--lijn-sterk);box-shadow:none;background:linear-gradient(100deg,var(--papier) 40%,var(--papier-2) 50%,var(--papier) 60%) 0 0/250% 100%;
  animation:laden 1.4s linear infinite}
@keyframes laden{to{background-position:-150% 0}}

/* het ene gemaakte moment: de bonnen worden neergelegd, bakje voor bakje */
.bonnen.neerleggen>*{animation:neerleggen .5s var(--uit) both;animation-delay:calc(var(--i,0)*45ms + var(--k,0)*70ms)}
@keyframes neerleggen{from{opacity:0;transform:translateY(-12px) rotate(-.7deg)}to{opacity:1;transform:none}}

/* ==================================================================
   VEL: een los formulier op het bureau (inloggen, review vragen, monteurs)
   ================================================================== */
.vel{background:var(--papier);border-top:4px solid var(--voordruk);border-radius:0 0 var(--r-2) var(--r-2);box-shadow:var(--schaduw-vel);border-left:1px solid var(--papier-rand);
  border-right:1px solid var(--papier-rand);border-bottom:1px solid var(--papier-rand)}
.vel-kop{padding:22px 26px 18px;border-bottom:1px solid var(--lijn)}
.vel-kop h1,.vel-kop h2{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.vel-kop p{margin-top:5px;color:var(--inkt-3);font-size:14.5px;max-width:58ch}
.vel-binnen{padding:20px 26px 24px}
.vel form{display:flex;flex-direction:column;gap:14px}

/* invulvak: een rubriekcel op de bon; de kop staat voorgedrukt, de invulling eronder */
.cel{position:relative;display:flex;flex-direction:column;gap:2px;padding:7px 12px 0;border:1px solid var(--lijn-sterk);border-radius:2px;background:var(--veld);
  transition:border-color .15s,box-shadow .15s;cursor:text}
.cel>span:first-child{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--voordruk-tekst)}
.cel input{width:100%;height:36px;border:0;padding:0 0 4px;background:transparent;font-size:16px;font-weight:500;color:var(--inkt);outline:none;border-radius:0}
.cel input::placeholder{color:var(--inkt-4);font-weight:400;opacity:.8}
.cel:hover{border-color:var(--voordruk)}
.cel:focus-within{border-color:var(--voordruk);box-shadow:inset 0 0 0 1px var(--voordruk),0 0 0 3px var(--ring)}
.cel input:focus-visible{box-shadow:none!important}
.cellen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cel input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--veld) inset;-webkit-text-fill-color:var(--inkt)}

/* keuze van de monteur: segment met initialen */
.monteurs-keuze{border:0;margin:0;padding:0;min-width:0}
.monteurs-keuze legend{padding:0;margin-bottom:6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--voordruk-tekst)}
.segment{display:flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid var(--lijn-sterk);border-radius:var(--r)}
.segment label{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:2px;cursor:pointer;font-weight:600;font-size:15px;color:var(--inkt-2);
  transition:background .15s,color .15s}
.segment label:hover{background:var(--voordruk-zacht)}
.segment input{position:absolute;opacity:0;width:1px;height:1px}
.segment label{flex:1 1 0;min-width:max-content;padding:0 14px}
.segment label>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.segment label:has(input:checked){background:var(--knop);color:#fff}
.segment label:has(input:checked) .avatar{box-shadow:0 0 0 1.5px rgba(255,255,255,.8)}
.segment label:has(input:focus-visible){box-shadow:0 0 0 3px var(--ring)}

/* intern blok: wat de klant en de website nooit zien */
.intern{border:0;margin:4px 0 0;padding:14px 0 0;border-top:1px dashed var(--lijn-sterk);min-width:0;display:flex;flex-direction:column;gap:10px}
.intern legend{float:left;width:100%;padding:0;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;font-weight:600;color:var(--inkt)}
.intern legend+*{clear:both}
.intern-uitleg{font-size:13px;color:var(--inkt-3)}

/* ==================================================================
   INLOGGEN: de inlogbon midden op het bureau
   ================================================================== */
.login-body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;gap:16px;padding:24px 16px;
  padding-bottom:max(24px,env(safe-area-inset-bottom))}
.login-kaart{width:100%;max-width:420px;padding:30px 32px 28px;box-shadow:var(--schaduw-venster);animation:opleggen .45s var(--uit) both}
@keyframes opleggen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.login-kaart .logo-merk{height:auto;width:100%;max-width:280px;filter:none;margin:0 0 24px}
[data-theme=dark] .login-kaart .logo-merk{filter:brightness(0) invert(1);opacity:.92}
.login-kaart h1{font-size:24px;font-weight:600;letter-spacing:-.01em;padding-top:20px;border-top:1px solid var(--lijn)}
.login-kaart .sub{margin:4px 0 22px;color:var(--inkt-3);font-size:14px}
.login-kaart form{display:flex;flex-direction:column;gap:12px}
.login-kaart .btn{margin-top:6px}
.login-voet{color:var(--inkt-4);font-size:13px;text-align:center}

/* ==================================================================
   REVIEW VRAGEN (monteur, vaak op de telefoon)
   ================================================================== */
.monteur-pagina{max-width:600px;margin:0 auto;padding:24px 16px 56px;display:flex;flex-direction:column;gap:22px}
.monteur-pagina .vel form{gap:12px}
.monteur-pagina .btn.groot{height:50px;font-size:16px;margin-top:4px}
.sectie-kop{display:flex;align-items:center;gap:10px;padding:0 0 9px 2px;border-bottom:1px solid var(--lijn-sterk);margin-bottom:10px}
.sectie-kop h2{font-size:15px;font-weight:600}
.sectie-kop .teller{margin-left:auto}
.teller{font-size:12px;font-weight:600;color:var(--inkt-3);min-width:22px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier)}

/* gelinieerde lijst op papier */
.staat{margin:0;padding:0;list-style:none;background:var(--papier);border:1px solid var(--papier-rand);border-radius:var(--r);box-shadow:var(--schaduw)}
.staat li{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:56px}
.staat li+li{border-top:1px solid var(--lijn)}
.staat .wie{display:flex;flex-direction:column;min-width:0;flex:1}
.staat .wie>b{font-weight:600;font-size:14.5px}
.staat .wie>span{font-size:12.5px;color:var(--inkt-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6}
.staat .leeg-regel{color:var(--inkt-4);justify-content:center;font-size:13.5px}

/* ==================================================================
   REVIEWS BEHEREN
   ================================================================== */
.inhoud{max-width:1240px;margin:0 auto;padding:0 0 56px}
.inhoud>.melding{margin:18px 24px 0}
.kopbalk.beheer{align-items:center;gap:12px 16px}
.kopbalk.beheer h1{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.kopbalk .rechts{flex-wrap:wrap;justify-content:flex-end}

/* bron: Na bezoek / Via website als segment */
.bron-keuze{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--lijn-sterk);border-radius:var(--r)}
.bron-keuze button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:0;border-radius:2px;background:transparent;color:var(--inkt-2);font-weight:500;font-size:13.5px;cursor:pointer}
.bron-keuze button:hover{background:var(--voordruk-zacht)}
.bron-keuze button.actief{background:var(--knop);color:#fff;font-weight:600}
.bron-keuze .n{font-size:12px;opacity:.8}
.bron-keuze .aandacht-n{height:18px;padding:0 6px;border-radius:2px;background:var(--stempel);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center}

/* tellers: de stand als voorgedrukte strook */
.cijfers{display:flex;border:1px solid var(--lijn-sterk);border-radius:2px;background:var(--papier);box-shadow:var(--schaduw)}
.cijfer{display:flex;flex-direction:column-reverse;gap:1px;padding:5px 12px 6px;min-width:92px}
.cijfer+.cijfer{border-left:1px solid var(--lijn-sterk)}
.cijfer span{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--voordruk-tekst);white-space:nowrap}
.cijfer b{font-size:18px;font-weight:600;line-height:1.15;color:var(--inkt)}

.filterregel{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:14px 24px 0}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--r);background:transparent;color:var(--inkt-3);font-weight:500;font-size:13.5px;
  cursor:pointer;white-space:nowrap;position:relative}
.tabs button:hover{background:var(--voordruk-zacht);color:var(--inkt)}
.tabs button.actief{color:var(--voordruk-tekst);font-weight:600;background:var(--voordruk-zacht)}
.tabs .n{font-size:12px;color:var(--inkt-4);font-weight:500}
.tabs button.actief .n{color:inherit}

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:16px 24px 0;align-items:start}
.raster>.leeg-beheer{grid-column:1/-1;padding:34px 16px}

/* reviewbon */
.review-kaart{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px;background:var(--papier);border:1px solid var(--papier-rand);border-top:2px solid var(--voordruk);
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--schaduw);min-width:0}
.review-kaart.op-site{border-top-color:var(--groen)}
.review-kaart.aandacht{border-color:color-mix(in srgb,var(--stempel) 32%,transparent);border-top-color:var(--stempel)}
.rk-aandacht{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--lijn)}
.rk-kop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rk-datum{font-size:12.5px;color:var(--inkt-4);font-weight:400}
.rk-tekst{font-size:14.5px;line-height:1.55;color:var(--inkt);overflow-wrap:anywhere}
.rk-tekst.leeg{color:var(--inkt-4);font-style:italic;font-size:13.5px}
.rk-meta{display:flex;flex-wrap:wrap;margin:0;border:1px solid var(--lijn-sterk);border-radius:2px}
.rk-meta>span{display:flex;flex-direction:column;gap:1px;padding:4px 9px 5px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--voordruk-tekst);flex:1 1 auto;min-width:0}
.rk-meta>span+span{border-left:1px solid var(--lijn-sterk)}
.rk-meta b{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--inkt-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rk-details{border-top:1px solid var(--lijn);padding-top:8px}
.rk-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--voordruk-tekst);padding:4px 0;list-style:none;display:flex;align-items:center;gap:6px}
.rk-details summary::-webkit-details-marker{display:none}
.rk-details summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(-45deg);transition:transform .2s var(--uit);margin:0 2px}
.rk-details[open] summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.rk-scores{list-style:none;margin:8px 0 4px;padding:0;border:1px solid var(--lijn);border-radius:2px}
.rk-scores li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;font-size:13px;color:var(--inkt-2)}
.rk-scores li+li{border-top:1px solid var(--lijn)}
.nvt-tekst{font-size:12px;color:var(--inkt-4)}
.antw{margin-top:10px}
.antw b{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--voordruk-tekst);margin-bottom:2px}
.antw p{font-size:13.5px;line-height:1.5;color:var(--inkt)}
.antw.vervelend p{color:var(--stempel)}
.rk-voet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--lijn)}
.rk-voet .verwijder{margin-left:-4px}
.rk-voet .label{margin-right:auto}

/* schakelaar: op de website */
.schakel{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--inkt-2);cursor:pointer;user-select:none}
.schakel input{appearance:none;width:34px;height:20px;margin:0;border-radius:999px;background:var(--lijn-sterk);position:relative;cursor:pointer;transition:background .2s var(--uit);flex:none}
.schakel input::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--uit)}
.schakel input:checked{background:var(--groen)}
.schakel input:checked::after{transform:translateX(14px)}
.schakel input:disabled{opacity:.45;cursor:not-allowed}
.schakel:has(input:disabled){color:var(--inkt-4);cursor:not-allowed}

/* verstuurde uitnodigingen */
.blok{margin:28px 24px 0}
.blok h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:600;padding:0 0 9px 2px;border-bottom:1px solid var(--lijn-sterk);margin-bottom:10px}
.blok h3 small{font-size:12.5px;font-weight:400;color:var(--inkt-4)}
.lijst{width:100%;border-collapse:separate;border-spacing:0;background:var(--papier);border:1px solid var(--papier-rand);border-radius:var(--r);box-shadow:var(--schaduw);overflow:hidden}
.lijst th{text-align:left;padding:8px 14px;background:var(--voordruk-zacht);border-bottom:1px solid var(--lijn-sterk);font-size:10.5px}
.lijst td{padding:10px 14px;border-bottom:1px solid var(--lijn);vertical-align:middle;font-size:13.5px}
.lijst tr:last-child td{border-bottom:0}
.lijst td:first-child{font-weight:600}
.adres-intern{display:block;margin-top:4px}
.lijst .leeg-regel{color:var(--inkt-4);text-align:center;font-weight:400}

.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;padding:10px 16px;border-radius:var(--r);background:var(--inkt);color:var(--papier);
  font-weight:500;font-size:13.5px;box-shadow:var(--schaduw-op);animation:toast .3s var(--uit)}
.toast.fout{background:var(--stempel);color:#fff}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ==================================================================
   MONTEURACCOUNTS
   ================================================================== */
.accounts-pagina{max-width:720px;margin:0 auto;padding:24px 16px 56px;display:flex;flex-direction:column;gap:22px}
.sectie-titel{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.accounts-pagina .vel-kop h2{font-size:19px}
.pagina-uitleg{color:var(--inkt-3);font-size:14.5px;max-width:60ch}
.account-lijst{display:flex;flex-direction:column;gap:10px}
.account-rij{background:var(--papier);border:1px solid var(--papier-rand);border-top:2px solid var(--voordruk);border-radius:0 0 var(--r) var(--r);box-shadow:var(--schaduw);padding:14px 16px}
.account-rij.geblokkeerd{background:var(--papier-2);border-top-color:var(--lijn-sterk);box-shadow:none}
.account-kop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.account-kop h2{font-size:15px;font-weight:600}
.account-kop .gebr{font-size:12.5px;color:var(--inkt-4)}
.account-kop .pill{margin-left:auto}
.account-rij form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.account-rij .cel{flex:1 1 240px}
.account-acties{display:flex;gap:6px;align-items:center}
.account-acties .btn{height:44px}
.accounts-pagina .vel form{align-items:flex-start}
.accounts-pagina .vel form .cellen,.accounts-pagina .vel form>.cel{align-self:stretch}

/* ==================================================================
   RESPONSIEF
   ================================================================== */
@media (max-width:1100px){
  .bakjes{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
}
@media (max-width:760px){
  .top{gap:10px;padding:0 10px 0 14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .brand{gap:12px}
  .logo-merk{height:18px}
  .brand h1,.brand .naam{padding-left:12px;font-size:14px}
  .gebruiker .naam-tekst,.alleen-breed{display:none}
  .kopbalk{margin:16px 16px 0}
  .kopbalk .datum{font-size:17px}
  .kopbalk .rechts{margin-left:0;width:100%}
  .bakjes{grid-template-columns:minmax(0,1fr);padding:16px 16px 0;gap:26px}
  .filterregel,.raster,.blok,.inhoud>.melding{margin-left:16px;margin-right:16px}
  .raster{padding:14px 0 0;grid-template-columns:minmax(0,1fr)}
  .kopbalk.beheer h1{font-size:21px}
  .kopbalk.beheer .rechts{flex-direction:column;align-items:stretch}
  .kopbalk.beheer .rechts .btn{height:44px;font-size:15px}
  .cijfers{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .cijfer{min-width:0;padding:6px 10px 7px}
  .cijfer:nth-child(odd){border-left:0}
  .cijfer:nth-child(n+3){border-top:1px solid var(--lijn-sterk)}
  .cijfer span{font-size:10.5px}
  .tabs{flex-wrap:wrap}
  /* vier of meer monteurs: een raster van gelijke vakken, twee per rij; een oneven laatste vult de rij */
  .segment:has(>label:nth-child(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .segment:has(>label:nth-child(4))>label{min-width:0}
  .segment:has(>label:nth-child(4))>label:last-child:nth-child(odd){grid-column:1/-1}
  .sectie-titel{font-size:21px}
  .lijst th:nth-child(3),.lijst td:nth-child(3){display:none}
  .vel-kop{padding:18px 18px 14px}
  .vel-kop h1,.vel-kop h2{font-size:21px}
  .vel-binnen{padding:16px 18px 20px}
  .login-kaart{padding:24px 20px 22px}
}
@media (max-width:480px){
  .logo-merk{height:16px;max-width:150px;object-fit:contain;object-position:left}
  .brand h1,.brand .naam{display:none}
  .gebruiker{padding:0 4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}