/* Knockwise-portaal, applicatiebasis (B1.1, 24-10-2026, akkoord Stijn; H1, 24-10 avond: dezelfde grijs-zwarte reeks als de site,
   #0A0B0E / #0E0F12 / #15171C / #1B1E24 / #24272F, en dezelfde tekst- en lijntonen). Eén vaste donkere basis naar Linear:
   bijna zwart en antraciet, diepte uit kleine helderheidsstappen en haarlijnen. Drie lagen:
   1. basis: voor elke installatie gelijk, staat alleen hier;
   2. accent: per installatie uit merk.json (merk.py maakt /merk.css die deze tokens overschrijft); zonder merk het EnergyShare-groen;
   3. betekenis: ok, let, fout, info, voor iedereen gelijk, nooit als gevuld vlak.
   Sinds d2d-45 (26-10-2026) weer twee paletten: :root is licht, :root[data-thema=donker] donker (de standaard, zie thema.js).
   Werkbon (22-10-2026): de looplijst is het scherm; het adres opent ernaast (iPad) of erin (telefoon), nooit eroverheen. */
:root{
  color-scheme:light;
  /* d2d-45 (Stijn 26-10-2026: "Ja, bouw d2d-45 zoals voorgesteld."): het lichte palet. Dezelfde regels als donker (K-8): grijs met zwart,
     kleur draagt geen betekenis behalve rood voor Nee-Nee en fouten; het woord, het icoon en de vorm dragen de stand. Standaard is donker
     (thema.js); licht is een keuze per toestel met de knop naast de bel. Elke tekstkleur haalt 4,5:1 (tests/regeltest_thema.py). */
  /* 1 · basis */
  --bg:#F4F5F7; --papier:#FFFFFF; --mist:#ECEEF1; --lijn:rgba(10,11,14,.10); --lijn-2:rgba(10,11,14,.18);
  --inkt:#0E0F12; --inkt-2:#41454D; --zacht:#5B6068; --leeg-ico:#A3A8B0;
  --rand:#8F949C;
  --hover:rgba(10,11,14,.04); --selectie:rgba(10,11,14,.06);
  --anker:#101828;
  --balk:#FFFFFF; --balk-inkt:#4D525B; --balk-hover:rgba(10,11,14,.04); --balk-aan:rgba(10,11,14,.07); --balk-aan-inkt:#0E0F12;
  --vlak:#101828; --op-vlak:#F7F8F8;
  --toast:#1B1E24; --op-toast:#F4F4F2;
  --glas:rgba(255,255,255,.9); --glas-sterk:rgba(255,255,255,.96); --glas-zwak:rgba(255,255,255,.78);
  /* 2 · accent (zonder merk: EnergyShare-groen, met donkerder tekstgroen op wit; Knockwise zet zijn accent via merk.json) */
  --merk:#96BC33; --merk-donker:#7FA21F; --merk-licht:rgba(150,188,51,.16); --merk-tekst:#4A6512; --op-merk:#132510; --op-merk-zacht:#234018;
  --limoen:#96BC33; --limoen-licht:rgba(150,188,51,.16); --limoen-rand:rgba(150,188,51,.5); --limoen-inkt:#132510;
  --op-vlak-zacht:#A9CF57; --toast-actie:#A9CF57;
  /* 3 · betekenis */
  --ok:#1F2228; --ok-vlak:rgba(10,11,14,.06); --let:#41454D; --let-vlak:rgba(10,11,14,.05);
  --fout:#C62F35; --fout-vlak:rgba(198,47,53,.10); --info:#41454D; --info-vlak:rgba(10,11,14,.05);
  --rood:#C62F35; --rood-licht:rgba(198,47,53,.10); --rood-rand:rgba(198,47,53,.35); --op-rood:#FFFFFF;
  --geel:#41454D; --geel-licht:rgba(10,11,14,.06); --geel-rand:rgba(10,11,14,.28); --geel-inkt:#1F2228; --geel-sel:rgba(10,11,14,.10); --sel-licht:rgba(10,11,14,.06); --sel-rand:rgba(10,11,14,.40);
  --amber:#41454D; --blauw:#1F2228; --blauw-licht:rgba(10,11,14,.06); --blauw-rand:rgba(10,11,14,.28); --goud:#1F2228; --groen:#0E0F12;
  /* status van een adres: grijstrap van open (licht) naar verkoopkans (zwart), rood alleen voor Nee-Nee */
  --s-open:#5B6068; --s-nietthuis:#4D525B; --s-terug:#2A2D33; --s-klant:#0A0B0E; --s-nee:#C62F35; --s-info:#41454D;
  --s-open-bg:rgba(10,11,14,.04); --s-nietthuis-bg:rgba(10,11,14,.06); --s-terug-bg:rgba(10,11,14,.08); --s-klant-bg:rgba(10,11,14,.11); --s-nee-bg:rgba(198,47,53,.10); --s-info-bg:rgba(10,11,14,.06);
  /* uitkomsten (knopbalk, stip in de historie, kaart) */
  --u-niet_thuis:#6E7482; --u-terugkomen:#2A2D33; --u-info:#41454D; --u-geen_interesse:#8A9099; --u-geen_woning:#A3A8B0; --u-neenee:#C62F35; --u-klant:#0A0B0E;
  --live:#0A0B0E; --oud:#6E7482; --offline:#A3A8B0; --ik:#0A0B0E;
  /* kaart: PDOK grijs zonder dimmen; donkere stippen met een witte rand */
  --kaart-bg:#E9EBEE; --kaart-filter:none;
  --k-open:#0A0B0E; --k-open-rand:#1F2228; --k-later:#767C86; --k-af:#6E7482; --k-selectie:#0A0B0E; --k-selectie-rand:#FFFFFF;
  --k-gekozen:#0A0B0E; --k-klant:#0A0B0E; --k-klant-rand:#FFFFFF; --k-gloed:rgba(10,11,14,.25); --k-rust:#6E7482; --k-ik:#0A0B0E;
  --k-vrij:#6E7482; --k-vrij-rand:#FFFFFF;
  --k-stip-rand:#FFFFFF; --k-neenee-rand:#C62F35;
  /* kleur per verkoper: donker genoeg op de lichte kaart, met witte letters */
  --ag-1:#0B7A85; --ag-2:#8F5E07; --ag-3:#6A4FC0; --ag-4:#B8325F; --ag-5:#7D5732; --ag-6:#55697A; --ag-7:#B4471E; --ag-8:#8D45A0; --op-ag:#FFFFFF;
  --schaduw-1:0 1px 2px rgba(10,11,14,.08);
  --schaduw:0 1px 3px rgba(10,11,14,.08),0 6px 20px rgba(10,11,14,.08);
  --schaduw-3:0 12px 40px rgba(10,11,14,.18);
  --schaduw-rand:0 -6px 18px rgba(10,11,14,.08); --schaduw-onder:0 6px 16px rgba(10,11,14,.10); --paneel-schaduw:rgba(10,11,14,.10);
  --aan-ring:rgba(10,11,14,.45); --aan-gloed:rgba(10,11,14,.10); --aan-gloed-zacht:rgba(10,11,14,.08); --gloed-sterk:rgba(10,11,14,.30);
  /* d2d-45.1: de draaiende ledring (inlogkaart, chatkader) gloeit in licht zacht; met een donker accent werd het anders een donkere veeg */
  --led-gloed:.18; --led-gloed-chat:.12; --login-gloed:3%;
  /* tekst van een pandlabel op de kaart: altijd donker met een witte rand (los van de stiprand) */
  --k-label:#0A0B0E;
  --r-klein:6px; --r:10px; --r-groot:12px;
  --zijbalk:232px; --werkbalk:44px; --strip:0px; --paneel:420px; /* strip = hoogte van de zijbalk als bovenstrook (tablet), anders 0 */
  --snel:.16s; --midden:.24s; --zacht-curve:cubic-bezier(.2,.7,.2,1);
  --veilig-onder:env(safe-area-inset-bottom,0px); --veilig-boven:env(safe-area-inset-top,0px);
}
/* het donkere palet (B1.1 t/m d2d-44 het enige): standaard via thema.js; merk.py leest beide blokken */
:root[data-thema=donker]{
  color-scheme:dark;
  /* 1 · basis */
  --bg:#0A0B0E; --papier:#0E0F12; --mist:#15171C; --lijn:rgba(255,255,255,.08); --lijn-2:rgba(255,255,255,.14);
  --inkt:#F4F4F2; --inkt-2:#AEB1B7; --zacht:#8A9099; --leeg-ico:#5A5F67;
  --rand:#3D424B; /* randen van velden, knoppen en deuren: dun, zoals in het voorbeeld; het woord en de vorm dragen de betekenis */
  --hover:rgba(255,255,255,.04); --selectie:rgba(255,255,255,.07);
  --anker:#101828; /* merkanker nachtblauw: logo-tegel, inlogvlak, tint in de kaart; nooit een groot paneel */
  --balk:#111317; --balk-inkt:#9A9FA7; --balk-hover:rgba(255,255,255,.04); --balk-aan:rgba(255,255,255,.07); --balk-aan-inkt:#F4F4F2;
  --vlak:#101828; --op-vlak:#F7F8F8; /* het merkvlak van het inlogscherm */
  --toast:#15171C; --op-toast:#F4F4F2;
  --glas:rgba(21,23,28,.9); --glas-sterk:rgba(21,23,28,.96); --glas-zwak:rgba(21,23,28,.75);
  /* 2 · accent (zonder merk: EnergyShare-groen; Knockwise zet oranje via merk.json) */
  --merk:#96BC33; --merk-donker:#A9CF57; --merk-licht:rgba(150,188,51,.12); --merk-tekst:#A9CF57; --op-merk:#132510; --op-merk-zacht:#234018;
  --limoen:#96BC33; --limoen-licht:rgba(150,188,51,.12); --limoen-rand:rgba(150,188,51,.35); --limoen-inkt:#132510;
  --op-vlak-zacht:#A9CF57; --toast-actie:#A9CF57;
  /* 3 · betekenis. Portaal K (K-8, akkoord Stijn 25-10-2026): grijs-zwart met wit; kleur draagt geen betekenis meer, behalve rood
     voor Nee-Nee en fouten. Het woord, het icoon en de vorm dragen de stand. */
  --ok:#E6E7EA; --ok-vlak:rgba(255,255,255,.08); --let:#C9CCD1; --let-vlak:rgba(255,255,255,.07);
  --fout:#E5484D; --fout-vlak:rgba(229,72,77,.12); --info:#C9CCD1; --info-vlak:rgba(255,255,255,.07);
  /* bestaande namen op de betekeniskleuren, zodat app.css en app.js blijven werken tot B1.2 ze opruimt */
  --rood:#E5484D; --rood-licht:rgba(229,72,77,.12); --rood-rand:rgba(229,72,77,.35); --op-rood:#2A0E0E;
  --geel:#C9CCD1; --geel-licht:rgba(255,255,255,.08); --geel-rand:rgba(255,255,255,.28); --geel-inkt:#E6E7EA; --geel-sel:rgba(255,255,255,.12); --sel-licht:rgba(255,255,255,.08); --sel-rand:rgba(255,255,255,.40);
  --amber:#C9CCD1; --blauw:#E6E7EA; --blauw-licht:rgba(255,255,255,.08); --blauw-rand:rgba(255,255,255,.28); --goud:#E6E7EA; --groen:#F4F4F2;
  /* status van een adres (chip met icoon en tekst): grijstrap van open (donker) naar verkoopkans (wit), rood alleen voor Nee-Nee */
  --s-open:#8A9099; --s-nietthuis:#AEB1B7; --s-terug:#E6E7EA; --s-klant:#FFFFFF; --s-nee:#E5484D; --s-info:#C9CCD1;
  --s-open-bg:rgba(255,255,255,.05); --s-nietthuis-bg:rgba(255,255,255,.07); --s-terug-bg:rgba(255,255,255,.10); --s-klant-bg:rgba(255,255,255,.14); --s-nee-bg:rgba(229,72,77,.12); --s-info-bg:rgba(255,255,255,.07);
  /* uitkomsten (knopbalk, stip in de historie, kaart): één bron, app.js leest ze als --u-<sleutel>; config.py heeft geen kleuren meer */
  --u-niet_thuis:#AEB1B7; --u-terugkomen:#E6E7EA; --u-info:#C9CCD1; --u-geen_interesse:#6E7482; --u-geen_woning:#5A5F67; --u-neenee:#E5484D; --u-klant:#FFFFFF;
  --live:#FFFFFF; --oud:#AEB1B7; --offline:#6E7482; --ik:#FFFFFF;
  /* kaart: de grijze PDOK-ondergrond, gedimd naar de antraciettint; niet omgekeerd, zodat water en groen herkenbaar blijven.
     app.js leest de --k-… en --ag-… bij het opstarten */
  --kaart-bg:#0A0B0E; --kaart-filter:brightness(.38) contrast(1.15) saturate(0);
  /* vorm draagt de stand (K-8): open is een witte ring, een verkoopkans een gevulde witte stip met gloed (--k-gloed),
     later een grijze ring, afgerond een gevulde grijze stip, Nee-Nee rood; op de inschietkaart beschikbaar middengrijs, geselecteerd wit */
  --k-open:#F4F4F2; --k-open-rand:#E6E7EA; --k-later:#8A9099; --k-af:#3D424B; --k-selectie:#FFFFFF; --k-selectie-rand:#0A0B0E;
  --k-gekozen:#FFFFFF; --k-klant:#FFFFFF; --k-klant-rand:#0A0B0E; --k-gloed:rgba(255,255,255,.28); --k-rust:#3D424B; --k-ik:#FFFFFF;
  --k-vrij:#8A9099; --k-vrij-rand:#0A0B0E; /* beschikbaar op de inschietkaart: middengrijs met een donker vinkje (een ring wordt bij duizenden adressen een witte vlek) */
  --k-stip-rand:#0A0B0E; --k-neenee-rand:#E5484D;
  /* kleur per verkoper op de inschietkaart: licht genoeg op de donkere kaart, niet het accent, niet het blauw van de eigen stip */
  --ag-1:#2EB8C6; --ag-2:#E0A030; --ag-3:#A98BEF; --ag-4:#F06292; --ag-5:#C49A6C; --ag-6:#90A4AE; --ag-7:#FF8A65; --ag-8:#CE93D8; --op-ag:#0A0B0E;
  --schaduw-1:0 1px 2px rgba(0,0,0,.4);
  --schaduw:0 2px 4px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --schaduw-3:0 12px 40px rgba(0,0,0,.6);
  --schaduw-rand:0 -6px 18px rgba(0,0,0,.35); --schaduw-onder:0 6px 16px rgba(0,0,0,.35); --paneel-schaduw:rgba(0,0,0,.35);
  /* d2d-45: gloed om een gekozen knop of stip (was vast wit) */
  --aan-ring:rgba(255,255,255,.35); --aan-gloed:rgba(255,255,255,.18); --aan-gloed-zacht:rgba(255,255,255,.14); --gloed-sterk:rgba(255,255,255,.45);
  --led-gloed:.55; --led-gloed-chat:.35; --login-gloed:8%;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--inkt);font:14px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--merk-tekst);outline-offset:2px}
.toast :focus-visible,.melding-ok :focus-visible{outline-color:var(--toast-actie)}
.vel h2:focus{outline:none}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.zacht{color:var(--zacht)}
.klein{font-size:13px}
.fout{color:var(--rood);min-height:1.4em;margin:4px 0}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* knoppen en velden */
/* maten (B1.2): 36 px op het bureaublad, 30 px klein, 48 px op een aanraakscherm (zie @media pointer:coarse) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--r-klein);border:1px solid var(--rand);background:var(--papier);font-weight:600;transition:background var(--snel),border-color var(--snel),transform var(--snel)}
.knop:hover{border-color:var(--inkt-2)}
.knop:active{transform:scale(.98)}
.knop-hoofd{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.knop-hoofd:hover{background:var(--merk-donker);border-color:var(--merk-donker)}
.knop-limoen{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.knop-rood{background:var(--papier);border-color:var(--rood);color:var(--rood)}
.knop-klein{min-height:30px;padding:0 10px;font-size:13px;border-radius:var(--r-klein)}
.knop-breed{width:100%}
.knop:disabled{opacity:.5;cursor:not-allowed}
label{display:block;font-weight:500;font-size:14px;color:var(--inkt-2);margin:12px 0 0}
input,select,textarea{display:block;width:100%;margin-top:6px;min-height:36px;padding:6px 10px;border:1px solid var(--rand);border-radius:var(--r-klein);background:var(--papier);transition:border-color var(--snel),box-shadow var(--snel)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--merk);box-shadow:0 0 0 1px var(--merk)}
textarea{min-height:72px;resize:vertical}
input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--merk);flex:none;box-shadow:none}
.zoekveld{position:relative}
.zoekveld .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--zacht)}
.zoekveld input{padding-left:44px;margin:0}

/* inloggen (Fase I, 25-10-2026, akkoord Stijn): de reeks van knockwise.nl, de kaart met de ledring van de site (site.css .led-rand/.led-gloed,
   conic-gradient, 9 s per rondgang) in de merkkleur van de installatie; binnen de kaart beweegt niets. Bij minder beweging staat de ring stil. */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:28px;padding:32px 16px;isolation:isolate;
  background:radial-gradient(circle 280px at right 200px bottom 180px,color-mix(in srgb,var(--merk) var(--login-gloed),transparent),transparent 70%) var(--bg)}
.login-merk{display:none} /* Fase I: het woordmerk staat al in de kaart; één keer is genoeg */
.login-kop{width:48px;height:auto}
.login-titel{font-size:28px;font-weight:700;margin:0;letter-spacing:-.02em}
.login-slogan{display:none}
.login-kaart{position:relative;width:100%;max-width:420px;padding:32px 28px;background:var(--papier);border:1px solid var(--lijn);border-radius:16px;box-shadow:var(--schaduw-3)}
.login-kaart>*:not(.led-rand):not(.led-gloed){position:relative}
.led-rand{position:absolute;inset:-1px;border-radius:16px;padding:2px;overflow:hidden;pointer-events:none;z-index:2;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.led-rand::before{content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,transparent 0 38%,color-mix(in srgb,var(--merk) 35%,transparent) 44%,var(--merk-donker) 50%,color-mix(in srgb,var(--merk) 35%,transparent) 56%,transparent 62%,transparent 86%,color-mix(in srgb,var(--merk) 60%,transparent) 93%,transparent 100%);
  animation:led-loop 9s linear infinite}
.led-gloed{position:absolute;inset:-14px;border-radius:28px;pointer-events:none;z-index:-1;filter:blur(14px);opacity:var(--led-gloed);overflow:hidden}
.led-gloed::before{content:"";position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,transparent 0 38%,color-mix(in srgb,var(--merk) 90%,transparent) 50%,transparent 62%,transparent 86%,color-mix(in srgb,var(--merk) 50%,transparent) 93%,transparent 100%);
  animation:led-loop 9s linear infinite}
@keyframes led-loop{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.led-rand::before,.led-gloed::before{animation-play-state:paused}}
.login-logo{width:200px;height:auto;margin:0 0 24px -2px}
.login h1{font-size:26px}
.login .zacht{margin:4px 0 8px}
.login label{margin-top:14px}
.login input{background:var(--mist);border-color:var(--lijn-2);min-height:40px}
.login input:focus{border-color:var(--merk);box-shadow:0 0 0 1px var(--merk),0 0 12px color-mix(in srgb,var(--merk) 30%,transparent)}
.login .knop{width:100%;margin-top:12px;min-height:42px}
.login .fout{margin:8px 0 0}
@media (max-width:699px){.login{padding:24px 16px;gap:20px}.login-kaart{padding:26px 20px}.led-rand{padding:1px}.led-gloed{inset:-10px;filter:blur(10px)}}

/* opbouw (B1.2, 24-10-2026, naar Linear): zijbalk 232 | hoofd (werkbalk 44 boven paneel + kaartvlak).
   ≤ 1023 wordt de zijbalk een bovenstrook, ≤ 699 een onderbalk (telefoon). De kaart blijft het werkvlak; alleen Resultaten heeft geen kaart. */
