/* ══════════════════════════════════════════════════════════════════════════════════════════
   DE OPMAAK VAN DE VERKOPERSVOLGER (26 okt 2026)
   -----------------------------------------------------------------------------------------
   Deze regels stonden tot vandaag in het stijlblok van crm.html. Ze zijn hier NAARTOE
   VERHUISD, teken voor teken, zonder dat er een waarde, een selector of een volgorde is
   veranderd. De reden is de schil: crm.html mag van test-appsplit.js geen programmacode gaan
   dragen en wordt daarom klein gehouden. Drie look-rondes op rij hebben die ruimte opgegeten;
   het bestand stond op 173.321 van de 175.000 bytes. Die grens oprekken zou de bewaking
   uithollen, dus gaat de opmaak eruit in plaats van de grens omhoog.

   DE VOLGORDE IS BEWAARD, EN DAT IS GEEN DETAIL. De regels stonden in TWEE aaneengesloten
   blokken in crm.html, met het contractblok (.warnmsg, .ct-*, #printvak) ertussen en de
   agenda (.pa-*) erachter. Die twee blijven in crm.html staan, want ze horen niet bij de
   Verkopersvolger. De twee VV-blokken staan hier in dezelfde volgorde achter elkaar, en het
   verwijzing naar dit bestand staat in crm.html DIRECT ACHTER dat stijlblok. Daardoor komt elke regel
   hieronder nog steeds NA alle regels die in crm.html zijn blijven staan, precies zoals
   voorheen. Nagemeten dat dit niets verschuift: geen enkel element in de console draagt
   tegelijk een .vv-/.vk-klasse en een .ct-/.pa-klasse, en de basisklassen die wel samen met
   een VV-klasse voorkomen (.btn, .btn-sm, .btn-ghost) staan op regel 36 tot 38 van crm.html,
   ver voor dit blok, dus ze verliezen niets.

   DIT BESTAND WORDT GELADEN MET EEN ?v=<md5>-STEMPEL, net als crm-app.js. Het krijgt
   BEWUST GEEN immutable-cacheregel in netlify.toml: dan zou een vergeten stempel betekenen
   dat een browser een jaar lang de oude opmaak houdt. Zonder die regel geldt de standaard
   van Netlify (must-revalidate), dus een vergeten stempel kost hooguit een 304 en nooit een
   verkeerd scherm. Het stempel is dus snelheid, geen veiligheid. Zie het rapport.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
  :root{
    --vv-navy:#14213D;     --vv-oranje:#FCA311;
    --vv-navy-zacht:#eef1f7;                      /* het marine op 8%, voor de tabbalk */
    --vv-fout-bg:#fef2f2;  --vv-fout-tx:#991b1b;  --vv-fout-ln:#fecaca;
    --vv-ok-tx:#166534;
  }
  /* 27 OKT 2026: HET BLOK .vv-merkkop IS HIER WEGGEHAALD. Dezelfde kop bleek ook op de
     verkoperconsole te staan, dus de opmaak is een GEDEELDE klasse geworden (.merkkop en
     .merknaam) in de stijl van crm.html, die op elk scherm geladen wordt. Twee keer dezelfde
     regel onder een andere naam zou na de eerste wijziging uit elkaar lopen. De reden achter
     het bandje (het logo is voor de onderste helft massief wit) staat nu bij die klasse. */
  .vv-kop{ margin:0 0 10px; }
  .vv-h{ margin:0; font-size:18px; font-weight:800; color:var(--vv-navy);
    border-left:4px solid var(--vv-oranje); padding-left:9px; }
  .vv-sub{ margin:4px 0 0 13px; font-size:12px; color:var(--muted); }
  .vv-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 12px; padding:4px;
    background:var(--vv-navy-zacht); border-radius:11px; }
  .vv-tab{ appearance:none; border:0; background:transparent; cursor:pointer;
    padding:7px 13px; border-radius:8px; font-size:13px; font-weight:600;
    color:var(--vv-navy); font-family:inherit; }
  .vv-tab:hover{ background:#fff; }
  .vv-tab-aan{ background:var(--vv-navy); color:#fff; }
  .vv-tab-aan:hover{ background:var(--vv-navy); }
  .vv-gtitel{ font-size:13px; font-weight:800; color:var(--vv-navy); margin:0 0 10px;
    padding-bottom:7px; border-bottom:1px solid var(--line); }
  .vv-rij{ display:flex; align-items:flex-start; gap:12px; padding:7px 0;
    border-bottom:1px solid var(--line); }
  .vv-rij:last-of-type{ border-bottom:0; }
  .vv-rij-leeg{ background:var(--vv-fout-bg); border-radius:7px; padding-left:7px; padding-right:7px; }
  .vv-lab{ flex:1 1 auto; min-width:0; display:block; font-size:13px; font-weight:600;
    color:var(--vv-navy); }
  .vv-sleutel{ font-weight:400; font-size:10px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
  .vv-uitleg{ display:block; font-weight:400; font-size:11px; color:var(--muted); margin-top:2px; }
  /* 25 okt 2026, deel 2c: de noot onder een groepstitel in de instellingen. Zelfde grijs en
     zelfde maat als de uitleg bij een veld, alleen met lucht eronder zodat hij niet tegen het
     eerste veld plakt. Gevonden in de browserproef: met class="muted" stond hij groot en zwart,
     want die klasse bestaat in dit bestand helemaal niet. */
  .vv-gnote{ margin:-4px 0 10px; line-height:1.5; max-width:70ch; }
  .vv-in{ flex:0 0 auto; display:flex; align-items:center; gap:7px; }
  .vv-in .in{ width:132px; }
  .vv-pct{ font-size:11px; color:var(--muted); min-width:52px; }
  .vv-fout{ background:var(--vv-fout-bg); color:var(--vv-fout-tx);
    border:1px solid var(--vv-fout-ln); border-radius:9px; padding:9px 11px;
    font-size:13px; margin-bottom:9px; }
  .vv-rateskop, .vv-rates{ display:grid; grid-template-columns:1fr 92px 92px 92px; gap:7px;
    align-items:center; }
  .vv-rateskop{ font-size:11px; font-weight:700; color:var(--muted); padding-bottom:5px; }
  .vv-rates{ padding:5px 0; border-top:1px solid var(--line); }
  .vv-rnaam{ font-size:13px; color:var(--vv-navy); min-width:0; overflow-wrap:anywhere; }
  .vv-rv{ display:block; min-width:0; }
  .vv-rv .in{ width:100%; }
  /* Het opschrift per invoerveld is op een breed scherm verborgen: daar staan de opschriften
     boven de kolommen. Op een telefoon vallen die kolommen weg en komt dit opschrift terug,
     anders staan er drie naamloze vakjes onder elkaar. */
  .vv-rlab{ display:none; font-size:11px; color:var(--muted); margin-bottom:2px; }
  .vv-bewaar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .vv-note{ font-size:12px; color:var(--muted); }
  .vv-note-ok{ color:var(--vv-ok-tx); font-weight:600; }
  .vv-note-fout{ color:var(--vv-fout-tx); font-weight:600; }

  /* ── deel 2a: de verkoperslijst en het profiel ─────────────────────────────────────────
     Zelfde tokens als hierboven, geen nieuwe kleuren. De lijst is een raster met vijf kolommen
     op een breed scherm; onder 620 px klapt elke rij tot een kaartje met de opschriften ervoor,
     want vijf naamloze kolommen onder elkaar is onleesbaar. Dezelfde les als bij de lastenlijst. */
  .vv-vkop{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    flex-wrap:wrap; margin-bottom:10px; }
  /* 26 OKT 2026, OPRUIMEN NA DE CSS-SPLITSING: de twee regels die de uitleg hieronder
     beschrijft (.vv-vkop2 en .vv-vrij) zijn WEGGEHAALD. Ronde C maakte van de verkoperslijst
     een raster van kaarten, waardoor de tabelrij en haar kolomkop nergens meer gebruikt werden.
     De uitleg zelf blijft staan, want de meting erin geldt nog steeds: een knop die maar bij
     SOMMIGE regels staat trekt de uitlijning scheef als zijn kolom op 'auto' staat. Dat is
     precies waarom de knoppen van ronde C in de kaart zelf zitten en niet in een kolom. */
  /* ELKE RIJ IS EEN EIGEN RASTER, dus de kolommen lijnen alleen uit als ELKE rij dezelfde
     sporen uitrekent. Met een laatste spoor op 'auto' werd dat spoor net zo breed als de
     knoppen die TOEVALLIG in die rij staan, en schoof alles ervoor mee: rijen met een
     Verwijderen-knop stonden anders dan rijen zonder. Dat is in de browserproef gezien.
     Daarom staat de knoppenkolom nu op een VASTE breedte. */
  .vv-vnaam{ font-weight:600; color:var(--vv-navy); min-width:0; overflow-wrap:anywhere; }
  .vv-vknop{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
  .vv-vweg{ background:var(--vv-fout-bg); border-radius:7px; }
  .vv-st{ font-size:11.5px; font-weight:700; }
  .vv-st-actief{ color:var(--vv-ok-tx); }
  .vv-st-wacht{ color:#8a5a00; }
  .vv-st-afgewezen{ color:var(--vv-fout-tx); }
  .vv-vast{ font-size:13px; color:var(--vv-navy); font-weight:600; }
  /* ── DEEL 2b (24 okt 2026): de aanvragen, de uitnodigingen, de meldingen en het eigen
     scherm van een verkoper. Alles hangt aan .vv- of .vk-, dus niets hiervan kan een andere
     sectie raken. Dezelfde kleuren als de rest van de Verkopersvolger (var(--vv-*)), zodat
     het scherm van een verkoper eruitziet als hetzelfde product. */
  .vv-arij{ display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) 150px 220px;
    gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vv-arij:last-of-type{ border-bottom:0; }
  .vv-areden{ font-size:12px; padding:0 0 9px; }
  .vv-gkvak{ background:var(--vv-vak); border:1px solid var(--line); border-radius:9px;
    padding:12px; margin:4px 0 10px; }
  .vk-ik{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin:10px 0 4px; }
  .vk-naam{ font-weight:700; color:var(--vv-navy); font-size:15px; min-width:0; overflow-wrap:anywhere; }
  .vk-leider{ font-size:13px; color:var(--vv-navy); margin:2px 0 8px; }
  .vk-leider .muted{ margin-left:8px; }
  .vk-taal{ display:flex; gap:8px; align-items:center; font-size:13px; }
  .vk-taal label{ font-weight:600; color:var(--muted); }
  .vk-ov{ border-left:3px solid var(--vv-oranje); }
  .vk-ov-vraag{ font-size:15px; font-weight:600; color:var(--vv-navy); margin:6px 0; }
  .vk-ov-knoppen{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
  .vk-mld{ display:flex; gap:10px; align-items:baseline; padding:9px 0;
    border-bottom:1px solid var(--line); font-size:13px; }
  .vk-mld:last-of-type{ border-bottom:0; }
  .vk-mld-doen{ background:var(--vv-vak); border-radius:7px; padding:9px 8px; }
  .vk-mld-tekst{ flex:1; min-width:0; overflow-wrap:anywhere; color:var(--vv-navy); }
  .vk-vlag{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
    background:var(--vv-oranje); color:#14213D; border-radius:5px; padding:2px 6px; white-space:nowrap; }
  .vk-vlag-nieuw{ background:#e8eefb; color:var(--vv-navy); }
  .vk-lid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) 150px 120px;
    gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vk-lid:last-of-type{ border-bottom:0; }
  .vk-nieuw{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .vk-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin:8px 0; }
  .vk-form label{ display:flex; flex-direction:column; gap:4px; font-size:12px;
    font-weight:600; color:var(--muted); }
  .vk-form input, .vk-form select{ font:inherit; font-size:13.5px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); width:100%; }
  /* ── het invoerscherm van een verkoop (deel 3b) ───────────────────────────────────────── */
  .vk-terug{ margin:2px 0 8px; }
  .vk-prod{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
  .vk-pkeus{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
    color:var(--vv-navy); border:1px solid var(--line); border-radius:8px; padding:8px 11px;
    background:#fff; cursor:pointer; flex:0 0 auto; }
  .vk-pkeus-aan{ border-color:var(--vv-oranje); background:var(--vv-vak); }
  /* De algemene regel bovenaan dit blad zet ELKE input op width:100%. Een keuzerondje en een
     vinkje worden daar zo breed van als hun vak, en dan staat het bolletje in het midden met
     een gat ernaast en breekt het woord ernaast middendoor. Zelfde vangrail als .togrow. */
  .vk-pkeus input[type=radio], .vk-opt input[type=checkbox]{ width:17px; height:17px; flex:none;
    padding:0; margin:0; accent-color:var(--vv-oranje); cursor:pointer; }
  .vk-sv{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px;
    align-items:baseline; font-size:13px; padding:6px 0; border-bottom:1px dashed var(--line); }
  .vk-sv:last-of-type{ border-bottom:0; }
  .vk-sv > span{ min-width:0; overflow-wrap:anywhere; color:var(--muted); }
  .vk-sv b{ color:var(--vv-navy); }
  .vk-kr{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;
    justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vk-kr:last-of-type{ border-bottom:0; }
  .vk-opt{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:13px; padding:5px 0; }
  .vk-opt label{ display:flex; align-items:center; gap:7px; font-weight:600; color:var(--vv-navy); }
  .vk-opt input[type=number]{ font:inherit; font-size:13px; width:84px; padding:6px 8px;
    border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }
  /* de foto's van een op papier getekend contract (deel 3c) */
  .vk-fotos{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0; }
  .vk-foto{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
  .vk-foto img{ width:120px; height:160px; object-fit:cover; border:1px solid var(--line);
    border-radius:8px; background:#fff; }
  @media (max-width:620px){
    .vv-rij{ flex-direction:column; gap:5px; }
    .vv-in{ width:100%; }
    .vv-in .in{ width:100%; }
    .vv-rateskop{ display:none; }
    .vv-rates{ grid-template-columns:1fr; gap:6px; }
    .vv-rates .in{ width:100%; }
    .vv-rnaam{ font-weight:700; }
    .vv-rlab{ display:block; }
    .vv-arij{ grid-template-columns:1fr; gap:4px; padding:11px 0; }
    .vk-lid{ grid-template-columns:1fr; gap:3px; padding:10px 0; }
    .vk-form{ grid-template-columns:1fr; }
    .vk-mld{ flex-wrap:wrap; gap:6px; }
    .vk-pkeus{ width:100%; }
    .vk-kr{ gap:4px; padding:11px 0; }
    .vk-kr button{ margin-top:4px; }
    .vv-vknop{ justify-content:flex-start; margin-top:5px; }
  }


  /* ── DEEL 3d (25 okt 2026): de beheerderskant van de verkopen ───────────────────────────
     Alles hangt aan .vv-bv- of .vv-ct-, dus niets hiervan kan een ander scherm raken. Dezelfde
     tokens als de rest van de Verkopersvolger (var(--vv-*)), geen nieuwe kleuren.
     WERKT OP 390 px: de filterbalk is een wrap-rij met velden van minstens 150 px, en de twee
     rasters (de verkopenlijst en het betaalschema) klappen onder 820 px tot kaartjes met het
     opschrift ervoor. Vier of acht naamloze kolommen onder elkaar is onleesbaar; dat is dezelfde
     les als bij de verkoperslijst van deel 2a. */
  .vv-bvf{ display:flex; flex-wrap:wrap; gap:9px 12px; align-items:flex-end;
    padding:10px 0 12px; border-bottom:1px solid var(--line); margin-bottom:10px; }
  .vv-bvfv{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 170px; }
  .vv-bvfv .in, .vv-bvfv select{ width:100%; }
  .vv-bvfv .btn{ align-self:flex-start; }
  /* De zoekrij: veld en knop naast elkaar, want een knop ONDER zijn veld leest als een los
     ding. Het veld krijgt de ruimte, de knop zijn eigen breedte. */
  .vv-bvfz{ flex:2 1 280px; }
  .vv-bvzoek{ display:flex; gap:6px; align-items:center; }
  .vv-bvzoek .in{ flex:1 1 auto; min-width:0; }
  .vv-bvzoek .btn{ flex:none; }
  /* De knop die de filterbalk in- en uitklapt bestaat ALLEEN op een smal scherm (zie onderaan):
     op een breed scherm staan de filters altijd open en zou een knop alleen maar verwarren. */
  .vv-bvtog{ display:none; }
  .vv-bvlab{ font-size:11px; font-weight:700; color:var(--muted); }
  .vv-bvkop, .vv-bvrij{ display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 92px minmax(0,1.1fr) 104px 110px minmax(0,1.3fr) 92px;
    gap:10px; align-items:center; }
  .vv-bvkop{ font-size:11px; font-weight:700; color:var(--muted); padding-bottom:6px;
    border-bottom:1px solid var(--line); }
  .vv-bvrij{ padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vv-bvrij:last-of-type{ border-bottom:0; }
  .vv-bvweg{ opacity:.62; }
  /* deel 4c, de facturen van verkopers. Deze regels zetten ALLEEN de kolommen; de letters, de
     lijntjes en het inklappen op een telefoon komen van .vv-bvkop en .vv-bvrij, die allebei
     ook op deze rijen staan. Zo is er geen tweede kopie van die opmaak en kan er geen verschil
     tussen twee tabellen in dezelfde console ontstaan. */
  .vv-fckop, .vv-fcrij{ grid-template-columns:minmax(0,1.5fr) 92px minmax(0,1fr) 104px 104px minmax(0,1.1fr) 92px; }
  .vv-fcrkop, .vv-fcrrij{ grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) 110px; }
  .vv-fcfilters{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; margin:10px 0; }
  .vv-fcfilters label{ display:flex; flex-direction:column; gap:4px; font-size:12px;
    font-weight:700; color:var(--muted); min-width:150px; }
  .vv-fcreden{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:700;
    color:var(--muted); margin:10px 0 6px; }
  .vv-fcreden textarea, .vv-fcreden input{ font:inherit; font-size:13.5px; }
  /* deel 5a, de bonusrondes. Zelfde afspraak als bij 4c hierboven: deze regels zetten ALLEEN
     de kolommen. De letters, de lijntjes en het inklappen op een telefoon komen van
     .vv-bvkop en .vv-bvrij, die allebei ook op deze rijen staan. */
  .vv-bnkop, .vv-bnrij{ grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) 80px 96px 118px minmax(0,1.3fr) 92px; }
  .vv-bnpkop, .vv-bnprij{ grid-template-columns:72px minmax(0,1fr); }
  .vv-bnskop, .vv-bnsrij{ grid-template-columns:72px minmax(0,1.5fr) 104px minmax(0,1.2fr) minmax(0,1fr); }
  /* Een prijsregel in het formulier: de plaats, het bedrag, de tekst en de weg-knop. Hij mag
     afbreken op een smal scherm, en dan staat het tekstveld op zijn eigen regel in plaats van
     tot 40 px samengeperst te worden. */
  .vv-bnprijs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
  .vv-bnprijs input[type=number]{ width:116px; flex:0 0 auto; }
  .vv-bnprijs input[type=text]{ flex:1 1 180px; min-width:0; }
  .vv-bnpl{ font-weight:800; color:var(--vv-navy); min-width:26px; }
  /* De vier vinkjes van 'wat verkopers zien'. Het hokje staat bovenaan naast de eerste regel
     van het opschrift en niet gecentreerd op twee regels tekst. */
  /* EEN RASTER EN GEEN FLEXRIJ, en dat is in de browserproef uitgevochten. Met display:flex
     kromp het opschrift naast het hokje tot NUL pixels en liep de tekst het vakje uit, ook met
     min-width:0 en flex:1 1 auto erop. Met twee kolommen (het hokje zo breed als het is, de
     tekst de rest) kan er niets meer overlopen en breekt een lange zin gewoon af. */
  .vv-bnvink{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px;
    align-items:start; margin-bottom:9px; font-size:13.5px; }
  .vv-bnvink input{ margin-top:3px; }
  .vv-bnvink .vv-uitleg{ display:block; margin-top:1px; }
  /* DE PRIJZEN EN DE VINKJES KRIJGEN DE VOLLE BREEDTE, en dat is in de browserproef gevonden.
     .vv-rij is een flexRIJ met het opschrift links en .vv-in rechts, en .vv-in is zelf ook een
     rij: daardoor kwamen de drie prijsregels NAAST elkaar te staan en werd het opschrift tot een
     kolom van negentig pixels geperst. Deze twee regels zetten die ene soort rij rechtop: het
     opschrift boven, de lijst eronder, over de volle breedte. Ze hangen aan een EIGEN klasse en
     raken dus geen enkele andere rij in de instellingen. */
  .vv-bnrij2{ flex-direction:column; align-items:stretch; gap:7px; }
  .vv-bnin{ display:block; width:100%; min-width:0; }
  /* Een knop die UIT staat moet er ook uit zien. Dit product heeft geen algemene regel voor
     .btn:disabled (nagekeken bij deel 4c en toen als open punt gemeld), en er een invoeren zou
     ELK scherm raken. Daarom een eigen klasse die alleen op de geblokkeerde knop van dit deel
     staat. */
  .vv-bnuit:disabled{ cursor:not-allowed; opacity:.55; }
  /* ── deel 5b, het eigenaars-dashboard ──────────────────────────────────────────────────
     DE GRAFIEK IS TWEE LAGEN OVER ELKAAR: staven van divs (die schalen vanzelf mee met de
     breedte) en EEN handgemaakte svg-lijn eroverheen die wordt uitgerekt. Er staat geen tekst
     in die svg, dus het uitrekken doet geen kwaad; de maandopschriften zijn gewone HTML en
     blijven daardoor op elke schermbreedte leesbaar. De techniek van .ins-chart (de
     kwartaalgrafiek van een kantoor) is nagevolgd, die klassen zijn NIET hergebruikt: de
     Verkopersvolger is een standalone product. Er komt geen bibliotheek aan te pas. */
  .vv-ovassen{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    font-size:11px; color:var(--muted); margin:2px 0 4px; }
  .vv-ovas-r{ color:var(--vv-oranje); font-weight:700; }
  .vv-ovgr{ position:relative; height:230px; border-bottom:1px solid var(--line); }
  /* DE LEGE STAAT (27 okt 2026). Een bedrijf dat net begonnen is heeft wel maanden maar nog
     geen bedragen. Dan werd de rekenhulp van vvOVGrens() zichtbaar: een schaal van EUR 1 met
     een zwevend getal in een leeg vlak, terwijl er nergens een cijfer van EUR 1 bestaat. In
     plaats daarvan komt hier EEN rustige zin, en verder niets: geen asopschriften met een
     verzonnen bedrag, geen legenda voor kleuren die niet getekend worden, geen voetnoot over
     twee schalen die er niet zijn. De stippellijn eromheen zegt zonder woorden dat hier later
     iets komt te staan; de hoogte is bewust LAGER dan de 230px van de echte grafiek, want een
     lege doos van die hoogte leest als een storing. */
  .vv-ovleeg{ display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:110px; padding:18px 16px; margin:2px 0 0; font-size:12.5px; line-height:1.6;
    color:var(--muted); border:1px dashed var(--line); border-radius:11px; }
  .vv-ovbars{ display:flex; align-items:stretch; gap:2px; height:100%; }
  .vv-ovbar{ position:relative; flex:1 1 0; min-width:2px; }
  .vv-ovfill{ position:absolute; left:0; right:0; border-radius:2px; display:block; }
  .vv-ovplus{ background:var(--vv-ok-tx); }
  .vv-ovmin{ background:var(--vv-fout-tx); }
  /* De nullijn: zonder die streep is een staaf die onder nul hangt niet te lezen. */
  .vv-ovnul{ position:absolute; left:0; right:0; height:0; border-top:1px dashed var(--line); }
  .vv-ovlijn{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
    overflow:visible; }
  /* De maandopschriften staan ABSOLUUT op hun eigen punt en niet in een vakje per maand.
     Met een vakje per maand was elk vakje op 390 px vijftien pixels breed en werd "2026-10"
     afgekapt tot "20" (gevonden in de browserproef). Zo mag een opschrift breder zijn dan de
     staaf waar het bij hoort, en aan de randen schuift het naar binnen. */
  .vv-ovlabs{ position:relative; height:14px; margin-top:5px; }
  .vv-ovlab{ position:absolute; top:0; transform:translateX(-50%); font-size:10px;
    color:var(--muted); white-space:nowrap; }
  .vv-ovlab-l{ transform:none; }
  .vv-ovlab-r{ transform:none; }
  .vv-ovlegenda{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:9px; font-size:11.5px;
    color:var(--muted); align-items:center; }
  .vv-ovlegenda span{ display:flex; align-items:center; gap:6px; }
  .vv-ovleg{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:0 0 auto; }
  .vv-ovlijnleg{ height:3px; width:16px; border-radius:2px; background:var(--vv-oranje); }
  .vv-ovnoot{ margin-top:8px; font-size:11.5px; color:var(--muted); line-height:1.5;
    max-width:70ch; }
  /* De maandtabel. Alleen de kolommen; de letters, de lijntjes en het inklappen op een
     telefoon komen van .vv-bvkop en .vv-bvrij, die allebei ook op deze rijen staan. */
  .vv-ovkop, .vv-ovrij{ grid-template-columns:86px 62px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .vv-ovgroen{ color:var(--vv-ok-tx); font-weight:600; }
  .vv-ovrood{ color:var(--vv-fout-tx); font-weight:600; }
  /* ── deel 5c, de rij per verkoper en de teamboom ───────────────────────────────────────
     Weer alleen de KOLOMMEN; de letters, de lijntjes en het inklappen op een telefoon komen
     van .vv-bvkop en .vv-bvrij, die allebei ook op deze rijen staan. */
  /* RONDE C: ACHT kolommen in plaats van zeven, want de kolom Kosten komt erbij. De
     naamkolom en de twee smalle aantalkolommen geven de ruimte: 1.6fr wordt 1.45fr en
     74px wordt 66px. Op een telefoon verandert er niets, want .vv-bvrij klapt daar al
     naar een kolom met data-lab ervoor. */
  .vv-ovvkop, .vv-ovvrij{ grid-template-columns:minmax(0,1.45fr) 66px 66px minmax(0,1fr) minmax(0,1.05fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr); }
  /* De regel 'Zelf aangemeld' is geen mens; een lichte achtergrond zegt dat zonder woorden. */
  .vv-ovvzelf{ background:var(--vv-navy-zacht); border-radius:7px;
    padding-left:7px; padding-right:7px; }
  .vv-ovsom{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
    font-size:12px; color:var(--muted); line-height:1.6; }
  .vv-ovsom b{ color:var(--vv-navy); }
  /* DE TEAMBOOM. Het inspringen gebeurt met een marge die het scherm per diepte meegeeft; het
     streepje links maakt zichtbaar dat een kaart ONDER de kaart erboven hangt. Op een smal
     scherm klapt de rechterkant onder de naam, zodat er niets horizontaal weg hoeft. */
  .vv-ovbk{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    flex-wrap:wrap; border:1px solid var(--line); border-left:3px solid var(--vv-oranje);
    border-radius:9px; padding:9px 11px; margin-top:7px; background:#fff; }
  .vv-ovbk-l{ min-width:0; flex:1 1 180px; }
  .vv-ovbk-n{ display:block; font-weight:700; font-size:13.5px; color:var(--vv-navy);
    overflow-wrap:anywhere; }
  .vv-ovbk-r{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; }
  .vv-ovbk-c{ font-size:13px; font-weight:600; color:var(--vv-navy); white-space:nowrap; }
  .vv-ovbk-c i{ display:block; font-style:normal; font-size:10px; font-weight:700;
    color:var(--muted); }
  /* GROEN EN ROOD MOETEN WINNEN VAN .vv-ovbk-c. Die zet color op marine en staat LATER in dit
     bestand dan .vv-ovgroen en .vv-ovrood; bij gelijke zwaarte wint de laatste, dus stond elk
     resultaat in de boom marine en was de kleurcodering dood. Gevonden in de browserproef:
     Laura's resultaat van min 450 euro stond niet rood. Twee klassen samen wegen zwaarder dan
     een, dus deze twee regels winnen altijd, waar ze ook staan. */
  .vv-ovbk-c.vv-ovgroen{ color:var(--vv-ok-tx); }
  .vv-ovbk-c.vv-ovrood{ color:var(--vv-fout-tx); }
  /* 3 NOV 2026: PRECIES DEZELFDE VAL, EEN KLASSE VERDEROP. .vk-kpi-g (het grote getal in een
     tegel) zet color op marine en staat LATER in dit bestand dan .vv-ovgroen/.vv-ovrood, dus
     een gekleurde tegel zou zwart blijven. Twee klassen samen wegen zwaarder dan een, dus
     deze twee regels winnen altijd. Zonder hen zou de kleur op de resultaat-tegels stil niets
     doen en zou de proef erop groen staan terwijl het scherm zwart blijft. */
  .vk-kpi-g.vv-ovgroen{ color:var(--vv-ok-tx); }
  .vk-kpi-g.vv-ovrood{ color:var(--vv-fout-tx); }
  /* 3 NOV 2026: WAT AANKLIKBAAR IS, MOET ER OOK AANKLIKBAAR UITZIEN. Een rij of kaart die een
     verkoper opent krijgt een handje en licht op bij het zweven. Geen nieuwe kleur: dezelfde
     zachte marine die de sectie al gebruikt. */
  .vv-look .vv-klik{ cursor:pointer; }
  .vv-look .vv-klik:hover{ background:var(--vv-navy-zacht); }
  /* De uitklap onder een maand. Zelfde inspringing en zelfde zachte achtergrond als de rest
     van de sectie; het is een regel die openvouwt, geen venster dat eroverheen komt. */
  .vv-look .vv-vdopen{ background:var(--vv-navy-zacht); border-radius:8px;
    padding:10px 12px; margin:0 0 6px; }
  /* ══ RONDE A: DE OPMAAK VAN DE VERKOPERSVOLGER NAAR DE PROTOTYPE (26 okt 2026) ══════════
     ALLES HIERONDER HANGT ONDER .vv-look, de klasse op het vak van deze sectie. Dat is geen
     schoonheid maar een GRENDEL: .card is in deze console nergens gedefinieerd (de sectie
     tekent kaarten die tot nu toe gewoon doorzichtige vakjes waren), dus een losse .card-regel
     zou elk ander scherm van het CRM raken. Zo kan dat niet, en kan een latere wijziging aan
     de Verkopersvolger nooit het Klantenbestand of de Leads meeslepen.
     WAT HIER NIET GEBEURT: er wordt geen enkel getal, geen enkel veld en geen enkele actie
     aangeraakt. Alleen hoe het eruitziet. */
  /* de sectie zelf: een lichtgrijze ondergrond binnen het witte paneel, zodat witte kaarten
     erop zichtbaar worden. Zonder deze ondergrond staat wit op wit en zie je geen kaart. */
  .vv-look{ background:var(--bg); border-radius:12px; padding:14px; }
  .vv-look .card{ background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:16px 18px; margin:0 0 14px; box-shadow:var(--shadow-sm); }
  .vv-look .card:last-child{ margin-bottom:0; }
  .vv-look .vv-gtitel{ font-size:15px; }
  /* de tabbladenrij staat BOVEN de kaarten en hoort bij de sectie, niet in een kaart */
  .vv-look .vv-tabs{ background:#fff; border:1px solid var(--line); }
  /* ── de tegels: gelijke hoogte en een raster dat niet afbreekt ──────────────────────── */
  .vv-look .vk-kpis{ grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); align-items:stretch; }
  .vv-look .vk-kpi{ height:100%; background:#fff; border:1px solid var(--line); }
  /* ── de tabellen: kolomkoppen in kleinkapitaal, zoals de prototype. De lijntjes en het
        inklappen op een telefoon komen van .vv-bvkop en .vv-bvrij, die blijven zoals ze zijn. */
  .vv-look .vv-bvkop{ text-transform:uppercase; letter-spacing:.045em; font-size:10.5px; }
  /* ── DE GRAFIEK ─────────────────────────────────────────────────────────────────────────
     Vier dingen: ruimte tussen de staven, een schaal met drie bedragen, gridlijnen op die drie
     hoogtes, en een nullijn die je ziet. De HOOGTES van de staven en de lijn zijn met geen
     regel aangeraakt; ze komen uit dezelfde vvOVGrens() als voorheen. */
  .vv-look .vv-ovgr{ padding-left:68px; }
  .vv-look .vv-ovbars{ gap:5px; }
  .vv-look .vv-ovbar{ min-width:5px; }
  .vv-look .vv-ovfill{ border-radius:3px; }
  .vv-ovgrid{ position:absolute; left:0; right:0; height:0; border-top:1px solid var(--line);
    pointer-events:none; }
  .vv-ovgrid-nul{ border-top-color:var(--vv-navy); opacity:.38; }
  .vv-ovschl{ position:absolute; left:0; width:62px; text-align:right; transform:translateY(50%);
    font-size:10px; color:var(--muted); white-space:nowrap; pointer-events:none; }
  .vv-look .vv-ovnul{ border-top:0; }
  .vv-look .vv-ovlabs{ margin-left:68px; }
  .vv-look .vv-ovassen{ margin-left:68px; }
  /* ── de teamboom: kaartjes in plaats van losse regels ───────────────────────────────── */
  .vv-look .vv-ovbk{ background:#fff; border:1px solid var(--line); border-radius:11px;
    padding:9px 12px; margin:0 0 7px; box-shadow:0 1px 2px rgba(20,33,61,.05); }
  /* ── HET INSTELLINGENSCHERM ─────────────────────────────────────────────────────────────
     Label BOVEN het veld in plaats van ernaast, in een raster van twee kolommen op een breed
     scherm en een op een telefoon, met de uitleg eronder. Dit is dezelfde markup als
     voorheen: alleen .vv-rij wisselt van een rij naar een kolom, en de kaart wordt een raster.
     DE RUWE SLEUTELNAAM (autonomoPct, teamAandeel, ...) gaat van het scherm af. Hij blijft in
     de html staan zodat hij met de ontwikkelaarsgereedschappen nog te vinden is, maar hij
     staat niet meer in het label en ook niet in de voorleestekst. */
  .vv-look .vv-inst{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:0 22px; align-items:start; }
  .vv-look .vv-inst > .vv-gtitel,
  .vv-look .vv-inst > .vv-gnote{ grid-column:1 / -1; }
  .vv-look .vv-rij{ flex-direction:column; align-items:stretch; gap:5px; padding:9px 0; }
  .vv-look .vv-lab{ order:1; }
  /* het invoervak en het percentage eronder, niet ernaast: met een veld over de volle breedte
     hing "= 50%" los tegen de rechterrand. Gezien in de renderproef. */
  .vv-look .vv-in{ order:2; width:100%; flex-direction:column; align-items:flex-start; gap:3px; }
  .vv-look .vv-pct{ font-size:11px; }
  .vv-look .vv-in .in{ width:100%; }
  .vv-look .vv-uitleg{ font-size:11.5px; line-height:1.5; }
  /* RONDE C-FIX: alleen de ruwe jsonb-sleutel van Instellingen, die daarvoor een EIGEN klasse
     kreeg. Stond hier .vv-sleutel, de gedeelde monospace-stijl: dat verborg zeven waarden mee. */
  .vv-look .vv-syskey{ display:none; }
  /* de bewaarbalk onderaan blijft een eigen kaart, met de knop rechts zoals in de prototype */
  .vv-look .vv-bewaar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  @media (max-width:820px){
    .vv-look{ padding:10px; }
    .vv-look .card{ padding:14px; }
    .vv-look .vv-ovgr{ padding-left:56px; }
    .vv-look .vv-ovlabs, .vv-look .vv-ovassen{ margin-left:56px; }
    .vv-ovschl{ width:50px; font-size:9.5px; }
  }
  /* ══ RONDE C: DE VERKOPERSLIJST ALS KAARTEN (26 okt 2026) ═════════════════════════
     ELKE SELECTOR HIERONDER BEGINT MET .vv-look, om dezelfde reden als in ronde A: .vk-kpi en
     .vk-kpis bestaan ook BUITEN deze sectie (ze tekenen de tegels van andere schermen), dus een
     losse regel op .vk-kpi zou die schermen meeslepen. .vv-vkaart, .vv-vkn, .vv-vkmerk,
     .vv-vkpil, .vv-vkcode, .vv-vkres en .vv-vksub bestaan nergens anders, maar staan hier toch
     onder .vv-look: een klasse die vandaag alleen hier voorkomt kan morgen elders opduiken, en
     dan is de grendel er al.
     DEZE REGELS STAAN NA '.vv-look .vk-kpis' VAN RONDE A, en dat moet zo: .vv-look .vv-vkaarten
     heeft precies dezelfde zwaarte, dus alleen de plek bepaalt welke van de twee de kolombreedte
     zet. Een verkoperskaart draagt meer tekst dan een tegel en heeft 248px nodig waar een tegel
     met 196px toekomt. */
  .vv-look .vv-vkaarten{ grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
  .vv-look .vv-vkaart{ gap:4px; padding:12px 13px; }
  .vv-look .vv-vkn{ display:flex; flex-wrap:wrap; gap:7px; align-items:baseline; }
  .vv-look .vv-vkaart .vv-vnaam{ font-size:14px; }
  .vv-look .vv-vkcode{ font-size:10px; color:var(--muted);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
  .vv-look .vv-vkmerk{ display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    font-size:11px; font-weight:700; margin-top:1px; }
  .vv-look .vv-vkpil{ background:var(--vv-navy-zacht); color:var(--vv-navy);
    border-radius:999px; padding:1px 8px; }
  .vv-look .vv-vkres{ font-size:21px; font-weight:800; margin-top:4px; }
  .vv-look .vv-vksub{ font-size:11.5px; color:var(--muted); line-height:1.45; }
  .vv-look .vv-vkaart .vv-vknop{ margin-top:8px; justify-content:flex-start; }
  .vv-bvsort{ cursor:pointer; user-select:none; }
  .vv-bvsort:hover{ color:var(--vv-navy); }
  .vv-bvsort-aan{ color:var(--vv-navy); }
  .vv-bvst-concept{ color:#8a5a00; }
  .vv-bvst-ondertekend{ color:var(--vv-ok-tx); }
  .vv-bvst-geannuleerd{ color:var(--vv-fout-tx); }
  .vv-bvrood{ color:var(--vv-fout-tx); font-weight:600; }
  .vv-bvsep{ color:var(--muted); }
  /* De knoppenbalk boven een geopende verkoop. De stopmaand heeft een eigen vakje ernaast,
     want een maand zetten vraagt een datum en niet alleen een klik. */
  .vv-bvbalk{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 0; }
  .vv-bvstop{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .vv-bvnote{ margin:10px 0 0; font-size:12px; color:var(--muted); line-height:1.55; max-width:80ch; }
  /* De afspraak en het contract: twee kolommen paren op een breed scherm, een op een telefoon. */
  .vv-bvgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2px 22px; }
  .vv-bvpaar{ display:flex; gap:12px; align-items:flex-start; padding:7px 0;
    border-bottom:1px solid var(--line); }
  .vv-bvpaar .vv-bvlab{ flex:0 0 42%; min-width:0; }
  .vv-bvw{ flex:1 1 auto; min-width:0; font-size:13px; color:var(--vv-navy); font-weight:600;
    overflow-wrap:anywhere; }
  .vv-bvhash{ font-size:10px; }
  /* Het betaalschema. Een gemiste maand is rood, een gestopte maand grijs doorzichtig: de stand
     moet uit de REGEL blijken en niet alleen uit het woord in de laatste kolom. */
  .vv-bvlkop, .vv-bvlijn{ display:grid;
    grid-template-columns:84px minmax(0,1.4fr) 104px 104px minmax(0,1fr) 128px;
    gap:10px; align-items:center; }
  .vv-bvlkop{ font-size:11px; font-weight:700; color:var(--muted); padding-bottom:6px;
    border-bottom:1px solid var(--line); }
  .vv-bvlijn{ padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vv-bvlijn:last-of-type{ border-bottom:0; }
  .vv-bvym{ font-weight:700; color:var(--vv-navy); }
  .vv-bvl-gemist{ background:var(--vv-fout-bg); }
  .vv-bvl-gemist .vv-bvym{ color:var(--vv-fout-tx); }
  .vv-bvl-gestopt{ opacity:.6; }
  /* De contractteksten per taal. */
  .vv-ctrij{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) 150px;
    gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vv-ctvink{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
    color:var(--vv-navy); cursor:pointer; }
  /* Een vinkje mag niet uitgerekt worden door de algemene input-regel van dit bestand: dat is
     bij deel 3c in de browserproef gezien en daar met dezelfde vaste maat opgelost. */
  .vv-ctvink input[type=checkbox]{ width:17px; height:17px; flex:none; padding:0; margin:0; }
  .vv-ctblok{ padding:0 0 12px; display:flex; flex-direction:column; gap:8px; }
  .vv-ctarea{ width:100%; min-height:240px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px; line-height:1.5; resize:vertical; }
  @media (max-width:820px){
    /* DE FILTERS STAAN INGEKLAPT TOT IEMAND ZE OPENT. Acht keuzevelden onder elkaar duwen de
       verkopenlijst anders een heel scherm naar beneden; dat is in de browserproef op 390 px
       gezien. De knop zegt erbij hoeveel filters aanstaan, zodat een lege lijst nooit een
       raadsel is. */
    .vv-bvtog{ display:inline-flex; }
    .vv-bvf{ display:none; }
    .vv-bvf-aan .vv-bvf{ display:flex; }
    .vv-bvkop, .vv-bvlkop{ display:none; }
    .vv-bvrij, .vv-bvlijn{ grid-template-columns:1fr; gap:3px; padding:11px 0; }
    .vv-bvrij > span:not(.vv-vnaam):not(.vv-vknop)::before,
    .vv-bvlijn > span:not(.vv-bvym):not(.vv-vknop)::before{ content:attr(data-lab); font-size:11px;
      color:var(--muted); margin-right:6px; }
    .vv-bvrij .vv-vknop, .vv-bvlijn .vv-vknop{ justify-content:flex-start; margin-top:5px; }
    .vv-ctrij{ grid-template-columns:1fr; gap:5px; }
    .vv-bvpaar{ flex-direction:column; gap:2px; }
    .vv-bvpaar .vv-bvlab{ flex:none; }
  }


  /* ── DEEL 3e (25 okt 2026): zijn resultaten en het scorebord ────────────────────────────
     Alles hangt aan .vk-, net als de rest van het verkopersscherm, dus niets hiervan kan een
     ander scherm raken. Dezelfde tokens als de hele Verkopersvolger (var(--vv-*)), geen
     nieuwe kleuren. WERKT OP 390 px: de vier rasters klappen onder 820 px tot kaartjes met
     het opschrift ervoor, en de kaartjes bovenaan staan dan onder elkaar. */
  .vk-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px;
    margin:12px 0 0; }
  .vk-kpi{ display:flex; flex-direction:column; gap:2px; padding:10px 12px;
    border:1px solid var(--line); border-radius:11px; background:#fff; min-width:0; }
  .vk-kpi-l{ font-size:11px; font-weight:700; color:var(--muted); }
  .vk-kpi-g{ font-size:21px; font-weight:800; color:var(--vv-navy); overflow-wrap:anywhere; }
  .vk-kpi-s{ font-size:11px; color:var(--muted); line-height:1.4; }
  .vk-leider{ margin:10px 0 0; font-size:13px; font-weight:600; color:var(--vv-navy); }
  .vk-note{ margin:10px 0 0; background:#f7f9fc; border:1px solid var(--line); border-radius:9px;
    padding:9px 11px; font-size:13px; color:var(--vv-navy); }
  .vk-hint{ margin-top:9px; line-height:1.55; max-width:80ch; }
  /* de teller en de voortgangsbalk naar het volgende niveau */
  .vk-teller{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .vk-teller-n{ font-size:30px; font-weight:800; color:var(--vv-navy); }
  .vk-balk{ height:10px; border-radius:6px; background:var(--line); overflow:hidden; margin-top:10px; }
  .vk-balk-in{ height:100%; background:var(--vv-oranje); }
  .vk-balk-tx{ margin-top:6px; font-size:12px; }
  .vk-verdien{ margin:0; padding-left:20px; line-height:1.6; font-size:13px; color:var(--ink); }
  .vk-verdien li{ margin:3px 0; }
  /* de vier lijsten: klanten, maanden, een detail en uit je team */
  .vk-kkop, .vk-krij{ display:grid; grid-template-columns:96px minmax(0,1.6fr) 96px 104px 104px 104px minmax(0,1fr);
    gap:10px; align-items:center; }
  .vk-mkop, .vk-mrij{ display:grid; grid-template-columns:minmax(0,1.4fr) 110px 120px 120px 120px;
    gap:10px; align-items:center; }
  .vk-dkop, .vk-drij{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 104px 128px 104px 150px;
    gap:10px; align-items:center; }
  .vk-dkop5, .vk-drij5{ grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 104px 128px 104px; }
  /* deel 4b: de regels van een afrekening zijn klant, omschrijving en bedrag. Deze regel zet
     ALLEEN de kolommen; de maat van de letters, de lijntjes en het inklappen op een telefoon
     komen van .vk-dkop en .vk-drij, net zoals bij .vk-dkop5 hierboven. Zo is er geen tweede
     kopie van die opmaak en kan er dus geen verschil tussen twee tabellen ontstaan. */
  .vk-afkop, .vk-afrij{ grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr) 110px; }
  /* en de maandenlijst van deel 4b: maand, te factureren, totaal, de stand en de knop. De kolom
     met de stand is met opzet RUIM: daar staat een pilletje in met een hele zin erin ("Ingediend,
     wacht op goedkeuring"), en in een smalle kolom breekt dat over drie regels. Dat is in een
     echte browser nagemeten voor dit getal gekozen. */
  .vk-fkop, .vk-frij{ grid-template-columns:minmax(0,1.1fr) 112px 112px minmax(0,1.35fr) 118px; }
  .vk-tmkop, .vk-tmrij{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.4fr) 110px 110px;
    gap:10px; align-items:center; }
  .vk-kkop, .vk-mkop, .vk-dkop, .vk-tmkop{ font-size:11px; font-weight:700; color:var(--muted);
    padding-bottom:6px; border-bottom:1px solid var(--line); margin-top:10px; }
  .vk-krij, .vk-mrij, .vk-drij, .vk-tmrij{ padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vk-krij:last-of-type, .vk-mrij:last-of-type, .vk-drij:last-of-type, .vk-tmrij:last-of-type{ border-bottom:0; }
  /* de pilletjes (lopend, gestopt, betaald, niet betaald) in dezelfde maat als de rest */
  .vk-pil{ display:inline-block; font-size:11px; font-weight:700; border-radius:999px;
    padding:2px 8px; background:#eef1f7; color:var(--vv-navy); }
  .vk-pil-ok{ background:#e7f6ec; color:var(--vv-ok-tx); }
  .vk-pil-fout{ background:var(--vv-fout-bg); color:var(--vv-fout-tx); }
  /* het scorebord: plaats, naam, balk, aantal */
  .vk-sbkeuze{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:10px 0 10px; }
  .vk-sbkeuze .in{ width:auto; min-width:150px; }
  .vk-sbrij{ display:grid; grid-template-columns:54px minmax(0,1.3fr) minmax(0,1fr) 120px;
    gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vk-sbrij:last-of-type{ border-bottom:0; }
  .vk-sbik{ background:#f7f9fc; border-radius:9px; }
  .vk-sbp{ font-weight:800; color:var(--vv-navy); }
  .vk-sbn{ font-weight:700; color:var(--vv-navy); }
  .vk-sbbalk{ display:block; height:9px; border-radius:5px; background:var(--line); overflow:hidden; }
  .vk-sbbalk-in{ display:block; height:100%; background:var(--vv-oranje); }
  /* ── deel 5d: de bonussectie op het verkoperscherm ─────────────────────────────────────── */
  /* EIGEN KLASSEN, en dat is hier geen smaakkwestie: de rij van het scorebord (.vk-sbrij) is
     een raster van VIER kolommen en een bonusrij heeft er VIJF, want de prijs staat erachter.
     Zou de bonusrij .vk-sbrij hergebruiken, dan zou de prijs op een tweede regel vallen en
     zou een latere wijziging aan het scorebord de bonussectie meeslepen. De plaats, de naam,
     de balk en het aantal gebruiken WEL de bestaande klassen: daar is de opmaak gelijk en een
     tweede kopie zou alleen uit elkaar kunnen lopen. */
  .vk-bnkaart{ border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    margin:12px 0 0; background:#fff; }
  .vk-bnkop{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
  .vk-bnnaam{ font-size:16px; font-weight:800; color:var(--vv-navy); overflow-wrap:anywhere; }
  /* de pil van een lopende of komende ronde: donkere amber op licht amber, want het oranje van
     het merk (--vv-oranje) is als TEKST op wit niet te lezen */
  .vk-bnpil{ background:#fdf0d8; color:#8a5a00; }
  .vk-bnmeta{ margin:4px 0 8px; font-size:12px; color:var(--muted); line-height:1.5;
    overflow-wrap:anywhere; }
  .vk-bnwon{ margin:10px 0 0; background:#e7f6ec; border:1px solid #bfe3cb; border-radius:9px;
    padding:8px 10px; font-size:13px; font-weight:700; color:var(--vv-ok-tx);
    overflow-wrap:anywhere; }
  .vk-bnrij{ display:grid; grid-template-columns:54px minmax(0,1.2fr) minmax(0,0.8fr) 110px 150px;
    gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .vk-bnrij:last-of-type{ border-bottom:0; }
  .vk-bnpr{ font-size:12px; font-weight:700; color:#8a5a00; overflow-wrap:anywhere; }
  /* "nog 8 tot het minimum": een label naast de zin, niet erin, want het begint met een
     kleine letter (het is in de proefversie een pil) */
  .vk-bnnog{ font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
  @media (max-width:820px){
    /* drie kolommen; de balk is op deze breedte al verborgen door de regel hieronder voor
       .vk-sbbalk, en een verborgen element bezet geen rastervak. De prijs krijgt daarom een
       eigen regel onder de rij in plaats van een vierde kolom die niet past. */
    .vk-bnrij{ grid-template-columns:44px minmax(0,1fr) 92px; }
    .vk-bnpr{ grid-column:1 / -1; }
  }
  @media (max-width:820px){
    .vk-kkop, .vk-mkop, .vk-dkop, .vk-tmkop{ display:none; }
    .vk-krij, .vk-mrij, .vk-drij, .vk-tmrij{ grid-template-columns:1fr; gap:3px; padding:11px 0; }
    .vk-krij > span:not(.vk-naam)::before, .vk-mrij > span:not(.vk-naam)::before,
    .vk-drij > span:not(.vk-naam)::before, .vk-tmrij > span:not(.vk-naam)::before{
      content:attr(data-lab); font-size:11px; color:var(--muted); margin-right:6px; }
    .vk-sbrij{ grid-template-columns:44px minmax(0,1fr) 92px; }
    .vk-sbbalk{ display:none; }
    .vk-sbkeuze .in{ width:100%; }
  }
  /* ══════════════════════════════════════════════════════════════════════════════════════════
     QUICK MOD 2: HET PANEEL VAN HET BELLETJE IN DE KOP        27 okt 2026
     -----------------------------------------------------------------------------------------
     De meldingen stonden in een tabblad, in een kaart over de hele breedte van de sectie. Ze
     staan nu in het paneel van het belletje in de kop: .bell-menu, dezelfde schil als het
     belletje in de topbalk. De RIJEN zijn dezelfde (.vk-mld, .vk-vlag, .vk-mld-tekst, en die
     staan hierboven in dit bestand), maar ze stonden in een kaart met 18px binnenruimte en
     staan nu in een paneel dat zelf geen binnenruimte heeft. Zonder de regels hieronder
     plakken de zinnen tegen de rand en valt de knop Bekijken naast de tekst klem.

     VIER DINGEN, NIET MEER: binnenruimte links en rechts, de rij mag afbreken, de knop
     Bekijken hoort op een eigen regel, en de bladerrij hoort niet 18px onder de laatste
     melding te zweven.

     WAAROM DEZE REGELS HIER EN NIET IN crm.html. .bell-menu en .bell-list horen bij de schil
     van de console en staan daar; dit is opmaak van de Verkopersvolger en hoort dus hier, in
     het bestand van deze sectie, met de vv-voorvoegsel-afspraak. Dat bestand wordt in crm.html
     DIRECT ACHTER het stijlblok geladen (zie de kop van dit bestand), dus .vv-belmenu (0,1,0)
     en .bell-menu (0,1,0) wegen even zwaar en wint .vv-belmenu op volgorde. Nagemeten.

     HET PANEEL IS 20px BREDER dan dat van de topbalk (360 in plaats van 340). Reden: de
     meldingen van de beheerders zijn hele zinnen met twee namen erin ("X aanvaardde om in het
     team van Y te komen"), en niet de drie woorden van een teamactiviteit. De grens van
     .bell-menu, max-width:calc(100vw - 32px), is hieronder VERVANGEN door een die vanaf het
     anker rekent; de reden staat daar.
     ══════════════════════════════════════════════════════════════════════════════════════════ */
  /* max-width EN NIET ALLEEN die van .bell-menu. Gevonden in de schermproef op 390 breed: het
     paneel hangt met right:0 aan het belletje, en dat belletje staat 36px van de rechterrand
     (de marge van .main plus de rand en de binnenruimte van .panel). De grens van .bell-menu,
     calc(100vw - 32px), rekent vanaf de SCHERMRAND en liet het paneel daardoor 4px links
     buiten het scherm vallen. Vanaf dat anker is calc(100vw - 40px) de juiste grens: dan
     blijft er aan de linkerkant 4px over. Nagemeten op 390, 360 en 320 breed. */
  .vv-belmenu{ width:360px; max-width:calc(100vw - 40px); }
  .vv-belmenu .vk-mld{ flex-wrap:wrap; padding:9px 15px; }
  /* een melding die iets te doen geeft houdt zijn eigen ingezette vlak: de binnenruimte van de
     regel hierboven zou dat vlak tot aan de rand van het paneel oprekken, dus hier marge in
     plaats van binnenruimte, samen weer 15px */
  .vv-belmenu .vk-mld-doen{ margin:0 7px; padding:9px 8px; }
  /* DE KNOP BEKIJKEN OP EEN EIGEN REGEL. In de kaart van het tabblad was de rij zo breed dat
     de vlag, de zin en de knop naast elkaar pasten. In een paneel van 360 houdt de knop 76px
     over voor een zin van vier regels, en dan staat de melding als een smalle kolom naast een
     knop. Met deze ondergrens past de knop niet meer op dezelfde regel, breekt de rij af (zie
     flex-wrap hierboven) en komt de knop er rechts onder. Gezien in de schermproef. */
  .vv-belmenu .vk-mld-tekst{ min-width:60%; }
  .vv-belmenu .vk-mld .btn{ margin-left:auto; }
  .vv-belmenu .pager{ margin:0; padding:10px 15px 12px; border-top:1px solid var(--line); }
  .vv-belmenu .bell-empty .muted{ margin-top:5px; font-size:12px; line-height:1.5; }
  /* ══════════════════════════════════════════════════════════════════════════════════════════
     QUICK MOD 3a: DE KLIKBARE RIJ VAN HET SCOREBORD VAN DE EIGENAAR      27 okt 2026
     -----------------------------------------------------------------------------------------
     De rij zelf is .vk-sbrij, DEZELFDE rij als op het scorebord van de verkoper, met dezelfde
     vier kolommen en dezelfde mobiele regel. Dat is met opzet: twee opmaken voor hetzelfde
     lijstje lopen na de eerste wijziging uit elkaar.
     HET ENIGE VERSCHIL is dat de rij van de eigenaar KLIKBAAR is: hij brengt hem naar de
     verkopen van die ene verkoper. Dat verschil moet je kunnen zien voor je klikt, dus staat
     hier een handje en een lichte achtergrond bij het aanwijzen.
     DE KLEUR IS DIE VAN .vk-sbik, de rij 'dat ben jij' op het verkoperscherm. Een tweede
     lichtgrijs ernaast zou alleen maar een tweede lichtgrijs zijn. */
  .vv-sbklik{ cursor:pointer; }
  .vv-sbklik:hover{ background:#f7f9fc; border-radius:9px; }
  /* ══════════════════════════════════════════════════════════════════════════════════════════
     DE MAANDPOPUP VAN DE VERKOPER-DETAILPAGINA                               3 nov 2026
     order VV-MAANDPOPUP, variant B
     -----------------------------------------------------------------------------------------
     WAAROM DEZE REGELS NIET ONDER .vv-look HANGEN, terwijl bijna alles in dit bestand dat wel
     doet. Dit venster staat in het ENE blad van het CRM (#sheet in crm.html), en dat blad
     hangt BUITEN de .vv-look-schil van de Verkopersvolger. Een regel .vv-look .vd-pop zou dus
     nooit aankomen. Daarom staan ze hier zonder schil, en daarom begint elke naam met vd-:
     dat voorvoegsel bestaat nergens anders in dit CRM (nagemeten over crm.html,
     klantenbestand.css en dit bestand), dus er is niets om tegenaan te botsen.

     DE BREEDTE. Het gewone blad is 640 breed (.sheet in crm.html). De kostentabel van sectie 2
     heeft ZEVEN kolommen: een naam met een uitlegregel eronder en zes bedragen. Zes bedragen
     van de vorm "EUR 1.234,56" vragen samen ruim 400, en dan blijft er voor de naam 240 over
     terwijl de uitlegregel ("3 nieuwe klanten: ..., 50% van het CRM-deel ...") daar niet in
     past. Met 960 houdt de naamkolom 520 en breekt die regel op twee of drie regels in plaats
     van tien. 94vw ernaast zodat er op een smal scherm niets buiten valt; onder de 760 gaat de
     tabel over op schuiven (zie onderaan).

     DE UITLIJNING. crm.html zet th,td op text-align:left (regel 391). Bedragen horen rechts,
     anders staan de centen niet onder elkaar. .vd-pop-tbl th/.vd-pop-tbl td weegt (0,1,1) en
     wint van die (0,0,1); .vd-pop-tbl .vd-l weegt (0,2,0) en zet de twee tekstkolommen weer
     terug naar links. Nagemeten, en er is in deze drie bestanden geen regel die zwaarder of
     even zwaar op dezelfde cellen weegt.
     ══════════════════════════════════════════════════════════════════════════════════════════ */
  .sheet.vd-sheet{ max-width:min(960px, 94vw); padding:18px 20px; }
  .vd-pop-kop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    flex-wrap:wrap; margin:0 0 14px; padding-bottom:11px;
    border-bottom:1px solid var(--line); }
  .vd-pop-t{ font-size:17px; font-weight:800; color:var(--vv-navy); line-height:1.25;
    min-width:0; overflow-wrap:anywhere; }
  .vd-pop-nav{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; flex:none; }
  .vd-pop-body{ display:flex; flex-direction:column; gap:7px; }
  /* De sectiekop in de stijl van .vv-gtitel: hetzelfde marine, hetzelfde formaat. Wel met een
     eigen naam en niet .vv-gtitel zelf, want die klasse hangt wel onder de .vv-look-schil. */
  .vd-pop-sec{ font-size:13px; font-weight:800; color:var(--vv-navy);
    margin:14px 0 2px; padding-bottom:5px; border-bottom:1px solid var(--line); }
  .vd-pop-sec:first-child{ margin-top:0; }
  .vd-pop-tbl{ overflow-x:auto; }
  .vd-pop-tbl table{ width:100%; border-collapse:collapse; }
  .vd-pop-tbl th, .vd-pop-tbl td{ text-align:right; padding:8px 9px; font-size:13px;
    white-space:nowrap; }
  .vd-pop-tbl .vd-l{ text-align:left; white-space:normal; overflow-wrap:anywhere; }
  .vd-pop-tbl tfoot td{ font-weight:800; color:var(--vv-navy); border-bottom:0;
    border-top:2px solid var(--line); }
  /* De uitlegregel onder een naam: dezelfde maat en kleur als .vv-uitleg elders in deze
     sectie, maar die klasse hangt onder .vv-look en komt hier niet aan. */
  .vd-pop-u{ display:block; margin-top:3px; font-size:12px; font-weight:400; line-height:1.45;
    color:var(--muted); white-space:normal; overflow-wrap:anywhere; }
  .vd-pop-note{ font-size:12.5px; line-height:1.55; color:var(--muted); margin:6px 0 0; }
  .vd-pop-let{ color:var(--vv-fout-tx); font-weight:600; }
  .vd-pop-leeg{ font-size:13.5px; color:var(--muted); padding:8px 0 2px; }
  /* HET REKENBLOK. Twee kolommen: het woord links, het bedrag rechts, zodat de bedragen onder
     elkaar staan en je de aftrekking kunt volgen. Geen tabel: er zijn geen rijen en kolommen
     met koppen, alleen paren. */
  .vd-pop-calc{ display:grid; grid-template-columns:1fr auto; gap:5px 16px;
    background:var(--vv-navy-zacht); border-radius:10px; padding:12px 14px; margin-top:4px;
    font-size:13.5px; }
  .vd-pop-calc > span:nth-child(even){ text-align:right; white-space:nowrap; }
  .vd-pop-op{ color:var(--muted); }
  .vd-pop-tt{ font-weight:800; color:var(--vv-navy); border-top:1px solid #d7dde9;
    padding-top:5px; margin-top:2px; }
  /* DE DERDE KEER DAT DEZE VAL TOESLAAT, en deze keer in een echte browser gevonden in plaats
     van op papier. De regel hierboven zet color op marine en staat LATER in dit bestand dan
     .vv-ovgroen en .vv-ovrood (regel 326 en 327). Die twee wegen (0,1,0) en .vd-pop-tt weegt
     ook (0,1,0), en bij gelijk gewicht wint de laatste. Het resultaat en het cumulatief
     stonden daardoor MARINE in plaats van groen of rood: rgb(20,33,61) gemeten in Chromium,
     terwijl er rgb(22,101,52) hoorde te staan. De twee regels hieronder wegen (0,2,0) en
     winnen dus op gewicht en niet op volgorde. Zelfde reparatie als bij .vv-ovbk-c (het
     Overzicht) en .vk-kpi-g (de tegels van laag 109); nagemeten, nu rgb(22,101,52) voor winst
     en rgb(153,27,27) voor verlies. */
  .vd-pop-tt.vv-ovgroen{ color:var(--vv-ok-tx); }
  .vd-pop-tt.vv-ovrood{ color:var(--vv-fout-tx); }
  .vd-pop-sp{ margin-top:11px; }
  /* DE CONTROLEREGEL. Hij hoort op te vallen: hij staat er alleen als de detailregels NIET op
     het maandtotaal uitkomen, en dat is iets om te melden. Dezelfde rode set als .vv-fout. */
  .vd-pop-alarm{ background:var(--vv-fout-bg); color:var(--vv-fout-tx);
    border:1px solid var(--vv-fout-ln); border-radius:9px; padding:9px 11px; margin-top:10px;
    font-size:13px; font-weight:600; line-height:1.5; }
  @media(max-width:760px){
    .sheet.vd-sheet{ padding:14px; }
    .vd-pop-t{ font-size:15.5px; }
    .vd-pop-tbl th, .vd-pop-tbl td{ padding:7px; font-size:12.5px; }
  }

  /* ── DE KIESKNOP VAN DE FISCALE DOCUMENTEN (laag 123, 5 nov 2026) ───────────────────────
     TWEE regels, allebei cosmetisch, allebei onder .vv-look zodat ze de rest van de console
     niet raken. Het VERBERGEN van de file-input staat met opzet NIET hier maar inline in
     crm-app.js: deze css draagt een stempel dat met de hand mee moet en crm-app.js wordt
     door het deploy-script zelf herstempeld. Zou het verbergen hier staan en kwam dit
     bestand een keer oud aan, dan stond de kale "Kies bestand / geen bestand geselecteerd"
     er weer NAAST de nette knop. Nu kost een oude css hooguit een pijl in plaats van een
     handje en een bestandsnaam die niet afgekapt wordt. */
  .vv-look .vv-dockies{ cursor:pointer; display:inline-block; }
  .vv-look .vv-docnaam{ display:inline-block; vertical-align:middle; max-width:260px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ── DE KIESKNOP VAN DE VERKOPERSFACTUUR (laag 124, 5 nov 2026) ─────────────────────────
     EEN regel, cosmetisch, onder .vk-form: dat is de scope die de verkoperskant gebruikt, en
     het vak van de verkoper draagt GEEN .vv-look, dus de klasse van laag 123 zou daar nooit
     gelden. Nagekeken en niet aangenomen.
     Dit is letterlijk dezelfde vorm als .upl in crm.html (de logo-upload): een knop in een
     kolom-flex die niet over de volle breedte hoort te rekken. Het VERBERGEN van de input
     staat met opzet NIET hier maar inline in crm-app.js, om dezelfde reden als in laag 123:
     deze css draagt een stempel dat met de hand mee moet. */
  .vk-form .vk-kiesknop{ align-self:flex-start; cursor:pointer; }