/* ════════════════════════════════════════════════════════════════════════════════════
DE OPMAAK VAN HET KLANTENBESTAND (27 okt 2026)
------------------------------------------------------------------------------------------
DIT BLOK STOND IN crm.html EN IS HIER TEKEN VOOR TEKEN NAARTOE VERHUISD. Reden: crm.html is
de SCHIL die bij elke console-start opnieuw gevalideerd wordt, en test-appsplit houdt hem
onder de 140.000 bytes. Met dit blok erin was er 271 bytes over en paste er geen regel meer
bij. Buiten de schil is er weer ruimte, en de schil blijft klein zoals bedoeld.
DE VASTE REGEL BIJ DIT BESTAND: wie het wijzigt, bumpt zelf het ?v= van de is display:none en wordt dus geen cel in dit raster. */
.kb-velden{ display:grid; grid-template-columns:96px 1fr; gap:6px 10px; align-items:center; }
.kb-velden label{ font-size:12.5px; font-weight:600; color:var(--muted); }
.kb-velden input, .kb-velden select{ padding:6px 9px; font-size:13.5px; border-radius:8px; border-width:1px; }
.kb-velden select{ padding-right:28px; background-position:right 9px center; }
.kb-velden input[disabled]{ background:#f7f9fc; color:var(--muted); }
.kb-knoppen{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
/* De trefferlijst: compacte regels, de hele regel is de knop. Zelfde vorm als de zwevende lijst
van het prototype, maar in een paneel in plaats van over het formulier. */
.kb-res{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.kb-rij{ display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line);
background:none; color:var(--ink); padding:9px 12px; cursor:pointer; font:inherit; }
.kb-rij:last-child{ border-bottom:0; }
.kb-rij:hover{ background:#f7f9fc; }
.kb-rij:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
/* ZESHONDERD EN GEEN ZEVENHONDERD (27 okt 2026). Op een lijst van kale regels leest 700 als
schreeuwen; 600 leest als een nette titel en houdt het verschil met de ondertitel. Dit werkt
alleen omdat de naam op deze regel sinds dezelfde order niet meer in .kl-ag staat: die klasse
draagt font-weight:700 en zat hier dus bovenop. Zie klResRijHtml. */
.kb-rij-naam{ font-weight:600; }
.kb-rij small{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }
/* ── BIJLADEN OP SCROLL, DE RIJKERE TREFFERREGEL EN DE SPRONGBALK (2 nov 2026, laag 90) ────
.kb-meer stond hierboven en was sinds die laag DOOD: dat was het bakje om de knop
"Toon alle N", en die knop is weg. In laag 97 is die regel weggehaald.
.kb-rij-st is de DERDE regel van een treffer, met de statusbadges. Hij staat er alleen als
er echt een status is (klStBadgesHTML met compact aan geeft anders een lege tekst terug), dus
een prospect houdt een regel van twee hoog. De badges zelf dragen .kl-lbl en hun eigen
kleurpaar; hier staat GEEN kleur, alleen de plaatsing.
.kb-schild is de schildwacht onder de lijst. Hij heeft een eigen hoogte nodig: een leeg,
hoogteloos vakje kan de waarnemer niet zien binnenkomen en dan laadt er nooit iets bij.
.kb-fstick IS DE SPRONGBALK, EN HIJ STAAT ALLEEN ONDER DE 901 PIXELS. Dat is geen smaak maar
dezelfde meting als die van .kb-col hierboven: vanaf 901 pixels schuift elke KOLOM apart, dus
de criteria links blijven altijd in beeld en een sprongbalk zou daar een tweede knop zijn naar
iets dat je al ziet. Daaronder vallen de kolommen onder elkaar en schuift de PAGINA, en dan
staan de criteria na een paar tientallen treffers boven je uit beeld. Hij plakt aan de
TREFFERKOLOM en niet aan de criteriakolom, want alleen die kolom is net zo lang als de lijst. */
.kb-rij-st{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.kb-rtitel{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kb-schild{ min-height:20px; display:flex; align-items:center; justify-content:center; padding:8px 0; }
.kb-fstick{ display:none; }
@media (max-width:900px){
.kb-fstick{ display:flex; align-items:center; justify-content:space-between; gap:10px;
position:sticky; top:0; z-index:5; background:#fff; border:1px solid var(--line);
border-radius:10px; padding:6px 8px; box-shadow:0 1px 2px rgba(20,33,61,.08); }
.kb-fstick-sam{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:12px; color:var(--muted); }
}
@media (max-width:560px){
.kb-velden{ grid-template-columns:minmax(0,1fr); gap:2px 0; }
.kb-velden label{ margin-top:6px; }
}
/* ── EEN PAGINA, GEEN SCROLL (27 okt 2026) ─────────────────────────────────────────────────
Het zoekscherm hoort op EEN beeld te passen: criteria links, treffers rechts, zonder dat de
PAGINA zelf gaat schuiven. Gemeten op het LEGE scherm paste hij al precies (op 1600x950,
1440x900, 1280x800 en 1366x768 was de documenthoogte gelijk aan de vensterhoogte); het is het
RESULTATENPANEEL dat uitgroeit zodra er treffers staan, tot 1446 pixels bij vijfentwintig
regels.
HET PLAFOND STAAT OP DE KOLOM EN NIET OP DE LIJST ERBINNEN, en dat is een bewuste keuze na
meten. Een plafond op alleen de trefferlijst liet de pagina nog 92 pixels overschieten, en op
een laptop van 768 pixels past de LINKERkolom (negen criteria van 408 plus het vak eronder)
net niet meer in de ruimte die overblijft. Zet je het plafond op beide kolommen, dan kan geen
van de twee de pagina ooit nog uitduwen: wat niet past krijgt een dun schuifbalkje in zijn
EIGEN kolom. Het is bovendien EEN schuifgebied per kolom in plaats van een schuifgebied in een
schuifgebied, en genest schuiven is precies waar een muis in vast blijft zitten.
DE 260 PIXELS DIE ERAF GAAN zijn nagemeten en geen gok: de balk bovenaan (62), de marge van
.main (2x28), de sectiekop erboven (46) en de kop binnen het paneel (81), samen 245, plus 15
pixels lucht. Die lucht zit er omdat een lange sectietitel in een andere taal kan afbreken en
dan een regel hoger wordt. Staat de constante een paar pixels verkeerd, dan is het gevolg
alleen een iets kortere of langere lijst en NOOIT een pagina die weer gaat schuiven, want de
kolommen vangen het op. Met opzet een MAX-hoogte en geen vaste hoogte: bij drie treffers hoort
er geen groot leeg vak te staan.
EN HET GELDT ALLEEN VANAF 901 PIXELS, precies waar het tweekolom-raster begint (de mediaregel
hierboven breekt op max-width:900px, dus twee kolommen bestaan vanaf 901). Daaronder vallen de
drie panelen onder elkaar en zijn de negen criteria alleen al 520 pixels hoog; een
telefoonscherm van 844 pixels kan dat niet bevatten zonder iets te verbergen. Daar scrolt de
pagina dus gewoon, zoals hij dat vandaag ook doet, en dat is op een telefoon het normale
gedrag. Hover bestaat daar trouwens niet, dus het vak linksonder heeft daar geen werk. */
@media (min-width:901px){
/* DRIE REGELS DIE SAMEN EEN DING DOEN, en ze zijn alle drie nodig. Nagemeten: laat je een van
de drie weg, dan schuift de pagina weer.
max-height geeft het raster een bovengrens aan de vensterhoogte.
grid-template-rows minmax(0,1fr) zegt dat de ENE rij die grens niet mag overschrijden.
Zonder dit blijft de rij op max-content staan: het raster is dan wel
begrensd, maar de kolommen lopen er zichtbaar buiten en de pagina
groeit alsnog mee.
align-items stretch (en dus niet de start van de regel hierboven), zodat de
kolommen de hoogte van die rij ECHT krijgen. Een kolom zonder
vastgezette hoogte kan niet schuiven, hij duwt gewoon door. De panelen
blijven bovenaan staan, want .kb-col lijnt zijn inhoud zelf op start. */
.kb-grid{ max-height:calc(100vh - 260px); grid-template-rows:minmax(0,1fr); align-items:stretch; }
/* min-height:0 is geen sierregel maar de vierde voorwaarde: zonder dat weigert een raster-cel
kleiner te worden dan zijn inhoud. overflow-x:hidden houdt het bij EEN richting; de focusrand
van een trefferregel ligt binnen de regel (outline-offset is negatief) en wordt dus niet
afgeknipt. */
.kb-col{ min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
/* Een dun balkje, en alleen hier. Bewust NIET op body of .main: een eigen schuifbalk-opmaak
over het hele product heen is een eigen beslissing en niet die van deze order. De -moz- en
de webkit-vorm staan er samen omdat geen van de twee alleen alle browsers dekt; waar ze niet
werken komt er gewoon de gebruikelijke balk, en dat is geen probleem. */
.kb-col{ scrollbar-width:thin; scrollbar-color:#c7cedd transparent; }
.kb-col::-webkit-scrollbar{ width:8px; }
.kb-col::-webkit-scrollbar-track{ background:transparent; }
.kb-col::-webkit-scrollbar-thumb{ background:#c7cedd; border-radius:99px; border:2px solid var(--bg); }
.kb-col::-webkit-scrollbar-thumb:hover{ background:#9aa5be; }
}
/* HET VAK LINKSONDER HOUDT ZIJN HOOGTE BIJ EEN LEGE BLIK, zodat het scherm niet verspringt op het
moment dat je met de muis de eerste treffer raakt. Meer dan een bodem is het niet: zodra er een
agency in staat groeit het vak mee, en de kolom eromheen vangt het op. */
.kb-blik{ min-height:64px; }
/* ── DE SNELLE BLIK KRIJGT ZIJN EIGEN PLEK IN DE LINKERKOLOM (3 nov 2026, laag 102) ───────
HET PROBLEEM, gemeten en niet beweerd. Sinds laag 100 het tiende zoekveld (Contactpersoon)
toevoegde is het zoekformulier 491 pixels hoog. De linkerkolom is op 1280x800 540 pixels en
op 1366x768 508, dus na het formulier en de tussenruimte blijft er 35 tot 49 pixels over voor
een Snelle blik die er 246 nodig heeft. De kolom schoof dat verschil weg met zijn eigen
schuifbalk: 211 pixels op 1280x800 en 243 op 1366x768 stonden buiten beeld, en in de praktijk
zag je alleen nog de KOP van het vak. Een blik waarvoor je moet scrollen is geen blik.
491 + 14 + 246 = 751 en er is 540. Er is dus geen hoogte bij te maken; hij moet verdeeld
worden. Deze laag verdeelt hem, en wel zo dat de Snelle blik voorgaat.
WAT ER GEBEURT. De LINKERkolom wordt een flex-kolom in plaats van een raster:
het zoekformulier flex:1 1 auto, krijgt alles wat overblijft en schuift IN ZICHZELF;
de Snelle blik flex:0 0 auto, houdt zijn natuurlijke hoogte en krimpt NIET mee.
Daarmee staat de blik altijd helemaal in beeld en eindigt de inhoud van de linkerkolom op
exact dezelfde pixel als de resultatenkolom ernaast.
IN HET FORMULIER SCHUIVEN ALLEEN DE VELDEN. De kop van het paneel en de knop eronder staan
buiten het schuifgebied, want anders zou "Zoekopdracht wissen" wegschuiven precies wanneer je
hem nodig hebt. Daarom is het paneel zelf ook een flex-kolom en draagt alleen .kb-velden de
schuifbalk.
HET PLAFOND VAN 50 PROCENT IS DE BODEM ONDER HET FORMULIER. Zonder dat plafond zou een
Snelle blik met een lang adres op een kort venster het formulier tot twee velden platdrukken.
Gemeten: op 1280x800, 1366x768 en 1440x900 is de blik 246 pixels en bijt het plafond NIET
(het ligt daar op 270, 254 en 320), dus daar is de blik volledig zichtbaar zonder enige
schuifbalk. Pas op een venster korter dan ongeveer 740 pixels bijt het, en dan krijgt de blik
zijn EIGEN dunne schuifbalk in plaats van afgeknipt te worden door de kolom. Dat is het
verschil met de stand van hiervoor: afknippen is stil, een eigen schuifbalk is zichtbaar.
DE RECHTERKOLOM IS MET GEEN TEKEN GERAAKT, EN DAT IS GEEN NETHEID MAAR NOODZAAK. klBijHaak
hangt de waarnemer van het bijladen-op-scroll op el.closest('.kb-col'), en de schildwacht zit
in die rechterkolom. Zou de schuifbak daar naar een paneel erbinnen verhuizen, dan ziet die
waarnemer de schildwacht nooit meer binnenkomen en stopt het bijladen STIL. Elke kiezer
hieronder begint daarom met .kb-grid > .kb-col:first-child.
DE DRIE GEMETEN REGELS VAN 27 OKT BLIJVEN ONAANGEROERD: max-height:calc(100vh - 260px),
grid-template-rows:minmax(0,1fr) en align-items:stretch staan er nog precies zoals ze er
stonden, en de constante 260 is NIET verlaagd. Dat is een bewuste keuze na meten: met de
operator-kop staat er 167 pixels boven het raster en blijft er 42 over, maar met de gebrande
kop van een wederverkoper (het merkbandje in klHeadHTML) staat er 245 boven het raster en
schuift de pagina vandaag al 36 pixels. De constante verlagen zou dat geval precies zoveel
pixels erger maken, en deze laag heeft die ruimte niet nodig. */
@media (min-width:901px){
.kb-grid > .kb-col:first-child{ display:flex; flex-direction:column; overflow-y:hidden; }
.kb-grid > .kb-col:first-child > .pa-panel:first-child{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.kb-grid > .kb-col:first-child > .pa-panel:first-child > .kb-velden{
min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
scrollbar-width:thin; scrollbar-color:#c7cedd transparent; }
.kb-blikpaneel{ flex:0 0 auto; min-height:0; max-height:50%; display:flex; flex-direction:column; }
.kb-blikpaneel > .kb-blik{
min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
scrollbar-width:thin; scrollbar-color:#c7cedd transparent; }
.kb-grid > .kb-col:first-child > .pa-panel:first-child > .kb-velden::-webkit-scrollbar,
.kb-blikpaneel > .kb-blik::-webkit-scrollbar{ width:8px; }
.kb-grid > .kb-col:first-child > .pa-panel:first-child > .kb-velden::-webkit-scrollbar-track,
.kb-blikpaneel > .kb-blik::-webkit-scrollbar-track{ background:transparent; }
.kb-grid > .kb-col:first-child > .pa-panel:first-child > .kb-velden::-webkit-scrollbar-thumb,
.kb-blikpaneel > .kb-blik::-webkit-scrollbar-thumb{ background:#c7cedd; border-radius:99px; border:2px solid #fff; }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════
HET WIJZIGINGEN-SCHERM, OWNER-ONLY (28 okt 2026, opdracht 4b)
------------------------------------------------------------------------------------------
Een leesscherm met EEN actie. De opmaak leunt daarom volledig op wat er al staat: de chips
zijn .kl-soortknop (dezelfde als de soortkeuze in de historiek), de pager is .pager, de kaart
is .card en de kop is .row-head. Wat hier bij komt is alleen wat het logboek zelf nodig heeft:
een regel per handeling die uitklapt, en de Was -> Werd-regels daarbinnen.
DE MERKKLEUREN STAAN ER BEIDE IN: marine voor de structuur (de kop van een handeling, de rand
van een uitgeklapte regel) en oranje voor het enige dat opvalt (de vlag "al teruggedraaid" en
de melding na een ronde). Nooit alleen het donkerblauw. */
.kl-log{ padding:14px 16px; }
.kl-log-kies{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px; }
.kl-log-kies .field{ margin:0; min-width:180px; }
.kl-log-lijst{ margin-top:4px; }
/* EEN HANDELING. De hele regel is de knop die hem uitklapt, want een klikdoel van 14 pixels
naast de tekst is op een laptop-trackpad niet te raken. */
.kl-log-partij{ border:1px solid var(--line); border-radius:8px; margin-bottom:6px; background:#fff; }
.kl-log-partij.open{ border-color:var(--navy); }
.kl-log-rij{ display:flex; gap:10px; align-items:center; width:100%; text-align:left;
background:none; border:0; padding:9px 12px; cursor:pointer; font:inherit; color:var(--ink);
border-radius:8px; }
.kl-log-rij:hover{ background:var(--bg); }
.kl-log-pijl{ color:var(--muted); width:12px; flex:0 0 12px; }
.kl-log-wie{ font-weight:700; color:var(--navy); }
.kl-log-wanneer{ color:var(--muted); font-size:13px; white-space:nowrap; }
.kl-log-wat{ color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* DE ENIGE ORANJE VLAG OP DIT SCHERM, en met opzet maar een: hij zegt dat er aan deze handeling
al iets gedaan is, en dat is precies wat een owner moet zien voordat hij op terugdraaien duwt. */
.kl-log-vlag{ margin-left:auto; background:var(--orange); color:#fff; border-radius:99px;
padding:1px 9px; font-size:12px; font-weight:700; white-space:nowrap; }
.kl-log-detail{ border-top:1px solid var(--line); padding:8px 12px 10px; }
.kl-log-regel{ padding:6px 0; }
.kl-log-regel + .kl-log-regel{ border-top:1px dashed var(--line); }
.kl-log-kop2{ font-size:13px; color:var(--navy); margin-bottom:3px; }
.kl-log-veld{ font-size:13px; line-height:1.5; }
.kl-log-vlbl{ color:var(--muted); display:inline-block; min-width:150px; }
.kl-log-veld s{ color:var(--muted); }
/* DE MELDING NA EEN RONDE. Marine rand, oranje accent, nooit groen: dit is geen "gelukt" maar
een uitslag met drie getallen, en een van de drie kan nul zijn. */
.kl-log-melding{ border:1px solid var(--line); border-left:4px solid var(--orange);
background:var(--bg); border-radius:6px; padding:8px 11px; margin:8px 0; font-size:14px; }
.kl-log-melding.fout{ border-left-color:#c0392b; }
.kl-log-redenen{ margin:0 0 8px; padding-left:20px; font-size:13px; color:var(--ink); }
.kl-log-redenen li{ margin:2px 0; }
.kl-log-voet{ margin-top:12px; display:flex; justify-content:flex-end; }
/* DE INLINE BEVESTIGING. Geen systeemvenster: de vraag staat in de voet van het scherm, met de
twee knoppen ernaast, zoals demoConfirm en de prullenbak het ook doen. */
.kl-log-vraag{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; width:100%;
justify-content:space-between; border:1px solid var(--line); border-left:4px solid var(--navy);
background:var(--bg); border-radius:6px; padding:9px 12px; font-size:14px; }
.kl-log-vraagknop{ display:flex; gap:8px; }
/* ── DE TWEE GROEPSVINKJES (28 okt 2026, opdracht 1B) ─────────────────────────────────────
WAT ER MIS WAS: de schil zet input,select,textarea op width:100% (crm.html r.60). Die regel
draagt elk formulier in dit CRM, maar hij raakt ook een checkbox. In de flexregel van de twee
groepsvinkjes werd het hokje daardoor net zo breed als de regel en stond het label niet NAAST
zijn hokje maar helemaal rechts. Nagemeten in Chromium: hokje 462,6 px op 1280, 209,5 px op
390 en 149 px op 320, met de tekst op x=503,6 / 247,5 / 187.
WAAROM EEN EIGEN KLASSE: de globale regel blijft staan, want hij is goed voor tekstvelden en
keuzelijsten. Alleen het hokje krijgt zijn eigen maat terug, precies zoals
.togrow input[type=checkbox] in de schil dat al doet. 18 bij 18 is diezelfde maat.
De uit-stand is dezelfde .5 als voorheen, nu in een klasse in plaats van inline. */
.kl-vink{ display:flex; gap:8px; align-items:flex-start; margin-top:6px; font-size:13.5px; }
.kl-vink-uit{ opacity:.5; }
.kl-vink input[type=checkbox]{ width:18px; height:18px; flex:none; padding:0; margin:1px 0 0;
accent-color:var(--orange); cursor:pointer; }
.kl-vink-uit input[type=checkbox]{ cursor:not-allowed; }
/* ── DE AFSPRAAK-POP-UP ALS KLEINE AGENDA (28 okt 2026, stap 2 van 2) ─────────────────────
Drie delen onder elkaar in het venster: een maandkalender, het daglijstje en de invul-box.
De maten komen uit klantenbestand-prototype-v45/index.html (.aggrid, .agdag, .agpunt,
.agdaglijst, .agrij, .agitem): raster van zeven gelijke kolommen met gap 4, dagknoppen met
radius 8 en 8px lucht boven en onder, het telbolletje rechtsboven in merkoranje, en een
daglijst met een lijn erboven. De KLEUREN komen uit dit CRM (var(--orange), var(--navy),
var(--line), var(--muted)), niet uit de variabelen van het prototype: dat is dezelfde keuze
als bij de rest van dit scherm.
WAAROM HIER EN NIET IN crm.html: deze order is clientkant-only en raakt crm.html alleen voor
de cachestempel. Dit stijlblad wordt op elke pagina van de console geladen, dus de regels
gelden net zo goed als wanneer ze in de schil stonden. */
/* 28 OKT 2026: de koprij draagt nu ook de knop "Alle afspraken / Alleen van mij". Hij mag op
een smal scherm onder de titel vallen in plaats van hem weg te duwen, vandaar flex-wrap. */
.pa-pkoprij{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.pa-ptitel{ font-size:15px; margin:0; color:var(--navy); }
/* DE FILTERKNOP. Geen eigen knopvorm en geen eigen kleuren: dit is de pillenbalk .segsw die
het veld Soort in deze pop-up al gebruikt, alleen naar rechts geduwd en met een iets
kleinere letter, want hij hoort bij de titel en mag die niet overstemmen. */
.pa-ptoon{ margin-left:auto; }
.pa-ptoon button{ font-size:12px; padding:5px 10px; white-space:nowrap; }
@media (max-width:419px){
.pa-ptoon{ margin-left:0; width:100%; justify-content:center; }
.pa-ptoon button{ flex:1 1 0; justify-content:center; }
}
.pa-pnav{ display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.pa-pnav b{ font-size:14px; color:var(--navy); text-transform:capitalize; }
.pa-pvandaag{ margin-left:auto; }
.pa-pgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.pa-pkop{ text-align:center; font-size:11px; font-weight:700; color:var(--muted);
text-transform:uppercase; letter-spacing:.03em; }
.pa-pdag{ position:relative; border:1px solid var(--line); background:#f7f9fc; color:var(--ink);
border-radius:8px; padding:8px 0; font:500 14px inherit; cursor:pointer; min-height:36px; }
.pa-pdag:hover{ border-color:var(--navy); }
.pa-pdag.buiten{ opacity:.45; }
.pa-pdag.voorbij{ opacity:.6; }
.pa-pdag.vandaag{ border-color:var(--navy); font-weight:700; }
/* De gekozen dag is merkoranje met marineblauwe cijfers, zoals in het prototype. Hij wint van
.voorbij en .buiten, want een gekozen dag hoort nooit gedempt te zijn. */
.pa-pdag.gekozen{ background:var(--orange); border-color:var(--orange); color:var(--navy);
font-weight:700; opacity:1; }
.pa-ppunt{ position:absolute; top:2px; right:4px; font-size:10px; font-weight:800;
color:var(--orange); }
.pa-pdag.gekozen .pa-ppunt{ color:var(--navy); }
.pa-pdaglijst{ margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
.pa-pdagkop{ font-size:13px; color:var(--navy); margin-bottom:4px; }
.pa-pleeg{ color:var(--muted); font-size:13px; padding:8px 0; }
.pa-prij{ display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--line); }
.pa-prij:last-child{ border-bottom:0; }
.pa-prij.actief{ background:#FCA3111f; border-radius:8px; padding:0 6px; }
.pa-pitem{ display:block; width:100%; text-align:left; border:0; background:none;
color:var(--ink); padding:8px 0; font:13px inherit; cursor:pointer; min-width:0; }
.pa-pitem small{ display:block; color:var(--muted); font-size:12px; }
.pa-psoort{ font-size:11px; font-weight:700; color:var(--navy); background:#eef2fb;
border:1px solid var(--line); border-radius:999px; padding:1px 8px; white-space:nowrap; }
/* 28 OKT 2026, OPDRACHT 7: de uitkomst van een afspraak op de regel in het daglijstje.
DEZELFDE VORM als het soort-chipje ernaast; alleen de kleur verschilt, want doorgegaan en
niet doorgegaan zijn twee verschillende uitkomsten en geen twee smaken van hetzelfde.
Groen en rood komen uit de kleuren die dit scherm al gebruikt voor gedaan (#166534) en te
laat (#b91c1c); er komt geen nieuwe kleurwaarde bij. */
.pa-puit{ font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px;
white-space:nowrap; border:1px solid var(--line); }
.pa-puit.ja{ color:#166534; background:#eaf6ee; border-color:#bfe0ca; }
.pa-puit.nee{ color:#b91c1c; background:#fdeceb; border-color:#f2c6c2; }
/* De drie standen van de vraag "is hij doorgegaan". Zelfde pillenbalk als Soort, en hij mag
afbreken als hij niet past, precies zoals .pa-soortrij. */
.pa-uitrij{ flex-wrap:wrap; }
.pa-pwijzig{ white-space:nowrap; flex:none; }
/* De soortbalk in het formulier: de BESTAANDE pillenbalk .segsw, die hier alleen mag afbreken
als hij niet past. Geen eigen knopvorm, geen eigen kleuren. */
.pa-soortrij{ flex-wrap:wrap; }
.pa-door{ padding:7px 0; font-weight:600; color:var(--ink); }
/* OP EEN TELEFOON BLIJFT DE REGEL EEN REGEL. Een afspraakregel die afbreekt zet de
wijzig-knop op een eigen regel eronder, en dan is een daglijstje van drie afspraken al
driehonderd pixels hoog voordat je de invul-box ziet. Nagemeten op 320 en 390. De knop houdt
dus zijn plek rechts en verliest alleen zijn WOORD; het potlood plus de title blijven, dus
hij is nog steeds te begrijpen en te voorlezen. */
@media (max-width:419px){
.pa-pdag{ padding:6px 0; min-height:32px; font-size:13px; }
.pa-pnav b{ font-size:13px; }
.pa-pwoord{ display:none; }
.pa-pwijzig{ padding-left:8px; padding-right:8px; }
}
/* ══ HET VINKJES-ROOSTER: WIE ZIET WIENS AGENDA (28 okt 2026, matrix deel 2) ══════════════
Owner-only beheerscherm in het gedeelde venster (#sheet). Puur additief: geen enkele
bestaande regel is aangeraakt, elke klasse hieronder begint met az-.
DE MERKKLEUREN STAAN ER ALLEBEI IN: marine (--navy) voor de koppen en de naamkolom, oranje
(--orange) voor het aangevinkte vakje en de owner-chip. Geen nieuwe kleurwaarden; alles komt
uit de variabelen die crm.html al zet. */
.az-vak{ display:block; }
.az-titel{ margin:0 0 6px; font-size:17px; color:var(--navy); }
.az-uitleg{ margin:0 0 10px; }
.az-waarschuwing{ margin:0 0 10px; border:1px solid var(--line); border-left:3px solid var(--orange);
background:#fff8ec; border-radius:8px; padding:8px 10px; }
/* DE SCROLL-BAK. Hier zit de hele schaalbaarheid van dit scherm in: groeit de ploeg, dan wordt
het rooster breder en hoger, en dan schuift het BINNEN deze bak. De kopregel en de
naamkolom blijven staan, dus een kruispunt blijft altijd af te lezen. */
.az-scroll{ overflow:auto; max-height:min(58vh,460px); border:1px solid var(--line);
border-radius:10px; background:#fff; -webkit-overflow-scrolling:touch; }
/* 28 OKT 2026, LOOK-OPSCHONING. table-layout:fixed is de hele truc van deel A: zonder dat
rekt elke kolom mee met zijn langste woord, en dan is "Gedeelde Babysteps-agenda" breder dan
de rest. Gemeten was dat 138 pixels tegen 92 en 107 voor de buren: drie breedtes in een
raster dat gelijk hoort te ogen. Met een vaste layout telt alleen de breedte die hieronder
per kolom staat, en breekt een lang label gewoon over twee regels ZONDER de kolom op te rekken.
width:max-content in plaats van 100%: bij een vaste layout verdeelt de browser een tabel van
100% naar rato over de kolommen, en dan zijn ze weer niet exact gelijk. Ook auto volstaat
niet, want dat is krimp-naar-passend: is de som van de kolommen twee pixels breder dan de
bak, dan perst de browser alles proportioneel in en staan er weer vier verschillende
breedtes (gemeten: 100,7 / 100,9 / 101 / 107,9). max-content laat de tabel ALTIJD precies de
som van zijn kolommen zijn; past dat niet in de bak, dan schuift hij, en daar staat
.az-scroll voor. Past het ruim, dan blijft er wat wit rechts, en dat is de prijs voor
kolommen die echt exact gelijk zijn. */
.az-rooster{ border-collapse:separate; border-spacing:0; width:max-content; font-size:13px;
table-layout:fixed; }
.az-rooster th, .az-rooster td{ border-bottom:1px solid var(--line); padding:8px 10px;
text-align:center; vertical-align:middle; }
.az-rooster tbody tr:last-child th, .az-rooster tbody tr:last-child td{ border-bottom:0; }
/* De kopregel blijft staan bij verticaal scrollen. */
/* DE KOPREGEL. min-width:92px is hier een VASTE width geworden: bij table-layout:fixed telt
alleen de breedte van de eerste rij, dus hier staat wat elke doelkolom wordt.
DE MATEN ZIJN GEKOZEN, NIET GERADEN. De naamkolom van 146 plus vier maal 112 is samen 594,
en dat is exact de RUIMTE BINNEN de bak op een gewoon scherm (596 min de randlijn aan beide
kanten): bij vijf mensen past het raster dus precies, zonder schuifbalk en zonder wit rechts.
Met 148 was het twee pixels te breed en verscheen er een schuifbalk voor niets; ook dat is in
de renderproef gemeten. 112 is bovendien de kleinste
maat waarin "Babysteps-agenda" nog HEEL blijft; bij 102 brak de browser dat woord midden
doormidden ("BABYSTEP / S-AGENDA"). Dat is in de renderproef gezien en daarna rechtgezet.
De vaste hoogte houdt de koprij even hoog of een label nu een of twee regels wordt. */
.az-rooster thead th{ position:sticky; top:0; z-index:2; background:var(--navy); color:#fff;
font-weight:700; font-size:12px; line-height:1.25; white-space:normal; width:112px;
/* overflow-wrap:anywhere is wat de order letterlijk vraagt: een lang label mag AFBREKEN maar
mag zijn kolom niet breder maken. Zonder deze regel duwt het onbreekbare woord
"Babysteps-agenda" zijn kolom naar 107,8 pixels terwijl de buren op 102 staan; dat is
precies het scheve beeld dat deze order weg moest hebben. Gemeten voor en na. */
overflow-wrap:anywhere; }
.az-rooster thead tr{ height:62px; }
.az-kol-gedeeld{ color:var(--orange); }
/* De naamkolom blijft staan bij horizontaal scrollen.
LET OP DE SELECTOR: .az-rooster th hierboven telt een klasse EN een element en wint het dus
van een kale .az-naam. Dat is in de renderproef gezien: de namen stonden gecentreerd terwijl
een rij hoort te lezen als "deze persoon ziet: ...". Daarom staat het element er hier ook bij. */
.az-rooster th.az-naam{ position:sticky; left:0; z-index:1; background:#fff; text-align:left;
width:146px; font-weight:600; color:var(--navy); }
.az-rooster thead th.az-hoek{ position:sticky; left:0; z-index:3; text-align:left; width:146px; }
/* ELKE RIJ EVEN HOOG. Gemeten stonden er drie hoogtes naast elkaar: 51 voor een owner-rij met
het chipje, 35 voor een gewone rij en 58 voor een rij met het bijschrift. De oorzaak is niet
de chip maar het ONTBREKEN ervan: een rij zonder onderregel is simpelweg lager. Daarom
reserveert .az-onder die ruimte ALTIJD, ook als hij leeg is, en staat er een vaste rijhoogte
bij. Zo is het raster gelijk zonder dat er ook maar iets afgekapt of weggelaten wordt. */
/* DE RIJHOOGTE DEKT TWEE REGELS NAAM PLUS DE ONDERREGEL, en dat is met opzet ruimer dan de
kortste rij nodig heeft. Met 66 stonden korte namen op 66 en brak "Cedric De Combes" over
twee regels naar 79,8; dan is het raster wéér ongelijk, alleen op een andere plek. Met 80
staat elke rij gelijk, hoe lang de naam ook is, zonder dat er ook maar iets afgekapt wordt. */
.az-rooster tbody tr{ height:80px; }
.az-naamtekst{ display:block; line-height:1.25; }
/* EEN VASTE hoogte en niet min-height: met een minimum bleef er een pixel verschil tussen een
rij met het chipje en een rij met het tweeregelige bijschrift (63,4 tegen 62,4 gemeten).
32 pixels is ruim genoeg voor allebei: het chipje is er 20 en twee regels bijschrift 28,6. */
.az-onder{ display:block; height:32px; margin-top:2px; overflow:hidden; }
.az-sub{ display:block; font-size:11px; font-weight:500; color:var(--muted); line-height:1.3; }
.az-chip{ display:inline-block; margin-top:2px; font-size:11px; font-weight:700;
color:var(--navy); background:#FCA3112e; border:1px solid var(--orange);
border-radius:999px; padding:1px 8px; }
.az-rij-owner .az-naam, .az-rij-owner .az-cel{ background:#fbfcff; }
.az-rij:hover .az-naam, .az-rij:hover .az-cel{ background:#f6f8fd; }
/* DE CHECK-CELLEN. Ze krijgen hun breedte van de koprij (vaste layout), dus hier hoeft alleen
de inhoud gecentreerd te staan. Een flex-cel zet het vinkje exact in het midden, zowel links
en rechts als boven en onder, ook wanneer er een "Opslaan..."-regel onder hangt. */
.az-rooster td.az-cel{ text-align:center; }
.az-cel-vak{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.az-hok{ width:18px; height:18px; margin:0; padding:0; accent-color:var(--orange);
cursor:pointer; vertical-align:middle; }
.az-cel.az-vast .az-hok, .az-cel.az-bezig .az-hok{ cursor:default; }
.az-zelf{ color:var(--muted); }
.az-streep{ color:var(--line); font-weight:700; }
/* ══ DE KNOPPENBALK VAN DE AGENDA (28 okt 2026, look-opschoning deel B) ══════════════════
ALLEEN BINNEN .pa-kopbalk, en dat is met opzet. .btn, input en select zijn gedeelde klassen
die in de hele console gebruikt worden; ze hier zonder scope gelijktrekken zou elk scherm
van het CRM raken. Deze regels gelden dus uitsluitend voor de ene balk boven de agenda.
Gemeten stonden er vier hoogtes naast elkaar: 31 (Lijst, Prullenbak, Wie ziet wat), 36
(Nieuwe afspraak) en 38 (zoekveld en de keuzelijst Agenda van), met drie verschillende
bovenkanten. Alles staat nu op 40, dezelfde maat die deze console op een telefoon al voor
.btn.btn-sm gebruikt, dus het is geen nieuw getal maar het bestaande.
BREEDTE BLIJFT VRIJ: elke knop is zo breed als zijn tekst, precies zoals de order vraagt. */
.pa-kopbalk button, .pa-kopbalk input, .pa-kopbalk select{ min-height:40px; }
.pa-kopbalk button{ display:inline-flex; align-items:center; justify-content:center;
padding-top:0; padding-bottom:0; font-size:14px; line-height:1.2; }
.pa-kopbalk label{ margin:0; }
.az-voet{ margin:10px 0 0; }
.az-knoppen{ display:flex; justify-content:flex-end; margin-top:12px; }
/* OP EEN TELEFOON wordt de naamkolom smaller, anders blijft er van het rooster zelf niets
over. Nagemeten op 320 en 390: de eerste kolom houdt genoeg breedte voor een voornaam plus
de regel eronder, en de rest schuift. */
@media (max-width:419px){
.az-rooster th.az-naam, .az-rooster thead th.az-hoek{ width:134px; }
.az-rooster thead th{ width:84px; font-size:11px; }
.az-rooster th, .az-rooster td{ padding:7px 7px; }
/* Op deze breedte breekt een naam als "Cedric De Combes" over twee regels. De rijhoogte
houdt daar rekening mee, zodat ook hier ELKE rij even hoog is in plaats van alleen de
korte namen. Afkappen zou het raster ook gelijk maken, maar een naam half tonen is erger
dan een rij die een regel hoger staat. */
.az-rooster tbody tr{ height:84px; }
.az-rooster thead tr{ height:58px; }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════
OVERZICHT PER VERKOPER (29 okt 2026)
------------------------------------------------------------------------------------------
HET KLEURENSTELSEL IS NIET NIEUW. De labels hieronder gebruiken de variabelen die boven in
dit bestand al voor het Klantenbestand staan (--kl-wacht-*, --kl-grijs-*, --kl-plan-*,
--kl-niet-*, --kl-ok-*). Een tweede oranje of een tweede rood erbij verzinnen is precies hoe
een kleurenstelsel in twee ronden uit elkaar groeit.
DE SCROLL-BAK EN DE VASTGEZETTE KOP zijn dezelfde oplossing als bij het vinkjes-rooster: een
brede tabel pagineren breekt juist wat de tabel moet doen, namelijk een rij en een kolom
samen laten aflezen. */
.vo-vak{ display:block; }
.vo-titel{ margin:0 0 6px; font-size:17px; color:var(--navy); }
.vo-uitleg{ margin:0 0 10px; }
.vo-waarschuwing{ margin:0 0 10px; border:1px solid var(--line); border-left:3px solid var(--orange);
background:#fff8ec; border-radius:8px; padding:8px 10px; }
.vo-perrij{ flex-wrap:wrap; margin:0 0 10px; }
.vo-eigen{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.vo-eigen label{ font-size:12px; font-weight:700; color:var(--muted); }
/* DE TIP OM OPZIJ TE SCHUIVEN STAAT ER ALLEEN ALS DE TABEL OOK ECHT SCHUIFT. Op een breed
scherm past hij in het bredere blad (zie .sheet.vo-sheet hieronder) en dan zou de tip een
onwaarheid zijn. Zelfde gedachte als de gsm-only tip in het prototype. */
.vo-schuif{ display:none; margin:0 0 6px; }
@media (max-width:1200px){ .vo-schuif{ display:block; } }
.vo-scroll{ overflow:auto; max-height:min(58vh,460px); border:1px solid var(--line);
border-radius:10px; background:#fff; -webkit-overflow-scrolling:touch; }
.vo-tabel{ border-collapse:separate; border-spacing:0; width:max-content; font-size:13px;
table-layout:fixed; }
/* DE BREEDTES STAAN IN DE COLGROUP EN NIET IN DE CELLEN. Zie de uitleg in crm-app.js bij
voTabelHTML: de eerste rij is de groepsrij met colspans en kan per kolom niets zeggen. */
.vo-c-naam{ width:160px; }
/* 106 PIXELS, EN DAT IS GEMETEN IN ALLE ZES DE TALEN. Bij 84 brak de browser de kolomkoppen
MIDDEN IN EEN WOORD ("GEHOUD / EN", "VERPLA / ATST"), hetzelfde euvel als
"BABYSTEP / S-AGENDA" bij het vinkjes-rooster. Dat afbreken binnen een woord is daarom
uitgezet, en dan geldt bij table-layout:fixed een harde eis: een kolom die SMALLER staat dan
zijn langste woord wordt door de browser alsnog opgerekt, en dan zijn de kolommen weer
ongelijk (gemeten: 86 / 95,4 / 98,3 / 105,1 / 112,5). Het langste woord van alle zes de
talen is het Tsjechische "Uskutečněno". De kop erft de ALGEMENE th-regel uit crm.html
(hoofdletters en 0,44 pixel letterafstand), en in hoofdletters is dat woord daarmee 97,3
pixels bij elf pixels: dat zou een kolom van 118 vragen en een tabel van 1228, breder dan
het blad past. Daarom staat de KOLOMREGEL hieronder op tien pixels zonder extra
letterafstand (de GROEPSREGEL erboven houdt de merkaccenten); daar is het woord 84,1 pixels
en is 102 de kleinste maat waarbij geen enkele taal een kolom oprekt (het woord is daar
80,5 pixels breed, plus twee keer tien pixels binnenruimte). Alle acht de getalkolommen
staan dan exact even breed, en met de naamkolom van 188 (de twee labels naast elkaar) en de
knopkolom van 140 is de tabel 1144: hij past daarmee NET in het bredere blad van 1156 op een
gewoon beeldscherm, en schuift alleen op smallere schermen. Alles gemeten, niets geschat. */
.vo-c-n{ width:102px; }
/* 140, want de knop "Geschiedenis" is met zijn omlijsting 135,5 pixels breed; een smallere
kolom wordt door de browser toch opgerekt en dan klopt de som van de breedtes niet meer. */
.vo-c-act{ width:140px; }
.vo-tabel th, .vo-tabel td{ border-bottom:1px solid var(--line); padding:8px 10px;
text-align:center; vertical-align:middle; }
.vo-tabel tbody tr:last-child td{ border-bottom:0; }
/* EEN VASTE RIJHOOGTE, en dat is gemeten werk. Zonder deze regel was een rij met een naam die
over twee regels valt 72,8 pixels hoog en een rij ernaast 55,9, en de laatste rij nog een
pixel minder omdat die geen onderlijn draagt: drie hoogtes in een tabel die gelijk hoort te
ogen. Dat is dezelfde les als bij het vinkjes-rooster. 78 is de hoogte waarin een naam van
twee regels EN de labelrij eronder passen: gemeten was die combinatie 73,75 pixels hoog
("Cedric De Combes" met een oranje label eronder), en bij een hoogte van 74 werd die ene rij
dus 74,75 terwijl de rest op 74 stond. Bij 78 staan ze allemaal gelijk, met speling. */
.vo-tabel tbody tr{ height:78px; }
/* TWEE VASTGEZETTE KOPREGELS. De tweede moet precies onder de eerste blijven hangen, dus de
eerste heeft een VASTE hoogte en de tweede staat op die hoogte. Een hoogte die meegroeit zou
de twee regels over elkaar heen laten schuiven zodra een groepsnaam afbreekt. */
.vo-tabel thead th{ position:sticky; background:var(--navy); color:#fff; font-weight:700;
font-size:11px; line-height:1.25; white-space:normal; z-index:2; }
.vo-tabel thead tr.vo-groep{ height:34px; }
.vo-tabel thead tr.vo-groep th{ top:0; z-index:3; font-size:11px; text-transform:uppercase;
letter-spacing:.04em; padding-bottom:2px; border-bottom:0; }
.vo-tabel thead tr.vo-groep th span{ display:block; text-transform:none; letter-spacing:0;
font-weight:500; font-size:10px; opacity:.85; }
.vo-tabel thead tr.vo-kolrij{ height:46px; }
/* DE KOLOMREGEL IS NIET IN HOOFDLETTERS, en dat is geen afwijking maar het prototype volgen:
daar staat de GROEPSREGEL in hoofdletters ("MEETINGS", "TELEFOON") en de kolomregel eronder
in gewone schrijfwijze ("Gehouden", "Niet doorgegaan"). De algemene th-regel van crm.html
zet alle koppen in hoofdletters met wat letterafstand; die wordt hier dus bewust teruggezet.
Het scheelt bovendien precies wat nodig was: in hoofdletters vroeg het langste woord van de
zes talen een kolom van 118 en een tabel die op elk scherm moest schuiven. */
.vo-tabel thead tr.vo-kolrij th{ top:34px; font-size:11px; letter-spacing:normal;
text-transform:none; }
/* DE NAAMKOLOM BLIJFT STAAN BIJ ZIJWAARTS SCHUIVEN, net als in het vinkjes-rooster. De hoek
staat een laag hoger, anders schuift de kopregel eroverheen. */
.vo-tabel td.vo-naam{ position:sticky; left:0; z-index:1; background:#fff; text-align:left; }
.vo-tabel thead th.vo-hoek{ position:sticky; left:0; z-index:4; text-align:left; }
.vo-naamtekst{ display:block; line-height:1.25; }
/* DE RUIMTE VOOR DE LABELS WORDT ALTIJD GERESERVEERD, ook als er geen label staat: anders is
een rij met een label hoger dan een rij zonder, en dat leest als een scheve tabel.
DE TWEE LABELS MOETEN NAAST ELKAAR PASSEN. Gemeten bij een naamkolom van 144: "3 open" en
"4 zonder soort" samen pasten niet, het tweede label werd door de overflow afgesneden en dat
las als een tekenfout. Vandaar de bredere naamkolom hierboven en de kleinere maat hier. */
.vo-onder{ display:flex; gap:4px; align-items:center; height:22px; margin-top:2px; overflow:hidden; }
.vo-chip{ display:inline-block; font-size:10px; font-weight:700; border-radius:999px;
padding:1px 6px; white-space:nowrap; }
.vo-chip-open{ background:var(--kl-wacht-bg); color:var(--kl-wacht-tx); border:1px solid #f0d488; }
.vo-chip-geen{ background:var(--kl-grijs-bg); color:var(--kl-grijs-tx); border:1px solid var(--line); }
.vo-tabel td.vo-cel{ font-weight:700; }
.vo-tabel td.vo-nul{ color:var(--muted); font-weight:500; opacity:.55; }
/* DE SCHEIDING TUSSEN DE KOLOMGROEPEN. In de koprij is de lijn licht, want daar staat hij op
het merkmarine. */
.vo-gs{ border-left:2px solid var(--line); }
.vo-tabel thead th.vo-gs{ border-left-color:rgba(255,255,255,.35); }
.vo-sub{ display:block; font-size:10px; color:var(--muted); font-weight:500; margin-top:1px; }
.vo-leeg{ color:var(--muted); }
.vo-tabel td.vo-acties{ text-align:right; padding-left:4px; }
/* De knop in deze kolom draagt een lang woord ("Geschiedenis", "Vēsture", "Historie"), dus hij
krijgt hier wat minder binnenruimte. Het is dezelfde .btn-ghost btn-sm als overal; alleen de
ruimte eromheen verschilt, niet de vorm. */
.vo-tabel td.vo-acties .btn{ padding:6px 9px; font-size:12px; }
.vo-rij:hover td.vo-naam, .vo-rij:hover td.vo-cel{ background:#f6f8fd; }
.vo-rij-gedeeld td.vo-naam, .vo-rij-gedeeld td.vo-cel{ background:#fbfcff; }
.vo-voet{ margin:10px 0 0; }
.vo-knoppen{ display:flex; justify-content:flex-end; margin-top:12px; }
/* HET BLAD IS HIER BREDER, en dat is geen smaakje. Een tabel van tien kolommen in een blad van
640 pixels zou op een gewoon beeldscherm zijwaarts moeten schuiven terwijl er ruimte over is;
gemeten was de tabel 993 pixels in een bak van 596. De afspraak-pop-up doet precies het
omgekeerde met .sheet.ag-sheet (520 in plaats van 640), dus dit is het bestaande patroon van
dit product en geen nieuwe uitvinding. De klasse staat ALLEEN op het blad zolang dit venster
open is; voSluit haalt hem er weer af. */
/* 1200 en niet 1160: de knopkolom vraagt 141 pixels (de knop "Geschiedenis" in het Lets en
het Tsjechisch is het breedst), dus de tabel is 1133. Met 1200 blijft er op een gewoon
beeldscherm 23 pixels over en hoeft er niet geschoven te worden voor bijna niets. */
.sheet.vo-sheet{ max-width:min(1200px, 94vw); }
/* ── DE GESCHIEDENIS VAN EEN PERSOON ──────────────────────────────────────────────────── */
.vo-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.vo-cnt{ font-size:11px; font-weight:800; line-height:1; padding:3px 7px; border-radius:999px;
background:#dde3ee; color:#42506b; }
.vo-gfilter{ flex-wrap:wrap; margin:0 0 10px; }
.vo-glijst{ display:flex; flex-direction:column; gap:6px; }
.vo-gitem{ border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px 10px;
font-size:13px; }
.vo-wat{ display:inline-block; font-size:11px; font-weight:800; border-radius:999px;
padding:1px 8px; background:var(--kl-grijs-bg); color:var(--kl-grijs-tx); }
.vo-wat-verplaatst{ background:var(--kl-plan-bg); color:var(--kl-plan-tx); }
.vo-wat-geschrapt{ background:var(--kl-niet-bg); color:var(--kl-niet-tx); }
.vo-wat-beoordeeld{ background:var(--kl-ok-bg); color:var(--kl-ok-tx); }
.vo-gsoort{ font-size:11px; font-weight:700; color:var(--muted); }
.vo-gwan{ display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.vo-pag{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; }
.vo-plabel{ font-size:12px; color:var(--muted); font-weight:700; }
@media (max-width:560px){
.vo-c-naam{ width:160px; }
/* De getalkolom krimpt hier NIET mee: hij staat op de maat van het langste woord, en een
smallere kolom zou dat woord weer middendoor breken. Op een telefoon schuift de tabel. */
.vo-c-n{ width:102px; }
.vo-c-act{ width:112px; }
.vo-tabel thead th{ font-size:11px; }
.vo-tabel th, .vo-tabel td{ padding:7px 7px; }
}
/* ── OPDRACHT 8: HERSTELLEN PER STUK IN HET WIJZIGINGEN-SCHERM (29 okt 2026) ──────────────
Vier namen, allemaal nieuw, allemaal binnen het logboekscherm. De knop staat in de
.kl-log-kop2 van een verwijder-regel. Die kop2 blijft met opzet een gewone tekstregel en
wordt hier GEEN flex-bak: er staan losse tekstknopen in (naam, werkwoord, datum), en die
worden in een flex-bak elk een eigen vak, waardoor de regel breekt waar ze nu doorloopt.
Daarom is de knop inline-block met een marge ervoor, en niets anders verandert. */
.kl-log-herstel{ display:inline-block; vertical-align:middle; margin-left:8px; }
/* Gelukt. Geen knop meer, wel het woord, zodat de regel niet van hoogte verspringt. */
.kl-log-hok{ display:inline-block; vertical-align:middle; margin-left:8px; font-weight:700;
color:var(--navy); }
/* Mislukt. Rood, op dezelfde regel, en nooit in de plaats van de knop: de knop blijft staan
zodat een tweede poging mogelijk is zonder het scherm te herladen. */
.kl-log-hfout{ display:inline-block; vertical-align:middle; margin-left:8px; color:#c0392b; }
/* De telling naast het filter. Geen eigen vorm, alleen de grijze maat van de rest. */
.kl-log-wegtel{ align-self:center; color:var(--muted); font-size:13px; white-space:nowrap; }
/* ── OPDRACHT 9: HET OVERZICHT PER VERKOPER STAAT NU IN EEN TABBLAD (29 okt 2026) ─────────
Het scherm verhuisde van een modaal blad naar het tabblad "Activiteit" van de
Verkopersvolger. Dat verandert maar EEN ding aan de opmaak, en het is er wel een dat fout
gaat als je er niets aan doet: DE BREEDTE VAN DE BAK.
In het blad was de bak 1156 pixels bij een venster van 1280 (zie .sheet.vo-sheet hierboven),
en de tabel van 1143,9 paste daar net in. In een tabblad zit de bak in het paneel naast de
zijbalk, en die is bij datzelfde venster 934 pixels: de tabel schuift dus wel.
DE TIP "schuif de tabel opzij" HING AAN DE VENSTERBREEDTE (max-width:1200px). Dat klopte
voor het blad, maar inline is de bak veel smaller dan het venster en stond de tip er bij
1280 NIET terwijl de tabel wel schoof. Een tip die ontbreekt terwijl hij waar is, is
dezelfde fout als een tip die er staat terwijl hij onwaar is.
DE GRENS HIERONDER IS GEMETEN IN DE ECHTE SCHIL, NIET GESCHAT. De bak in dit tabblad is de
vensterbreedte min 424 pixels: zijbalk 244, .main 2x34, .panel 2x22, .vv-look 2x14 en de
kaart 18+16. De tabel is 1143,9 breed en de bak heeft zelf nog een rand, dus hij past vanaf
een venster van 1569 en bij 1568 nog net niet. Die ene pixel is GEMETEN en niet afgerond:
op 1568 is de bak 1144 en schuift de tabel nog, op 1569 is hij 1145 en past hij. Nagelopen
op veertien breedtes van 320 tot 2560; zie het rapport. */
.vv-act .vo-schuif{ display:block; }
@media (min-width:1569px){ .vv-act .vo-schuif{ display:none; } }
/* De kaart zelf draagt geen eigen maten: .card van de Verkopersvolger zet de achtergrond, de
rand en de binnenruimte, en .vo-vak eronder is nog steeds display:block. Er is dus bewust
GEEN .vv-act{...} met een eigen padding of breedte; dat zou deze ene kaart laten afwijken
van de zes andere kaarten in die sectie. */
/* EN DIT IS HET ECHTE ADDERTJE VAN DE VERHUIZING, GEVONDEN DOOR TE METEN EN NIET DOOR TE KIJKEN.
crm.html draagt onder 760 pixels een ALGEMENE regel voor elke tabel in de console:
`.main table{ display:block; overflow-x:auto; }`. In het modale blad gold die niet, want dat
blad staat BUITEN .main. In een tabblad staat deze tabel er WEL in, en dan gebeurt er op een
telefoon twee dingen tegelijk:
1. display:block haalt de tabel-opmaak weg, dus table-layout:fixed en de vastgezette
kolombreedtes doen niets meer;
2. de tabel krijgt zijn EIGEN overflow en wordt daarmee de schuifbak. De vastgezette
naamkolom hangt dan aan die tabel in plaats van aan .vo-scroll en schuift gewoon mee weg.
GEMETEN: op 390 schoof de naamkolom 200 pixels mee (van 62 naar -138) en op 768 niet. Deze
twee regels zetten precies die ene algemene regel terug voor DEZE tabel, en voor geen enkele
andere: .vv-act .vo-tabel weegt zwaarder dan .main table, dus de volgorde doet er niet toe. */
.vv-act .vo-tabel{ display:table; overflow:visible; }
.vv-act .vo-scroll{ overflow:auto; }