.app{display:grid;grid-template-columns:var(--zijbalk) minmax(0,1fr);height:100%;height:100dvh}
.hoofd{display:grid;grid-template-columns:var(--paneel) minmax(0,1fr);grid-template-rows:var(--werkbalk) minmax(0,1fr);min-height:0;min-width:0}
.werkbalk{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 12px 0 16px;border-bottom:1px solid var(--lijn);background:var(--bg);min-width:0;z-index:15}
.wb-links{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
.wb-titel{font-size:13.5px;font-weight:600;white-space:nowrap}
.wb-ctx{font-size:12.5px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wb-gedaan{font-size:12.5px;color:var(--inkt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;animation:gedaan-in var(--midden) var(--zacht-curve)}  /* d2d-42: kort vinkje na een routinehandeling */
@keyframes gedaan-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wb-gedaan{animation:none}}
/* d2d-42: testwissel. Zolang de admin als testaccount kijkt: een gekleurde rand bovenaan en de balk met "Terug naar admin" op elk scherm */
.app.wissel{box-shadow:inset 0 3px 0 var(--merk)}
.wb-test{display:inline-flex;align-items:center;gap:6px;padding:2px 4px 2px 10px;border:1px dashed var(--lijn-2);border-radius:99px;font-size:12px;color:var(--inkt-2);white-space:nowrap}
.wb-test .tekstknop{font-size:12px;min-height:26px;padding:0 6px}
.testband{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 12px 4px 16px;border-bottom:1px dashed var(--lijn-2);font-size:12px;color:var(--inkt-2);background:var(--bg)}
.testband[hidden]{display:none}
.testband .tekstknop{font-size:12px;min-height:32px;padding:0 6px;flex:none}
@media (max-width:699px){.wb-test{display:none}}
.wb-wissel{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 2px 2px 10px;border:1px solid var(--merk);border-radius:99px;font-size:12.5px;color:var(--inkt)}
.wb-wissel-tekst{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wb-wissel small{font-size:inherit;color:var(--zacht)}
.wb-wissel .knop-klein{min-height:26px;border-radius:99px;white-space:nowrap;flex:none}
.app.wissel .wb-rechts{flex:0 1 auto;min-width:0}
@media (max-width:699px){.app.wissel .wb-titel,.wb-wissel small,.app.wissel .werkbalk .sync{display:none}.app.wissel .wb-links{display:none}.app.wissel .wb-rechts{flex:1;justify-content:flex-end}}
.wb-rechts{display:flex;align-items:center;gap:6px;flex:none}
.werkbalk .sync{margin:0;width:auto;min-height:28px;padding:3px 10px;border-radius:99px;gap:6px;font-size:12.5px;font-weight:600}
.werkbalk .sync .ico{width:14px;height:14px}
.werkbalk .sync b{font-size:12.5px;display:inline}
.werkbalk .sync small{display:none}
.werkbalk .knop-klein{min-height:28px}

.zijbalk{background:var(--balk);border-right:1px solid var(--lijn);display:flex;flex-direction:column;padding:calc(10px + var(--veilig-boven)) 8px 8px;gap:2px;z-index:20;min-height:0;overflow-y:auto}
.zb-merk{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 6px;margin-bottom:10px}
.zb-tegel{width:24px;height:24px;border-radius:6px;background:var(--anker);display:grid;place-items:center;flex:none;overflow:hidden}
.zb-tegel img{width:18px;height:18px;object-fit:contain;display:block}
.zb-naam{font-size:13.5px;font-weight:600;color:var(--inkt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.zb-groep{display:flex;flex-direction:column;gap:1px;margin-bottom:14px}
.zb-kop{margin:0 0 4px;padding:0 10px;font-size:11.5px;font-weight:600;color:var(--zacht);letter-spacing:.02em}
.zb-item{display:flex;align-items:center;gap:10px;min-height:28px;padding:0 10px;border:0;border-radius:var(--r-klein);background:none;color:var(--balk-inkt);font-size:13.5px;font-weight:500;text-align:left;width:100%;min-width:0;position:relative;transition:background var(--snel),color var(--snel)}
.zb-item .ico{width:16px;height:16px;stroke-width:1.5}
.zb-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.zb-item:hover{color:var(--inkt);background:var(--balk-hover)}
.zb-item.aan{background:var(--balk-aan);color:var(--balk-aan-inkt);font-weight:600}
.zb-item.aan .ico{color:var(--merk-tekst)}
.zb-vul{flex:1}
.zb-telefoon{display:none}
.zb-gebruiker{min-height:44px;padding:0 6px;margin-top:4px;border-top:1px solid var(--lijn);border-radius:0;padding-top:6px}
.zb-gebruiker.aan{background:none}
.zb-avatar{width:26px;height:26px;border-radius:50%;background:var(--mist);border:1px solid var(--lijn-2);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--inkt);flex:none}
.zb-ico-ik,.zb-ik-label{display:none} /* alleen in de onderbalk van de telefoon: pictogram met het woord Ik */
.zb-wie{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.zb-wie b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zb-wie small{font-size:11.5px;color:var(--zacht);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app:not(.admin) .alleen-admin,.app.admin .alleen-verkoper{display:none}
.demo-label{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--let);background:var(--let-vlak);border:1px solid color-mix(in srgb,var(--let) 40%,transparent);border-radius:4px;padding:1px 5px;flex:none}

.paneel{background:var(--bg);border-right:1px solid var(--lijn);display:flex;flex-direction:column;min-height:0;z-index:10}
.paneel-inhoud{--pad:16px;overflow-y:auto;flex:1;padding:var(--pad) var(--pad) 36px}
.paneel-inhoud>.kop h1,.werkkop-naam h1{display:none} /* de titel staat sinds B1.2 in de werkbalk; de panelen verliezen hun eigen kop per stap (B1.5–B1.7) */
.status{padding:8px 16px;font-size:13px;font-weight:500;border-bottom:1px solid var(--lijn)}
.status.offline{background:var(--let-vlak);color:var(--let)}
.status.afkoel{background:var(--merk-licht)}

.kaartvlak{position:relative;min-width:0}
.kaart{position:absolute;inset:0;background:var(--kaart-bg)}
.kaart-knoppen{position:absolute;right:16px;bottom:24px;z-index:500;display:flex;flex-direction:column;gap:8px}
.rond{width:52px;height:52px;border-radius:50%;border:0;background:var(--papier);box-shadow:var(--schaduw);display:grid;place-items:center}
.rond svg{width:22px;height:22px;fill:var(--merk);stroke:none}
.legenda{position:absolute;left:16px;bottom:24px;z-index:500;background:var(--glas-sterk);border-radius:var(--r);box-shadow:var(--schaduw);padding:8px 12px;font-size:13px;max-width:calc(100% - 100px)}
.legenda-items{display:flex;flex-wrap:wrap;gap:4px 12px}
.legenda-items span{display:inline-flex;align-items:center;gap:6px}
.legenda-knop{display:none;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 6px;border:0;background:none;font-weight:600;font-size:14px}
.legenda-knop .ico{width:16px;height:16px;transition:transform var(--snel)}
.legenda.open .legenda-knop .ico{transform:rotate(180deg)}
.stip{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none;border:2px solid transparent}
.stip-vink{width:14px;height:14px;position:relative}
.stip-vink::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6px;border:solid var(--vink,var(--k-stip-rand));border-width:0 2px 2px 0;transform:rotate(45deg)}
.kaart-melding{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:600;background:var(--toast);color:var(--op-toast);border-radius:18px;padding:8px 16px;font-size:14px;font-weight:500;box-shadow:var(--schaduw);width:max-content;max-width:calc(100% - 24px);text-align:center}  /* d2d-47: mag afbreken; op één regel duwde de lange melding de telefoon 85 px breed */
.tekenbalk{position:absolute;top:16px;left:16px;right:72px;z-index:650;background:var(--papier);border-radius:var(--r);box-shadow:var(--schaduw);padding:10px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tekenbalk b{margin-right:auto;font-weight:600}

/* paneelkoppen en blokken */
.kop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.kop h1,.kop h2{font-size:22px}
.kop .zacht{font-size:13px}
.blok{border:1px solid var(--lijn);border-radius:var(--r);padding:16px;margin-bottom:14px;background:var(--papier);box-shadow:var(--schaduw-1)}
.blok h3{font-size:17px;margin-bottom:8px}
.blok-kop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.blok-kop h3{margin:0}
details.blok summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:28px}
details.blok summary::-webkit-details-marker{display:none}
details.blok summary::after{content:"+";font-size:22px;color:var(--zacht);font-weight:400}
details.blok[open] summary::after{content:"–"}
.nieuw{animation:in var(--midden) var(--zacht-curve) both}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.chip{border:1px solid var(--rand);background:var(--papier);border-radius:99px;padding:4px 10px;font-size:13px;font-weight:500;white-space:nowrap;min-height:30px;transition:background var(--snel),color var(--snel)}
.chip:hover{border-color:var(--inkt-2)}
.chip.aan{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.knop.knop-test.aan{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}  /* d2d-41: testaccounts zichtbaar, de knop staat aan */
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--mist);border:1px solid var(--lijn);border-radius:var(--r-klein);padding:3px;gap:3px;margin-bottom:16px}
.segment button{border:0;background:none;border-radius:4px;min-height:30px;font-weight:500;font-size:13px;color:var(--inkt-2)}
.segment button.aan{background:var(--papier);color:var(--inkt);font-weight:600;box-shadow:var(--schaduw-1)}

/* looplijst (werkbon): per straat een kop die bovenaan blijft staan (routenummer, naam, open, kantkeuze),
   per pand één rij: het huisnummer links zoals het bordje op de gevel, de deuren met hun volledige nummer ernaast.
   De stand staat in woorden onder het nummer; de kleur van de uitkomst als onderrand. */
.straatblok{margin-top:14px}
.straat{position:sticky;top:calc(-1 * var(--pad));z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 calc(-1 * var(--pad));padding:10px var(--pad) 8px;
  background:var(--bg);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);cursor:pointer;list-style:none}
.straat::-webkit-details-marker{display:none}
.straat-naam{flex:1 1 auto;min-width:0;font-weight:600;font-size:19px;line-height:1.2;overflow-wrap:break-word}
.straat-naam small{display:block;font-weight:500;color:var(--zacht);font-size:13px}
.straat-balk{flex-basis:100%;display:block;height:4px;border-radius:99px;background:var(--lijn);overflow:hidden}
.straat-balk i{display:block;height:100%;background:var(--merk);border-radius:99px}
.straatblok.klaar:not([open]) .straat{color:var(--zacht)}  /* Portaal K: alle straten starten dicht; alleen een afgeronde straat is gedimd */
.kanten{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:3px}
.kanten button{border:0;background:none;border-radius:var(--r-klein);min-height:40px;padding:0 12px;font-weight:600;color:var(--inkt-2);white-space:nowrap}
.kanten button span{font-weight:500;color:var(--zacht);font-size:13px;margin-left:2px}
.kanten button.aan{background:var(--merk);color:var(--op-merk)}
.kanten button.aan span{color:var(--op-merk-zacht)}
.kant-een{font-size:14px;font-weight:500;color:var(--zacht)}
/* adreskaart per pand (ronde 1 uitstraling, richting A): groot huisnummer met de toevoegingen eronder, de stand als chip met icoon en tekst,
   één regel extra en een pijl. Eén deur: de kaart is de knop; een portiek: per deur een knop in de kaart */
.panden{display:grid;gap:8px;padding:10px 0 6px}
.pand{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:68px;padding:10px 12px;border-radius:14px;
  border:1px solid var(--lijn);background:var(--papier);color:var(--inkt);text-align:left;font:inherit;box-shadow:var(--schaduw-1);transition:border-color var(--snel),transform var(--snel)}
.pand.meer{grid-template-columns:56px minmax(0,1fr)}
button.pand:hover{border-color:var(--rand)}
button.pand:active{transform:scale(.99)}
.pand.sel{border:2px solid var(--merk-tekst);padding:9px 11px}
.pand.klaar{background:var(--mist);box-shadow:none}
.pand.klaar .pand-nr{color:var(--inkt-2)}
.pand-nr{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}
.pand-nr small{display:block;font-size:12px;font-weight:600;color:var(--zacht);letter-spacing:0;margin-top:3px;line-height:1.2}
.pand-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:13px;color:var(--inkt-2);overflow-wrap:anywhere}
.pand-pijl{color:var(--zacht)}
.schip{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:13px;font-weight:600;padding:3px 9px;border-radius:99px;line-height:1.3}
.schip .ico{width:14px;height:14px;stroke-width:2.4}
.s-open{color:var(--s-open);background:var(--s-open-bg)}
.s-nietthuis{color:var(--s-nietthuis);background:var(--s-nietthuis-bg)}
.s-terug{color:var(--s-terug);background:var(--s-terug-bg)}
.s-klant{color:var(--s-klant);background:var(--s-klant-bg)}
.s-nee{color:var(--s-nee);background:var(--s-nee-bg)}
.s-info{color:var(--s-info);background:var(--s-info-bg)}
.pand-deuren{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.deur{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;max-width:100%;min-height:52px;padding:6px 10px;border-radius:10px;border:1px solid transparent;
  font-weight:600;text-align:left;transition:transform var(--snel),border-color var(--snel)}
.deur b{font-size:17px;line-height:1.1;color:var(--inkt)}
.deur small{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;overflow-wrap:anywhere}
.deur small .ico{width:13px;height:13px;stroke-width:2.4}
.deur:hover{border-color:var(--rand)}
.deur:active{transform:scale(.97)}
.deur.gekozen{border:2px solid var(--merk-tekst);padding:5px 9px}
.leeg{padding:32px 12px;text-align:center;color:var(--zacht)}
.leeg .ico{width:36px;height:36px;color:var(--leeg-ico);display:block;margin:0 auto 10px}
.leeg b{display:block;color:var(--inkt);font-size:17px;font-weight:600;margin-bottom:4px}
.filters{flex-wrap:nowrap}
.filters .chip{flex:1 1 0;min-width:0;padding:6px 8px;overflow:hidden;text-overflow:ellipsis}

/* werkkop: één regel met naam, voortgang en verzendstatus; de tellers eronder */
.werkkop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:6px}
.werkkop-naam{flex:1 1 150px;min-width:0}
.werkkop-naam h1{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.werkkop-naam small{display:block;font-size:13px;color:var(--zacht)}
.voortgang{flex:0 1 120px;min-width:100px}
.voortgang b{display:block;font-size:18px;font-weight:700;line-height:1.1}
.voortgang-balk{display:block;height:8px;border-radius:99px;background:var(--mist);margin-top:5px;overflow:hidden}
.voortgang-balk i{display:block;height:100%;background:var(--merk);border-radius:99px;transition:width .5s var(--zacht-curve)}
.werkkop .sync:not(.pil){flex-basis:100%;margin:0}
.werkkop-tellers{margin:0 0 14px;font-size:15px;color:var(--inkt-2)}
.werkkop-tellers .sale{color:var(--merk);font-weight:600}
.tekstlink{border:0;background:none;padding:6px 0;font-weight:600;color:var(--merk);text-decoration:underline;text-underline-offset:3px}

/* scorebord */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);padding:12px 14px;box-shadow:var(--schaduw-1)}
.kpi span{display:block;font-size:13px;color:var(--zacht)}
.kpi b{display:block;font-size:28px;font-weight:700;line-height:1.15}
.kpi.sale{background:var(--merk-licht);border-color:color-mix(in srgb,var(--merk) 35%,transparent)}
.kpi.sale b{color:var(--merk)}
.rang{list-style:none;margin:0;padding:0}
.rang li{display:grid;grid-template-columns:26px 40px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--lijn)}
.rang li:first-child{border-top:0}
.rang li.ik{background:var(--merk-licht);margin:0 -10px;padding:10px;border-radius:var(--r-klein);border-top-color:transparent}
.rang li.ik + li{border-top-color:transparent}
.rang-plek{font-weight:700;font-size:16px;color:var(--zacht);text-align:center}
.rang li.eerste .rang-plek{color:var(--goud)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--merk-licht);color:var(--merk);display:grid;place-items:center;font-weight:600;font-size:15px;position:relative}
.avatar.actief::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--merk);border:2px solid var(--papier)}
.rang-naam{min-width:0}
.rang-naam b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rang-naam small{color:var(--zacht);font-size:13px}
.rang-balk{height:5px;border-radius:99px;background:var(--mist);margin-top:5px;overflow:hidden}
.rang-balk i{display:block;height:100%;background:var(--merk);border-radius:99px;transition:width .5s var(--zacht-curve)}
.rang-score{text-align:right;line-height:1.1}
.rang-score b{font-size:22px;font-weight:700;color:var(--merk)}
.rang-score small{display:block;font-size:12px;color:var(--zacht)}
/* staafgrafieken: elke kolom is een knop over de volle hoogte (ook een lage staaf is te raken); de cijfers staan eronder */
.grafiek,.uurbalk{display:flex;align-items:stretch;gap:3px;height:120px;margin-top:6px}
.staaf{flex:1;min-width:0;border:0;padding:0;background:none;display:flex;align-items:flex-end;border-radius:4px 4px 0 0}
.staaf>span{display:block;width:100%;background:var(--merk-licht);border-radius:4px 4px 0 0;position:relative;min-height:2px}
.staaf>span i{position:absolute;left:0;right:0;bottom:0;background:var(--merk);border-radius:4px 4px 0 0}
.uurbalk .staaf>span{background:var(--merk);border-radius:3px 3px 0 0}
.staaf.aan>span{box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--inkt)}
.staaf-uitleg{font-size:14px;font-weight:500;margin:8px 0 0;min-height:1.5em}
.grafiek-labels{display:flex;gap:3px;font-size:11px;color:var(--zacht);margin-top:4px}
.grafiek-labels span{flex:1;text-align:center;min-width:0;overflow:hidden;white-space:nowrap}
.legenda-klein{display:flex;gap:14px;font-size:12px;color:var(--zacht);margin-top:8px}
.legenda-klein span{display:inline-flex;align-items:center;gap:6px}
.legenda-klein i{width:10px;height:10px;border-radius:3px;display:inline-block}
.sale-rij{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);font-size:14px}
.sale-rij:first-of-type{border-top:0}
.sale-ico{width:30px;height:30px;border-radius:50%;background:var(--merk-licht);color:var(--merk);display:grid;place-items:center;flex:none}
.sale-ico .ico{width:16px;height:16px;stroke-width:2.5}
.skelet{background:linear-gradient(90deg,var(--mist) 25%,var(--lijn) 37%,var(--mist) 63%);background-size:400% 100%;animation:glans 1.2s ease infinite;border-radius:var(--r);height:72px;margin-bottom:10px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--lijn);vertical-align:middle}
th{font-weight:500;color:var(--zacht);font-size:13px}
td.getal,th.getal{text-align:right}
/* dagrapport: per verkoper een kaartje met de cijfers in twee kolommen, op elke breedte. Het paneel is hooguit ±400 px breed;
   als tabel paste het niet meer sinds de kolom Adressen erbij kwam (22-10-2026) */
.rijtabel tr:first-child{display:none}
.rijtabel tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--lijn)}
.rijtabel td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:8px}
.rijtabel td::before{content:attr(data-label);color:var(--zacht);font-size:13px}
.rijtabel td.rijnaam{grid-column:1/-1;display:block;font-weight:600;font-size:15px}
.rij{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* teamlijst (Beheer): naam bovenaan, de knoppen eronder even breed; past het niet naast elkaar, dan onder elkaar */
.teamlijst{list-style:none;margin:0;padding:0}
.teamlijst li{padding:12px 0;border-bottom:1px solid var(--lijn)}
.teamlid{display:flex;align-items:center;gap:12px;min-width:0}
.teamlid>div{min-width:0;overflow-wrap:anywhere}
.teamknoppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:10px}
.teamknoppen .knop{white-space:nowrap;padding:0 10px}
/* medewerkers (23-10-2026): één regel per persoon, tikken klapt de instellingen open */
.teamlijst li{padding:0}
.teamlijst li:last-child{border-bottom:0}
.lid-regel{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 4px;border:0;background:none;color:inherit;text-align:left;border-radius:var(--r-klein)}
.lid-regel:hover{background:var(--lijn)}
.lid-tekst{display:flex;flex-direction:column;flex:1;min-width:0;overflow-wrap:anywhere}
.lid-pijl{font-size:22px;color:var(--zacht, inherit);opacity:.6;transition:transform var(--snel)}
.teamlijst li.open .lid-pijl{transform:rotate(90deg)}
.lid-details{padding:4px 4px 14px 56px;display:flex;flex-direction:column;gap:6px;min-width:0}
.lid-details .lid-team{margin:0}
.lid-verwijderknop{align-self:flex-start;min-height:40px;padding:6px 0}
.lid-verwijder{border:1px solid var(--rood-rand);background:var(--rood-licht);border-radius:var(--r-klein);padding:12px;margin-top:8px}
.lid-verwijder p{margin:0 0 4px}
.knop-rood-vol{background:var(--rood);border-color:var(--rood);color:var(--op-rood)}
.lid-nieuw{border:1px solid var(--lijn);border-radius:var(--r-klein);padding:12px;margin-bottom:12px}
@media (max-width:420px){.lid-details{padding-left:4px}}
.schakel{display:flex;align-items:center;gap:12px;padding:6px 0;font-weight:500;color:var(--inkt)}
.wachtwoordvak{font-family:ui-monospace,Consolas,monospace;background:var(--mist);border:1px solid var(--lijn-2);padding:10px 12px;border-radius:var(--r-klein);font-size:17px;user-select:all;margin:8px 0;overflow-wrap:anywhere}  /* fase 3: ook een lange exportsleutel past op 375 px */
.tellers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.teller{background:var(--mist);border-radius:var(--r);padding:10px 12px}
.teller b{display:block;font-size:24px;line-height:1.1}
.teller span{font-size:13px;color:var(--zacht)}
.uurbalk{height:90px;margin-top:10px}
.uurbalk-labels{display:flex;gap:3px;font-size:11px;color:var(--zacht)}
.uurbalk-labels span{flex:1;text-align:center}

/* Werk verdelen (B1.6): paneel rechts van de grote kaart met wissel, verkopers als rijen (weekstand rechts), hoe kiezen, selectie; zie het B1.6-blok onderaan */
.ins-wissel{margin-bottom:12px}
.ins-wissel button.aan.rood{color:var(--rood)}
.modi{margin-bottom:10px}
.modi button{padding:0 4px;font-size:13px}
.melding-ok{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;background:var(--toast);color:var(--op-toast);border-radius:var(--r);padding:10px 12px 10px 16px;margin-bottom:12px;font-weight:500}
.melding-ok .knop{background:none;border-color:transparent;color:var(--toast-actie)}
.knop-tekst{border:0;background:none;padding:10px 0;min-height:44px;font-weight:600;color:var(--merk);text-decoration:underline;text-underline-offset:3px;text-align:left}
.knop-tekst.rood{color:var(--rood)}
.meer h4{margin:16px 0 6px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.meer summary + h4{margin-top:12px}
.rood{color:var(--rood)}
.aantallen{display:flex;gap:6px;margin-top:10px}
.aantallen .chip{flex:1}
.straatlijst{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.straatchip{display:inline-flex;align-items:center;gap:6px;background:var(--papier);border:1px solid var(--lijn);border-radius:99px;padding:3px 4px 3px 12px;font-size:13px;font-weight:500}
.straatchip small{color:var(--zacht)}
.straatchip button{width:26px;height:26px;border:0;border-radius:50%;background:var(--mist);display:grid;place-items:center;padding:0}
.straatchip .ico{width:14px;height:14px}
.plaats{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--lijn);background:none;padding:9px 2px;min-height:48px;font-weight:500}
.meer h4 + .plaats{border-top:0}
.plaats-cijfers{text-align:right;line-height:1.15}
.plaats-cijfers b{display:block;color:var(--merk);font-size:16px}
.plaats-cijfers small{color:var(--zacht);font-size:12px;font-weight:400}
.label.stand-b{background:var(--merk-licht);color:var(--merk)}
.label.stand-i{background:var(--blauw-licht);color:var(--blauw)}
.label.stand-k{background:var(--merk);color:var(--op-merk)}
.label.stand-n{background:var(--rood-licht);color:var(--rood)}
.lasso-aan .kaart{touch-action:none;cursor:crosshair}
.zoekresultaat{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--lijn);background:none;padding:10px 2px;min-height:52px}
.zoekresultaat:first-child{border-top:0}
.zoekresultaat small{display:block;color:var(--zacht);font-size:13px}
.label{display:inline-block;font-size:12px;font-weight:600;border-radius:6px;padding:2px 8px;background:var(--mist);color:var(--inkt-2);white-space:nowrap}
.label.vrij{background:var(--merk-licht);color:var(--merk)}
.label.rood{background:var(--rood-licht);color:var(--rood)}
.importbalk{height:10px;border-radius:99px;background:var(--mist);overflow:hidden;margin:8px 0 6px}
.importbalk i{display:block;height:100%;background:linear-gradient(90deg,var(--merk),var(--merk))}

/* adresvenster: op de iPad vast in de rechterkolom onder een kaartstrook (nooit over de kaart), bij de admin over het paneel;
   op de telefoon opent het in de lijst onder het gekozen pand (inline-vel), met het vel van onderen als reserve */
.vel{position:fixed;z-index:1000;background:var(--papier);display:flex;flex-direction:column;overflow:hidden}
.vel-kop{padding:18px 20px 16px;border-bottom:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-start}
.terugknop{flex-basis:100%;justify-content:flex-start}
.vel-adres{flex:1;min-width:0}
.vel-adres h2{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.vel-adres p{margin:4px 0 0;font-size:13px;color:var(--zacht)}
.sluit{width:32px;height:32px;border-radius:var(--r-klein);border:0;background:var(--mist);display:grid;place-items:center;flex:none}
.sluit:hover{background:var(--rand)}
.vel-body{overflow-y:auto;padding:16px 20px 22px;flex:1}
.feiten{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.feit{background:var(--mist);border-radius:99px;padding:4px 12px;font-size:14px;font-weight:500}
.feit.rood{background:var(--rood-licht);color:var(--rood);font-weight:600}
.uitkomsten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* uitkomst: witte knop met de kleur van de uitkomst als balk links (dezelfde kleur als de onderrand van de deur) */
.uitkomst{position:relative;overflow:hidden;min-height:64px;border-radius:var(--r);border:1.5px solid var(--rand);background:var(--papier);color:var(--inkt);font-weight:600;font-size:17px;text-align:left;
  padding:10px 14px 10px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;overflow-wrap:anywhere;transition:transform var(--snel),border-color var(--snel)}
.uitkomst:hover{border-color:var(--inkt-2)}
.uitkomst:active{transform:scale(.98)}
.uk-balk{position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--uk)}
.uitkomst small{font-size:13px;font-weight:500;color:var(--zacht)}
.uitkomst.kans{width:100%;flex-direction:row;align-items:center;gap:10px;min-height:68px;margin-top:8px;padding-left:16px;background:var(--merk);border-color:var(--merk);color:var(--op-merk);font-size:18px}
.uitkomst .ico{width:22px;height:22px;flex:none}
.scheid{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.scheid::before,.scheid::after{content:"";flex:1;height:1px;background:var(--lijn)}
.eerder,.eerder-vast{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r);padding:10px 14px;margin-bottom:12px;font-size:15px;background:var(--mist);overflow-wrap:anywhere}
.eerder .ico{width:18px;height:18px;margin-top:3px;color:var(--zacht)}
.eerder-vast{background:var(--geel-licht);font-weight:600}
.stap{border:1px solid var(--lijn);border-radius:var(--r);padding:14px;margin-top:12px;background:var(--bg)}
.stap h3{font-size:18px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.stap h3 .ico{width:20px;height:20px}
.vink{display:flex;align-items:center;gap:12px;min-height:48px;font-size:16px;font-weight:500;color:var(--inkt)}
.knoppenrij{display:flex;gap:8px;margin-top:12px}
.knoppenrij .knop{flex:1;min-height:56px}
.knoppenrij .knop[data-actie=bevestig]{flex:2;flex-direction:column;gap:0;line-height:1.2;text-align:center}
.knop small{display:block;font-size:12px;font-weight:500;opacity:.85}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin:8px 0 10px}
.tegel{min-height:64px;border:1.5px solid var(--rand);border-radius:var(--r);background:var(--papier);font-weight:600;font-size:17px;text-align:left;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.tegel small{font-size:13px;font-weight:500;color:var(--zacht)}
.tegel.aan{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.tegel.aan small{color:var(--op-merk-zacht)}
.andere-datum{margin-top:0}
.salesdock{margin-top:12px;border:1px dashed var(--rand);border-radius:var(--r);padding:12px 14px;font-size:14px;color:var(--zacht)}
.historie{margin-top:18px}
/* klantgegevens en toestemming (fase 4, d2d-30): lange namen en adressen breken af, nooit zijwaarts scrollen */
.klantvelden,.toestemming{border:1px solid var(--lijn);border-radius:var(--r);padding:10px 12px 4px;margin:12px 0 0;min-width:0}
.klantvelden legend,.toestemming legend{font-weight:700;padding:0 4px}
.toestemming legend small{display:block;font-weight:500;font-size:13px;color:var(--zacht)}
.klantvelden input{width:100%;box-sizing:border-box}
.toestemming .vink{align-items:flex-start;padding:6px 0;min-height:44px;font-size:15px}
.toestemming .vink input{flex:none;margin-top:3px;width:22px;height:22px}
.toestemming .vink span{min-width:0;overflow-wrap:anywhere}
.kopieer{display:grid;gap:8px}
.kopieer-rij{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--lijn);border-radius:var(--r);padding:8px 10px}
.kopieer-rij span{min-width:0;display:grid;overflow-wrap:anywhere}
.kopieer-rij small{color:var(--zacht);font-size:12px}
.kopieer-rij .knop{flex:none}
.klantblok{border:1px solid var(--lijn);border-radius:var(--r);padding:10px 12px;margin-bottom:10px;display:grid;gap:6px;min-width:0}
.klant-regel{display:flex;flex-wrap:wrap;gap:4px 12px;overflow-wrap:anywhere}
.klant-regel span{color:var(--zacht);min-width:0;overflow-wrap:anywhere}
.toest-lijst{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.toest-lijst li{display:flex;gap:10px;align-items:center;justify-content:space-between}
.toest-lijst li span{min-width:0;display:grid;font-size:14px;overflow-wrap:anywhere}
.toest-lijst li small{color:var(--zacht);font-size:12px}
.toest-lijst li.ingetrokken span{text-decoration:line-through;text-decoration-thickness:1px;color:var(--zacht)}
.toest-lijst li.ingetrokken small{text-decoration:none}
.historie h3{font-size:15px;margin-bottom:6px}
.historie summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;color:var(--inkt-2)}
.hist{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);font-size:14px;align-items:flex-start}
.hist .stip{margin-top:4px}
.hist.ingetrokken{opacity:.5;text-decoration:line-through}
.neenee-blok{background:var(--rood-licht);color:var(--rood);border-radius:var(--r);padding:14px;font-weight:600}
.acties{display:grid;gap:8px;margin-top:6px}

/* melding na vastleggen: een donkere balk bovenaan de lijst, met Ongedaan maken */
.toast{position:fixed;z-index:2000;left:calc(var(--zijbalk) + 12px);width:calc(var(--paneel) - 24px);top:calc(var(--strip) + var(--werkbalk) + 8px + var(--veilig-boven));background:var(--toast);color:var(--op-toast);border:1px solid var(--lijn-2);border-radius:var(--r);padding:10px 12px 10px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--schaduw-3);font-weight:500;overflow-wrap:anywhere}
.toast button{flex:none}
.toast button{background:none;border:0;color:var(--toast-actie);font-weight:600;min-height:36px;padding:0 6px}
.toast.fout{background:var(--rood);color:var(--op-rood)}
.toast.fout button{color:var(--op-rood)}

.ik-stip{width:18px;height:18px;border-radius:50%;background:var(--k-ik);border:3px solid var(--k-stip-rand);box-shadow:0 0 0 2px color-mix(in srgb,var(--k-ik) 35%,transparent),var(--schaduw-pin)}
.leaflet-container{font-family:inherit;background:var(--kaart-bg)}

/* kaart in premium stijl: gedempte PDOK-ondergrond (water blijft blauw, wegen leesbaar), zwevende knoppen en legenda als glaskaart,
   zachte schaduw langs het paneel en een pulserende ring om het gekozen huis */
.leaflet-tile-pane{filter:var(--kaart-filter)}
.kaartvlak::before{content:"";position:absolute;inset:0 auto 0 0;width:14px;z-index:450;pointer-events:none;background:linear-gradient(90deg,var(--paneel-schaduw),transparent)}
.leaflet-bar{border:0!important;border-radius:var(--r)!important;box-shadow:var(--schaduw)!important;overflow:hidden}
.leaflet-bar a{width:40px!important;height:40px!important;line-height:40px!important;color:var(--merk)!important;font-size:20px!important;font-weight:500;border-bottom:1px solid var(--lijn)!important;background:var(--papier)}
.leaflet-bar a:last-child{border-bottom:0!important}
.leaflet-bar a:hover{background:var(--mist)}
.leaflet-top.leaflet-right{margin:16px 16px 0 0}.leaflet-top.leaflet-right .leaflet-control{margin:0}
.leaflet-control-attribution{background:var(--glas-zwak)!important;border-radius:6px 0 0 0;font-size:10px;color:var(--zacht)!important}
.leaflet-tooltip{border:0;border-radius:var(--r-klein);box-shadow:var(--schaduw);font-weight:500;font-size:13px;padding:6px 10px;color:var(--inkt)}
.legenda,.rond{background:var(--glas);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
.puls{pointer-events:none}
.puls::before,.puls::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--k-gekozen)}
.puls::after{animation:puls 1.8s var(--zacht-curve) infinite}
@keyframes puls{from{transform:scale(.45);opacity:.9}to{transform:scale(1.25);opacity:0}}
.puls::before{transform:scale(.62);opacity:.35}

@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes glans{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Resultaten (B1.2): het enige scherm zonder kaart; het paneel krijgt de volle breedte */
.app.p-resultaten .hoofd{grid-template-columns:minmax(0,1fr)}
.app.p-resultaten .kaartvlak{display:none}
.app.p-resultaten .paneel{border-right:0}
.app.p-resultaten .paneel-inhoud{width:100%}
/* iPad staand (en kleine iPad liggend): smallere looplijst, kaart ernaast */
@media (min-width:700px) and (max-width:1099px){
  :root{--paneel:340px}
  .paneel-inhoud{--pad:14px}
}
/* iPad staand (B1.2; sinds H4 alleen 700–899 px): de zijbalk wordt een bovenstrook van 48 px met pictogram + naam; de groepskoppen en het teamblok vervallen daar */
@media (min-width:700px) and (max-width:899px){
  :root{--zijbalk:0px;--strip:48px}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--strip) minmax(0,1fr)}
  .zijbalk{flex-direction:row;align-items:center;gap:2px;padding:0 8px;padding-top:var(--veilig-boven);border-right:0;border-bottom:1px solid var(--lijn);overflow:hidden}
  .zb-merk{margin:0 6px 0 0;min-height:0}
  .zb-naam{display:none}
  .zb-groep{flex-direction:row;margin:0;gap:2px}
  .zb-kop{display:none}
  .zb-item{width:auto;min-height:32px;padding:0 8px;gap:6px;font-size:13px}
  .zb-gebruiker{margin:0;border:0;padding:0 4px}
  .zb-wie{display:none}
  .hoofd{grid-row:2}
}
/* kleine iPad liggend: iets bredere lijst */
@media (min-width:900px) and (max-width:1099px) and (orientation:landscape){:root{--paneel:420px}}
/* iPad liggend: brede looplijst (werkbon), rechts kaartstrook met het adres eronder */
@media (min-width:1100px){
  .app:not(.admin){--paneel:520px}
  .app.admin.p-vandaag{--paneel:560px} /* B1.6: de verkoperstabel naast de kaart */
}
/* vanaf iPad: het adres staat vast rechts naast de lijst, onder een kaartstrook; de kaart blijft zichtbaar en het venster zweeft nergens over */
@media (min-width:700px){
  .app{--strook:clamp(200px,34vh,320px)}
  .app:not(.admin) .vel{left:calc(var(--zijbalk) + var(--paneel));right:0;top:calc(var(--strip) + var(--werkbalk) + var(--strook));bottom:0;border-top:1px solid var(--lijn);box-shadow:var(--schaduw-rand);padding-bottom:var(--veilig-onder)}
  .app:not(.admin):has(#vel:not([hidden])) .kaartvlak{height:var(--strook);align-self:start}
  .app:not(.admin):has(#vel:not([hidden])) .legenda{display:none}
  .app:not(.admin):has(#vel:not([hidden])) .kaart-knoppen{bottom:12px}
  .app.admin .vel{left:var(--zijbalk);width:var(--paneel);top:calc(var(--strip) + var(--werkbalk));bottom:0;border-right:1px solid var(--lijn);box-shadow:var(--schaduw-3)}
}
@media (min-width:700px) and (max-width:1099px){
  .vel-kop{padding:14px 16px 12px}
  .vel-body{padding:14px 16px 18px}
  .vel-adres h2{font-size:28px}
  .uitkomst{font-size:16px;padding:10px 10px 10px 18px}
  .werkkop-naam{flex-basis:100%}
  .voortgang{flex:1 1 100px}
  .filters{gap:4px}
  .filters .chip{font-size:13px;padding:6px 4px}
}
/* aanraakscherm (iPad): grotere tikvlakken, geen dubbeltik-zoom, geen grijze tikflits */
@media (pointer:coarse){
  button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .deur{min-height:56px}
  .pand{min-height:72px}
  .kanten button{min-height:48px}
  .uitkomst{min-height:72px}
  .chip{min-height:44px;padding:8px 16px}
  .knop{min-height:56px}
  .knop-klein{min-height:44px}
  .segment button{min-height:44px}
  .vink{min-height:56px}
  .vink input[type=checkbox]{width:28px;height:28px}
  .leaflet-touch .leaflet-bar a{width:44px!important;height:44px!important;line-height:44px!important}
}
/* telefoon (reserve; het team werkt op iPads): kaart vol scherm, menu onderin, panelen en afboekvel als vel van onderen */
@media (max-width:699px){
  :root{--zijbalk:0px;--strip:0px;--paneel:0px}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .hoofd{grid-row:1;grid-template-columns:minmax(0,1fr)}
  .zijbalk{grid-row:2;border-bottom:0;border-top:1px solid var(--lijn);flex-direction:row;justify-content:space-around;padding:4px 4px calc(4px + var(--veilig-onder));gap:0;min-width:0;overflow:visible}
  .zb-merk,.zb-vul,.zb-kop{display:none}
  .zb-groep{display:contents}
  .zb-item{flex:1 1 0;min-width:0;width:auto;min-height:52px;padding:4px 2px;flex-direction:column;justify-content:center;gap:3px;font-size:11px;border-radius:var(--r-klein)}
  .zb-item .ico{width:20px;height:20px}
  .zb-item span{max-width:100%}
  .zb-telefoon{display:flex}
  .zb-gebruiker{margin:0;border:0;padding:4px 2px}
  .zb-avatar,.zb-wie{display:none}
  .zb-ico-ik,.zb-ik-label{display:block}
  .zb-item.aan{background:none}
  .paneel{grid-row:2;grid-column:1;border-right:0}
  .kaartvlak{grid-row:2;grid-column:1}
  .app.toon-kaart .paneel{display:none}
  .app:not(.toon-kaart) .kaartvlak{visibility:hidden}
  .paneel-inhoud{--pad:16px}
  .vel{left:0;right:0;top:auto;bottom:0;max-height:88dvh;border-radius:var(--r-groot) var(--r-groot) 0 0;box-shadow:var(--schaduw-3);padding-bottom:var(--veilig-onder)}
  .vel-adres h2{font-size:26px}
  .uitkomst{font-size:16px;padding:10px 10px 10px 18px}
  .uitkomst .ico{width:20px;height:20px}
  .straat-naam{font-size:17px}
  .kanten button{padding:0 8px;font-size:15px}
  /* het gekozen adres opent in de lijst, direct onder het pand */
  .inline-vel{margin:0 calc(-1 * var(--pad));background:var(--papier);border-top:3px solid var(--merk);border-bottom:1px solid var(--lijn);box-shadow:var(--schaduw-onder)}
  .inline-vel .vel-kop{padding:14px 16px 12px}
  .inline-vel .vel-body{padding:12px 16px 18px}
  .werkkop-naam h1{font-size:21px}
  .werkkop-naam{flex-basis:100%}
  .voortgang{flex:1 1 100px}
  .legenda{left:12px;right:80px;bottom:16px;max-width:none;padding:0 6px}
  .legenda:not(.open){right:auto}
  .legenda-knop{display:flex}
  .legenda:not(.open) .legenda-items{display:none}
  .legenda.open .legenda-items{padding:0 6px 10px}
  .kaart-knoppen{right:12px;bottom:16px}
  .toast{left:12px;right:12px;width:auto}
}
@media (prefers-reduced-motion:no-preference){
  .vel:not([hidden]),.inline-vel{animation:in var(--midden) var(--zacht-curve)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* telefoon: geen paneel naast de kaart, dus ook geen schaduwrand */
@media (max-width:699px){.kaartvlak::before{display:none}}

/* ---------- ronde 1 werksysteem (22-10-2026): verzendstatus, vervolgacties, overdracht, regiekamer ---------- */
.sync{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--lijn);border-radius:var(--r);padding:10px 14px;margin-bottom:12px;background:var(--papier);font:inherit;color:inherit}
.sync .ico{width:22px;height:22px;flex:none}
.sync b{display:block;font-size:15px}
.sync small{display:block;font-size:13px;color:var(--zacht)}
.sync.ok{border-color:color-mix(in srgb,var(--merk) 35%,transparent);background:var(--merk-licht)}
.sync.ok .ico{color:var(--merk)}
.sync.wacht{border-color:var(--geel-rand);background:var(--geel-licht)}
.sync.wacht .ico{color:var(--amber)}
.sync.fout{border-color:var(--rood-rand);background:var(--rood-licht);color:var(--rood)}
.sync.fout small{color:var(--rood)}
.sync.pil{width:auto;margin:0;padding:5px 10px;border-radius:99px;gap:5px;font-size:13px;white-space:nowrap;font-weight:600;color:var(--merk)}
.sync.pil .ico{width:16px;height:16px}
.sync.pil small{display:inline;font-size:12px;font-weight:500}
.overdrachtblok h3{display:flex;align-items:center;gap:8px}
/* vandaag terug: blauwe kaarten bovenaan de lijst, links het dagdeel; over datum rood */
.vervolgblok{display:grid;gap:8px;margin-bottom:14px}
.vervolg-rij{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:60px;text-align:left;border:1px solid var(--blauw-rand);border-left:5px solid var(--blauw);border-radius:var(--r);background:var(--blauw-licht);padding:10px 14px;font:inherit;color:inherit}
.vervolg-rij.achter{border-color:var(--rood-rand);border-left-color:var(--rood);background:var(--rood-licht)}
.vervolg-wanneer{font-weight:700;font-size:14px;color:var(--blauw);min-width:64px}
.vervolg-rij.achter .vervolg-wanneer{color:var(--rood)}
.vervolg-rij b{display:block;font-size:16px;overflow-wrap:anywhere}
.vervolg-rij small{display:block;font-size:13px;color:var(--zacht)}
.vervolg-rij.gekozen{box-shadow:0 0 0 2px var(--merk)}
.ov-rij,.mislukt-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--lijn)}
.overdrachtblok .ov-rij:first-of-type,.mislukt-rij:first-of-type{border-top:0}
.ov-rij>div:first-child,.mislukt-rij>div:first-child{min-width:0;flex:1 1 180px}
.ov-rij b,.mislukt-rij b{display:block;overflow-wrap:anywhere}
.ov-rij small,.mislukt-rij small{display:block;font-size:13px;color:var(--zacht);overflow-wrap:anywhere}
.mislukt-rij small{color:var(--rood)}
.ov-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.overdrachtblok{border-color:color-mix(in srgb,var(--merk) 35%,transparent);background:var(--merk-licht)}
.ov-vel{display:grid;gap:8px;background:var(--merk-licht);border:1px solid color-mix(in srgb,var(--merk) 35%,transparent);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.ov-vel .ov-knoppen .knop{flex:1 1 140px}
.vv-vel{display:flex;align-items:center;gap:10px;border-radius:var(--r);padding:10px 14px;margin-bottom:12px;background:var(--blauw-licht);color:var(--blauw);font-weight:600}
.vv-vel.achter{background:var(--rood-licht);color:var(--rood)}
.vv-vel .ico{width:20px;height:20px;flex:none}
.dagdeel{margin:10px 0 4px}
.kpi-sub{display:block;font-size:13px;color:var(--inkt-2);margin-top:2px}
.tussenkop{font-size:17px;margin:4px 0 10px}
/* de cijferblokjes per periode in het ledenvel (Verkopers); de agentkaarten van Vandaag zijn in B1.6 vervangen door de verkoperstabel */
.agentkaart-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin-bottom:6px}
.agentkaart-cijfers b{display:block;font-size:24px;font-weight:700;line-height:1.2}
.agentkaart-cijfers span{display:block;font-size:12px;color:var(--zacht);line-height:1.3}
.agentkaart-cijfers .sale b{color:var(--merk)}
.agentkaart-cijfers .rood b,.agentkaart-cijfers .rood span{color:var(--rood)}
@media (pointer:coarse){.ov-knoppen .knop{min-height:48px}}
/* looproute: straatnummer in de volgorde van lopen; waarschuwing bij een tweede, los gebied */
.straatnr{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:var(--merk);color:var(--op-merk);font-size:13px;font-weight:700;vertical-align:1px}
.waarschuwing{background:var(--geel-licht);border:1px solid var(--geel-rand);color:var(--geel-inkt);border-radius:var(--r);padding:10px 12px;font-size:14px;font-weight:500;margin:10px 0}
.routelengte{font-size:13px;color:var(--zacht);margin:2px 0 10px}
/* ronde Betrouwbaar en grip (22-10-2026) */
/* laadscherm tot de app of het inlogscherm klaar is (G1) */
.laden{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--papier);color:var(--zacht);z-index:50}
.laden img{width:150px;height:auto}
/* logo zonder wit vlak (23-10-2026, keuze Stijn): in donker de variant met witte tekst */
:root[data-thema=donker] .login-logo,:root[data-thema=donker] .laden img{content:url(/logo-donker.png)}
@media (prefers-color-scheme:dark){:root:not([data-thema=licht]) .login-logo,:root:not([data-thema=licht]) .laden img{content:url(/logo-donker.png)}}
.laden p{margin:0;font-size:15px}
.laden i{display:block;width:120px;height:4px;border-radius:99px;background:var(--merk-licht);overflow:hidden;position:relative}
.laden i::after{content:"";position:absolute;inset:0;width:40%;border-radius:99px;background:var(--merk)}
@media (prefers-reduced-motion:no-preference){.laden i::after{animation:laden 1.1s ease-in-out infinite}}
@keyframes laden{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* filterchips: de breedte volgt de tekst, zodat "Gedaan 12" niet wordt afgekapt op de iPad staand (G2) */
.filters .chip{flex:1 1 auto;text-overflow:clip}
/* vandaag al afgeboekt: corrigeren of nog een bezoek (K3) */
.al-vast{background:var(--geel-licht);border:1px solid var(--geel-rand);border-radius:var(--r);padding:12px 14px;margin-bottom:12px}
.al-vast b{display:block;font-size:17px}
.al-vast>span{display:block;margin-top:2px;color:var(--inkt-2)}
.al-vast small{display:block;margin-top:10px;font-size:13px;color:var(--zacht)}
.al-vast .knoppenrij{margin-top:10px}
.eerder-vast .tekstlink{padding:0;margin-left:auto;flex:none}
/* afwijzen met een reden (G4) */
.afwijs{background:var(--rood-licht);border-radius:var(--r);padding:10px 12px 12px;margin:0 0 8px}
.afwijs p{margin:6px 0 0}
.afwijs .knoppenrij{margin-top:8px}
.afwijs .knoppenrij .knop{min-height:48px}
/* blok Systeem op Vandaag (O2) */
.systeem summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.systeem summary::-webkit-details-marker{display:none}
.systeem ul{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--inkt-2)}
.systeem li{margin:3px 0;overflow-wrap:anywhere}
.systeem li.rood{color:var(--rood);font-weight:600}
.systeem.rood{border-color:var(--rood)}
.sale-rij .label{margin-left:auto;flex:none}
/* datumveld in de kop van het dagrapport: houdt zijn eigen breedte en gaat onder de titel staan als er geen plek is (iPad staand) */
.kop:has(#cijferdatum){flex-wrap:wrap}
#cijferdatum{flex:0 0 auto;max-width:100%}
/* Salesdock-koppeling (ronde 2): stand van de kans onder het adres, knoppen die een link zijn, en de keuze van de Salesdock-gebruiker in Beheer */
a.knop{color:inherit;text-decoration:none;text-align:center}
a.knop-limoen{color:var(--op-merk)}
.sd-stand{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--merk);overflow-wrap:anywhere}
.sd-stand.rood{color:var(--rood)}
.sd-keuze{display:block;margin-top:6px;font-size:13px;color:var(--zacht)}
.sd-keuze select{display:block;width:100%;max-width:100%;margin-top:4px;min-height:40px}
.blok-kop:has([data-actie="sd-nu"]){flex-wrap:wrap;gap:8px}
/* ronde 2 (22-10-2026): berichten van de admin, voorraad per agent, rapport met periode en CSV */
.bericht{border-top:1px solid var(--lijn);padding:10px 0;overflow-wrap:anywhere}
.bericht:first-of-type{border-top:0;padding-top:0}
.bericht p{margin:4px 0 8px;white-space:pre-line}
.bericht.gelezen{color:var(--inkt-2)}
.bericht-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.bericht-kop small{color:var(--zacht)}
.bericht .tekstlink,.bericht-adres{display:inline-flex;align-items:center;gap:4px;font-size:14px;text-align:left;min-height:32px}
.bericht .ico{width:16px;height:16px;flex:none}
.berichtblok.nieuw{border-color:var(--merk);box-shadow:inset 4px 0 0 var(--merk),var(--schaduw-1)}
.berichtblok details summary{cursor:pointer;color:var(--zacht);font-size:14px;padding:6px 0;min-height:32px}
.vel-body > .bericht{background:var(--merk-licht);border:0;border-radius:var(--r);padding:10px 12px;margin-bottom:10px}
.vr-rij{display:flex;align-items:center;gap:8px;border-top:1px solid var(--lijn);padding:6px 0}
.vr-rij:first-child{border-top:0}
.vr-adres{flex:1;min-width:0;text-align:left;border:0;background:none;padding:6px 0;min-height:44px;color:inherit}
.vr-adres b{display:block}
.vr-adres small{display:block;color:var(--zacht);overflow-wrap:anywhere}
.velden2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.velden2 input{width:100%;min-width:0}
.rapportkeuze .knoppenrij{display:flex;flex-wrap:wrap;gap:8px}
#berichten .bericht p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}  /* de admin ziet het begin; de agent krijgt alles */

/* ---------- Samen (ronde A, 22-10-2026): meldingen, dienst, doelen, teamfeed, klassement en emotes ----------
   Rustig en goed leesbaar tijdens het lopen: grote tikvlakken, geen rode verliezerslijsten, animaties alleen zonder "minder beweging". */
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--merk);color:var(--op-merk);font-size:12px;font-weight:700;line-height:1}
.zb-item .badge{margin-left:auto;background:var(--merk);color:var(--op-merk);min-width:18px;height:18px;font-size:11px}
.segment button .badge{margin-left:4px}
.teamtabs{margin-bottom:14px}
#samen .kop{flex-wrap:wrap;align-items:center}
#samen .kop>div{flex:1 1 170px;min-width:0}
#samen .kop .knop{white-space:nowrap}
.blok-kop{flex-wrap:wrap}
.dienstblok h3,.doelblok h3{white-space:nowrap}
.samen-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.samen-knoppen .knop{flex:1 1 140px}
.achterkaart{background:var(--geel-licht);border-color:var(--geel-rand)}
.achterkaart p{margin:0}
.achterkaart .zacht{margin-top:8px}
.dienstblok h3{display:flex;align-items:center;gap:8px}
.dienst-stip{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rand);flex:none}
.aan .dienst-stip,.dienstregel.aan .dienst-stip{background:var(--merk);box-shadow:0 0 0 3px var(--merk-licht)}
.pauze .dienst-stip{background:var(--amber)}
.mijndoel{margin-top:14px;padding-top:12px;border-top:1px solid var(--lijn)}
.mijndoel .rij{flex-wrap:wrap;gap:2px 12px}
.doelbalk{position:relative;height:10px;border-radius:99px;background:var(--mist);margin-top:8px}
.doelbalk.groot{height:14px}
.doelbalk i{display:block;height:100%;border-radius:99px;background:var(--merk);transition:width .6s var(--zacht-curve)}
.doel-merk{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;border-radius:2px;background:var(--merk)}
.doel-getal{font-size:24px;font-weight:700;color:var(--merk)}
.doel-getal.klein{font-size:16px}
.doelblok.gehaald{border-color:var(--merk);background:var(--merk-licht)}
.doelblok .rij{flex-wrap:wrap;gap:2px 12px}
.doelblok .rij b{min-width:0;overflow-wrap:anywhere}
.hulpblok .rij{flex-wrap:wrap}
.hulpblok .rij>div{flex:1 1 180px;min-width:0}
.hulpblok h3{margin:0}
.hulp-rij{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--lijn)}
.hulp-rij:first-of-type{border-top:0;padding-top:0}
.hulp-rij>div:first-child{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.hulp-rij p{margin:2px 0}
.hulp-rij small{display:block}
.hulp-rij .samen-knoppen{margin:0}
.hulp-rij .samen-knoppen .knop{flex:0 0 auto}
.hulp-rij.klaar{opacity:.65}
.tussenkop{font-size:14px;margin:14px 0 4px;color:var(--inkt-2)}
.meldingen,.feed{list-style:none;margin:0;padding:0}
.melding,.feed li{padding:10px 0;border-top:1px solid var(--lijn)}
.melding:first-child,.feed li:first-child{border-top:0;padding-top:2px}
.melding.nieuw{background:var(--merk-licht);margin:0 -10px;padding:10px;border-radius:var(--r-klein);border-top-color:transparent}
.melding.nieuw + .melding{border-top-color:transparent}
.melding-tekst{overflow-wrap:anywhere}
.melding-tekst small{display:block}
.snel-terug{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.emoji-knop{width:44px;height:44px;border-radius:50%;border:1px solid var(--lijn);background:var(--papier);font-size:20px;line-height:1;display:grid;place-items:center;flex:none;transition:transform var(--snel)}
.emoji-knop:active{transform:scale(.92)}
.feed li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.feed-tekst{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.feed-tekst small{display:block}
.reacties{display:flex;gap:6px}
.reactie{min-width:48px;height:40px;padding:0 10px;border-radius:99px;border:1px solid var(--lijn);background:var(--papier);font-size:18px;display:inline-flex;align-items:center;gap:4px;transition:background var(--snel),border-color var(--snel)}
.reactie small{font-size:13px;font-weight:600;color:var(--inkt-2)}
.reactie.aan{background:var(--merk-licht);border-color:var(--merk)}
.segment.mini{margin:0;padding:3px}
.segment.mini button{min-height:34px;padding:0 10px;font-size:13px}
.klassement{list-style:none;margin:0;padding:0}
.klassement li{display:grid;grid-template-columns:24px minmax(0,1fr) auto 44px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--lijn)}
.klassement li:first-child{border-top:0}
.klassement li.ik{background:var(--merk-licht);margin:0 -10px;padding:8px 10px;border-radius:var(--r-klein);border-top-color:transparent}
.klassement li.ik + li{border-top-color:transparent}
.klassement .rang-naam b{white-space:normal;overflow-wrap:anywhere}
.definitie,.groetlijst{margin-top:10px}
.definitie summary,.groetlijst summary,.voorkeuren summary{cursor:pointer;font-weight:600;color:var(--merk);min-height:40px;display:flex;align-items:center}
.definitie p{margin:4px 0 0}
.groet-rij{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--lijn);overflow-wrap:anywhere}
.groet-rij>div{min-width:0}
.groet-rij p{margin:2px 0}
.groet-rij.uit b{color:var(--inkt-2);font-weight:500}
.groet-emoji{font-size:22px;line-height:1.2}
.voorkeuren summary{font-size:17px;color:var(--inkt)}
.dienstregel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-4px 0 10px;padding:4px 6px 4px 12px;border-radius:var(--r);background:var(--papier);border:1px solid var(--lijn);font-size:14px}
.dienstregel.uit{background:var(--geel-licht)}
.dienstregel.uit>span{flex:1 1 160px;font-weight:500}
.dienst-info{flex:1 1 170px;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;text-align:left;font-weight:500;color:var(--inkt)}
.dienst-info b{font-weight:600}
/* berichten van de admin ingeklapt tot één regel */
.berichtregel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 10px;padding:6px 6px 6px 12px;border-radius:var(--r);background:var(--papier);border:1px solid var(--lijn);font-size:14px}
.berichtregel>span{flex:1 1 160px;min-width:0}
.berichtregel.nieuw{border-color:var(--merk-tekst);box-shadow:inset 4px 0 0 var(--merk-tekst)}
/* afboeken in twee stappen: de gekozen uitkomst krijgt een rand, daarna Vastleggen */
.uitkomst.aan{border:2px solid var(--merk-tekst);box-shadow:0 0 0 2px color-mix(in srgb,var(--merk-tekst) 20%,transparent)}
.vastleggen{margin-top:10px}
.vastleggen-uitleg{text-align:center;margin:6px 0 0}
.dienst-info>span:last-child{min-width:0;overflow-wrap:anywhere}
/* emote sturen */
.keuze-set{border:0;margin:0 0 6px;padding:0;min-width:0}
.keuze-set legend{font-weight:500;font-size:14px;color:var(--inkt-2);margin:4px 0 8px;padding:0}
.collega-keuze{display:flex;flex-wrap:wrap;gap:8px}
.collega,.emote{margin:0;cursor:pointer;position:relative}
.collega input,.emote input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.collega{display:flex;align-items:center;gap:8px;max-width:100%;padding:4px 14px 4px 4px;border:1px solid var(--rand);border-radius:99px;background:var(--papier);font-weight:500;color:var(--inkt)}
.collega .avatar{width:36px;height:36px;font-size:13px;flex:none}
.collega-naam{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.emote-keuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.emote{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border:1px solid var(--rand);border-radius:var(--r);background:var(--papier);font-weight:500;color:var(--inkt);line-height:1.2}
.emote-emoji{font-size:24px;line-height:1}
.collega:has(input:checked),.emote:has(input:checked){border-color:var(--merk);background:var(--merk-licht);box-shadow:0 0 0 2px var(--merk)}
.collega:has(input:focus-visible),.emote:has(input:focus-visible){outline:3px solid var(--merk);outline-offset:2px}
.teller{text-align:right;margin:4px 0 0}
/* beheer */
.lid-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 10px}
.lid-team label{margin-top:8px}
.team-rij{padding:10px 0;border-top:1px solid var(--lijn);overflow-wrap:anywhere}
.team-rij:first-of-type{border-top:0}
/* feest: een handvol confetti dat één keer valt (alleen zonder "minder beweging") */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:3000;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.95;animation:val 2.2s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes val{to{transform:translate(var(--x),105vh) rotate(540deg);opacity:.2}}
@media (max-width:699px){
  .zb-item .badge{position:absolute;top:2px;right:calc(50% - 22px);margin:0;box-shadow:0 0 0 2px var(--balk)}
  .emote{padding:6px 8px;gap:6px;font-size:14px}
  .klassement li{grid-template-columns:22px minmax(0,1fr) auto 44px;gap:8px}
}
/* ronde B: profielfoto's en de teamkaart */
.avatar.foto{overflow:hidden;background:var(--merk-licht)}
.avatar.foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar-mini{display:inline-grid;width:24px;height:24px;font-size:10px;vertical-align:-6px;margin-right:6px;flex:none}
.avatar-groot{width:64px;height:64px;font-size:22px;flex:none}
.deel-locatie{margin-top:10px;padding-top:8px;border-top:1px solid var(--lijn)}
.deel-ico{font-size:13px}
.tk-pin{position:relative;width:44px;height:44px;border-radius:50%;padding:3px;background:var(--papier);box-shadow:var(--schaduw-pin);border:3px solid var(--live);cursor:pointer}
.tk-pin .avatar{width:100%;height:100%;font-size:13px}
.tk-pin.ik{border-color:var(--ik)}
.tk-pin.verouderd{border-color:var(--oud)}
.tk-pin.offline{border-color:var(--offline);filter:grayscale(1);opacity:.7}
.tk-hulp{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--rood);color:var(--op-rood);font-weight:700;font-size:13px;display:grid;place-items:center;border:2px solid var(--papier)}
.tk-cluster{width:44px;height:44px;border-radius:50%;background:var(--merk);color:var(--op-merk);font-weight:700;font-size:16px;display:grid;place-items:center;border:3px solid var(--papier);box-shadow:var(--schaduw-pin);cursor:pointer}
.tk-lijst{list-style:none;margin:8px 0 0;padding:0}
.tk-lijst li+li{border-top:1px solid var(--lijn)}
.tk-rij{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;width:100%;min-height:48px;padding:6px 2px;background:none;border:0;text-align:left;color:var(--inkt)}
.tk-rij .avatar-mini{width:32px;height:32px;font-size:12px;margin:0;vertical-align:0}
.tk-naam{flex:1 1 120px;min-width:0;font-weight:600;overflow-wrap:anywhere}
.tk-stand{font-size:13px;font-weight:600;color:var(--zacht);white-space:nowrap}
.tk-stand::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--rand);vertical-align:0}
.tk-stand.live{color:var(--merk-tekst)}.tk-stand.live::before{background:var(--live)}
.tk-stand.verouderd{color:var(--oud)}.tk-stand.verouderd::before{background:var(--oud)}
.tk-stand.pauze::before,.tk-stand.uit::before{background:none;border:1.5px solid var(--rand);width:6px;height:6px}
.tk-kaart-kop{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tk-kaart .samen-knoppen{margin:12px 0}
.bijsnijden canvas{display:block;width:min(100%,320px);aspect-ratio:1;height:auto;margin:0 auto 12px;border-radius:var(--r);touch-action:none;cursor:grab;background:var(--lijn)}
.bijsnijden canvas:focus-visible{outline:3px solid var(--merk);outline-offset:3px}
.bijsnijden input[type=range]{min-height:44px;padding:0;border:0}
/* ---------- ronde 1 uitstraling (22-10-2026): Team met teamdoel, leden en één berichtenblok ---------- */
.teamstand{display:flex;align-items:flex-end;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.teamstand .doel-getal{font-size:28px;line-height:1.1;color:var(--inkt)}
.teamstand .doel-getal .zacht{font-size:17px;font-weight:600}
.doelblok .doelbalk{margin-top:8px}
.segment.periode{margin:0 0 10px}
.ledenblok{padding:4px 4px}
.leden{list-style:none;margin:0;padding:0}
.lid{display:flex;align-items:center;gap:6px;border-top:1px solid var(--lijn)}
.lid:first-child{border-top:0}
.lid.ik{background:var(--merk-licht);border-radius:var(--r);border-top-color:transparent}
.lid.ik + .lid{border-top-color:transparent}
.lid-knop{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 8px;border:0;background:none;text-align:left;color:var(--inkt);border-radius:var(--r)}
.lid .emoji-knop{margin-right:6px}
.lid-foto{position:relative;flex:none}
.lid-foto .avatar{width:44px;height:44px}
.lid-stip{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;border:2px solid var(--papier)}
.lid-stip.live{background:var(--live)}
.lid-stip.oud{background:var(--oud)}
.lid-tekst{min-width:0;display:flex;flex-direction:column;gap:1px}
.lid-naam{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.lid-naam .zacht{font-weight:500;font-size:13px}
.lid-stand{font-size:13px;color:var(--zacht);overflow-wrap:anywhere}
.scores{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:4px;font-size:11px;color:var(--zacht)}
.scores>span{display:flex;flex-direction:column;line-height:1.2}
.scores b{color:var(--inkt);font-size:16px}
.score-uitleg{margin:-4px 4px 14px}
.lid-stand-groot{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.lid-stand-groot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--offline)}
.lid-stand-groot.live::before{background:var(--live)}
.lid-stand-groot.oud::before{background:var(--oud)}
.lid-periode{border-top:1px solid var(--lijn);padding-top:12px;margin-top:12px}
.lid-periode h3{font-size:15px;margin-bottom:8px}
.lid-periode + .samen-knoppen{margin:14px 0 10px}
.berichtenblok .meldingen{margin-bottom:4px}
.berichtenblok .samen-knoppen .knop{flex:1 1 auto}
/* ---------- ronde 1 uitstraling: Kaart met Mijn adressen | Team en de emoteballon ---------- */
.kaart-boven{position:absolute;top:calc(12px + var(--veilig-boven));left:12px;right:72px;z-index:620;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
.kaart-boven>*{pointer-events:auto;max-width:100%}
.kaartwissel{margin:0;background:var(--glas-sterk);box-shadow:var(--schaduw);padding:3px}
.kaartwissel button{min-height:40px;padding:0 14px;white-space:nowrap}
.deelbalk{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;background:var(--glas-sterk);border:1px solid var(--lijn);border-radius:var(--r);padding:6px 10px;font-size:13px;box-shadow:var(--schaduw)}
.deel-tekst{min-width:0;overflow-wrap:anywhere}
.live-stip{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 25%,transparent);flex:none}
.tk-jij{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);font-size:11px;font-weight:700;line-height:1.4;background:var(--ik);color:var(--papier);padding:0 6px;border-radius:6px;white-space:nowrap}
.tk-pin.ik{box-shadow:0 0 0 4px color-mix(in srgb,var(--ik) 25%,transparent),var(--schaduw-pin)}
.ballon-plek{pointer-events:none!important}
.ballon{position:absolute;left:0;top:0;width:max-content;max-width:190px;transform:translate(-50%,calc(-100% - 30px));background:var(--papier);color:var(--inkt);border:1px solid var(--lijn);border-radius:12px;
  padding:6px 10px;font-size:13px;line-height:1.35;box-shadow:var(--schaduw);pointer-events:none;overflow-wrap:anywhere;animation:ballon 6s ease forwards}
.ballon-tekst{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}  /* lange berichten: twee regels, de rest staat in Berichten */
.ballon b{font-weight:600}
.ballon.tweede{transform:translate(-50%,calc(-100% - 82px))}
@keyframes ballon{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ballon{animation:none}}
@media (max-width:699px){.kaart-boven{right:64px}}
.berichtenblok .melding-tekst>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}  /* compact: twee regels, alles staat onder Alle berichten */

/* ---------- Rapportage (B1.5; K6: het prestatieboek staat onderaan) ---------- */
.res{max-width:1680px}  /* d2d-46: vanaf 1920 px breder, in twee kolommen (onderaan) */
.res-sectie{margin-top:22px}
.res-sectie h3{font-size:12px;font-weight:600;color:var(--zacht);letter-spacing:.02em;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--lijn)}
.definities{font-size:12.5px;margin:8px 0 0}
.rijen{border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);overflow:hidden}
.rij-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--lijn);min-height:44px}
.rij-item:first-child{border-top:0}
.rij-item .txt{flex:1;min-width:0}
.rij-item .txt b{display:block;font-weight:500;font-size:13.5px}
.rij-item .txt small{display:block;color:var(--zacht);font-size:12px}
.rij-item .n{font-size:15px;font-weight:600;min-width:36px;text-align:right}
.stat{width:8px;height:8px;border-radius:50%;background:var(--info);flex:none}
.stat-klaar{background:var(--info)}.stat-overgedragen{background:var(--let)}.stat-afgewezen{background:var(--fout)}.stat-vervallen{background:var(--zacht)}.stat-bevestigd{background:var(--ok)}
.gr-legenda{display:flex;gap:14px;font-size:11.5px;color:var(--zacht);margin-top:8px}
.gr-legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--selectie)}
.gr-legenda i.l-kans{background:var(--merk)}
.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;font-weight:500;font-size:11.5px;color:var(--zacht);padding:6px 8px;border-bottom:1px solid var(--lijn);white-space:nowrap}
.tb td{padding:8px;border-bottom:1px solid var(--lijn);white-space:nowrap;vertical-align:middle}
.tb tr:hover td{background:var(--hover)}
.tb tr.aan td{background:var(--selectie)}
.tb .n{text-align:right}
.tb .zacht{font-size:12px;white-space:normal}
.tb-naam{border:0;background:none;padding:0;font-weight:500;color:var(--inkt);text-align:left;min-height:28px}
.tb-naam:hover{color:var(--merk-tekst)}
.bekijk-rij{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--lijn);font-size:13px}
.bekijk-rij:first-child{border-top:0}
.bekijk-rij b{display:block;font-weight:500;overflow-wrap:anywhere}
.bekijk-rij small{display:block;color:var(--zacht);font-size:12px}
.bekijk-tijd{text-align:right;white-space:nowrap;color:var(--inkt-2)}
.wb-segment{margin:0}
@media (min-width:700px){.app.p-resultaten .vel{left:auto;right:0;width:min(440px,100%);top:calc(var(--strip) + var(--werkbalk));bottom:0;border-left:1px solid var(--lijn);border-right:0;box-shadow:var(--schaduw-3)}}
@media (max-width:699px){.kol-2,.kol-3{display:none}.tb{font-size:12px;table-layout:fixed}.tb th{font-size:10.5px}.tb th,.tb td{padding:6px 4px;white-space:normal;overflow-wrap:anywhere}.tb th:first-child,.tb td:first-child{width:34%}.rij-item{flex-wrap:wrap}}

/* ---------- Vandaag en Werk verdelen (B1.6, 24-10-2026): samenvatting, secties, Aandacht-rijen, verkoperstabel, detailpaneel rechts over de kaart,
   teamgroep in de zijbalk, Werk verdelen met de kaart als groot werkvlak en het paneel 320 px rechts ---------- */
.samenvatting{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.samenvatting>div{background:var(--papier);padding:10px 12px;min-width:0}
.samenvatting b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.samenvatting span{display:block;font-size:11.5px;color:var(--zacht);margin-top:3px} /* B1.8: 3 kolommen op elke breedte (6 brak woorden af in het paneel van 560 px) */
.samenvatting .merk b{color:var(--merk-tekst)}.samenvatting .ok b{color:var(--ok)}.samenvatting .let b{color:var(--inkt)}.samenvatting .let span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--let);margin-right:5px;vertical-align:1px}
.sectie{margin-top:20px}
.sectie h3{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--zacht);letter-spacing:.02em;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--lijn)}
.sectie h3>span:first-child{margin-right:auto}
.sectie h3 .zacht{font-weight:500;font-size:11.5px}
.vel-body .sectie:first-child{margin-top:0}
.teken{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--mist);color:var(--inkt-2);font-size:11.5px;font-weight:600;flex:none;white-space:nowrap}
.teken.let{background:var(--let-vlak);color:var(--let)}.teken.fout{background:var(--fout-vlak);color:var(--fout)}.teken.merk{background:var(--merk-licht);color:var(--merk-tekst)}.teken.ok{background:var(--ok-vlak);color:var(--ok)}
.tekstknop{border:0;background:none;padding:0 2px;font:inherit;font-size:12px;font-weight:500;color:var(--merk-tekst);min-height:24px;text-align:left}
.tekstknop.rood{color:var(--fout)}
.rij-item.aandacht .txt b{font-weight:600;overflow-wrap:anywhere}
.rij-item.aandacht .txt small{overflow-wrap:anywhere}
.let{color:var(--let)}
/* verkoperstabel op Vandaag */
.voorraad{display:block;min-width:88px}
.voorraad i{display:block;height:4px;border-radius:2px;background:var(--selectie);position:relative;overflow:hidden;margin-bottom:4px}
.voorraad i::after{content:"";position:absolute;inset:0;width:var(--p);background:var(--ok)}
.voorraad.fout i::after{background:var(--fout)}
.voorraad small{font-size:11.5px;color:var(--zacht);white-space:nowrap}
.voorraad.fout small{color:var(--fout)}
.tb .naam{display:flex;align-items:center;gap:8px;min-height:36px;width:100%;min-width:0}
.tb .naam .avatar{width:26px;height:26px;font-size:10px;background:var(--ag);color:var(--op-ag);flex:none}
.tb .naam .avatar.actief::after{width:9px;height:9px;background:var(--ok)}
.naam-tekst{min-width:0}
.tb .naam b{display:block;font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb .naam small{display:block;font-size:11.5px;color:var(--zacht);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-vandaag{table-layout:fixed} /* vaste kolommen: de naam kapt af, de status wikkelt; nooit breder dan het paneel */
.tb-vandaag th,.tb-vandaag td{padding:7px 6px;white-space:normal;overflow-wrap:anywhere}
.tb-vandaag th{overflow-wrap:normal} /* B1.8: koppen nooit midden in een woord afbreken; de kolommen zijn daarop gemeten (512 px paneelbreedte) */
.tb-vandaag th:nth-child(1){width:27%}.tb-vandaag th:nth-child(2){width:17%}.tb-vandaag th:nth-child(3){width:13%}.tb-vandaag th:nth-child(4){width:15%}.tb-vandaag th:nth-child(5){width:11%}.tb-vandaag th:nth-child(6){width:17%}
.tb-vandaag .status-w{white-space:normal}
.tb-vandaag .voorraad{min-width:0}
.status-w{display:inline-block;font-size:12px;font-weight:500;color:var(--inkt-2);white-space:nowrap}
.status-w::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--zacht);margin-right:6px;vertical-align:1px}
.status-w.let::before{background:var(--let)}.status-w.ok::before{background:var(--ok)}.status-w.info::before{background:var(--info)}.status-w.fout::before{background:var(--fout)}.status-w.merk::before{background:var(--merk)}
/* detailpaneel: sleutel-waarde, knoppenrij, lijsten */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 14px;font-size:13px}
.kv dt{color:var(--zacht)}
.kv dd{margin:0;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vel-knoppen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.ov-lijst .ov-rij:first-child{border-top:0;padding-top:0}
.ov-lijst .ov-rij small{font-size:12.5px}
.sd-stand{display:block;font-size:12.5px;color:var(--inkt-2);margin-top:2px}
/* teamgroep in de zijbalk */
.zb-lid .zb-avatar{width:20px;height:20px;font-size:9px;background:var(--ag);color:var(--op-ag);border:0}
/* Werk verdelen: verkopers als rijen */
.verkoper-keuze{display:flex;flex-direction:column;gap:2px}
.vk-rij{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:5px 8px;border:1px solid transparent;border-radius:var(--r-klein);background:none;text-align:left;transition:background var(--snel),border-color var(--snel)}
.vk-rij:hover{background:var(--hover)}
.vk-rij.aan{background:var(--selectie);border-color:var(--rand)}
.vk-rij .avatar{width:28px;height:28px;font-size:11px;background:var(--ag);color:var(--op-ag);flex:none}
.vk-rij.aan .avatar{box-shadow:0 0 0 2px var(--papier),0 0 0 3.5px var(--ag)}
.vk-tekst{flex:1;min-width:0}
.vk-tekst b{display:block;font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vk-tekst small{display:block;font-size:11.5px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vk-week{font-size:11.5px;color:var(--zacht);text-align:right;line-height:1.25;white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.p-verdelen .straatlijst{margin-bottom:10px}
.p-verdelen .zoekveld{margin:0}
/* opbouw: Werk verdelen kaart groot met het paneel rechts; Vandaag met het detailpaneel rechts over de kaart */
@media (min-width:700px){
  .app.admin.p-verdelen{--paneel:320px}
  .app.p-verdelen .hoofd{grid-template-columns:minmax(0,1fr) var(--paneel)}
  .app.p-verdelen .paneel{grid-column:2;grid-row:2;border-right:0;border-left:1px solid var(--lijn)}
  .app.p-verdelen .kaartvlak{grid-column:1;grid-row:2}
  .app.p-verdelen .kaartvlak::before{inset:0 0 0 auto;background:linear-gradient(270deg,var(--paneel-schaduw),transparent)}
  .app.admin.p-verdelen .vel{left:auto;right:0;width:var(--paneel);border-right:0;border-left:1px solid var(--lijn)}
  .app.p-verdelen .toast{left:auto;right:12px;width:calc(var(--paneel) - 24px)}
  .app.admin.p-vandaag .vel{left:auto;right:0;width:min(380px,100%);border-right:0;border-left:1px solid var(--lijn)}
}
@media (max-width:1099px){.samenvatting{grid-template-columns:repeat(3,minmax(0,1fr))}.kol-m{display:none}.tb-vandaag th:nth-child(1){width:38%}.tb-vandaag th:nth-child(2){width:30%}}
@media (max-width:1023px){.zb-team{display:none}} /* bovenstrook en onderbalk: geen teamgroep */

/* ---------- telefoon, verkoper (B1.7, 24-10-2026): "Nu"-blok, Verkoop-knop met ondertitel, onderbalk met vier items (team onder Ik) ---------- */
.nu{border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);padding:12px 14px 14px;margin-bottom:14px;box-shadow:var(--schaduw-1)}
.nu.sel{border-color:var(--merk-tekst);box-shadow:0 0 0 1px var(--merk-tekst)}
.nu-adres{display:block;width:100%;border:0;background:none;padding:0;text-align:left;min-height:44px}
.nu-adres b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.nu-adres small{display:block;font-size:12.5px;color:var(--zacht);margin-top:3px}
.nu-info{display:grid;gap:3px;margin:8px 0 0;font-size:12.5px;color:var(--inkt-2)}
.nu-info span{display:flex;align-items:flex-start;gap:6px;overflow-wrap:anywhere}
.nu-info .ico{width:14px;height:14px;flex:none;margin-top:2px;color:var(--zacht)}
.nu-volgende{margin:8px 0 0;font-size:12.5px;color:var(--zacht);overflow-wrap:anywhere}
.nu-uitkomsten{margin-top:12px}
.nu .uitkomst{min-height:56px;font-size:15px;padding:8px 10px 8px 16px}
.nu .uitkomst small{font-size:12px}
.nu .uitkomst.kans{grid-column:1/-1;margin-top:0;min-height:60px}
.uitkomst.kans span{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.uitkomst.kans small{font-size:12.5px;font-weight:500;color:var(--op-merk-zacht)}
.ov-uitleg{margin:2px 0 0}
.ov-uitleg b{font-weight:600;color:var(--let)}
.team-ingang .knop{margin-top:2px}
@media (min-width:700px){.app:not(.admin) .zb-gebruiker .badge{display:none}} /* naast de zijbalk staat Verkopers zelf met de badge */
@media (max-width:699px){.app:not(.admin) .zb-item[data-paneel=team]{display:none}} /* B-6: Lijst · Kaart · Resultaten · Ik; het team zit onder Ik */
@media (max-width:699px){.samenvatting b{font-size:18px}.samenvatting>div{padding:8px 10px}.vel-knoppen .knop{flex:1 1 40%}}

/* H2 (24-10-2026, avond, akkoord Stijn): het ledaccent van knockwise.nl, statisch. De hoofdknop geeft licht; het actieve item in de zijbalk
   heeft een ledlijn van 2 px links (op de bovenstrook en de onderbalk een korte lijn bovenaan). De gloed volgt het merk via color-mix,
   dus ook een ander klantaccent krijgt zijn eigen gloed. Niets beweegt: een werkscherm is stil. */
.knop-hoofd{box-shadow:0 0 0 1px color-mix(in srgb,var(--merk) 28%,transparent),0 0 14px color-mix(in srgb,var(--merk) 26%,transparent)}
.knop-hoofd:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--merk) 40%,transparent),0 0 20px color-mix(in srgb,var(--merk) 38%,transparent)}
.knop-hoofd:disabled{box-shadow:none}
.zb-item.aan::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:2px;background:var(--merk-donker);box-shadow:0 0 8px color-mix(in srgb,var(--merk) 55%,transparent)}
@media (max-width:1023px){.zb-item.aan::before{left:25%;right:25%;top:0;bottom:auto;width:auto;height:2px}}
@media (max-width:699px){.zb-item.aan::before{left:30%;right:30%}}
:focus-visible{box-shadow:0 0 10px color-mix(in srgb,var(--merk) 30%,transparent)}

/* H3 (24-10-2026, avond): uitleg staat niet meer als alinea in de pagina maar achter een uitklap "Hoe telt dit?" (Linear-stijl: het scherm toont het werk, de uitleg op aanvraag) */
details.uitleg{margin:8px 0 0}
details.uitleg summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:28px;font-size:12.5px;font-weight:600;color:var(--zacht)}
details.uitleg summary::-webkit-details-marker{display:none}
details.uitleg summary::before{content:"i";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--lijn-2);font-size:10.5px;font-style:italic;font-weight:600}
details.uitleg summary:hover{color:var(--inkt-2)}
details.uitleg[open] summary{color:var(--inkt-2)}
details.uitleg p{margin:6px 0 0;font-size:13px;color:var(--zacht);max-width:64ch}

/* H4 (24-10-2026, avond, akkoord Stijn H-1): iPad liggend en smal bureaublad (900–1180 px): de zijbalk is een rail van 56 px met alleen
   pictogrammen (de naam als tooltip en voor de schermlezer), zodat de kaart 150 px meer krijgt; het teamblok staat dan onder Verkopers. */
@media (min-width:900px) and (max-width:1180px){
  :root{--zijbalk:56px;--strip:0px}
  .zijbalk{padding:calc(10px + var(--veilig-boven)) 6px 8px;align-items:center;overflow:visible}
  .zb-merk{padding:0;margin:0 0 10px;justify-content:center;min-height:32px}
  .zb-naam,.demo-label,.zb-kop,.zb-wie,.zb-team,.zb-item>span{display:none}
  .zb-groep{width:100%;align-items:center;margin-bottom:10px}
  .zb-item{width:44px;min-height:40px;padding:0;justify-content:center;gap:0}
  .zb-item .ico{width:18px;height:18px}
  .zb-item.aan::before{top:20%;bottom:20%}
  .zb-gebruiker{margin:0;border:0;padding:0;width:44px}
  .zb-avatar{margin:0}
  .zb-meer,.zb-meermenu{display:none}
}
/* H4 (akkoord Stijn H-3): admin op de telefoon vijf items; het label is daar "Werk" (em.lang verborgen): Vandaag · Werk verdelen · Verkopers · Resultaten · Meer (Kaart, Beheer, Ik) */
.zb-meer,.zb-meermenu{display:none}
.zb-item em{font-style:normal}
@media (max-width:699px){
  .app.admin .zb-groep>.zb-item[data-paneel=kaart],.app.admin .zb-groep>.zb-item[data-paneel=cijfers],.app.admin .zb-groep>.zb-item[data-paneel=beheer],.app.admin .zb-gebruiker{display:none} /* I-4: Resultaten onder Meer, Chat zichtbaar */
  .zb-item em.lang{display:none}
  .app.admin .zb-meer{display:flex}
  .app.admin .zb-meermenu{display:flex;flex-direction:column;gap:2px;position:fixed;right:8px;bottom:calc(64px + var(--veilig-onder));width:200px;padding:6px;background:var(--mist);border:1px solid var(--lijn-2);border-radius:var(--r);box-shadow:var(--schaduw-3);z-index:30}
  .app.admin .zb-meermenu[hidden]{display:none}
  .app.admin .zb-meermenu .zb-item{flex-direction:row;justify-content:flex-start;gap:10px;min-height:44px;padding:0 10px;font-size:14px;width:100%}
  .app.admin .zb-meermenu .zb-item .ico{width:18px;height:18px}
  .app.admin .zb-meermenu .zb-item.aan::before{left:0;right:auto;top:22%;bottom:22%;width:2px;height:auto}
}

/* H5 (24-10-2026, avond, akkoord Stijn H-4): het Verkopers-scherm met de componenten van Vandaag: samenvattingsregel, secties met rijen, tabel */
.samenvatting-team b small{font-size:14px;font-weight:600;color:var(--zacht)}
.sectie h3 .segment.klein{min-height:26px}
.sectie h3 .segment.klein button{min-height:24px;padding:0 10px;font-size:12px}
.tb-team{table-layout:fixed}.tb-team th:first-child,.tb-team td:first-child{width:36%}
.tb-team .tb-naam{display:flex;align-items:center;gap:8px;max-width:100%}.tb-team .naam-tekst b,.tb-team .naam-tekst small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* kritiekronde I: lange namen (Anne-Sophie van den Berg-Hoogeveen) duwen de tabel niet buiten het paneel */
.tb-team tr.ik td{background:var(--hover)}
.rij-item .txt small .voorraad{display:inline-flex;vertical-align:middle;width:120px;margin-right:8px}
.berichtenblok .meldingen{margin:0;padding:0;list-style:none}
.berichtenblok .samen-knoppen{margin-top:10px}
@media (max-width:699px){.rij-item .txt small .voorraad{width:80px}}

/* ---------- Fase I (25-10-2026, akkoord Stijn I-1 t/m I-5): basis en afwerking ---------- */
/* schuifbalken: dun en donker; de grijze strook van Windows is weg, de balk verschijnt alleen als er iets te scrollen valt */
.paneel-inhoud,.vel-body,.zijbalk,.chat-berichten,.chat-lijst{scrollbar-width:thin;scrollbar-color:var(--lijn-2) transparent}
.paneel-inhoud::-webkit-scrollbar,.vel-body::-webkit-scrollbar,.zijbalk::-webkit-scrollbar{width:8px}
.paneel-inhoud::-webkit-scrollbar-thumb,.vel-body::-webkit-scrollbar-thumb,.zijbalk::-webkit-scrollbar-thumb{background:var(--lijn-2);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.paneel-inhoud::-webkit-scrollbar-track,.vel-body::-webkit-scrollbar-track{background:transparent}
/* §1: één knopsysteem voor de acties in rijen (Aandacht, verkoopkansen, teamdoel, signalen): 32 px, vaste kolom van 108 px, zelfde rand,
   hover en focus; de functie zit in het woord en in het teken links, niet in de knopkleur. Het chevron zegt "opent iets". */
.knop-rij{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;min-width:108px;padding:0 12px;border-radius:var(--r-klein);border:1px solid var(--lijn-2);background:var(--papier);color:var(--inkt);font-size:13px;font-weight:600;white-space:nowrap;flex:none;transition:background var(--snel),border-color var(--snel)}
.knop-rij::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.55;margin:0 1px 0 2px;flex:none}
.knop-rij:hover{background:var(--mist);border-color:var(--rand)}
.knop-rij:active{transform:none;background:var(--selectie)}
.knop-rij.knop-hoofd{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.knop-rij.knop-hoofd:hover{background:var(--merk-donker);border-color:var(--merk-donker)}
.knop-rij.knop-hoofd::after{opacity:.7}
.knop-rij.stil::after{display:none} /* een knop die iets doet in plaats van opent (Aanpassen) */
.knop-rij:disabled{opacity:.45;cursor:not-allowed}
.rij-item .knop-rij{margin-left:auto}
.rij-item .n + .knop-rij{margin-left:12px}
@media (max-width:419px){.rij-item:has(.knop-rij){flex-wrap:wrap}.rij-item .txt{flex-basis:180px}.rij-item .knop-rij{margin-left:34px}}  /* de tekst houdt minstens 180 px; past de knop er niet naast, dan komt hij eronder, ingesprongen onder de tekst */  /* kritiekronde I: elke rij met een rijknop, niet alleen Aandacht */
@media (pointer:coarse){.knop-rij{min-height:40px}}

/* §3: het teamdoel als hoofdonderdeel van Verkopers (en als regel op Vandaag, I-3) */
.teamdoel-groot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 16px;padding:16px 18px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);box-shadow:var(--schaduw-1)}
.teamdoel-groot + .teamdoel-groot{margin-top:8px}
.teamdoel-groot.samen{padding:12px 18px}
.teamdoel-groot.samen .td-stand b{font-size:24px}
.td-stand{display:grid;grid-template-columns:max-content minmax(0,1fr);justify-content:start;align-items:baseline;column-gap:6px;white-space:nowrap}  /* kritiekronde I: stand en doel naast elkaar, niet uit elkaar; d2d-39: max-content, anders trok de lange regel eronder het doel weg */
.td-stand b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.td-stand .td-van{font-size:16px;font-weight:600;color:var(--zacht)}
.td-stand small{grid-column:1/-1;font-size:12px;color:var(--zacht);margin-top:4px;white-space:normal}
.td-rest{min-width:0;grid-column:1/-1}
.td-balk{display:block;height:10px;border-radius:5px;background:var(--selectie);position:relative;overflow:hidden}
.td-balk i{position:absolute;inset:0;width:var(--p);border-radius:5px;background:var(--merk);box-shadow:0 0 10px color-mix(in srgb,var(--merk) 45%,transparent);transition:width .4s var(--zacht-curve)}
.td-rest p{margin:8px 0 0;font-size:13px;color:var(--inkt-2)}
.teamdoel-groot.gehaald .td-stand b{color:var(--ok);text-shadow:0 0 12px color-mix(in srgb,var(--ok) 50%,transparent)}
.teamdoel-groot.gehaald .td-balk i{background:var(--ok);box-shadow:0 0 10px color-mix(in srgb,var(--ok) 45%,transparent)}
.teamdoel-groot .knop-rij{align-self:center}
.teamdoel-regel{display:grid;gap:6px;margin-top:10px;container-type:inline-size}
.td-regel{display:grid;grid-template-columns:auto auto minmax(80px,1fr) auto;align-items:center;gap:12px;min-height:40px;padding:0 14px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--papier);color:var(--inkt);text-align:left;font:inherit;cursor:pointer}
.td-regel:hover{background:var(--hover);border-color:var(--lijn-2)}
.td-regel .td-naam{font-size:12px;font-weight:600;color:var(--zacht);letter-spacing:.02em;white-space:nowrap}
.td-regel b{font-size:18px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.td-regel b small{font-size:12px;font-weight:600;color:var(--zacht)}
.td-regel .td-balk{height:6px;border-radius:3px}
.td-regel .td-tekst{font-size:12px;color:var(--inkt-2);white-space:nowrap}
.td-regel.gehaald b{color:var(--ok)}.td-regel.gehaald .td-balk i{background:var(--ok);box-shadow:none}
/* d2d-45: op een smal paneel (iPad met kaart, 339 px) paste "Gesprekken Team Noord" met balk en "nog … te gaan" niet: dan zonder die rest-tekst, zoals op de telefoon */
@container (max-width:460px){.td-regel{grid-template-columns:auto auto minmax(36px,1fr);gap:8px;padding:6px 12px}.td-regel .td-naam{white-space:normal;line-height:1.25}.td-regel .td-tekst{display:none}}
@media (max-width:699px){
  .teamdoel-groot{gap:10px 12px;padding:14px}
  .td-stand b{font-size:30px}
  .td-regel{grid-template-columns:auto auto minmax(60px,1fr);gap:10px}
  .td-regel .td-tekst{display:none}
}
/* §2: Verkopers in één oogopslag: breder paneel, alle kolommen op het bureaublad; 900–1180 Kansen onder de naam; telefoon rijen */
@media (min-width:1181px){.app.p-team{--paneel:560px}}
@media (min-width:900px) and (max-width:1180px){.app.p-team{--paneel:480px}}
.alleen-smal{display:none}
@media (min-width:700px){.tb-team .kol-k{display:table-cell}.tb-team .tb-actie,.tb-team .tb-actie-kop{width:40px;text-align:right;padding-right:0}.tb-team th{font-size:12px}.tb-team .kort{display:none}}
.knop-rij.knop-ico{min-width:32px;width:32px;padding:0}.knop-rij.knop-ico .ico{width:16px;height:16px}
@media (min-width:700px) and (max-width:1180px){.tb-team .kol-k{display:none}.tb-team .alleen-smal{display:inline}.tb-team th:first-child,.tb-team td:first-child{width:44%}.tb-team .lang{display:none}.tb-team .kort{display:inline}}  /* kritiekronde I: ook 700–899 (paneel 340) zonder Kansen/Chat, met korte koppen */
.rijen-verkopers .rij-verkoper{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:10px 12px;border-top:1px solid var(--lijn)}
.rijen-verkopers .rij-verkoper:first-child{border-top:0}
.rij-verkoper.ik{background:var(--hover)}
.rij-verkoper .naam{display:flex;align-items:center;gap:10px;min-width:0;width:100%;border:0;background:none;padding:0;color:var(--inkt);text-align:left;min-height:40px}
.rij-verkoper .naam .avatar{width:32px;height:32px;font-size:12px;background:var(--ag);color:var(--op-ag);flex:none}
.rij-verkoper .naam .avatar.actief::after{width:9px;height:9px;background:var(--ok)}
.rij-verkoper .naam-tekst{min-width:0}
.rij-verkoper .naam b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rij-verkoper .naam small{display:block;font-size:12px;color:var(--zacht);line-height:1.3}
.rij-verkoper .naam small .alleen-smal{display:inline}
.rv-cijfers{display:grid;grid-template-columns:repeat(3,auto);gap:14px;text-align:right}
.rv-cijfers b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.rv-cijfers span{display:block;font-size:11.5px;color:var(--zacht)}
.rv-chat{grid-column:1/-1;justify-self:start;font-size:12.5px;min-height:28px;padding:0 0 0 42px}

/* §4: het scherm van één verkoper op Resultaten */
.res-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
.res-kop h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.res-kop p{margin:4px 0 0;font-size:13px}
.res-kop .tekstknop{flex:none;min-height:32px;padding:0 10px;border:1px solid var(--lijn-2);border-radius:var(--r-klein);font-size:13px;color:var(--inkt)}
.res-kop .tekstknop:hover{background:var(--mist)}

/* §5: Chat */
.app.p-chat .hoofd{grid-template-columns:minmax(0,1fr)}
.app.p-chat .kaartvlak{display:none}
.app.p-chat .paneel{border-right:0}
.app.p-chat .paneel-inhoud{padding:0 16px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 70% 55% at 50% 40%,color-mix(in srgb,var(--merk) 7%,transparent),transparent 70%),
  radial-gradient(color-mix(in srgb,var(--merk) 9%,transparent) 1px,transparent 1.2px) 0 0/22px 22px,var(--bg)}  /* ronde I-2 (Stijn): levende achtergrond rond het chatkader: ledgloed en een fijn puntraster in de merkkleur */
.chat-kader{position:relative;isolation:isolate;flex:1;min-height:0;display:flex;width:100%;max-width:1100px;margin:16px auto;border-radius:16px}
.chat-kader .led-rand{z-index:3}.chat-kader .led-gloed{opacity:var(--led-gloed-chat)}
.chat{flex:1;min-height:0;display:grid;grid-template-columns:288px minmax(0,1fr);width:100%;border:1px solid var(--lijn-2);border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--bg) 92%,transparent);position:relative;z-index:1}
.chat-lijst{overflow-y:auto;border-right:1px solid var(--lijn);padding:8px}
.chat-rij{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 10px;border:0;border-radius:var(--r-klein);background:none;color:var(--inkt);text-align:left;font:inherit}
.chat-rij:hover{background:var(--hover)}
.chat-rij.aan{background:var(--selectie)}
.chat-rij .avatar{width:40px;height:40px;font-size:14px;background:var(--mist);color:var(--inkt-2)}
.chat-rij .avatar.chat-team{background:var(--vlak);color:var(--op-vlak)}  /* d2d-45.1: het bewaakte paar vlak/op-vlak (was --anker met --inkt: in licht allebei donker) */
.chat-rij .avatar.chat-team .ico{width:18px;height:18px}
.chat-rij-tekst{min-width:0}
.chat-rij-tekst b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-rij-tekst small{display:block;font-size:12.5px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-rij-rechts{display:grid;justify-items:end;gap:4px}
.chat-rij-rechts small{font-size:11px;color:var(--zacht);white-space:nowrap}
.chat-rij .badge{background:var(--merk);color:var(--op-merk);min-width:18px;height:18px;font-size:11px}
.chat-gesprek{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.chat-gesprek::before{content:"";position:absolute;inset:0;background:url(/logo-donker.png) center 44%/min(58%,400px) no-repeat;opacity:.05;pointer-events:none}  /* het merklogo (per klant het eigen logo) als watermerk achter de berichten */
.chat-gesprek>*{position:relative}
.chat-lijst{background:color-mix(in srgb,var(--papier) 70%,transparent)}
.chat-gesprek.leeg-gesprek{justify-content:center}
.chat-kop{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--lijn);min-height:56px}
.chat-kop-tekst{min-width:0}
.chat-kop-tekst b{display:block;font-size:14px;font-weight:600}
.chat-kop-tekst small{display:block;font-size:12px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-terug{display:none;width:36px;height:36px;border:0;border-radius:var(--r-klein);background:none;color:var(--inkt);place-items:center;flex:none}
.chat-terug .ico{width:20px;height:20px}
.chat-berichten{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.chat-dag{align-self:center;font-size:11.5px;font-weight:500;color:var(--zacht);margin:12px 0 6px;padding:2px 10px;border-radius:99px;background:var(--mist)}
.chat-leeg{align-self:center;margin:auto}
.chat-eerder{align-self:center;margin:2px 0 8px;font-size:12.5px;color:var(--inkt-2);border:1px solid var(--lijn);border-radius:99px;padding:6px 14px;min-height:36px;background:var(--papier)}
.chat-eerder:disabled{opacity:.6}
.chat-nieuwchip{position:sticky;bottom:8px;align-self:center;margin-top:8px;border:0;border-radius:99px;padding:8px 14px;min-height:36px;font-size:12.5px;font-weight:600;background:var(--merk);color:var(--op-merk);box-shadow:0 2px 10px rgba(0,0,0,.35);max-width:100%}
.cb{max-width:min(78%,560px);padding:8px 12px;border-radius:12px 12px 12px 4px;background:var(--papier);border:1px solid var(--lijn);align-self:flex-start;overflow-wrap:anywhere}
.cb + .cb{margin-top:4px}
.cb.eigen{align-self:flex-end;border-radius:12px 12px 4px 12px;background:var(--mist);border-color:color-mix(in srgb,var(--merk) 30%,transparent)}
.cb p{margin:0;font-size:14px;line-height:1.45;white-space:pre-wrap}
.cb .afzender{display:block;font-size:11.5px;font-weight:600;color:var(--merk-tekst);margin-bottom:2px}
.cb .adres{display:block;font-size:11.5px;color:var(--inkt-2);margin-bottom:2px}
.cb .tijd{display:block;font-size:11px;color:var(--zacht);text-align:right;margin-top:3px}
.cb.oud{border-style:dashed}
.cb.wacht{opacity:.7}
.cb.fout{border-color:var(--fout)}
.cb.fout .tijd{color:var(--fout);text-align:left}
.cb .tijd .tekstknop{font-size:11px;min-height:0;padding:0 2px}
.chat-invoer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--lijn);background:var(--bg)}
.chat-invoer textarea{flex:1;margin:0;min-height:40px;max-height:120px;padding:9px 12px;resize:none;border-radius:var(--r);background:var(--mist);border-color:var(--lijn-2);line-height:1.4}
.chat-invoer textarea:focus{border-color:var(--merk);box-shadow:0 0 0 1px var(--merk),0 0 10px color-mix(in srgb,var(--merk) 25%,transparent)}
.chat-emoji-knop{width:40px;height:40px;border:1px solid var(--lijn-2);border-radius:var(--r);background:var(--papier);font-size:18px;line-height:1;display:grid;place-items:center;flex:none}
.chat-emoji-knop:hover,.chat-emoji-knop[aria-expanded=true]{background:var(--mist);border-color:var(--rand)}
.chat-verstuur{min-height:40px;padding:0 16px;flex:none}
.emoji-kiezer{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px 12px 12px;border-top:1px solid var(--lijn);background:var(--bg)}
.emoji-kiezer button{height:40px;border:1px solid var(--lijn);border-radius:var(--r-klein);background:var(--papier);font-size:20px;line-height:1}
.emoji-kiezer button:hover{background:var(--mist)}
@media (max-width:1180px){.chat{grid-template-columns:240px minmax(0,1fr)}}
@media (max-width:699px){
  .chat{grid-template-columns:minmax(0,1fr)}
  .chat.gesprek-open .chat-lijst{display:none}
  .chat:not(.gesprek-open) .chat-gesprek{display:none}
  .chat-kader{margin:0;border-radius:0}.chat-kader .led-rand,.chat-kader .led-gloed{display:none}.chat{border:0;border-radius:0}.app.p-chat .paneel-inhoud{padding:0}
  .chat-lijst{border-right:0;padding:4px 8px}
  .chat-terug{display:grid}
  .chat-kop{padding:8px 12px}
  .chat-berichten{padding:10px 12px}
  .cb{max-width:86%}
  .chat-invoer{padding:8px 10px calc(8px + 0px)}
  .chat-verstuur{padding:0 12px}
}
@media (pointer:coarse){.chat-invoer .knop{min-height:44px}.chat-emoji-knop{width:44px;height:44px}.chat-invoer textarea{min-height:44px}}

.vis-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}  /* alleen voor de voorlezer */

/* ronde I-2 (25-10-2026, Stijn): de witte leds terug waar het kan, altijd via --merk (wit bij Knockwise, de huiskleur bij een ander merk). */
.sectie h3.kop-groot{font-size:17px;font-weight:700;color:var(--inkt);letter-spacing:0;padding-bottom:8px}
.teamdoel-groot{position:relative;overflow:visible}
.teamdoel-groot::before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:2px;border-radius:2px;background:var(--merk-donker);box-shadow:0 0 10px color-mix(in srgb,var(--merk) 60%,transparent),0 0 24px color-mix(in srgb,var(--merk) 25%,transparent)}
.samenvatting{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--merk) 70%,transparent),0 8px 16px -10px color-mix(in srgb,var(--merk) 55%,transparent)}
.badge,.chat-rij .badge,.zb-item .badge{box-shadow:0 0 8px color-mix(in srgb,var(--merk) 60%,transparent)}
.zb-item.aan .ico{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--merk) 70%,transparent))}
.chat-verstuur.knop-hoofd{box-shadow:0 0 0 1px color-mix(in srgb,var(--merk) 35%,transparent),0 0 18px color-mix(in srgb,var(--merk) 40%,transparent)}
/* 2. even grote knoppen: één vaste breedte voor rijknoppen (Vandaag) en de knoppen in het verkopersvel (Werk verdelen) */
.rij-item .knop-rij:not(.knop-ico),.vel-knoppen-rij .knop-rij{width:124px;min-width:124px;flex:none}
.vel-knoppen-rij{gap:8px}
@media (max-width:699px){.vel-knoppen-rij .knop-rij{width:calc(50% - 4px);min-width:0}}
/* Fase J (25-10-2026): kaart als BAG Viewer, werkvoorraden en werkgebieden */
.cat-wissel{margin-bottom:8px}
.cat-wissel button small{display:block;font-size:11px;font-weight:500;color:var(--zacht);line-height:1.1}
.cat-wissel button.aan small{color:var(--inkt-2)}
.cat-chip{margin-bottom:14px}
.pandlabel{background:none;border:0;pointer-events:none;display:flex;justify-content:center;align-items:center;width:0!important;height:0!important;overflow:visible}
.pandlabel span{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap;font:600 11px/1 system-ui,sans-serif;color:var(--k-label);text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff;letter-spacing:-.01em}
.pandlabel small{font-size:9px;font-weight:600}
.pandlabel.s-i span,.pandlabel.s-r span,.pandlabel.s-n span,.pandlabel.s-b span{color:#fff;text-shadow:0 0 2px #000,0 0 3px #000}
.pandkeuze{display:flex;flex-direction:column}
.pandkeuze-rij{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--lijn);background:none;padding:9px 2px;min-height:52px}
.pandkeuze-rij:first-child{border-top:0}
.pandkeuze-rij .vink{width:20px;height:20px;border-radius:6px;border:2px solid var(--rand);flex:none;position:relative}
.pandkeuze-rij .vink.aan{background:var(--merk);border-color:var(--merk)}
.pandkeuze-rij .vink.aan::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid var(--op-merk);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pandkeuze-rij.aan{background:var(--merk-licht);margin:0 -8px;padding-left:10px;padding-right:10px;border-radius:var(--r-klein);border-top-color:transparent}
.pandkeuze-rij.aan + .pandkeuze-rij{border-top-color:transparent}
.pandkeuze-tekst{flex:1;min-width:0}
.pandkeuze-tekst b,.pandkeuze-tekst small{display:block;overflow-wrap:anywhere}
.pandkeuze-tekst small{color:var(--zacht);font-size:12px}
.label.cat-particulier{background:var(--merk-licht);color:var(--merk)}
.label.cat-zakelijk{background:var(--blauw-licht);color:var(--blauw)}
.label.cat-onbekend{background:var(--rood-licht);color:var(--rood)}
.cat-blok{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:14px}
.cat-blok .uitleg{width:100%;margin:2px 0 0}
.cat-blok .uitleg label{display:block;margin-top:8px}
.cat-blok .uitleg .knop{margin-top:10px}
.pand-nr .cat-zak{display:block;font-size:10px;font-weight:600;color:var(--blauw);letter-spacing:.02em;text-transform:uppercase}
.wg{border-top:1px solid var(--lijn);padding:8px 0}
.meer h4 + .wg{border-top:0}
.wg.loopt{border-left:3px solid var(--merk);padding-left:8px;margin-left:-11px}
.wg-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:4px 0;min-height:44px}
.wg-naam{min-width:0}
.wg-naam b,.wg-naam small{display:block;overflow-wrap:anywhere}
.wg-naam small{color:var(--zacht);font-size:12px}
.wg-tel{display:grid;grid-template-columns:auto auto;gap:0 10px;text-align:right;flex:none}
.wg-tel b{color:var(--merk);font-size:15px}
.wg-tel small{color:var(--zacht);font-size:11px;grid-row:2}
.wg-body{padding:6px 0 4px}
.wg-form{margin-top:10px}
.wg-form label{display:block;margin-top:8px}
.wg-form textarea{width:100%;font:inherit;border:1px solid var(--rand);border-radius:var(--r-klein);padding:8px 10px;background:var(--papier);color:var(--inkt);resize:vertical;min-height:44px}
.wg-form .teamknoppen{margin-top:8px}
@media (max-width:699px){.wg-tel{grid-template-columns:auto;gap:0}.wg-tel small{grid-row:auto}}

/* ---------- Portaal K, K1 (25-10-2026): Vandaag als scorebord, bel met meldingen, looplijst dicht tot de verkoper hem opent ---------- */
/* scorebord: 2×2, en vier naast elkaar alleen als het paneel zelf breed genoeg is (op 1024 px is het linkerpaneel smal) */
:has(> .samenvatting.scorebord){container-type:inline-size}
.samenvatting.scorebord{grid-template-columns:repeat(2,minmax(0,1fr))}
.samenvatting.scorebord b{font-size:22px}
@container (min-width:500px){.samenvatting.scorebord{grid-template-columns:repeat(4,minmax(0,1fr))}.samenvatting.scorebord b{font-size:24px}}
.vandaag-wie{display:flex;align-items:center;gap:8px;margin:12px 2px 0;font-size:13px;color:var(--inkt-2)}
.vandaag-wie .dienst-stip{background:var(--merk);box-shadow:0 0 0 3px var(--merk-licht)}
.vandaag-wie .dienst-stip.uit{background:var(--rand);box-shadow:none}
.sb-lijst{display:grid;gap:6px}
.sb-rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 10px;border:1px solid var(--lijn);
  border-radius:var(--r);background:var(--papier);color:var(--inkt);text-align:left;font:inherit;cursor:pointer;transition:border-color var(--snel)}
.sb-rij:hover{border-color:var(--rand)}
.sb-rij.aan{border-color:var(--merk-tekst)}
.sb-rij .avatar{width:32px;height:32px;font-size:12px;background:var(--ag);color:var(--op-ag)}
.sb-rij .avatar.actief::after{width:9px;height:9px}
.sb-naam{min-width:0}
.sb-naam b{display:block;font-weight:600;font-size:15px;overflow-wrap:anywhere}
.sb-naam small{display:block;font-size:12px;color:var(--zacht);margin-top:2px}
.sb-cijfers{display:grid;grid-template-columns:repeat(3,52px);gap:4px;text-align:right}
.sb-cijfers b{display:block;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.sb-cijfers small{display:block;font-size:10.5px;color:var(--zacht)}
@media (max-width:420px){.sb-rij{grid-template-columns:auto minmax(0,1fr)}.sb-cijfers{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));text-align:left;padding-left:42px}}
.bel{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:var(--r-klein);background:none;color:var(--inkt-2);cursor:pointer}
.bel:hover{border-color:var(--rand);color:var(--inkt)}
.bel .ico{width:20px;height:20px}
.bel.heeft{color:var(--inkt)}
.bel .badge{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;font-size:11px;padding:0 5px}
.vel-terug{margin:0 8px 0 0;flex:none}
/* portiek: dicht tot de verkoper hem opent */
.pand-rechts{min-width:0;display:grid;gap:8px}
.pand-open{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--inkt-2);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pand-open[aria-expanded=true] .pand-pijl{transform:rotate(90deg)}
.pand-pijl{transition:transform var(--snel)}
/* terugkomen rustig in de straatkop in plaats van rode kaarten bovenaan */
.terug-label{color:var(--inkt)}
.terug-achter{color:var(--inkt);font-weight:600;text-decoration:underline;text-decoration-color:var(--rood);text-underline-offset:3px}

/* ---------- Portaal K, K-8 (25-10-2026, akkoord Stijn): witte LED, alleen op wat aan staat of gekozen is ---------- */
.kanten button.aan, .filter button.aan, .chip.aan{box-shadow:0 0 0 1px var(--aan-ring), 0 0 14px var(--aan-gloed)}
.straat-balk i{box-shadow:0 0 8px var(--gloed-sterk)}
.uitkomst.aan{box-shadow:0 0 0 1px var(--aan-ring), 0 0 14px var(--aan-gloed-zacht)}
.stip-ring{background:transparent!important;border-width:2px}
.stip-gloed{box-shadow:0 0 0 3px var(--k-gloed),0 0 8px var(--gloed-sterk)}
/* ---------- Portaal K, K2 (25-10-2026): klantgegevens en toestemming ook zonder verkoopkans ---------- */
.optin-knop{margin:12px 0 4px;justify-content:center;border-style:dashed}
.optin-blok{margin:4px 0 8px}
.optin-blok .knop-tekst{margin-top:6px}
.optin-download{margin:8px 2px 0;font-size:13px}
.toestemming .keuze-hint{margin:0 0 4px}
.optin-download .tekstknop{min-height:44px;font-size:13px}

/* Portaal K, K3a: terughalen met de laatste status per adres, en de laatste status bovenaan het adresvel */
.terugstatus{margin:0 0 12px}
.terugstatus .feiten{margin-bottom:8px}
.terugrijen{list-style:none;margin:0 0 6px;padding:0}
.terugrijen li{display:flex;flex-direction:column;min-width:0;padding:6px 0;border-top:1px solid var(--lijn);font-size:14px}
.terugrijen b,.terugrijen small{overflow-wrap:anywhere}
.terugrijen small{color:var(--zacht)}
.laatste-status{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;font-size:14px;min-width:0}
.laatste-status span{overflow-wrap:anywhere}
.laatste-status .ico{flex:none;width:18px;height:18px;margin-top:1px}

/* Portaal K, K3b herzien: adressen inladen per plaats, met de keuze particulier, zakelijk of allebei */
.inladen h4{margin:16px 0 4px}
.inlaad-treffer,.inlaad-rij{padding:10px 0;border-top:1px solid var(--lijn);min-width:0}
.inlaad-treffer p,.inlaad-rij p{margin:0 0 8px;display:flex;flex-direction:column;min-width:0}
.inlaad-treffer b,.inlaad-rij b{overflow-wrap:anywhere}
.inlaad-treffer small,.inlaad-rij small{color:var(--zacht);font-size:13px;overflow-wrap:anywhere}
.inlaad-knoppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.inlaad-knoppen .knop{min-height:44px;padding-inline:6px}
.inlaad-meer{margin-top:6px}
.inlaad-meer summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--zacht);font-size:14px}
.inlaad-meer form{margin-top:4px}

/* Portaal K, K4: Verkopers en het teamscherm als kaarten per verkoper (geen tabel, geen klassement) */
.vk-lijst{display:grid;gap:10px}
.vk-kaart{border:1px solid var(--lijn);border-radius:var(--r);padding:12px;background:var(--kaart, transparent);min-width:0}
.vk-kaart.ik{border-color:color-mix(in srgb,var(--merk) 40%,var(--lijn))}
.vk-kop{display:flex;align-items:center;gap:8px;min-width:0}
.vk-kop .tb-naam{flex:1;min-width:0}
.vk-kop .naam-tekst{min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.vk-kop .naam-tekst b,.vk-kop .naam-tekst small{overflow-wrap:anywhere}
.vk-stand.aan{color:var(--tekst)}
.vk-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 8px}
.vk-cijfers b{display:block;font-size:20px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.vk-cijfers span{display:block;font-size:12px;color:var(--zacht);line-height:1.3;overflow-wrap:anywhere}
.vk-doel .td-balk{height:6px;border-radius:3px}
.vk-doel small{display:block;margin-top:4px;font-size:12px;color:var(--zacht)}
.vk-tabs{margin-bottom:12px}
.uitleg-locatie .punten{margin:0 0 14px;padding-left:18px;display:grid;gap:8px}
.samenvatting.samenvatting-team{grid-template-columns:repeat(2,minmax(0,1fr))} /* K4: twee cijfers, geen lege derde cel */

/* Portaal K, K5 (d2d-36): nieuw gesprek, groepen, ongelezen vet */
.chat-nieuw{margin:0 0 8px;min-height:40px}
.chat-rij.ongelezen .chat-rij-tekst b{font-weight:800}
.chat-rij.ongelezen .chat-rij-tekst small{color:var(--inkt-2)}
.chat-rij .avatar.chat-groep{background:var(--mist);color:var(--inkt)}
.chat-kop .chat-groep-knop{margin-left:auto;flex:none}
.nieuw-gesprek .kies-lijst{display:grid;gap:2px;margin:10px 0;max-height:min(46vh,420px);overflow-y:auto}
.kies-rij{display:grid;grid-template-columns:22px 36px minmax(0,1fr);min-height:52px;gap:10px;padding:4px 6px;border-radius:var(--r-klein)}
.kies-rij[hidden]{display:none}
.kies-rij:hover{background:var(--hover)}
.kies-rij .avatar,.groep-lid .avatar{width:36px;height:36px;font-size:13px}
.kies-naam{min-width:0;display:flex;flex-direction:column}
.kies-naam b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kies-naam small{font-size:12.5px;color:var(--zacht);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kies-voet{display:grid;gap:10px;border-top:1px solid var(--lijn);padding-top:12px}
.kies-voet p{margin:0}
.groepnaam{display:block;font-weight:500;font-size:14px}
.groep-vel{display:grid;gap:10px}
.groep-vel h3{margin:8px 0 0;font-size:14px}
.groep-leden{display:grid;gap:4px}
.groep-lid{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px}

/* ---------- Rapportage: het prestatieboek (Portaal K, K6) ---------- */
.res-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.res-periodes{flex:0 1 auto}
.res-filters-rechts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.res-wie select{margin:0;min-height:34px;width:auto;max-width:240px;padding:4px 8px;font-size:13px}
.res-datums{display:flex;gap:8px;flex-wrap:wrap}
.res-datums label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--zacht)}
.res-datums input{margin:0;min-height:34px;width:auto;padding:4px 8px;font-size:13px;color:var(--inkt)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.res-kop .res-context{margin:4px 0 0;font-size:13px;color:var(--inkt-2)}
.res-tegels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.res-tegels.res-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.res-tegel{background:var(--papier);padding:12px 14px;min-width:0;border:0;text-align:left;border-radius:0;position:relative}
button.res-tegel:hover{background:var(--mist)}
.res-tegel b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--inkt)}
.res-tegel.merk b{color:var(--merk-tekst)}
.res-tegel span{display:block;font-size:12.5px;color:var(--inkt-2);margin-top:3px}
.res-tegel .vs{display:block;font-size:11.5px;color:var(--inkt-2);margin-top:6px;overflow-wrap:anywhere}
.res-tegel .vs span{display:inline;font-size:inherit;color:var(--zacht);margin:0}
.res-tegel em{display:block;font-style:normal;font-size:11px;color:var(--zacht);margin-top:2px;overflow-wrap:anywhere}
.res-tegel .bekijk{position:absolute;top:10px;right:12px;font-style:normal;font-size:11.5px;color:var(--merk-tekst)}
.res-trend h3{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.res-maat button{min-height:26px;padding:0 8px;font-size:12px}
.res-staven{display:grid;gap:3px;align-items:end;height:150px;border-bottom:1px solid var(--lijn-2);background:repeating-linear-gradient(180deg,var(--lijn) 0 1px,transparent 1px 37.5px)}
.res-paar{height:100%;display:flex;align-items:flex-end;gap:2px;border-radius:0}
.res-paar>span{width:auto;flex:1;min-height:0;border-radius:3px 3px 0 0}
.res-paar>span.v{background:var(--rand)}
.res-paar>span.n{background:var(--merk)}
.res-paar:hover>span.v{background:var(--zacht)}
.res-paar.aan>span{box-shadow:none}.res-paar.aan>span.n{box-shadow:0 0 0 1px var(--papier),0 0 0 2px var(--inkt)}.res-paar.aan>span.v{background:var(--zacht)}
.res-x{display:grid;gap:3px;margin-top:4px;font-size:10.5px;color:var(--zacht)}
.res-x span{white-space:nowrap;overflow:visible}
.gr-legenda i.l-nu{background:var(--merk)}.gr-legenda i.l-vorige{background:var(--rand)}
.res-kaarten{display:none}
.res-kaart{border:1px solid var(--lijn);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;background:var(--papier);min-width:0}
.res-kaart-kop{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:baseline}
.res-kaart-kop .plek{grid-row:span 2;font-size:12px;color:var(--zacht);min-width:16px}
.res-kaart-kop b{font-weight:500;overflow-wrap:anywhere}
.res-kaart-kop small{font-size:11.5px;color:var(--zacht)}
.res-kaart-cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:8px 0 4px}
.res-kaart-cijfers b{display:block;font-size:17px;font-weight:600}
.res-kaart-cijfers span{display:block;font-size:11px;color:var(--zacht)}
.res-kaart>small{display:block;font-size:11.5px;margin-top:2px}
@media (max-width:1180px){.res-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* d2d-42: op een breed scherm staan de verhoudingen naast het verloop; de tabel loopt over de volle breedte */
.res-tabel{width:100%}
@media (min-width:700px) and (max-width:1180px){.res-tabel th,.res-tabel td{padding:6px 5px}.res-tabel td:nth-child(2){white-space:normal}.res-tabel th{white-space:normal}}  /* iPad: tabel past zonder zijwaarts scrollen */
@media (min-width:1280px){
  .res-duo{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2.6fr);gap:24px;align-items:start}
  .res-verh .res-tegels.res-drie{grid-template-columns:minmax(0,1fr)}
  .res-staven{height:190px;background:repeating-linear-gradient(180deg,var(--lijn) 0 1px,transparent 1px 47.5px)}
  .res-tegel b{font-size:26px}
}
@media (max-width:699px){
  .res-tabel{display:none}.res-kaarten{display:block}
  .res-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}.res-tegels.res-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
  .res-drie .res-tegel{padding:10px 8px}.res-drie .res-tegel b{font-size:18px}
  .res-tegel{padding:10px 10px}.res-tegel b{font-size:clamp(17px,5.4vw,22px);overflow-wrap:anywhere}.res-tegel span{overflow-wrap:anywhere}
  .res-tegel .bekijk{position:static;display:inline-block;margin-top:4px}
  .res-kop h2{overflow-wrap:anywhere}.res-kaart-cijfers b{font-size:15px;overflow-wrap:anywhere}
  .res-periodes{width:100%}.res-periodes button{padding:0 2px;font-size:12px}
  .res-filters-rechts{margin-left:0;width:100%;flex-wrap:wrap}.res-wie{flex:1 1 100%;min-width:0}.res-wie select{width:100%;max-width:none}
  .res-staven,.res-x{gap:1px}.res-paar{gap:1px}.res-x{font-size:9.5px}.res-kop{flex-wrap:wrap}
}

/* d2d-43: Op de kaart (postcodegebieden per soort) */
.pc-rij{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--lijn);min-width:0;flex-wrap:wrap}
.pc-rij p{margin:0;min-width:0;display:flex;align-items:baseline;gap:6px}
.pc-rij p small{color:var(--zacht);font-size:12px;overflow-wrap:anywhere}
.pc-soorten{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-left:auto}
.pc-soort{display:inline-flex;align-items:baseline;gap:5px;min-height:30px;padding:3px 9px;border:1px solid var(--lijn-2);border-radius:99px;background:transparent;color:var(--inkt-2);font-size:12.5px;white-space:nowrap}
.pc-soort small{font-size:11px;color:var(--zacht)}
.pc-soort.aan{background:var(--merk);border-color:var(--merk);color:var(--op-merk)}
.pc-soort.aan small{color:var(--op-merk);opacity:.8}
.pc-weg{width:30px;height:30px;display:inline-grid;place-items:center;border:0;background:transparent;color:var(--zacht);border-radius:99px}
.pc-weg .ico{width:14px;height:14px}
.op-kaart .zoekveld{margin-top:10px}

/* ---------- d2d-44: Teamgevoel, doelen op Verkopers, ranglijst en weekwinnaar ---------- */
.kop-groot .knop{margin-left:auto;font-size:14px}
.teamdoel-groot.eigen{border-color:var(--merk)}
button.vk-doel{display:block;width:100%;background:none;border:0;padding:0;margin:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
button.vk-doel:hover small,button.vk-doel:focus-visible small{text-decoration:underline}
.weekwinnaar{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 16px;border:1px solid var(--lijn);border-left:4px solid var(--merk);border-radius:12px;background:var(--papier)}
.weekwinnaar .ww-beker{font-size:26px;line-height:1}
.weekwinnaar div{display:flex;flex-direction:column;min-width:0}
.weekwinnaar small{color:var(--zacht);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.weekwinnaar b{font-size:17px;overflow-wrap:anywhere}
.ranglijst{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.ranglijst th,.ranglijst td{padding:7px 6px;border-bottom:1px solid var(--lijn);text-align:right}
.ranglijst th[scope=row],.ranglijst thead th:nth-child(2){text-align:left;overflow-wrap:anywhere;font-weight:500}
.ranglijst td:first-child,.ranglijst thead th:first-child{width:32px;text-align:left;color:var(--zacht)}
.ranglijst td:nth-child(3),.ranglijst td:nth-child(4),.ranglijst thead th:nth-child(3),.ranglijst thead th:nth-child(4){width:64px}
.ranglijst tr.ik th,.ranglijst tr.ik td{color:var(--merk);font-weight:600}
.compliment{margin:16px 0 8px}
.compliment h3{margin:0 0 8px;font-size:15px}
.compliment-knoppen{display:flex;flex-wrap:wrap;gap:8px}
.teamgevoel .gevoel{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--lijn)}
.teamgevoel .gevoel:last-of-type{border-bottom:0}
.teamgevoel .gevoel span{display:flex;flex-direction:column;gap:2px;min-width:0}
.teamgevoel .gevoel input{margin-top:3px;flex:none}
.doelen-vel .doelen-blok{border:0;padding:0;background:none}
/* ---------- Beheer (Portaal K, K7): medewerkers, teams en doelen, zonder kaart ---------- */
.beheer{max-width:820px}
.team-kaart{border:1px solid var(--lijn);border-radius:var(--r);padding:12px;margin-top:10px;background:var(--papier);min-width:0}
.team-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.team-velden label,.team-erbij{margin:0;font-size:12.5px;color:var(--zacht)}
.team-leden{margin-top:12px}
.team-leden ul{list-style:none;margin:6px 0 0;padding:0}
.team-leden li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;border-top:1px solid var(--lijn);font-size:13.5px;min-width:0}
.team-leden li>span{min-width:0;overflow-wrap:anywhere}
.team-leden li .knop-tekst{flex:none;min-height:36px}
.team-erbij{display:block;margin-top:10px}
.team-kaart>.knop-tekst{margin-top:10px;min-height:36px}
.team-kaart .lid-verwijder{margin-top:10px}
.lid-stil{border-color:var(--lijn-2);background:var(--mist)}
.doelen{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.doelen thead th{font-size:11.5px;font-weight:500;color:var(--zacht);text-align:left;padding:0 6px 6px}
.doelen thead th:first-child{width:42%}
.doelen th[scope=row]{font-weight:500;text-align:left;padding:6px 6px 6px 0;overflow-wrap:anywhere;vertical-align:middle}
.doelen th[scope=row] small{display:block;font-weight:400;font-size:11.5px;color:var(--zacht)}
.doelen td{padding:4px 6px;vertical-align:middle}
.doelen td input{margin:0;min-height:36px;width:100%;text-align:right;font-variant-numeric:tabular-nums}
.doelen td input::placeholder{color:var(--zacht)}
.doelen tr+tr th,.doelen tr+tr td{border-top:1px solid var(--lijn)}
.doelen .doel-groep th{font-size:11.5px;font-weight:600;color:var(--zacht);letter-spacing:.02em;padding:14px 0 4px;text-align:left}
@media (max-width:699px){.team-velden{grid-template-columns:minmax(0,1fr)}.doelen thead th:first-child{width:38%}.doelen{font-size:12.5px}.doelen td{padding:4px 3px}}

/* ---------- d2d-46: Werk verdelen in drie stappen ---------- */
.ins-stappen{margin-bottom:12px}
.ins-stappen button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 4px;min-width:0}
.stap-nr{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:99px;background:var(--lijn-2);color:var(--inkt-2);font-size:11px;font-weight:600;flex:none}
.ins-stappen button.aan .stap-nr{background:var(--merk);color:var(--op-merk)}
.gt-rij{padding:8px 0;border-bottom:1px solid var(--lijn);min-width:0}
.gt-rij>p{margin:0 0 6px;overflow-wrap:anywhere}
.gt-rij>p small{color:var(--zacht);font-size:12px}
.gt-soort{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0;min-width:0}
.gt-soort>span{display:flex;flex-direction:column;min-width:0;font-size:13.5px;font-weight:500}
.gt-soort>span small{font-size:12px;font-weight:400;color:var(--zacht)}
.gt-soort .knop{flex:none;white-space:nowrap}
.gt-kop{margin:10px 0 2px;font-size:12px;font-weight:600;color:var(--zacht)}
/* d2d-47: Adressen ophalen. Soort kiezen, één knop Ophalen per treffer, en één voortgangskaart met een duidelijk einde */
.ophaal-uitleg{margin:0 0 8px}
.ophaal-soort{margin:10px 0 0;min-width:0}
.ophaal-soort>span{display:block;margin:0 0 4px;font-size:13px;font-weight:500;color:var(--inkt-2)}
.ophaal-soort .segment{margin:0}
.ophaal-soort .segment button{min-width:0;min-height:44px;padding:0 4px}
.ophaalkaart{margin:10px 0 0;padding:12px;border:1px solid var(--lijn);border-left:4px solid var(--merk);border-radius:var(--r-klein);background:var(--papier);min-width:0}
.ophaalkaart.klaar{border-left-color:var(--ok)}
.ophaalkaart.fout{border-color:var(--rood-rand);border-left-color:var(--rood);background:var(--rood-licht)}
.ok-kop{margin:0;display:flex;flex-direction:column;min-width:0}
.ok-kop b{overflow-wrap:anywhere}
.ok-kop small{color:var(--zacht);font-size:13px;overflow-wrap:anywhere}
.ophaalkaart.fout .ok-kop b{color:var(--rood)}
.ok-fase{margin:6px 0 0;font-size:14px;font-weight:500}
.ok-tel{margin:0;font-size:13px;color:var(--inkt-2);overflow-wrap:anywhere}
.ok-reden{margin:6px 0;font-size:13px;color:var(--rood);overflow-wrap:anywhere}
.ok-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.ok-knoppen .knop{min-height:44px}
.ok-knoppen small{color:var(--zacht);font-size:12.5px}
.importbalk.los{position:relative}
.importbalk.los i{position:absolute;inset:0 auto 0 0}
@media (prefers-reduced-motion:no-preference){.importbalk.los i{animation:laden 1.4s ease-in-out infinite}}
.gt-nieuw{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.gt-nieuw>p{margin:0;display:flex;flex-direction:column;min-width:0;flex:1}
.gt-nieuw .knop{flex:none;min-height:44px;min-width:96px}
.gt-wacht{flex-basis:100%;color:var(--zacht);font-size:12px}
/* d2d-49: knoppen per treffer lopen om op 375 px (Particulier aanvullen + Zakelijk aanvullen), de stand staat eronder in gewone taal */
.gt-knoppen{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.gt-knoppen .knop{min-height:44px;flex:1 1 auto;max-width:100%;white-space:normal}
.gt-nieuw .gt-knoppen{flex:none;max-width:100%}
.gt-stand{margin:4px 0 6px;font-size:12px;color:var(--zacht);overflow-wrap:anywhere}
.gt-fout{border-left:4px solid var(--rood);padding-left:8px}
.ophaalkaart.onderbroken{border-left-color:var(--waarschuwing,#c77700)}
.inladen [data-actie=naar-ophalen]{margin-top:4px}
.vr-gebied{padding:10px 0;border-bottom:1px solid var(--lijn);min-width:0}
.vr-kop{display:flex;align-items:center;gap:8px;min-width:0}
.vr-naam{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;border:0;background:none;padding:4px 0;min-height:36px;text-align:left;color:var(--inkt)}
.vr-naam span{overflow-wrap:anywhere}
.vr-naam small{flex-basis:100%;font-size:12px;color:var(--zacht)}
.vr-kop .knop{flex:none;white-space:nowrap}
.vr-tel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:6px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--r-klein);overflow:hidden}
.vr-tel span{display:flex;align-items:baseline;gap:5px;background:var(--papier);padding:5px 8px;min-width:0}
.vr-tel b{font-size:15px;font-weight:600;color:var(--inkt)}
.vr-tel small{font-size:12px;color:var(--zacht);white-space:nowrap}
.vr-tel .vr-beschikbaar b{color:var(--merk-tekst)}
.vr-bij{margin:6px 0 0;font-size:12.5px;color:var(--inkt-2);overflow-wrap:anywhere}
.code-tabel{display:grid;margin-top:10px;border:1px solid var(--lijn);border-radius:var(--r-klein);overflow:hidden;background:var(--papier)}
.code-kop,.code-rij{display:grid;grid-template-columns:20px minmax(0,1fr) 58px 66px;align-items:center;gap:8px;padding:0 10px}
.code-kop{min-height:30px;font-size:11px;color:var(--zacht);border-bottom:1px solid var(--lijn)}
.code-kop span:nth-child(n+3),.code-rij .code-n{text-align:right}
.code-rij{min-height:40px;border:0;border-top:1px solid var(--lijn);background:none;color:var(--inkt);font-size:13px;text-align:left;width:100%}
.code-rij:first-of-type{border-top:0}
.code-rij:hover{background:var(--mist)}
.code-rij.aan{background:var(--mist);font-weight:600}
.code-naam{overflow-wrap:anywhere}
.code-n{font-variant-numeric:tabular-nums}
.code-rij .vink{width:18px;height:18px;min-height:0;border-radius:5px;border:2px solid var(--rand);position:relative;display:block}
.code-rij .vink.aan{background:var(--merk);border-color:var(--merk)}
.code-rij .vink.aan::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid var(--op-merk);border-width:0 2px 2px 0;transform:rotate(45deg)}
.terug-rij{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 0;border-bottom:1px solid var(--lijn);min-width:0}
.terug-rij .avatar{width:28px;height:28px;font-size:11px;background:var(--ag);color:var(--op-ag);flex:none}
.terug-tekst{flex:1;min-width:110px;display:flex;flex-direction:column}
.terug-tekst b{font-weight:500;overflow-wrap:anywhere}
.terug-tekst small{font-size:12px;color:var(--zacht);overflow-wrap:anywhere}
.terug-rij>.knop{flex:none}
.terug-bevestig{flex-basis:100%;border:1px solid var(--rood-rand);background:var(--rood-licht);border-radius:var(--r-klein);padding:10px 12px}
.terug-bevestig p{margin:0;font-size:13px;color:var(--inkt)}
.terug-gedaan{margin:0 0 4px;padding:8px 12px;border-radius:var(--r-klein);background:var(--mist);font-size:13px;color:var(--inkt)}
.beheer .inladen h3 .zacht{font-weight:400;font-size:13px}

/* ---------- d2d-46: Rapportage op een brede pc. Tot 1919 px niets veranderd (iPad, telefoon en laptop exact zoals d2d-45); daarboven vult
   Rapportage de breedte: links de cijferkaarten met verhoudingen en verloop, rechts Per verkoper. Begrensd op 2400 px, dan in het midden. ---------- */
@media (min-width:1920px){
  .res{max-width:2400px;margin-inline:auto}
  .res-hoofd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
  .res-hoofd.res-enkel{grid-template-columns:minmax(0,1fr)}
  .res-rechts .res-tabel th,.res-rechts .res-tabel td{padding:6px 5px}.res-rechts .res-tabel td:nth-child(2),.res-rechts .res-tabel th{white-space:normal}  /* zoals op de iPad: past zonder zijwaarts scrollen */
  .res-rechts>.res-sectie:first-child,.res-links>.res-tegels:first-child{margin-top:0}
  .res-links .res-duo{grid-template-columns:minmax(220px,1fr) minmax(0,2.4fr)}
  .res-staven{height:220px;background:repeating-linear-gradient(180deg,var(--lijn) 0 1px,transparent 1px 55px)}
}

/* ---------- d2d-46: Bekijk als verkoper ---------- */
.wb-wissel .knop-klein.knop-hoofd{border-color:var(--merk)}
.bekijk-kop{margin:14px 0 4px;font-size:12px;font-weight:600;color:var(--zacht)}
.vel-bekijk{display:block;margin:10px 0 0;min-height:36px;color:var(--merk-tekst)}
.app.alleen-kijken .uitkomst,.app.alleen-kijken .chat-invoer{opacity:.45;pointer-events:none}  /* de rest geeft bij een tik de melding "Je kijkt mee" */
.team-chat-start{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.res-toelichting{margin:0 0 10px}
.res-detail-tabel{max-height:360px;overflow-y:auto;border:1px solid var(--lijn);border-radius:var(--r)}
.res-detail-tabel table{width:100%;table-layout:fixed}
.res-detail-tabel thead th{position:sticky;top:0;background:var(--papier);z-index:1;white-space:normal;overflow-wrap:anywhere}
.res-detail-tabel th,.res-detail-tabel td{padding:10px 8px;vertical-align:top;white-space:normal;overflow-wrap:anywhere}
.res-detail-tabel tbody th{font-weight:500;text-align:left}
.res-detail-tabel b,.res-code b{font-size:13px;font-weight:600}
.res-detail-tabel small,.res-code small{display:block;font-size:11px;font-weight:400;color:var(--zacht);margin-top:3px}
.res-detail-kaarten{display:none}
.res-codelijst{border:1px solid var(--lijn);border-radius:var(--r);padding:0 12px}
.res-code{display:grid;grid-template-columns:minmax(0,1fr) auto 45px;column-gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn);align-items:center}
.res-code:last-child{border-bottom:0}
.res-code>span{font-size:12px;color:var(--zacht);text-align:right}
.res-code>strong{font-size:18px;font-weight:600}
.res-code>i{grid-column:1/-1;height:3px;background:var(--lijn);margin-top:7px;border-radius:2px;overflow:hidden}
.res-code>i>span{display:block;height:100%;background:var(--inkt-2)}
@media (min-width:1600px){.res-onder{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:28px;align-items:start}}
@media (max-width:699px){
  .res-detail-tabel{display:none}.res-detail-kaarten{display:block}
  .res-dagkaart{border:1px solid var(--lijn);border-radius:var(--r);margin-bottom:8px;padding:10px 12px}
  .res-dagkaart summary{display:flex;justify-content:space-between;gap:8px;cursor:pointer;font-size:13px}
  .res-dagkaart dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 0}
  .res-dagkaart dt{font-size:12px;color:var(--zacht);overflow-wrap:anywhere}.res-dagkaart dd{margin:3px 0 0}
  .res-dagkaart small{display:block;color:var(--zacht);font-size:11px}
}
@media (max-width:699px){
  .app.wissel .wb-rechts{min-width:0}
  .app.wissel .wb-wissel{flex:1;border-radius:12px;padding:3px 3px 3px 10px}
  .app.wissel .wb-wissel-tekst{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.25}
}
/* d2d-50: Werk verdelen, samenvattingsregel en overgeslagen adressen */
.ins-samen{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:0 0 8px;padding:8px 10px;border-radius:var(--r-klein);background:var(--mist);font-size:13px;color:var(--inkt);overflow-wrap:anywhere}
.ins-samen span{color:var(--zacht, #888)}
.ins-overgeslagen ul{margin:6px 0;padding-left:18px;font-weight:400}
.stand-regel{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 12px;font-size:14px;min-width:0}
.stand-regel span:last-child{overflow-wrap:anywhere}
/* d2d-50: terugkomafspraken boven de looplijst, standregel */
.afspraken{margin:0 0 10px;padding:8px 10px;border:1px solid var(--rand, #333);border-radius:var(--r);min-width:0}
.afspraken h2{margin:0 0 6px;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.afspraken h2 small{font-weight:400;color:var(--zacht, #888)}
.afspraak{display:flex;align-items:center;gap:8px;width:100%;padding:8px 6px;border:0;border-top:1px solid var(--rand, #333);background:none;color:inherit;font:inherit;font-size:14px;text-align:left;min-width:0;cursor:pointer}
.afspraak b{flex:1;min-width:0;overflow-wrap:anywhere}
.afspraak small{color:var(--zacht, #888);white-space:nowrap}
.afspraak.achter small{color:var(--rood, #e5484d)}
.afspraak.sel{background:var(--mist)}
.afspraak .pand-pijl{flex:none;width:16px;height:16px}
.keuze-groep{margin:0 0 8px}
.keuze-kop{display:block;font-size:13px;margin:0 0 2px}