/* KobiVoice Werkplek - de opmaak.
 *
 * ═══ WAAROM DIT EEN APART BESTAND IS ═══
 *
 * Dit stond tot 22 augustus 2026 als <style>-blok in index.html, samen met
 * ruim vijfduizend regels JavaScript, in één bestand van 435 kB. Dat had twee
 * gevolgen die allebei elke dag telden:
 *
 *   1. De Content-Security-Policy moest `script-src 'unsafe-inline'` dragen,
 *      want een inline <script> is per definitie inline. Daarmee hield de CSP
 *      geen enkele geïnjecteerde regel script tegen.
 *   2. Elke wijziging aan één knop raakte een bestand van 435 kB: de browser
 *      haalde de hele werkplek opnieuw op, en in git was geen enkele
 *      wijziging meer te lezen naast de rest.
 *
 * De opmaak staat nu hier, het gedrag in werkplek.js, en index.html is nog
 * alleen de structuur.
 *
 * ⚠️ `style="..."` OP ELEMENTEN BLIJFT BESTAAN. Er staan er ruim honderd, en
 * die vragen `style-src 'unsafe-inline'`. Dat is een andere en veel kleinere
 * zorg dan script: met een style-attribuut valt geen code uit te voeren.
 */

/* De belwerkplek, in KobiVoice-kleuren.
   Donkere zijbalk, witte werkvlakken, wachtrijen met schakelaars, agenten, contacten,
   kiestoetsen als overlegvenster. Op mobiel verwijst hij naar de app. */
/* ═══ DE TOKENS KOMEN UIT WERKPLEK NEXT ═══
   Next is de visuele bron van waarheid; deze waarden zijn er letterlijk uit
   overgenomen. Drie grijzen wijken bewust af - zie hieronder, en
   WERKPLEK-NEXT-TRANSPLANTATIE.md voor de meting. */
:root{--ink:#08201D;--zij:#0B2B27;--zij2:#0F3833;--zij-lijn:#1B4540;
--petrol:#0F5F5B;--petrol-l:#16847C;--teal:#2FD4BE;
--groen:#37C08F;--oranje:#E8A33C;--rood:#E0654B;--paars:#8A7BD8;
/* ⚠️ `--rood` IS EEN VLAKKLEUR, GEEN TEKSTKLEUR.
   Next' rood haalt 3,42 op wit; WCAG AA vraagt 4,5 voor tekst tot 18 pixels.
   Als achtergrond van een gevulde knop met witte letters klopt hij (5,45), en
   als stipje geldt de eis niet - een punt van zes pixels is geen tekst.
   Maar op elf plekken stond hij als KLEUR VAN DE LETTERS: het cijfer "gemist"
   op het dashboard, het pijltje bij een gemist gesprek, een foutmelding van
   het CRM. Daar hoort deze donkerdere variant: dezelfde kleur, 5,10 op wit. */
--rood-tekst:#C4402C;
/* ⚠️ EN HETZELFDE GELDT VOOR GROEN EN ORANJE. Dat was 22 september nog niet
   opgelost: `--groen` (#37C08F) stond als LETTERKLEUR op vier plekken en haalt
   2,13 op wit - het pijltje bij een inkomend gesprek, de vinkjes in de
   CRM-catalogus, de vinkjes in de productiegereedheid en het woord "Aangemeld"
   in de statusstrip. `--oranje` (#E8A33C) deed het op twee plekken en haalt
   1,99. Als vlakkleur met witte letters kloppen ze allebei; als letters niet.
   Zelfde oplossing als bij rood: dezelfde kleur, donkerder, met een eigen naam
   zodat de vergissing niet opnieuw te maken is. 5,27 en 5,91 op wit. */
--groen-tekst:#1E7A5A;--oranje-tekst:#8A5A12;
--paper:#F4F6F4;--wit:#FFFFFF;--kaart:#FFFFFF;--text:#182521;--soft:#55625E;
--line:#E3E7E2;--line-2:#EFF2EE;
/* ⚠️ `--faint` BLIJFT #67716D EN WORDT NIET NEXT' #6E7A76.
   Gemeten: #6E7A76 haalt 4,46 op wit en 4,11 op papier, waar WCAG 2.1 AA er
   4,5 vraagt. #67716D haalt 5,05 en 4,69. Het raakt de tweede regel van elke
   lijst ("toestel 9981"), de letters onder de kiestoetsen en het pijltje in de
   statuspil - precies de tekst die je scheef aankijkt en dan toch moet lezen.
   Het is een donkerdere versie van dezelfde kleur, geen andere kleur. Een
   previewkleur die door de ondergrens zakt is een previewbug, geen ontwerp. */
--faint:#67716D;
--schaduw:0 1px 2px rgba(8,32,29,.04), 0 10px 28px -18px rgba(8,32,29,.22);
--fh:'Bricolage Grotesque',-apple-system,system-ui,sans-serif;
--fb:'Instrument Sans',-apple-system,system-ui,sans-serif;
--fm:ui-monospace,'SF Mono',Menlo,monospace;
--r:10px}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
/* ═══ HET SCROLLMODEL IS DAT VAN NEXT ═══
   Tot 23 augustus stond `body` op `height:100vh;overflow:hidden` en scrolde
   alleen `.scherm`. Next laat de PAGINA scrollen en plakt zijbalk en topbalk
   vast met `position:sticky`. Dat is geen detail: het bepaalt waar de
   schuifbalk staat, hoe ver een lange tabel doorloopt, en of de adresbalk van
   een telefoon meebeweegt. */
/* De werkvloer is geen kaal wit vlak: twee heel subtiele merkgloedjes
   (teal rechtsboven, petrol linksonder) op de papiertint, vast verankerd
   zodat ze niet meescrollen. Panelen en tekst houden exact hun contrast -
   dit is sfeer, geen kleur die iets betekent. */
body{font-family:var(--fb);font-size:14px;line-height:1.5;color:var(--text);
  background:
    radial-gradient(52% 44% at 100% 0%, rgba(47,212,190,.06), transparent 62%),
    radial-gradient(46% 42% at 0% 100%, rgba(15,95,91,.05), transparent 58%),
    var(--paper);
  background-attachment:fixed,fixed,scroll;
  -webkit-font-smoothing:antialiased}
/* ⚠️ EEN KOP ZONDER KLASSE KREEG DE BROWSERSTANDAARD. `<h2>Webhook instellen</h2>`
   in het CRM-venster kwam uit op 21px/700 - de maat die Chrome kiest als
   niemand iets zegt - naast koppen van 14,5/600 op hetzelfde scherm. Next'
   schaal staat nu als bodem, zodat er geen kop meer kan bestaan die niemand
   heeft gemaat. Elke context die er iets van vindt, wint hiervan. */
h1,h2,h3,h4{font-family:var(--fh);letter-spacing:-.015em;font-weight:600}
h1{font-size:25px}
h2,h3{font-size:14.5px}
h4{font-size:13px}
.num,td.num,.cijfer,.wa{font-family:var(--fm);font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font:inherit}

/* ═══ DE SCHIL, ZOALS NEXT HEM TEKENT ═══
   Een raster van 236 pixels naast de rest, zijbalk en topbalk vastgeplakt.
   Niet: een flexrij met een vak dat zelf scrollt - dat was de oude opzet. */
.schil{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

/* ---- zijbalk ---- */
.zijbalk{background:var(--zij);color:#C8D8D4;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.zb-merk{display:flex;align-items:center;gap:9px;padding:18px 16px 14px;font-family:var(--fh);font-weight:600;font-size:15px;color:#fff;letter-spacing:-.02em}
.zb-merk .kvmerk{width:24px;height:24px;border-radius:7px;flex:none}

.inlogkaart .kvmerk{width:40px;height:40px;display:block;margin:0 auto 14px}
.zijbalk nav{padding:0 8px;display:flex;flex-direction:column;gap:1px}
.zijbalk nav button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:7px;font-size:13.5px;font-weight:500;color:#B7CBC6;text-align:left;position:relative;transition:background .13s,color .13s}
.zijbalk nav button svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.zijbalk nav button:hover{background:var(--zij2);color:#E6F2EF}
/* Next markeert het actieve item met een gevuld vlak PLUS een teal balkje aan
   de linkerkant. Alleen een vlak in petrol - de oude opzet - leest als een
   knop die ingedrukt staat; het balkje leest als "je bent hier". */
.zijbalk nav button.aan{background:var(--zij2);color:#fff}
.zijbalk nav button.aan::before{content:'';position:absolute;left:-8px;top:6px;bottom:6px;width:3px;background:var(--teal);border-radius:0 3px 3px 0}
.zijbalk nav .scheiding{flex:1}
/* De teller naast een menu-item: hoeveel voicemails, hoeveel ongelezen
   berichten, hoeveel wachtenden. Oranje wanneer er iemand wacht - dat is het
   enige geval waarin het menu om aandacht mag vragen. */
.zijbalk nav .tel,.zijbalk nav .telbal{margin-left:auto;font-family:var(--fm);font-size:10.5px;font-weight:600;background:var(--petrol);color:#fff;border-radius:20px;padding:1px 6px}
.zijbalk nav .telbal.wacht{background:var(--oranje);color:#2A1C05}
/* De kop van een menugroep. Klein, rustig en niet aanklikbaar - hij deelt de
   lijst in en vraagt zelf geen aandacht. Eerste kop zonder marge boven, anders
   valt hij los van de merknaam erboven. */
/* #6E8B85 haalde 4,10 op de donkere zijbalk; 4,5 is de eis. #75938D haalt
   4,55 en is dezelfde kleur, een tikje lichter. */
/* Next zet hier #62807A; dat haalt 3,52 op de donkere zijbalk waar 4,5 de eis
   is. #75938D haalt 4,55 en is dezelfde kleur, een tikje lichter. */
.zijbalk nav .navkop{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#75938D;padding:16px 8px 6px;user-select:none}
.zijbalk nav .navkop:first-child{padding-top:6px}

/* ---- bovenbalk ---- */
.vlak{display:flex;flex-direction:column;min-width:0}
.top{height:56px;background:var(--wit);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:30}
/* De paginanaam links in de topbalk. Next noemt dit kruimels; er is er
   voorlopig maar één, want de werkplek is één laag diep. */
.kruimels{font-size:13px;color:var(--faint);display:flex;align-items:center;gap:7px;white-space:nowrap}
.kruimels b{color:var(--text);font-weight:600;font-family:var(--fh);font-size:14.5px}

/* ---- uitklap van de globale zoekfunctie ---- */
.zoekuit{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--wit);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(8,32,29,.35);
  padding:6px;z-index:70;max-height:min(70vh,460px);overflow-y:auto}
.zoekuit .kop{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:9px 11px 4px}
.zoekuit .tr{display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;border-radius:9px;
  text-align:left;cursor:pointer}
.zoekuit .tr:hover{background:var(--paper)}
/* De regel die met Enter gebeld wordt, moet je zonder zoeken kunnen aanwijzen.
   Alleen een lichte achtergrond is daarvoor te zwak - vandaar ook het streepje
   links, dat werkt ook voor wie kleur slecht onderscheidt. */
.zoekuit .tr.aan{background:rgba(15,95,91,.07);box-shadow:inset 3px 0 0 var(--petrol)}
.zoekuit .tr .avatar{width:28px;height:28px;font-size:11px;flex:none}
/* ⚠️ BLOCK. Deze twee stonden als inline-span in een span, en dan plakt
   "Bram de Wit" aan "toestel 9952". Overal elders in dit bestand zijn .naam en
   .sub divs; hier moesten het spans zijn omdat de rij zelf geen div-nesting
   verdraagt, dus zetten we het gedrag hier expliciet. */
.zoekuit .tr .info{min-width:0;flex:1;display:block}
.zoekuit .tr .naam{display:block;font-size:13.5px;font-weight:650;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoekuit .tr .sub{display:block;font-size:12px;color:var(--faint-op);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoekuit .tr .rechtsaf{font-size:11.5px;color:var(--faint);flex:none}
.zoekuit .niets{padding:16px 12px;font-size:13px;color:var(--soft-op)}
.top .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.pil{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);border-radius:100px;background:var(--wit);font-weight:600;font-size:13.5px;white-space:nowrap}
.pil:hover{background:var(--paper)}
.pil .bol{width:8px;height:8px;border-radius:50%;flex:none}
.pil .pijl{font-size:10px;color:var(--faint)}
/* Een mededeling, geen knop: dus ook geen hover die belooft dat er iets
   gebeurt als je klikt. Wisselen van uitbelnummer doe je in de telefoonkaart. */
/* Next tekent de avatar als een afgeronde vierkant van 30 pixels, niet als een
   rondje van 34. Dat is geen smaak: een vierkant met radius 9 staat rustiger
   in een rij naast rechthoekige kaarten, en de initialen krijgen meer breedte. */
.avatar{width:30px;height:30px;border-radius:9px;background:var(--petrol);color:#fff;
display:grid;place-items:center;font-family:var(--fm);font-weight:600;font-size:11px;flex:none}
/* Het stipje dat een toestand aangeeft. Één punt kleur in plaats van een
   gevulde pil - zie de opmerking bij .merkje. */
.stip{width:6px;height:6px;border-radius:50%;flex:none;background:var(--groen)}
.stip.gesprek{background:var(--oranje)}
.stip.dnd{background:var(--rood)}
.stip.pauze{background:var(--paars)}
.stip.offline{background:#5C6B67}

/* ---- keuzemenu's ---- */
/* ⚠️ EEN WIT VLAK MOET ZIJN EIGEN LETTERKLEUR ZETTEN. Deze uitklap zette wel
   een achtergrond maar geen `color`, en erfde er dus een. Zolang alles om hem
   heen licht was ging dat goed; sinds de belkaart een donker bedieningsvlak is
   (21 sep) erft hij daar #E8F0EE - lichte letters op wit, gemeten op 1,16 waar
   4,5 de eis is. "Uitbellen als" was daardoor onleesbaar: zes regels, inclusief
   de nummers waar je uit kiest. Gezien op Jacks scherm, 22 september.
   Wie een vlak zet, zet er de letterkleur bij. */
.popover{position:absolute;top:52px;right:0;background:var(--wit);color:var(--text);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(8,32,29,.35);min-width:230px;padding:8px;z-index:60}
/* Het profielmenu draagt sinds 22 augustus twee lijsten (verbonden
   toestellen én open sessies) en een knop met een naam erin. Op 230 px
   botsten die op zichzelf; 296 px is de smalste breedte waarop ze passen.
 *
 * ⚠️ EEN VASTE BREEDTE, EN DAT IS EEN BUGFIX. Hier stond `min-width:288px`.
 * Een absoluut geplaatst menu zonder `width` doet shrink-to-fit: het groeit
 * mee met zijn breedste regel. De toestelnamen dragen `white-space:nowrap`,
 * dus die regel werd breder dan het menu - en omdat het menu met `right:0`
 * vastzit, staken de regels er aan de LINKERKANT uit. Gemeten in de browser:
 * rij 274 px in een vak van 227 px, de naam begon 17 px buiten het menu en de
 * groene stip viel precies over de eerste letter ("Webwerkplek" met een groen
 * streepje door de W).
 *
 * Met een vaste breedte is de flexrij wél begrensd, en doet de
 * `text-overflow:ellipsis` op de naam het werk waarvoor hij bedoeld was. */
/* 320 px: bij 296 px werd juist de STANDAARDnaam ("Webwerkplek in de
   browser") naast een Afmelden-knop nog afgekapt. Afkappen hoort het
   vangnet te zijn voor een uitzonderlijk lange naam, niet de regel. */
#profielmenu{width:320px;max-width:calc(100vw - 24px)}
.popover button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:600;text-align:left}
.popover button:hover{background:var(--paper)}
.popover .kop{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:8px 11px 4px}
.popover .bol{width:8px;height:8px;border-radius:50%}
.profielkaart{padding:12px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.profielkaart b{display:block}
.profielkaart span{font-size:12.5px;color:var(--soft)}

/* ═══════════════════════════════════════════════════════════════════════════
   DE BOUWSTENEN VAN WERKPLEK NEXT
   ═══════════════════════════════════════════════════════════════════════════
   Elk scherm in Next is opgebouwd uit dezelfde zeven stukken: een .kop, een
   optionele .strip, een .rooster met .kaart-en, en daarbinnen .lijst/.rij,
   een tabel of een .cijferrij. Waar productie een eigen naam had voor
   hetzelfde ding staat die naam ernaast in de selector - dan is er ÉÉN
   definitie in plaats van twee die om voorrang vechten.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- schermen ---- */
/* ⚠️ DE PAGINA VULT HET SCHERM. Hier stond `max-width:1220px`, en op een breed
   scherm bleef daardoor een strook rechts onbenut - gemeten op een venster van
   1800 px: 344 px leeg, en op Jacks eigen scherm ruim 500. De grens staat nu zo
   ver weg dat geen gewone monitor hem raakt; hij bestaat alleen nog om op een
   32:9-scherm te voorkomen dat een rij drieduizend pixels breed wordt en de
   knop rechts een reis is.

   ⚠️ MAAR EEN REGEL TEKST GROEIT NIET MEE. Vullen is iets anders dan uitrekken:
   een zin van duizend pixels leest niet meer. Alles wat proza is houdt daarom
   zijn eigen leesmaat - zie `.slot,.hint,.paneel>p` hieronder. Gemeten op
   Belplan: die ene uitleg ging van 672 naar 1016 px voordat de maat er stond. */
.inhoud{padding:22px 24px 80px;max-width:2200px;width:100%}
/* De leesmaat. 78 tekens is de bovenkant van wat prettig leest; korter dan de
   kolom waarin hij staat verandert er niets, dus in een smalle kaart doet deze
   regel niets. */
.slot,.hint,.paneel>p{max-width:78ch}
.scherm{display:block}
@keyframes opkomst{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.scherm:not([hidden]){animation:opkomst .18s ease}
@media (prefers-reduced-motion:reduce){.scherm:not([hidden]){animation:none}}

/* ---- schermkop ---- */
.kop,.s-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.kop h1,.s-kop h1{font-family:var(--fh);font-size:25px;font-weight:600;letter-spacing:-.015em}
.kop .sub,.s-kop .slot{color:var(--faint);font-size:13.5px;margin-top:3px}
.sectiekop{font-family:var(--fh);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin:26px 0 10px;display:flex;align-items:center;gap:8px}

/* ---- kaart ----
   `.paneel` is de productienaam van hetzelfde ding en krijgt dus dezelfde
   vorm. Next zet de kop in een eigen strook met een lijn eronder; een kaart
   waarin kop en inhoud in één vak zitten leest als een alinea, niet als een
   kaart. */
/* ⚠️ GEEN SCHADUW MEER OP EEN GEWONE KAART. Toen elke kaart een schaduw droeg,
   tilde niets echt op: veertien blokken die allemaal een millimeter boven het
   papier zweven lezen als één vlak. De schaduw is nu voorbehouden aan het
   bedieningsvlak (de belkaart); de rest ligt plat op het papier en wordt
   begrensd door zijn rand. */
.kaart,.paneel{background:var(--kaart);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.kaart-kop{padding:13px 15px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
/* ⚠️ ER ZAT NIETS TUSSEN 30 PX EN 14,5 PX. De paginatitel en de kaartkoppen
   stonden zo ver uit elkaar dat het middenveld ontbrak: elke kaart riep even
   hard als de volgende. Zestien is genoeg om een kaartkop een kop te laten
   zijn zonder dat het een reclameregel wordt. */
.kaart-kop h2,.kaart-kop h3{font-family:var(--fh);font-size:16px;font-weight:650;letter-spacing:-.01em}
.kaart-lijf{padding:14px 15px}
/* Een `.paneel` draagt zijn eigen padding en heeft zijn kop binnenin staan.
   De kop trekt zich met negatieve marges tot de rand door, zodat de lijn
   eronder van rand tot rand loopt zoals bij Next. Dat scheelt het opnieuw
   inpakken van tweeëntwintig panelen, en het resultaat is hetzelfde. */
.paneel{padding:14px 16px}
.paneel>.kaart-kop{margin:-14px -16px 14px;padding:13px 15px}
.paneel>.kaart-kop:only-child{margin-bottom:-14px}
.paneel h2{font-family:var(--fh);font-size:16px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.paneel h2 .tel{font-size:12.5px;color:var(--faint);font-weight:500;font-family:var(--fm)}

/* ---- raster ---- */
.rooster{display:grid;gap:14px;align-items:start}
.rooster.r2{grid-template-columns:1fr 1fr}
.rooster.r3{grid-template-columns:repeat(3,1fr)}
.rooster.r-hoofd{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.rooster:not(.r2):not(.r3):not(.r-hoofd){grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
/* ⚠️ DEZELFDE `:not()`-KETEN, ANDERS WINT DE REGEL HIERBOVEN.
   Hier stond alleen `.rooster` en dat weegt (0,1,0), terwijl
   `.rooster:not(.r2):not(.r3):not(.r-hoofd)` op (0,4,0) staat. Een mediaquery
   verhoogt het gewicht niet - dus bleef het scherm op 490 pixels twee kolommen
   tonen, met de tekst in de rechterkolom één woord breed. Gemeten op
   Contacten. */
@media (max-width:1080px){
  .rooster.r2,.rooster.r3,.rooster.r-hoofd,
  .rooster:not(.r2):not(.r3):not(.r-hoofd){grid-template-columns:1fr}
}
.kolom{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ---- modules ----
   Rustige kaarten, geen marktplaats. De stand volgt de pilregel: Actief en
   Niet actief zijn routine (stipje), alleen Aangevraagd en Let op - de standen
   waar iets WACHT of KAPOT is - dragen een vlak. De oranje combinatie is
   dezelfde als bij de wachtrijmeldingen (gemeten op contrast, 22 aug). */
.mkaart .kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mkaart h2{font-size:15px}
.mtekst{font-size:13px;color:var(--soft);line-height:1.55;margin:0}
.mnoot{font-size:12px;color:var(--faint);margin:8px 0 0}
.macties{margin-top:14px;display:flex;gap:8px;align-items:center}
.mstip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap}
.mstip i{width:7px;height:7px;border-radius:50%;background:var(--groen);flex:none}
.mstip.uit{color:var(--faint)}
.mstip.uit i{background:var(--rand-3)}
.mpil{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;
font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
background:rgba(214,138,32,.13);border:1px solid rgba(214,138,32,.3);color:#8A5A12}
.mpil.let{background:rgba(196,64,44,.1);border-color:rgba(196,64,44,.3);color:var(--rood-tekst)}
/* de opzegknop is bewust stil: aanwezig, niet lokkend */
.macties .knop.stil{border-color:transparent;color:var(--faint)}
.macties .knop.stil:hover{border-color:var(--line);color:var(--text)}
.mod-voet{margin-top:18px}

/* ---- zoekrij: het zoekveld boven een lijst (Gesprekken, Contacten) ---- */
.zoekrij{display:flex;align-items:center;gap:9px;background:var(--wit);border:1px solid var(--line);
  border-radius:12px;padding:0 14px;margin:0 0 14px;max-width:520px;transition:border-color .15s,box-shadow .15s}
.zoekrij:focus-within{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(15,95,91,.10)}
.zoekrij svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round}
.zoekrij input{flex:1;border:0;background:none;font:inherit;font-size:14px;color:var(--text);
  padding:10px 0;outline:none;min-width:0}
.zoekrij input::placeholder{color:var(--faint)}
.zoekrij input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---- Contacten · Customer 360 ----
   Premium enterprise workspace: een compacte customer hero, daaronder "Nu
   relevant", en dan het hoofdgrid waarin COMMUNICATIE domineert (timeline
   links, ~64%) met een rustige klantcontext-rail rechts. Weinig randen,
   veel hiërarchie; kleur alleen semantisch. */
.c360{display:grid;grid-template-columns:minmax(320px,360px) minmax(0,1fr);gap:16px;align-items:start}
.c360-links{min-width:0;display:flex;flex-direction:column;gap:12px}
.c360-links .zoekrij{margin:0;max-width:none}
.c360-links .arij,.c360-links .ctrij{padding:9px 10px;border-radius:10px;
  transition:background .14s;cursor:pointer}
.c360-links .arij:hover,.c360-links .ctrij:hover{background:var(--paper)}
.c360-links .arij.aan,.c360-links .ctrij.aan{background:rgba(15,95,91,.07);
  box-shadow:inset 3px 0 0 var(--petrol)}
.c360-links .arij.aan .naam,.c360-links .ctrij.aan .naam{font-weight:750}
.c360-werk{min-width:0;padding:2px 4px 24px 8px}
.c360-terug{display:none;margin-bottom:14px}

/* ── de customer header: één horizontale enterprise-bar ── */
.c360-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.c360-hero .avatar.groot{width:50px;height:50px;font-size:16px;flex:none}
.c360-hero .wie{min-width:0}
.c360-hero .wie b{font-size:21px;font-weight:750;letter-spacing:-.02em;color:var(--text)}
.c360-hero .wie .sub{display:block;color:var(--faint);margin-top:1px;font-size:12.5px}
.c360-feiten{display:flex;flex-wrap:wrap;gap:5px 20px;flex:1;min-width:240px;
  padding-top:2px}
.c360-feit{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--soft)}
.c360-feit svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--faint);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c360-hero .acties{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

/* ── de context-strip: wat er NU speelt, in één horizontale oogopslag ── */
.c360-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:0;
  border-bottom:1px solid var(--line)}
.c360-stripitem{padding:12px 22px 13px 0;margin-right:22px;min-width:0;max-width:340px}
.c360-stripitem+.c360-stripitem{border-left:1px solid var(--line-2);padding-left:22px}
.c360-stripitem .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.c360-stripitem .w{font-size:13.5px;font-weight:600;color:var(--text);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.c360-stripitem .w .aandacht,.c360-stripitem .aandacht{color:#8A5F0C;font-weight:650}
.c360-stripitem .k.aandacht{color:#B03A22}
.c360-stripitem .w .goed{color:#14724D;font-weight:650}
.c360-stripitem .w .stil{color:var(--faint);font-weight:500;font-size:12.5px}
.c360-rij .sub .aandacht{color:#B03A22;font-weight:650}
.c360-alarm{display:inline-flex;align-items:center;gap:5px;margin-left:12px;
  font-size:12px;font-weight:650;color:#B03A22;vertical-align:2px}

/* ── de werkvloer: communicatie ~70, context ~30 ── */
.c360-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(240px,1fr);
  gap:34px;margin-top:20px;align-items:start}
.c360-sectie>h2{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.c360-rail{min-width:0;display:flex;flex-direction:column;gap:22px}
@media(min-width:1181px){.c360-rail{position:sticky;top:78px}}
.c360-crm{font-size:13px;color:var(--soft)}
.c360-crm b{display:block;color:var(--text);font-weight:650;font-size:13.5px}

/* ── de timeline: verticale lijn met richting-markers ── */
.c360-tl{position:relative;padding-left:30px}
.c360-tl::before{content:"";position:absolute;left:10px;top:10px;bottom:10px;
  width:2px;background:var(--line-2);border-radius:2px}
.tlrij{position:relative;padding:9px 8px 11px 6px;border-radius:10px;
  transition:background .14s}
/* Een rustige scheidingslijn tussen de gesprekken: na een uitgeklapte
   samenvatting is anders niet te zien waar het volgende gesprek begint. */
.tlrij+.tlrij{border-top:1px solid var(--line-2);border-radius:0 0 10px 10px;
  margin-top:4px;padding-top:13px}
.tlrij[data-ct-gesprek]{cursor:pointer}
.tlrij:hover{background:var(--paper)}
.tlmark{position:absolute;left:-27px;top:12px;width:16px;height:16px;border-radius:50%;
  background:var(--kaart);border:2px solid var(--line);display:grid;place-items:center}
.tlmark svg{width:9px;height:9px;fill:none;stroke-width:2.4;stroke-linecap:round}
.tlmark.in{border-color:#37C08F}.tlmark.in svg{stroke:#14724D}
.tlmark.uit{border-color:var(--petrol-l)}.tlmark.uit svg{stroke:var(--petrol)}
.tlmark.mis{border-color:#E0654B}.tlmark.mis svg{stroke:#B03A22}
.tlkop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tlkop b{font-size:14px;font-weight:650;color:var(--text)}
.tlkop .tltijd{font-size:12.5px;color:var(--faint)}
.tlmeta{font-size:13px;color:var(--soft);margin-top:1px}
.tlrij.vers .tlkop b{font-size:15px;font-weight:750}
.tlrij:not(.vers){padding-top:7px;padding-bottom:8px}
.tlrij:not(.vers) .tlkop b{font-weight:600}
.tlprev{font-size:13.5px;color:var(--soft);margin-top:6px;line-height:1.5}
.tltoggle{display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  font-size:12.5px;font-weight:650;color:var(--petrol);cursor:pointer;
  background:none;border:0;padding:0}
.tltoggle:hover{text-decoration:underline}
.tltoggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.c360-sam{margin-top:9px;padding:2px 0 2px 13px;border-left:2px solid var(--petrol-l);
  font-size:13.5px;line-height:1.55;color:var(--text)}
.c360-sam .samkop{display:flex;align-items:center;gap:6px;font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700;
  margin:10px 0 3px}
.c360-sam .samkop:first-child{margin-top:2px}
.c360-sam .samkop svg{width:11px;height:11px;fill:none;stroke:var(--petrol);
  stroke-width:1.9;stroke-linecap:round}
.c360-sam p{margin:0}
.c360-sam p.klem{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.c360-sam .c360-meer{margin-top:7px}
@media (prefers-reduced-motion:no-preference){
  .c360-sam{animation:opkomst .18s ease-out}
}

/* ── de context-rail: openstaand, notities - separators, geen kaarten ── */
.c360-rij{padding:9px 2px;border-bottom:1px solid var(--line-2)}
.c360-rij:last-child{border-bottom:0}
.c360-rij .soort{font-size:11.5px;color:var(--faint);font-weight:650}
.c360-rij.stil{padding:6px 2px}
.c360-rij.stil .naam{font-weight:500;font-size:13px;color:var(--soft)}
.c360-rij .naam.klem{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.c360-rij .naam{font-weight:650;font-size:13.5px;margin-top:2px;color:var(--text)}
.c360-rij .sub{color:var(--soft);font-size:13px;margin-top:1px;line-height:1.5}
.c360-rij .sub.klem{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.c360-meer{background:none;border:0;padding:0;margin-top:4px;font-size:12.5px;
  font-weight:650;color:var(--petrol);cursor:pointer}
.c360-meer:hover{text-decoration:underline}
.c360-leegtekst{color:var(--faint);font-size:13px}

/* ── skeleton bij het laden - bestaand Next-patroon, geen spinner ── */
.c360-skelet{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.c360-skelet i{display:block;height:13px;border-radius:7px;background:var(--paper)}
.c360-skelet i:nth-child(2){width:72%}.c360-skelet i:nth-child(3){width:58%}

.c360-leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--faint);padding:70px 24px;gap:6px}
.c360-leeg b{color:var(--soft);font-size:15px}
.c360-leeg .prent svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6}

/* sticky masterkolom op desktop: rechts scrolt de historie, links blijft
   zoeken bruikbaar */
@media(min-width:1001px){
  .c360-links{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto}
}
@media(max-width:1180px){
  .c360-grid{grid-template-columns:1fr;gap:24px}
}
@media(max-width:1000px){
  .c360{grid-template-columns:1fr}
  .c360-werk{display:none}
  .c360.open .c360-werk{display:block}
  .c360.open .c360-links{display:none}
  .c360.open .c360-terug{display:inline-flex}
  .c360-hero .acties{width:100%}
}

/* ---- statusstrip ----
   ⚠️ DE VOEGEN ZIJN DE ONDERGROND, GEEN RANDJES. De oude vorm zette een
   border-right per vak; zodra de strook omsloeg (en dat deed hij, op elke
   breedte waar de vakken samen breder waren dan de rij) viel het laatste vak
   kaal en randloos op een tweede regel. Nu is de ondergrond van de strook de
   lijnkleur en draagt elk vak zijn eigen kaartkleur: elke voeg - ook tussen
   twee RIJEN - is automatisch een nette 1px-lijn. flex:1 1 auto laat elke rij
   vollopen, dus er hangt nooit meer iets los onder de strook. */
/* ⚠️ DE STROOK WAS HET ZWAARSTE ELEMENT OP HET SCHERM en draagt de minste
   informatie: je status, je toestelnummer, of je aangemeld bent. Dat is
   context om te kúnnen nakijken, geen mededeling die om aandacht vraagt. Hij
   staat nu op de ondergrond in plaats van erop - de voegen tussen de vakken
   doen het scheidingswerk. */
.strip,.statusstrip{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.strip .vak,.statusstrip .vak{flex:1 1 auto;min-width:0;padding:11px 16px;display:flex;align-items:center;gap:9px;background:var(--kaart)}
.strip .el,.statusstrip .el{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.strip .wa,.statusstrip .wa{font-family:var(--fm);font-size:15px;font-weight:600}
.strip .mini,.statusstrip .mini{display:flex;flex-direction:column;gap:1px;min-width:0}
/* Het statusvak is een echte knop - zelfde anatomie als de andere vakken,
   plus knopgedrag. Op mobiel is dit de voornaamste statusingang. */
.statusstrip button.vak{cursor:pointer;font:inherit;color:inherit;text-align:left;border:0;transition:background .15s}
.statusstrip button.vak:hover{background:var(--paper)}
.statusstrip button.vak:focus-visible{outline:2px solid var(--petrol);outline-offset:-2px}
.statusstrip button.vak .pijl{font-size:10px;color:var(--faint);margin-left:2px}

/* ---- cijfers ----
   Één vorm voor alle getallen op de werkplek. Productie had er twee: `.stat`
   op het dashboard en `.tmvak` op Teamoverzicht, met verschillende groottes
   voor hetzelfde soort cijfer. */
.cijferrij{display:flex;gap:22px;flex-wrap:wrap}
.cijferrij .c{display:flex;flex-direction:column}
.cijferrij .c b{font-family:var(--fm);font-size:21px;font-weight:600;letter-spacing:-.02em}
.cijferrij .c span{font-size:11.5px;color:var(--faint)}
.cijferrij .c.klik{cursor:pointer}
.cijferrij .c.klik:hover b{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}

/* ---- lijst en rij ----
   Tien rijklassen zijn er één geworden. `.arij` (collega's), `.oprij`
   (oproepen), `.ctrij` (contacten), `.wrij` (wachtrijen), `.grrij`
   (belgroepen), `.kmrij` (keuzemenu) en `.tmrij` (team) tekenden allemaal
   hetzelfde: rondje, twee regels tekst, iets rechts. */
/* ⚠️ `width:auto`, GEEN `width:100%`. Deze lijst draagt hieronder negatieve
   zijmarges om tot de kaartrand door te lopen. `width:100%` rekent de breedte
   uit op de CONTENTbreedte van de ouder en negeert die marges: de lijst stak
   links 16 px uit en kwam rechts 16 px tekort. Gemeten 21 september op alle
   zeven lijstblokken - de rijlijn liep tot 931 waar de kopregel tot 963 liep,
   op het dashboard én op Instellingen. */
.lijst{display:flex;flex-direction:column;width:auto}
.rij,.arij,.oprij,.ctrij,.wrij,.grrij,.kmrij,.tmrij{
  display:flex;align-items:center;gap:11px;padding:9px 15px;
  border-bottom:1px solid var(--line-2);font-size:13.5px}
.rij:last-child,.arij:last-child,.oprij:last-child,.ctrij:last-child,
.wrij:last-child,.grrij:last-child,.kmrij:last-child,.tmrij:last-child{border-bottom:0}
.rij:hover,.arij:hover,.oprij:hover,.ctrij:hover{background:var(--paper)}
.rij .hoofd,.rij .info,.arij .info,.oprij .info,.ctrij .info,.wrij .info{min-width:0;flex:1}
.rij .t1,.rij .naam,.arij .naam,.oprij .naam,.ctrij .naam{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rij .t2,.rij .sub,.arij .sub,.oprij .sub,.ctrij .sub{color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rij .rechts,.rij .tijd,.arij .tijd,.oprij .tijd{text-align:right;color:var(--faint);font-size:12px;white-space:nowrap}
.rij .acties{display:none;gap:5px}
.rij:hover .acties{display:flex}
/* Een kaart waarin een lijst zit heeft zelf geen padding nodig: de rijen
   dragen hem, anders staat er twee keer ruimte omheen. */
.paneel>.lijst{margin:0 -16px -14px}
.paneel>.lijst .rij{padding-left:16px;padding-right:16px}

/* ---- tabel ----
   ⚠️ EEN BREDE TABEL SCHUIFT IN ZIJN EIGEN KADER, NOOIT DE PAGINA.
   `.tabelrol` kreeg zijn `overflow-x` alleen binnen de mediaquery voor
   telefoons. Daarboven liep een brede tabel gewoon de pagina uit: op 900
   pixels schoof je het hele scherm opzij om de laatste kolom te zien, met de
   zijbalk mee. Gemeten op 373 pixels met de wachtrijtabel erin: 551 pixels
   breed in een venster van 373. Dit hoort geen breedtevraag te zijn. */
.tabelwrap,.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabelwrap table,table.next{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tabelwrap th,table.next th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);padding:0 12px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabelwrap td,table.next td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tabelwrap tbody tr:hover,table.next tbody tr:hover{background:var(--paper)}
.tabelwrap tbody tr:last-child td,table.next tbody tr:last-child td{border-bottom:0}
.tabelwrap td.num,table.next td.num{text-align:right}

/* ---- filterrij ----
   Next zet boven een lijst een rij kleine knoppen: de actieve is gevuld, de
   rest is leeg. Het getal erin is hoeveel er in dat filter vallen. */
.filterrij{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}

/* Een veld dat een lijstregel tijdelijk vervangt: even breed als de regel,
   verder hetzelfde als elk ander invoerveld in de werkplek. */
.instveld{width:100%;margin-top:3px;padding:6px 10px;border:1px solid var(--petrol);
  border-radius:8px;background:var(--wit);font:inherit;font-size:13.5px;color:var(--text)}
.instveld:focus{outline:2px solid var(--petrol);outline-offset:1px}

/* ---- doorschakelen ---- */
.omlrij{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap}
.omlrij input{flex:1 1 160px;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);font-size:14px;color:var(--text)}
.omlrij input:focus{outline:none;border-color:var(--petrol);background:var(--wit)}
.filterrij .tel{font-family:var(--fm);font-size:11px;opacity:.72}

/* ---- merkje ----
   ⚠️ EEN GEVULDE PIL IS EEN UITROEPTEKEN, EN DIE HOREN ZELDZAAM TE ZIJN.
   In de preview stonden achtendertig groene pillen op één scherm - beschikbaar,
   aangemeld, beantwoord, geïncasseerd - en dan betekent groen niets meer dan
   "er staat tekst". Een routinetoestand krijgt een stip en gewone letters; de
   kleur zit in dat ene puntje. Wat WEL een vlak verdient is het uitzonderlijke:
   iets dat wacht, iets dat mislukte. */
.merkje{display:inline-flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap;
  background:none;padding:2px 0;color:var(--soft);font-weight:500}
.merkje::before{content:'';width:6px;height:6px;border-radius:50%;flex:none}
.m-groen::before{background:var(--groen)}
.m-teal::before{background:var(--teal)}
.m-stil::before{background:#B9C2BE}
/* Niet storen is een keuze van de medewerker, geen storing. */
.m-dnd::before{background:var(--rood)}
.m-oranje,.m-rood{padding:2px 8px;border-radius:20px;font-weight:600}
.m-oranje{background:rgba(232,163,60,.16);color:#8A5F0C}
.m-rood{background:rgba(224,101,75,.14);color:#A33A25}
.m-oranje::before,.m-rood::before{display:none}

/* ---- topbalk: zoekknop, lijnpil, ikoonknop ---- */
.zoekknop{flex:1;max-width:460px;margin:0 auto;display:flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:7px 11px;color:var(--faint);font-size:13px;text-align:left}
.zoekknop:hover{border-color:var(--petrol);color:var(--soft)}
.zoekknop svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9}
.zoekknop kbd{margin-left:auto;font-family:var(--fm);font-size:10.5px;border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;background:var(--wit);color:var(--faint)}
.top-rechts{display:flex;align-items:center;gap:8px;margin-left:auto}
.lijnpil{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:4px 10px;white-space:nowrap}
.lijnpil:hover{background:var(--wit)}
.lijnpil .pijl{font-size:10px;color:var(--faint)}
.ikoonknop{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--wit);display:grid;place-items:center;position:relative;flex:none}
.ikoonknop:hover{border-color:var(--petrol)}
.ikoonknop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* ---- commandobalk (⌘K) ----
   Next' presentatie van de zoekfunctie die de werkplek al heeft: collega's,
   contacten en belgeschiedenis, gegroepeerd, met het toetsenbord te bedienen.
   Geen nieuw endpoint - hetzelfde filter, een ander venster. */
.overlay{position:fixed;inset:0;background:rgba(8,32,29,.42);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:100}
.overlay.aan{display:flex}
.cmd{width:min(600px,92vw);background:var(--kaart);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 70px -20px rgba(8,32,29,.5);overflow:hidden}
.cmd-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.cmd-in svg{width:17px;height:17px;flex:none;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round}
.cmd-in input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:15px;color:var(--text)}
.cmd-in input::placeholder{color:var(--faint)}
.cmd-lijf{max-height:54vh;overflow-y:auto;padding:6px}
.cmd-groep{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:10px 10px 5px}
.cmd-rij{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;cursor:pointer;width:100%;text-align:left}
.cmd-rij:hover,.cmd-rij.aan{background:var(--paper)}
/* ⚠️ ALLEBEI OP EEN EIGEN REGEL. Next gebruikt <div>'s; zkTeken() spuugt
   <span>'s uit, en die blijven inline - dan werd "Piet Hendriks" +
   "Bakkerij Hendriks" één doorlopende regel zonder spatie ertussen. */
.cmd-rij .t1,.cmd-rij .t2{display:block}
.cmd-rij .t1{font-weight:600;font-size:13.5px}
.cmd-rij .t2{color:var(--faint);font-size:12px}
.cmd-rij>.mid{min-width:0;flex:1}
.cmd-rij .re{margin-left:auto;font-size:11.5px;color:var(--faint);font-family:var(--fm)}
.cmd-voet{border-top:1px solid var(--line-2);padding:8px 14px;font-size:11.5px;color:var(--faint);
  display:flex;gap:14px}
.cmd-voet kbd{font-family:var(--fm);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.cmd .niets{padding:22px 16px;color:var(--faint);font-size:13px;text-align:center}

/* ---- belplan als leesbare route ---- */
.belroute{margin-bottom:16px}
.belroute .tel.let{color:#8A5A12;font-weight:600}
.flow{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 0}
/* Een knoop die naar een formulier springt is een knop, dus hij hoort te
   reageren op de muis en op het toetsenbord. */
.knoop[data-brnaar]{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.knoop[data-brnaar]:hover{border-color:var(--petrol)}
.knoop[data-brnaar]:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
/* Het formulier waar je net naartoe gesprongen bent, even oplichten - anders
   is niet te zien dat er iets gebeurd is. */
.aangewezen{box-shadow:0 0 0 2px var(--petrol),var(--schaduw);transition:box-shadow .3s}
@media (prefers-reduced-motion:reduce){.aangewezen{transition:none}}
.knoop{background:var(--kaart);border:1px solid var(--line);border-radius:9px;
  padding:9px 14px;text-align:center;min-width:190px;box-shadow:var(--schaduw)}
.knoop .k1{font-weight:600;font-size:13.5px}
.knoop .k2{color:var(--faint);font-size:11.5px}
.knoop.start{background:var(--zij);border-color:var(--zij);color:#fff}
.knoop.start .k2{color:#7FA69F}
.pijl-lijn{width:1px;height:20px;background:var(--line)}
.tak{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.tak-tak{display:flex;flex-direction:column;align-items:center}
.taklabel{font-size:11px;color:var(--faint);font-family:var(--fm);padding:3px 0}

.puls{animation:puls 2s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.puls{animation:none}}
/* ⚠️ EEN TABRIJ MOET KUNNEN AFBREKEN. Zonder `flex-wrap` liep de vierde tab
   van Spraak & AI op een telefoon 27 px buiten het scherm - de pagina zelf
   scrolde niet mee, dus die tab was onbereikbaar. Gemeten op 430 px. */
.tabs{display:flex;flex-wrap:wrap;gap:2px;margin:12px 0 4px;border-bottom:1px solid var(--line)}
.tabs button{padding:7px 11px;font-size:13px;font-weight:650;color:var(--soft);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.aan{color:var(--petrol);border-color:var(--petrol)}

/* wachtrij-rij */
/* ⚠️ `--line-2`, NIET `--line`. De regel hierboven maakte van tien rijklassen
   één met de zachte lijn; deze en `.arij` herdeclareerden als enige twee de
   hele rij en zetten hem terug op de sterke. Daardoor droeg de FIJNSTE
   onderverdeling de ZWAARSTE lijn: de streep tussen twee rijen viel zwaarder
   op dan de streep die de kop van het lijf scheidt. De kaartrand is al de
   sterke lijn; alles binnen de kaart hoort zacht. */
.wrij{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line-2)}
.wrij:last-child{border-bottom:0}
.wrij .info{flex:1;min-width:0}
.wrij .naam{font-weight:700;font-size:14px}
.wrij .sub{font-size:12.5px;color:var(--faint)}
.wrij .wacht{font-size:12.5px;color:var(--soft);font-weight:600;white-space:nowrap}

/* ═══ WACHTRIJEN NU: KAARTJES NAAST ELKAAR ═══
 *
 * Dit blok was een kolom: bij drie kanalen (en een bedrijf met een lead- en
 * een servicelijn heeft er zo vier) werd het dashboardpaneel twee keer zo hoog
 * als de panelen ernaast, terwijl er breedte over was.
 *
 * `auto-fit` met een minimum van 190px doet het rekenwerk zelf: één kanaal
 * vult de breedte, twee tot vier komen naast elkaar, en in een smalle kolom
 * (het paneel kan door "Dashboard aanpassen" ook halfbreed staan) vallen ze
 * vanzelf terug op één per regel. Geen media-query nodig.
 *
 * De scheidslijn van de rij-variant moet hier weg: kaartjes hebben een rand
 * rondom, en een streep eronder leest dan als een dubbele lijn. */
#w-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;padding:13px 15px}
#w-lijst .wrij{flex-direction:column;align-items:stretch;gap:9px;
  padding:12px 13px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--paper)}
#w-lijst .wrij .info{flex:none}
/* De naam mag hier over twee regels: "KozijnOplossingen.NL Lead" past niet op
   één regel in een kolom van 190px, en afkappen met puntjes maakt twee
   kanalen die met dezelfde woorden beginnen ononderscheidbaar. */
#w-lijst .wrij .naam{white-space:normal;line-height:1.25}
/* De voetregel plakt onderaan, zodat de schakelaars van kaartjes met een
   naam van twee regels op dezelfde hoogte staan als die van één regel. */
#w-lijst .wrij .voet{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:auto}
.wrij .wacht b{color:var(--petrol)}
.schakel{position:relative;width:40px;height:24px;border-radius:100px;background:#D8DED8;cursor:pointer;flex:none;transition:background .16s}
.schakel::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(8,32,29,.3);transition:transform .16s}
.schakel.aan{background:var(--groen)}
.schakel.aan::after{transform:translateX(16px)}
/* ⚠️ EEN SCHAKELAAR DIE NIETS KAN DOEN MOET ER OOK ZO UITZIEN. Doorverbinden
   per lijn staat uit én onbedienbaar zodra de klantbrede noodrem bij `Wat hij
   kan` aanstaat: er valt op die lijn dan niets te kiezen. Zonder deze regel
   ziet hij er klikbaar uit, gebeurt er niets, en zoekt een beheerder de fout
   bij zichzelf. */
.schakel[disabled]{opacity:.45;cursor:not-allowed}

/* agent/contact-rij */
.arij{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line-2)}
.arij:last-child{border-bottom:0}
.arij .avatar{width:28px;height:28px;font-size:11px}
.arij .info{flex:1;min-width:0}
.arij .naam{font-weight:650;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arij .sub{font-size:12px;color:var(--faint)}
.staat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;white-space:nowrap}
.staat .bol{width:7px;height:7px;border-radius:50%}
.belknopje{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.belknopje:hover{background:var(--petrol);border-color:var(--petrol)}
.belknopje svg{width:13px;height:13px;stroke:var(--petrol);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.belknopje:hover svg{stroke:#fff}

/* lege staat, zoals de illustratie-schermen in de opname */
.leeg{text-align:center;padding:60px 20px;color:var(--soft)}
.leeg .prent{width:74px;height:74px;border-radius:22px;background:rgba(15,95,91,.08);display:grid;place-items:center;margin:0 auto 16px}
.leeg .prent svg{width:32px;height:32px;stroke:var(--petrol);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.leeg b{display:block;font-size:15.5px;color:var(--text);margin-bottom:5px}

/* ---- de drie toestanden van een kaart: laden, leeg, mislukt ------------
   ⚠️ HET DASHBOARD HAD ER DRIE MANIEREN VOOR NAAST ELKAAR. In het ene blok
   stond "Laden…", in het volgende "Wachtrijen laden…", en Collega's liet
   helemaal niets zien - een kaart van veertig pixels die eruitziet alsof hij
   stuk is. De padding van een lege staat stond bovendien inline en verschilde
   per blok (20, 22 en 26 pixels). Dit is er één laag voor.

   Het glanzende balkje is dat van de CRM-skeletten (`.crm-balk`), niet een
   tweede animatie ernaast. Daarmee valt het skelet vanzelf onder dezelfde
   uitzondering bij `prefers-reduced-motion`. */
.skelet{padding:14px 15px;display:flex;flex-direction:column;gap:15px}
.skelet-rij{display:flex;align-items:center;gap:11px}
.skelet-rond{width:32px;height:32px;border-radius:50%;flex:none}
.skelet-kol{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.skelet-kol i{display:block;height:9px;border-radius:5px}
/* Een skelet dat drie keer exact hetzelfde streepje toont leest als een
   patroon, niet als tekst die eraan komt. Drie breedtes is genoeg. */
.skelet-rij:nth-child(1) .skelet-kol i:first-child{width:54%}
.skelet-rij:nth-child(2) .skelet-kol i:first-child{width:41%}
.skelet-rij:nth-child(3) .skelet-kol i:first-child{width:62%}
.skelet-kol i:last-child{width:29%}

/* ⚠️ EEN MISLUKTE OPHAALACTIE IS GEEN LEGE LIJST. "Nog geen collega's" is een
   bewering over het bedrijf; antwoordde de server niet, dan weten we dat niet.
   Die twee mogen er dus niet hetzelfde uitzien, en de tweede hoort een weg
   terug te dragen. */
.leeg.inkaart{padding:26px 18px}
.leeg.inkaart .prent{width:46px;height:46px;border-radius:14px;margin-bottom:11px}
.leeg.inkaart .prent svg{width:21px;height:21px}
.leeg.inkaart b{font-size:14px}
/* ⚠️ DE ZIN EN DE KNOP MOGEN NIET OP EEN REGEL BELANDEN. `.leeg span` is
   inline en `.knop` inline-block, dus of de knop onder de tekst kwam hing af
   van de lengte van de zin en van de breedte van het blok - in "Aandacht
   nodig" stond hij ernaast en in "Vandaag" eronder. Gemeten 21 september. */
.leeg.stuk span{display:block}
.leeg.stuk .prent{background:rgba(196,64,44,.09)}
.leeg.stuk .prent svg{stroke:var(--rood-tekst)}
.leeg.stuk .knop{margin-top:13px}

/* ⚠️ EEN LEGE DETAILHELFT IS GEEN KAART MAAR RUIMTE. Zolang de inhoud op 1220
   px was afgekapt viel dit niet op; sinds de pagina het scherm vult is de
   rechterhelft van Gesprekken en Contacten een wit vlak van zo'n 600 bij 500
   pixels met twee regels tekst in het midden - dat leest als een blok dat
   stuk is, niet als "kies eerst iets links". Zonder rand en zonder vlak is
   het gewoon de pagina, en de boodschap staat er rustig in.

   `:has()` is hier de juiste keus: welke kaart leeg is, weet alleen de DOM.
   Een browser die het niet kent toont de oude kaart - dat is de vorige stand,
   geen kapotte. */
.paneel:has(> .leeg:only-child),
.c360-werk:has(> .c360-leeg:only-child){background:transparent;border-color:transparent}
/* En de boodschap blijft een blok in plaats van een regel die over zeshonderd
   pixels uitwaaiert. */
.leeg b,.leeg span,.c360-leeg b,.c360-leeg span{max-width:34ch;margin-left:auto;margin-right:auto}
/* --- berichten per nummer --- */
.nrkiezer{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.nrtab{font:inherit;font-size:13.5px;cursor:pointer;border-radius:10px;border:1px solid var(--line);
  background:var(--wit);color:var(--soft);padding:7px 13px;display:flex;flex-direction:column;gap:1px;text-align:left}
.nrtab b{font-weight:600;font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}
.nrtab small{font-size:11.5px;color:var(--faint)}
.nrtab:hover{border-color:#CFD8D2}
.nrtab.aan{background:var(--petrol);border-color:var(--petrol)}
.nrtab.aan b,.nrtab.aan small{color:#fff}
.nrtab.aan small{opacity:.72}
.nroverzicht{overflow-x:auto;margin:18px -2px 0;padding:0 2px}
.nroverzicht table{border-collapse:collapse;width:100%;min-width:460px;font-size:13px}
.nroverzicht th,.nroverzicht td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.nroverzicht thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.nroverzicht tbody th{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nroverzicht tr.alg th,.nroverzicht tr.alg td{background:var(--paper)}
.nroverzicht .erft{color:var(--faint)}
.leeg span{font-size:13.5px}

/* recents/voicemail-lijsten */
.lijst .arij .tijd{font-size:12.5px;color:var(--faint);white-space:nowrap}
.pijltje{font-weight:700;width:16px;display:inline-block}
.pijltje.in{color:var(--groen-tekst)}.pijltje.uit{color:var(--petrol)}.pijltje.mis{color:var(--rood-tekst)}

/* ---- de kaart Bellen op het dashboard ---- */
/* De kaart zelf is een gewone kaart. Hij was donkergroen met witte letters
   terwijl elke andere kaart op het scherm wit is; dat maakte hem geen accent
   maar een vreemde eend. */
/* ⚠️ DE BELKAART IS HET BEDIENINGSVLAK, GEEN KAART ZOALS DE REST.
   Het dashboard was een zee van witte kaarten met dezelfde rand, dezelfde
   radius en dezelfde schaduw: een blok met vier cijfers, een lijst collega's
   en het toetsenblok zaten in exact dezelfde verpakking. Daardoor had het
   scherm geen brandpunt - niets kwam naar voren, niets ging naar achteren.
   Dit ene vlak is donker. Het koppelt de werkruimte aan de zijbalk en zegt in
   één oogopslag waar het werk gebeurt.

   ⚠️ DIT IS GEEN DONKERE VARIANT EN GEEN THEME-SWITCH. Die zijn 23 augustus
   afgewezen (WERKPLEK-NEXT-TRANSPLANTATIE.md §2) omdat de werkplek honderden
   letterlijke kleuren buiten de tokens draagt - half omzetten levert
   half-donker op. Dit is één component met een eigen vlak; de rest van het
   scherm blijft licht. Dat de contrastbewaker `.op-kop`, `.op-wis` en
   `.tk-uitbel` al in zijn DONKER-lijst had staan, is geen toeval: deze kaart
   is eerder donker geweest.

   Elke kleurcombinatie hieronder is nagerekend tegen de ondergrond waar hij
   op landt; de laagste haalt 5,90 waar WCAG AA 4,5 vraagt. */
.telefoonkaart{text-align:center}
[data-w="telefoon"]{background:#0C2F2B;border-color:#0A2926;
  box-shadow:0 2px 6px rgba(8,32,29,.10),0 26px 50px -28px rgba(8,32,29,.55)}
.telefoonkaart h2{text-align:left}
/* het beltoestel houdt zijn eigen maat, ongeacht de kolom waarin hij staat */

/* ---- logboek-tellers, zoals in de mobiele app ---- */

/* instelbaar dashboard: twee kolommen, elk blok kiest kolom, volgorde en hoogte */
/* Het dashboardraster is Next' .r-hoofd; de vorm staat bij de bouwstenen. */
.dashraster [data-w]{position:relative;min-width:0}
.dashraster [data-w][style*="--h"]{height:var(--h);overflow-y:auto}
/* ═══ BELPLAN — enterprise-indeling ═══
   Smalle instellingen-kolom links, brede routerings-kolom rechts (de
   oorspronkelijke, betere verhouding), zodat keuzemenu + gesproken bericht weer
   naast elkaar passen. De editor hergebruikt de bewerkstand/wtool/sleept-stijl. */
.blokraster [data-w]{position:relative;min-width:0}
#belplanraster{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:20px 22px;align-items:start}
@media(max-width:1180px){#belplanraster{grid-template-columns:1fr}}
.blokraster>[data-w].wvol{grid-column:1/-1}
.blokraster [data-w] .paneel{max-width:none}
/* Het rooster binnen de Keuzemenu-widget past zich aan zijn eigen breedte aan:
   naast elkaar als er ruimte is, anders netjes gestapeld. */
#belplanraster .rooster{grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px}
/* Kop: icoonvierkant + titel + status-pil, op Dstny-niveau. */
.blokicoon{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(15,95,91,.09)}
.blokicoon svg{width:17px;height:17px;fill:none;stroke:var(--petrol);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.blokkop{gap:11px;margin-bottom:12px}
.blokkop h2{margin-right:auto}
/* 'Aan'/'Uit' als status-pil die de schakelaarstand volgt (CSS-only). */
.blokkop .aanuit .schakel + span{padding:3px 11px;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--line-2);color:var(--soft);line-height:1.7}
.blokkop .aanuit .schakel.aan + span{background:rgba(55,192,143,.15);color:var(--groen-tekst)}
/* Uitleg onder een schakelaar: een rustige toelichting, geen grote lege doos. */
.blokw[data-w="welkomstbericht"]>.paneel,.blokw[data-w="wachtmuziek"]>.paneel{background:var(--paper);box-shadow:none;border-color:var(--line-2)}
.blokw[data-w="welkomstbericht"] #wb-stand,.blokw[data-w="wachtmuziek"] #wm-stand{font-size:13px;color:var(--text);font-weight:550;margin:0 0 6px}

/* ═══ ENTERPRISE-KAARTEN: elk blok is ÉÉN kaart — kop-rij met scheidslijn, dan
   de inhoud. Zoals de instellingenkaarten van een premium console. ═══ */
#belplanraster .blokw{background:var(--wit);border:1px solid var(--line);border-radius:14px;box-shadow:var(--schaduw);overflow:hidden}
#belplanraster .blokw>.blokkop{margin:0;padding:14px 18px;gap:12px;border-bottom:1px solid var(--line-2);background:#FBFCFA}
#belplanraster .blokw>.paneel{border:0;border-radius:0;box-shadow:none;background:transparent;padding:18px}
/* Keuzemenu: kop + tweeluik (menu | gesproken bericht) in één kaart; de binnen-
   panelen verliezen hun eigen rand en worden nette secties. */
#belplanraster .blokw[data-w="keuzemenu"]>.rooster{padding:18px;gap:24px}
#belplanraster .blokw[data-w="keuzemenu"] .rooster>.paneel{border:0;box-shadow:none;background:transparent;padding:0}
#belplanraster .blokw[data-w="keuzemenu"] .rooster>.paneel+.paneel{border-top:1px solid var(--line-2);padding-top:20px}
@media(min-width:900px){#belplanraster .blokw[data-w="keuzemenu"] .rooster>.paneel+.paneel{border-top:0;border-left:1px solid var(--line-2);padding-top:0;padding-left:24px}}
/* Belgroepen heeft geen blokkop maar een s-kop binnen de paneel: geef die
   dezelfde kop-toon. */
#belplanraster .blokw[data-w="belgroepen"]>.paneel{padding:0}
#belplanraster .blokw[data-w="belgroepen"] .s-kop{margin:0;padding:14px 18px;border-bottom:1px solid var(--line-2);background:#FBFCFA}
#belplanraster .blokw[data-w="belgroepen"] .paneel>:not(.s-kop){margin-left:18px;margin-right:18px}
#belplanraster .blokw[data-w="belgroepen"] .paneel>.slot{margin-top:14px}
/* De belroute-kaart bovenaan volgt dezelfde radius, zodat alles één familie is. */
#s-bereikbaar .belroute{border-radius:14px}
/* Icoonvierkant iets warmer en groter contrast op de kaartkop. */
#belplanraster .blokw>.blokkop .blokicoon{background:rgba(15,95,91,.10)}
.bewerkstand [data-w]{outline:1.5px dashed var(--petrol);outline-offset:3px;cursor:grab}
.bewerkstand [data-w]:active{cursor:grabbing}
[data-w].sleept{opacity:.45}
.wtool{display:flex;gap:4px;justify-content:flex-end;margin:-4px -6px 8px 0}
.wtool button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--wit);font-size:12px;color:var(--soft);line-height:1}
.wtool button:hover{background:var(--paper);color:var(--ink)}
.wtool button.wt-tekst{width:auto;padding:0 9px;font-size:11.5px;font-weight:600;white-space:nowrap}
/* volle breedte: het blok spant beide kolommen, onder de kolommen */
.dashraster>[data-w].wvol{grid-column:1/-1}
/* toetsenstijl van de telefoonkaart: smal houdt de toetsen compact in het
   midden en gunt de klantcontext meer ruimte; breed doet het omgekeerde */
[data-w="telefoon"].tk-smal .toetsen{max-width:236px;margin-inline:auto}
[data-w="telefoon"].tk-smal .op-vlak{grid-template-columns:minmax(238px,.82fr) minmax(248px,1.18fr)}
[data-w="telefoon"].tk-breed .op-vlak{grid-template-columns:minmax(300px,1.5fr) minmax(232px,.72fr)}
.alleslink{display:block;width:100%;text-align:left;margin-top:8px;padding-top:9px;border-top:1px solid var(--line-2);font-size:12.5px;font-weight:650;color:var(--petrol)}
.toevoeglijst{position:absolute;margin-top:6px;right:22px;background:var(--wit);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 36px -16px rgba(8,32,29,.3);padding:6px;z-index:50}
.toevoeglijst button{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600}
.toevoeglijst button:hover{background:var(--paper)}
/* handgrepen voor de maat: rechterrand, onderrand en de hoek */
.hgreep{position:absolute;z-index:5;display:none}
.bewerkstand .hgreep{display:block}
/* Alleen de onderrand. De rechter- en hoekgreep zetten de breedte in
   twaalfden; die maat bestaat niet meer in een ontwerp met twee vaste
   kolommen. */
.hgreep-b{left:10%;right:10%;bottom:-7px;height:12px;cursor:ns-resize}
@media(max-width:1100px){.dashraster>[data-w]{grid-column:1/-1 !important;height:auto !important}}

/* gesprek in de kaart zelf - geen popup */
.tk-hint{font-size:12px;color:#0E6B4F;background:rgba(55,192,143,.12);border-radius:8px;
padding:7px 10px;margin:0 0 10px;font-weight:600;line-height:1.4}
.tk-uitbel{margin-top:4px;font-size:12px;color:#9FC0BA;padding:3px 0}
.tk-uitbel b{color:#fff;font-weight:650}
.tk-uitbel:hover{color:#fff}
#tk-uitbel-menu button{font-variant-numeric:tabular-nums}
.tk-wie{font-size:19px;font-weight:750;margin-top:4px;color:var(--ink);text-align:center}
/* Let op de klassenamen: een kale .leeg bestaat al in deze werkplek met
   padding:60px 20px, en dat maakte van een stipje van 7 pixels een oranje
   ovaal van een halve centimeter. Vandaar overal een eigen voorvoegsel. */
.plgroep{margin-bottom:22px}
.plgroep:last-child{margin-bottom:0}
.plkop{display:flex;align-items:center;gap:10px;padding:0 2px 10px;
  border-bottom:1px solid var(--line);margin-bottom:10px}
.plkop .plstip{width:7px;height:7px;border-radius:50%;background:var(--groen);flex:none;
  box-shadow:0 0 0 3px rgba(45,160,110,.14)}
.plkop .plstip.pl-uit{background:#e0912f;box-shadow:0 0 0 3px rgba(224,145,47,.16)}
.plkop .nm{display:flex;align-items:baseline;gap:9px;min-width:0}
.plkop .nm b{font-size:14.5px;font-weight:750;letter-spacing:-.01em}
.plkop .nm small{font-size:11.5px;color:var(--faint-op);font-family:ui-monospace,monospace}
.plkop .telling{margin-left:auto;font-size:11px;font-weight:650;color:var(--soft-op);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
/* #b8710f haalde 3,62 op zijn eigen lichte oranje ondergrond; 4,5 is de eis
   voor tekst van elf pixels. #8A5F0C haalt 5,26 en is dezelfde kleur, een tint
   donkerder - dezelfde die de oranje merkjes elders in de werkplek dragen. */
.plkop .telling.pl-uit{color:#8A5F0C;border-color:rgba(224,145,47,.35);background:rgba(224,145,47,.08)}
.plafd{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fff;
  transition:opacity .15s,border-color .15s,box-shadow .15s}
.plafd:last-child{margin-bottom:0}
.plafd:hover{border-color:rgba(15,95,91,.3);box-shadow:0 1px 3px rgba(16,24,40,.06)}
/* Wachtenden: een streep aan de zijkant in plaats van een rand rondom. Een
   rand rondom vecht met de kaart eromheen; een streep leest als een markering. */
.plafd.wacht{border-color:rgba(200,60,45,.28)}
.plafd.wacht::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--rood)}
.plafd.pl-uit{opacity:.6}
.plafd .info{flex:1;min-width:0}
.plafd .t{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.plafd .t .pil{font-size:10.5px;font-weight:750;color:#fff;background:var(--rood);
  border-radius:999px;padding:2px 7px}
.plafd .sub{font-size:12px;color:var(--faint-op);margin-top:2px}
.schuif{flex:none;width:44px;height:26px;border-radius:999px;border:1px solid var(--line);
  background:var(--line);cursor:pointer;padding:0;position:relative;transition:background .16s}
.schuif i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .16s}
.schuif.aan{background:var(--groen);border-color:var(--groen)}
.schuif.aan i{transform:translateX(18px)}
.schuif[disabled]{opacity:.5;cursor:default}
/* De balk die zegt waarom je hele lijst uit staat. Rood, want het is geen
   mededeling maar een blokkade: er komt op dit moment niets binnen. Eigen
   voorvoegsel dnd- omdat generieke namen in dit bestand al bezet zijn. */
.dndbalk{display:flex;align-items:flex-start;gap:12px;margin:6px 0 16px;
  padding:14px 16px;border-radius:var(--r);border:1px solid rgba(199,58,58,.28);
  background:linear-gradient(180deg,rgba(199,58,58,.09),rgba(199,58,58,.04))}
.dndbol{flex:0 0 auto;width:9px;height:9px;margin-top:6px;border-radius:50%;
  background:var(--rood);box-shadow:0 0 0 4px rgba(199,58,58,.16)}
.dndtxt{flex:1 1 auto;min-width:0;display:block;line-height:1.45}
.dndtxt b{display:block;font-size:14px;color:var(--ink)}
.dndtxt small{display:block;margin-top:2px;font-size:12.5px;color:var(--soft)}
.dnduit{flex:0 0 auto;align-self:center;border:1px solid rgba(199,58,58,.35);
  background:var(--wit);color:var(--rood-tekst);font:inherit;font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:999px;cursor:pointer;transition:background .15s}
.dnduit:hover{background:rgba(199,58,58,.08)}
.dnduit[disabled]{opacity:.55;cursor:default}
@media (max-width:560px){.dndbalk{flex-wrap:wrap}.dnduit{width:100%}}
/* Naast elkaar zodra er ruimte is: bij twee nummers scheelt dat de halve
   paginahoogte, en je ziet je lijnen naast elkaar in plaats van eronder -
   dat is ook hoe je erover denkt. Onder de 380 pixels per kaart wordt het
   knijpen, dus dan zakt hij vanzelf terug naar één kolom. */
.lijnrooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:12px;align-items:start}
@media (max-width:820px){.lijnrooster{grid-template-columns:1fr}}
.lijnrooster>.lijnkaart,.lijnrooster>.plgroep{margin-bottom:0}
/* In het raster is elke groep een kaart, net als bij Je lijnen - anders
   zweven de afdelingen los naast elkaar zonder dat je ziet wat bij wat hoort. */
.lijnrooster>.plgroep{border:1px solid var(--line);border-radius:var(--r);background:var(--wit);
  padding:16px 18px 18px;box-shadow:0 1px 2px rgba(16,32,29,.04)}
.lijnrooster>.plgroep .plkop{padding-bottom:12px;margin-bottom:12px}

/* ── Je lijnen ──────────────────────────────────────────────────────────
   LET OP de kleurnamen. Deze werkplek kent --line, --soft, --faint, --paper,
   --wit; NIET --rand of --vlak. Een onbekende variabele maakt de hele
   border-declaratie ongeldig, en dan valt de rand weg terwijl border-style
   blijft staan - dat gaf een dikke zwarte stippellijn waar een zacht kaartje
   hoorde. */
.lijnkaart{position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px 15px;margin-bottom:10px;background:var(--wit);
  box-shadow:0 1px 2px rgba(16,32,29,.04);transition:box-shadow .18s,border-color .18s}
.lijnkaart:last-child{margin-bottom:0}
.lijnkaart:hover{border-color:#D3DBD6;box-shadow:0 4px 14px rgba(16,32,29,.07)}
/* Een accentstreep links op ELKE kaart, in de eigen kleur van die lijn. Geeft
   de kaart een kant zonder een kader te worden, en maakt je lijnen herkenbaar
   zonder dat je hoeft te lezen. Het hoofdnummer krijgt de volle streep; de
   andere lijnen dezelfde vorm, iets ingetogener. */
.lijnkaart::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--acc1,#0F5F5B),var(--acc2,#2FD4BE));
  opacity:.55;transition:opacity .18s}
.lijnkaart.hoofd::before{opacity:1;top:11px;bottom:11px;width:3.5px}
.lijnkaart:hover::before{opacity:1}
/* Een heel zachte waas in de eigen kleur, linksboven waar de streep begint.
   Je ziet het niet bewust - je voelt alleen dat de kaart ergens bij hoort. */
.lijnkaart::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(420px 150px at 0% 0%, color-mix(in srgb, var(--acc2,#2FD4BE) 13%, transparent), transparent 70%);
  opacity:.85}
.lijnkaart>*{position:relative;z-index:1}
/* Het merkje neemt de kleur van zijn eigen lijn over in plaats van altijd
   petrol - anders vecht het met de streep ernaast. */
.lijnkaart .lk-merk{color:var(--acc1,#0F5F5B);
  background:color-mix(in srgb, var(--acc1,#0F5F5B) 10%, transparent)}
.lijnkaart .lk-veld input:focus{border-color:var(--acc1,#0F5F5B);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc1,#0F5F5B) 16%, transparent)}
.lijnkaart .chip:focus-within{border-color:var(--acc1,#0F5F5B);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc1,#0F5F5B) 16%, transparent)}
.lijnkaart .chip-plus{color:var(--acc1,#0F5F5B)}

.lk-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lk-plek{display:inline-flex;flex-direction:column;align-items:center;gap:1px;flex:none}
.lk-plek b{font-family:var(--fh);font-size:11px;font-weight:750;color:var(--faint);
  font-variant-numeric:tabular-nums;line-height:1}
.lk-pijl{width:22px;height:13px;display:grid;place-items:center;padding:0;border-radius:4px;
  background:transparent;color:var(--faint);font-size:7px;line-height:1;cursor:pointer;transition:.12s}
.lk-pijl:hover:not([disabled]){background:rgba(15,95,91,.08);color:var(--petrol)}
.lk-pijl[disabled]{opacity:.25;cursor:default}
.lk-nr{font-family:var(--fh);font-size:16.5px;font-weight:750;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.lk-merk{font-size:9px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  color:var(--petrol);background:rgba(15,95,91,.08);border-radius:999px;padding:3px 8px}
.lk-merk.waarsch{color:#8A5A0B;background:rgba(232,163,60,.16)}

.lk-veld{display:block;margin-top:12px}
.lk-veld>span,.lk-label{display:block;font-size:10px;font-weight:750;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.lk-veld input{width:100%;max-width:300px;padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:13.5px;background:var(--paper);color:var(--text);
  transition:border-color .14s,background .14s,box-shadow .14s}
.lk-veld input::placeholder{color:var(--faint)}
.lk-veld input:hover{border-color:#D3DBD6}
.lk-veld input:focus{outline:none;border-color:var(--petrol);background:var(--wit);
  box-shadow:0 0 0 3px rgba(15,95,91,.11)}

.lk-afd{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.lk-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);padding:1px 3px 1px 5px;transition:border-color .14s,background .14s,box-shadow .14s}
.chip:hover{border-color:#D3DBD6}
.chip:focus-within{border-color:var(--petrol);background:var(--wit);box-shadow:0 0 0 3px rgba(15,95,91,.11)}
.chip input{border:0;background:transparent;font:inherit;font-size:13px;font-weight:650;
  color:var(--text);padding:6px 5px;min-width:64px}
.chip input:focus{outline:none}
.chip input::placeholder{color:var(--faint);font-weight:550}
.chip-weg,.chip-plus{width:21px;height:21px;display:grid;place-items:center;padding:0;
  border-radius:6px;background:transparent;color:var(--faint);line-height:1;transition:.12s}
.chip-weg{font-size:14px}
.chip-weg:hover{background:rgba(240,131,110,.16);color:#C24632}
.chip-plus{color:var(--petrol);font-size:15px;font-weight:700}
.chip-plus:hover{background:rgba(15,95,91,.1)}
/* De "erbij"-chip nodigt uit, hij schreeuwt niet: een fijne onderbroken lijn
   in dezelfde kleur als de andere randen, geen zwarte stippelband. */
.chip.nieuw{border-style:dashed;border-color:#CDD6D1;background:transparent}
.chip.nieuw:focus-within{border-style:solid}

.tk-stil{padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--soft-op);font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.tk-stil:hover{border-color:var(--petrol);color:var(--petrol)}
.tk-stil[disabled]{opacity:.5;cursor:default;border-color:var(--line);color:var(--faint-op)}
.tk-lijn{display:block;width:fit-content;margin:8px auto 0;padding:4px 11px;border-radius:999px;
  background:rgba(15,95,91,.10);border:1px solid rgba(15,95,91,.22);
  font-size:12px;font-weight:650;color:var(--petrol);letter-spacing:.01em}
/* ---- klantkaart tijdens een gesprek ----
   Rustig en compact: dit staat op de plek waar iemand binnen twee tellen wil
   zien wie er belt, niet waar hij een dossier wil lezen. Vandaar hoogstens vier
   regels en een link naar het CRM voor de rest. Hij groeit niet mee met wat het
   CRM toevallig teruggeeft; wat er niet in past, staat achter de link. */
.tk-crm{margin:10px auto 0;max-width:270px;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tk-crm-kop{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.tk-crm-kop b{font-size:13px;font-weight:700;color:var(--ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-crm-bron{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint-op);flex:none}
.tk-crm-regels{margin-top:6px;display:flex;flex-direction:column;gap:3px}
/* ⚠️ EEN LABEL EN ZIJN WAARDE HOREN BIJ ELKAAR TE BLIJVEN. `.tk-crm-regel` is
   `auto 1fr` met de waarde rechts; in de zwevende kaart valt dat niet op, want
   die is 270 px breed. In het bedieningsvlak kreeg de klantcontext 565 px en
   stond "Open offertes" ruim vierhonderd pixels van zijn "1" af. Een leesmaat
   voor de regels, gecentreerd in de ruimte die er is. */
.op-context .tk-crm-regels{max-width:420px;margin-left:auto;margin-right:auto}
.tk-crm-regel{display:grid;grid-template-columns:auto 1fr;column-gap:8px;
  font-size:12px;line-height:1.4;color:var(--soft-op)}
.tk-crm-regel.breed{grid-template-columns:1fr}
.tk-crm-regel b{color:var(--faint-op);font-weight:650;white-space:nowrap}
/* ═══ DE KOP VAN HET GESPREKSPANEEL IS DONKER ═══
   Next zet de naam van wie je spreekt op de donkere zijbalkkleur. Dat is geen
   versiering: een zwevend paneel over een wit scherm heeft een anker nodig, en
   de duur die daarin meetikt in teal is het enige op het scherm dat beweegt.
   Alleen als het paneel ZWEEFT - in de kaart op het dashboard staat hij op wit
   en zou een donker vlak binnen een witte kaart een gat lijken. */
#tk-call.zwevend{padding:0 16px 14px;overflow:hidden;display:flex;flex-direction:column}
#tk-call.zwevend .tk-kop{background:var(--zij);color:#fff;margin:0 -16px;padding:7px 16px 0;
  display:flex;align-items:center;gap:10px}
#tk-call.zwevend .tk-kop .tk-wie{color:#fff;font-size:16px;font-weight:600}
#tk-call.zwevend .tk-kop .tk-sub{color:#B7CBC6;font-size:13px}
#tk-call.zwevend .tk-status{color:var(--teal);font-weight:600;background:var(--zij);
  margin:0 -16px;padding:9px 16px 14px;text-align:left;font-size:12.5px}
/* De lijnaanduiding is op wit een pil in petrol; op de donkere kop zou die
   als een lichte vlek over de naam heen liggen. Zwevend is het gewoon een
   regel tekst boven de naam - Next zet hem daar ook. */
#tk-call.zwevend .tk-lijn{background:var(--zij);border:0;border-radius:0;color:#7FA69F;font-weight:500;
  width:auto;margin:0 -16px;padding:14px 16px 0;text-align:left;font-size:11px;order:-1}
#tk-call.zwevend .tk-meter{display:none}
#tk-call.zwevend .tk-lijn[hidden]+.tk-kop,
#tk-call.zwevend .tk-kop:first-child{padding-top:14px}
#tk-call.zwevend .tk-crm{margin:12px 0}

/* ---- kop van het contactpaneel ---- */
.ct-detail-kop{display:flex;align-items:center;gap:12px}
.ct-detail-kop b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
.ct-detail-kop .sub{display:block;font-size:12.5px;color:var(--faint-op);margin-top:2px}
.avatar.groot{width:44px;height:44px;font-size:15px;flex:none}
#c-detail .tk-crm-regels{gap:6px}
#c-detail .tk-crm-regel{font-size:13px}
#c-detail h2{font-size:13px;letter-spacing:.02em}
.tk-crm-link{display:inline-block;margin-top:8px;font-size:12px;font-weight:650;color:var(--petrol)}
.tk-crm-link:hover{text-decoration:underline}
.tk-status{font-size:13px;color:var(--soft-op);margin-top:4px;min-height:18px;
text-align:center;font-variant-numeric:tabular-nums}
.tk-ander{display:block;margin:10px auto 0;font-size:12px;font-weight:650;color:#0B2B27;
background:rgba(47,212,190,.35);border-radius:100px;padding:5px 12px}
/* ═══ DE BEDIENING VAN EEN LOPEND GESPREK, ZOALS NEXT HEM TEKENT ═══
   Een raster van drie, met de lijntjes ertussen als achtergrond. Hier stond
   een rij ronde knopjes van 36 pixels die op zeven stuks afbrak naar twee
   regels van ongelijke lengte - en tijdens een gesprek is dat precies het
   moment waarop je niet wilt zoeken. Een raster blijft een raster.
   ⚠️ De knoppen zijn ONGEWIJZIGD: dezelfde id's, dezelfde handlers. Alleen
   waar ze staan en hoe ze eruitzien verandert. */
.tk-acties{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-2);margin:16px -16px 0;border-top:1px solid var(--line-2)}
.tk-actie{background:var(--kaart);border:0;padding:12px 4px;display:flex;flex-direction:column;
  align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--soft);width:auto}
.tk-actie:hover{background:var(--paper);color:var(--petrol)}
.tk-actie.aan{color:var(--petrol);background:rgba(15,95,91,.07)}
.tk-actie svg{width:17px;height:17px;padding:0;border:0;background:none;box-shadow:none;
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tk-dtmf{margin-top:14px;display:grid !important}
/* Ophangen is een volle knop over de hele breedte, niet een rondje tussen
   andere rondjes: het is het enige onomkeerbare op dit paneel. */
.tk-onder{display:flex;gap:10px;margin:0 -16px;padding:11px 14px 0;background:var(--kaart)}
.tk-rond{flex:1;height:38px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;gap:7px;font-size:13px;font-weight:500;color:#fff}
.tk-rond svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-rond::after{font-weight:500}
.tk-rond.groen{background:var(--groen)}
.tk-rond.groen::after{content:'Opnemen'}
.tk-rond.groen:hover{background:#2EA477}
.tk-rond.rood{background:var(--rood)}
.tk-rond.rood::after{content:'Ophangen'}
.tk-rond.rood:hover{background:#C74A35}

/* ===== Operator-telefoonkaart: eigen maatsysteem ===== */
:root{
  --soft-op:#55625E;--faint-op:#66746F;
  --t-legenda:9px;--t-micro:11px;--t-klein:12px;--t-basis:13px;
  --t-mid:14px;--t-kop:15px;--t-toets:17px;--t-display:26px;
  --w-normaal:400;--w-mid:500;--w-half:600;--w-vet:700;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;
  --r-xs:6px;--r-s:10px;--r-m:12px;--r-l:16px;
  --rand-1:rgba(8,32,29,.055);--rand-2:#E6E9E3;--rand-3:rgba(8,32,29,.14);
  --sch-1:0 1px 1.5px rgba(8,32,29,.05);
  --sch-2:0 1px 2px rgba(8,32,29,.05),0 3px 8px -4px rgba(8,32,29,.10);
}

.op{container-type:inline-size;container-name:operator;margin:-14px -16px;
background:linear-gradient(180deg,#123F39 0%,#0D332E 55%,#0A2926 100%);
border-radius:10px;overflow:visible;color:#E8F0EE;
font-variant-numeric:tabular-nums lining-nums}

/* ⚠️ DEZE REGEL WON VAN DE REPARATIE. `.op .op-uitbel` weegt (0,2,0) en
   `.op-uitbel` maar (0,1,0), dus bleef "belt uit als" en de voetbalk op
   #55625E staan - 2,37 op het donkere vlak, terwijl ik dacht dat ik ze al had
   omgezet. Gevonden door de contrastbewaker nadat die tokens leerde lezen. */
.op .op-uitbel,.op .op-voet button{color:#9FC0BA}

/* ---------- kop ---------- */
.op-kop{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);
min-height:56px;border-radius:var(--r) var(--r) 0 0;
background:transparent;
box-shadow:inset 0 -1px 0 rgba(255,255,255,.09)}
.op-merk{min-width:0}
.op-merk b{display:block;font-family:var(--fh);font-size:var(--t-kop);
font-weight:var(--w-vet);line-height:20px;letter-spacing:-.015em}
.op-uitbel{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-klein);
line-height:16px;color:#9FC0BA;margin-top:2px;padding:0}
.op-uitbel b{display:inline;font-family:var(--fb);font-size:var(--t-klein);
font-weight:var(--w-half);line-height:16px;color:#fff}
.op-uitbel:hover b{color:var(--teal)}
.op-uitbel svg{width:10px;height:10px}
.op-lijn{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s2);
font-size:var(--t-micro);font-weight:var(--w-half);letter-spacing:.08em;line-height:16px;
text-transform:uppercase;padding:var(--s1) 10px var(--s1) var(--s2);border-radius:100px;
white-space:nowrap;color:#5FE3BF;background:rgba(55,192,143,.15);
box-shadow:inset 0 0 0 1px rgba(55,192,143,.30)}
.op-lijn i{width:6px;height:6px;border-radius:50%;background:var(--groen);
font-style:normal;flex:none;box-shadow:0 0 0 2px rgba(55,192,143,.16)}

/* ---------- indeling ----------
   ⚠️ WEER EEN TWEELUIK, MAAR NU ECHT. Het oude raster had vijf kolommen (drie
   vlakken plus twee scheidingslijnen) voor een markup die sinds 23 augustus
   nog maar één kolom had - dood gewicht. Links de kiezer of het gesprek,
   rechts de klantcontext die meebeweegt met wat je intoetst of wie er belt. */
/* ⚠️ DE KIESKOLOM HEEFT EEN VASTE BREEDTE, GEEN FRACTIE. Met een fractie groeit
   het toetsenblok mee met de kaart: op een venster van 1858 px werd een toets
   163 bij 52 pixels - ruim drie keer zo breed als hoog, en dan leest het niet
   meer als een toetsenblok maar als een rij brede knoppen. 368 px min tweemaal
   20 px padding laat 328 over; met 8 px tussenruimte is een toets 104 breed en
   58 hoog, ongeveer 1,8:1. De overgebleven ruimte gaat naar de klantcontext,
   die hem straks echt nodig heeft als er een kaart in staat. */
.op-vlak{display:grid;grid-template-columns:368px minmax(0,1fr);
align-items:stretch}
/* ⚠️ DE KLANTCONTEXT IS VOOR EEN WIT VLAK GETEKEND, EN IK HEB HEM OP DONKER
   GEZET. Dat is bij de verbouwing van 21 september over het hoofd gezien: de
   kaart LEEK goed op een schermafbeelding, maar doorgerekend stonden er
   drieëntwintig regels onder de ondergrens - labels op 2,95, waarden op 2,26,
   "Vervolgactie:" op 1,1 (bijna zwart op donker) en de link op 1,93. Gezien
   doordat Jack ernaar wees, 22 september.

   De kleuren staan hier als TOKENS en niet als losse regels per selector: dit
   paneel leent een hele component (`kctx` / `tk-crm`) die zijn eigen kleuren
   uit dezelfde tokens haalt. Eén plek omzetten dekt ook wat er later bij komt;
   twintig selectors overschrijven dekt alleen wat er vandaag staat.
   Laagste combinatie na de omzetting: 6,92 op het lichtste stuk verloop. */
.op-context{
  --text:#F2F7F5; --ink:#F2F7F5;
  --soft:#C3D8D2; --soft-op:#C3D8D2;
  --faint:#A6BDB7; --faint-op:#A6BDB7;
  padding:var(--s5);border-left:1px solid rgba(255,255,255,.09);min-width:0;
display:flex;flex-direction:column;gap:12px}
.kctx-leeg{display:flex;flex-direction:column;gap:5px;padding:10px 0}
.kctx-leeg b{font-size:13.5px}
/* ⚠️ DEZE COMPONENT STAAT OP TWEE ONDERGRONDEN. `kctx` voedt het contactpaneel
   en de gesprekskaart (licht) én de klantcontext in de belkaart (donker). In de
   donkere ronde van 21 september heb ik hier de donkere kleur hard neergezet -
   en daarmee de lichte variant kapotgemaakt: 2,22. De basis hoort licht te zijn;
   het donkere geval staat bij `.op-context`, waar de tokens al omgezet worden. */
.kctx-leeg span{font-size:12.5px;color:var(--soft);line-height:1.5}
.op-context .kctx-leeg span{color:#8FADA7}
/* Petrol is een accent voor een WIT vlak; op donker haalt hij 1,93. Teal is
   dezelfde rol in dezelfde familie en haalt 8,15. */
.op-context .kctx-link,.op-context .tk-crm-link{color:#57DCC7}
.kctx-kop{display:flex;align-items:center;gap:10px}
.kctx-kop .avatar{width:34px;height:34px;font-size:12.5px;color:#fff;background:var(--petrol);flex:none;
display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.kctx-wie{min-width:0}
.kctx-wie b{display:block;font-size:14px;letter-spacing:-.01em;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.kctx-wie span{font-size:11.5px;color:var(--faint);font-weight:550}
.tk-crm-regel.aandacht b,.tk-crm-regel.aandacht span{color:#B03A22}
.tk-crm-regel.aandacht b{font-weight:750}
/* de AI-terugblik in de belkaart: kern geklemd, vervolgactie voluit */
.kctx-sam{margin-top:10px;padding:2px 0 2px 11px;border-left:2px solid var(--petrol-l);
  font-size:12.5px;line-height:1.5;color:var(--text)}
.kctx-sam .samkop{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:3px}
.kctx-sam p{margin:0}
.kctx-sam p.klem{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--soft)}
.kctx-sam p.vervolg{margin-top:4px}
.kctx-sam p.vervolg b{font-weight:700}
.kctx-sam .kctx-samleeg{color:var(--faint);font-size:12.5px}

/* ── Belplan: schakelen tussen nummers ── */
.bp-kies{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bp-kies .bp-nr{border:1px solid var(--line);background:var(--wit);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:13px;color:var(--soft);cursor:pointer}
.bp-kies .bp-nr b{font-weight:650;color:inherit}
.bp-kies .bp-nr:hover{border-color:var(--petrol)}
.bp-kies .bp-nr.aan{background:var(--petrol);border-color:var(--petrol);color:#fff;cursor:default}

/* ── Command Center (28 aug): rijkere resultaten, rustiger rand ──
   De kaart begrenst (74vh), het lijf scrollt, kop en voet blijven staan. */
.cmd{display:flex;flex-direction:column;width:min(640px,92vw);max-height:min(74vh,660px)}
.cmd-lijf{max-height:none;flex:1 1 auto}
.cmd-in .ikoonknop{width:28px;height:28px}
.cmd-in .ikoonknop svg{width:14px;height:14px}
.cmd-voet{font-size:10.5px;padding:6px 14px;color:var(--faint)}
.cmd-voet kbd{border-color:var(--line-2);padding:0 3px}
/* de rij: identiteit links, context in het midden, acties rechts */
.cmd-rij{position:relative;align-items:flex-start;padding:9px 10px 9px 13px}
.cmd-rij.aan{background:rgba(15,95,91,.07)}
.cmd-rij.aan::before{content:"";position:absolute;left:3px;top:7px;bottom:7px;width:3px;
  border-radius:2px;background:var(--petrol)}
.cmd-rij .mid{min-width:0;flex:1}
.cmd-rij .t3{display:block;color:var(--faint);font-size:11.5px;margin-top:1px}
.cmd-rij .re{padding-top:2px}
.cmd-rij .pijltje{flex:none;padding-top:1px}
.cmd-stip{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:1px}
.cmd-bel{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;
  background:var(--wit);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  visibility:hidden}
.cmd-rij:hover .cmd-bel,.cmd-rij.aan .cmd-bel{visibility:visible}
.cmd-bel svg{width:14px;height:14px;fill:var(--petrol)}
.cmd-bel:hover{border-color:var(--petrol)}
.cmd-beste{border:1px solid var(--line);border-radius:12px;margin:2px 4px 8px;padding:12px;
  background:var(--wit);align-items:center}
.cmd-beste .acties{display:flex;gap:8px;margin-left:auto;flex:none}
.cmd-meer{padding:8px 13px;font-size:11.5px;color:var(--faint)}
.cmd-belav{background:var(--groen);display:inline-flex;align-items:center;justify-content:center}
.cmd-belav svg{width:14px;height:14px;fill:#fff}
/* mobiel: vrijwel schermvullend, acties op duimformaat */
@media (max-width:640px){
  #cmd-dek{padding:0;align-items:stretch}
  #cmd-dek .cmd{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .cmd-bel{visibility:visible;width:40px;height:40px}
  .cmd-rij{padding:12px 10px 12px 13px}
  .cmd-rij .re{display:none}
  .cmd-beste .acties .knop{padding:10px 14px}
}
.kctx-link{font-size:12.5px;font-weight:600;color:var(--petrol);align-self:flex-start}
.kctx-h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
font-weight:600;margin:6px 0 0}
.kctx-hist{display:flex;flex-direction:column}
.kctx-rij{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rand-1);font-size:12.5px}
.kctx-rij:last-child{border-bottom:0}
.kctx-rij b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kctx-rij span{color:var(--soft);min-width:0}
.kctx-noot{font-size:11px;color:var(--faint)}
/* ⚠️ OP HET DASHBOARD IS HET CRM-BLOK IN DE GESPREKSKAART DUBBELOP: het
   contextpaneel ernaast toont dezelfde klant al, met meer ruimte. Zwevend
   (op elk ander scherm) is de kaart alleen op de wereld en draagt hij het
   blok wél - dan matcht deze selector niet, want de kaart hangt aan body. */
.telefoonkaart #tk-crm{display:none}
/* in het gespreksdetail draagt de kop de naam al; het component erin is kaal */
.kctx.in-detail{display:flex;flex-direction:column;gap:10px;margin-top:16px}

.op-links{padding:var(--s5);display:flex;flex-direction:column}
/* de kolom krimpt niet als het toetsenblok plaatsmaakt voor een gesprek */
#op-display-groep,#tk-call{flex:1 1 auto;min-height:406px;display:flex;flex-direction:column}
#tk-call{justify-content:flex-start}
#tk-call .tk-onder{margin-top:auto;padding-top:var(--s4)}

/* ---------- het nummerveld ---------- */
/* ═══ HET DISPLAY IS EEN GEWOON VELD GEWORDEN ═══
   Hier stond een zwart glazen paneel met een glans erover en een teal gloed:
   een telefoontoestel nagebouwd in een webpagina. Next tekent hier een veld
   zoals elk ander veld in de werkplek - dezelfde papierkleur, dezelfde rand,
   dezelfde radius. Een kaart die als enige op het scherm doet alsof hij een
   apparaat is, valt uit het product. */
.op-display{border-radius:9px;padding:9px 12px;position:relative;
background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11)}
.op-display:focus-within{border-color:var(--teal);background:rgba(255,255,255,.085);
box-shadow:0 0 0 3px rgba(47,212,190,.16)}
.op-nr{position:relative;z-index:1;width:100%;background:none;border:0;outline:none;
color:#fff;font-family:var(--fm);font-size:19px;font-weight:600;
line-height:28px;letter-spacing:.01em;text-align:left;height:28px;padding:0;
font-variant-numeric:tabular-nums lining-nums}
.op-nr::placeholder{color:#93B0AA;font-family:var(--fb);font-size:14px;font-weight:400;letter-spacing:0}
.op-onderrand{display:flex;align-items:center;justify-content:space-between;
margin-top:var(--s3);min-height:24px;position:relative;z-index:1}
/* #7EA39C was voor het zwarte display; op de lichte ondergrond haalt hij
   2,54 waar 4,5 de eis is. */
.op-hint{font-size:var(--t-micro);font-weight:var(--w-mid);line-height:16px;color:#93B0AA}
.op-wis{width:24px;height:24px;border-radius:var(--s2);display:grid;place-items:center;color:#9EBDB6}
.op-wis:hover{background:rgba(255,255,255,.10);color:#fff}

/* ---------- kiestoetsen ---------- */
.op-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.op-toets{position:relative;display:grid;grid-template-rows:20px 12px;justify-items:center;
align-content:center;min-height:58px;padding:var(--s2) 0;
font-size:var(--t-toets);font-weight:var(--w-half);
border:1px solid rgba(255,255,255,.085);border-bottom-color:rgba(0,0,0,.28);border-radius:var(--r-m);
background:rgba(255,255,255,.055);color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
transition:transform .09s cubic-bezier(.2,.7,.3,1),box-shadow .09s,border-color .12s,background .12s}
.op-toets small{display:block;font-size:var(--t-legenda);font-weight:var(--w-half);
letter-spacing:.2em;padding-left:.2em;line-height:12px;color:#8FADA7}
.op-toets:hover{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.op-toets:active,.op-toets.druk{transform:translateY(1px) scale(.995);
background:rgba(0,0,0,.24);border-color:rgba(255,255,255,.14);
box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
.op-toets[data-t="*"]{font-size:21px;padding:11px 0 5px}
.op-toets[data-t="#"]{font-size:16px}
.op-toets[data-t="0"] small{letter-spacing:0;padding-left:0}

/* ---------- de belknop ---------- */
/* Next' gevulde knop: één vlakke petrol, geen verloop en geen glans.
   Wit op #0F5F5B haalt 6,66 - ruim boven de eis van 4,5. */
.op-bel{width:100%;margin-top:11px;display:flex;align-items:center;justify-content:center;
gap:7px;padding:9px 12px;border-radius:8px;
font-size:14px;font-weight:500;line-height:20px;
border:1px solid var(--teal);background:var(--teal);color:#06231F;font-weight:600;
box-shadow:0 6px 18px -9px rgba(47,212,190,.65);
transition:background .12s,border-color .12s}
.op-bel:hover{background:#3FE0CB;border-color:#3FE0CB}
.op-bel:disabled{background:rgba(255,255,255,.14);color:#8FADA7;border-color:rgba(255,255,255,.14);box-shadow:none;cursor:not-allowed;text-shadow:none}
/* ⚠️ HET CHIPJE WAS EEN LICHTE LAAG OP GROEN, en wit daarop haalde 3,67.
   Een donkere laag maakt het groen eronder juist donkerder, dus wit haalt er
   meer dan 4,9 - en het chipje blijft even goed zichtbaar. */
.op-bel kbd{font:inherit;font-size:var(--t-micro);font-weight:var(--w-half);letter-spacing:.02em;
padding:0 var(--s1);line-height:16px;background:rgba(8,32,29,.22);border-radius:5px}

/* ---------- lijst ---------- */
.op-lijst{flex:1 1 0;min-height:0;max-height:308px;overflow-y:auto;
overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;
/* de onderrand dooft uit, zodat een half zichtbare rij leest als "er is meer"
   en niet als een afgekapte kaart */
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);
mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
.op-lijst:not(:hover){scrollbar-color:transparent transparent}
.op-lijst::-webkit-scrollbar{width:9px}
.op-lijst::-webkit-scrollbar-track{background:transparent}
.op-lijst::-webkit-scrollbar-thumb{background:#D6DCD6;border-radius:9px;
border:3px solid transparent;background-clip:content-box}
.op-lijst::-webkit-scrollbar-thumb:hover{background:#BCC5BD;background-clip:content-box}

/* belgeschiedenis: eigen taal, geen presence-stip als gespreksuitkomst */

/* ---------- voet ---------- */
.op-voet{display:flex;border-radius:0 0 var(--r) var(--r);
background:#08211E;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.op-voet button{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s2);
font-size:var(--t-klein);font-weight:var(--w-half);line-height:16px;padding:var(--s3) var(--s2);
min-height:44px;color:#9FC0BA;box-shadow:inset -1px 0 0 rgba(255,255,255,.07);
transition:color .1s,background .1s}
.op-voet button:first-child{border-bottom-left-radius:var(--r)}
.op-voet button:last-child{border-bottom-right-radius:var(--r);box-shadow:none}
.op-voet button.aan{color:#57DCC7}
.op-voet button:hover{color:var(--ink);background:linear-gradient(180deg,#FFFFFF,#FCFDFB);
box-shadow:inset -1px 0 0 var(--rand-1),inset 0 1px 0 #fff}
.op-voet button:last-child:hover{box-shadow:inset 0 1px 0 #fff}
.op-voet .telt{font-size:var(--t-micro);font-weight:var(--w-vet);line-height:16px;
padding:0 5px;border-radius:100px;color:#fff;background:#C4402C}

/* ---------- focus, iconen, voorkeuren ---------- */
.op :focus{outline:none}
.op :is(button,input):focus-visible{outline:2px solid var(--petrol);outline-offset:2px;
position:relative;z-index:3}
.op-display :focus-visible{outline-color:var(--teal)}
.op-toets:disabled,.op-bel:disabled,.op-voet button:disabled{cursor:not-allowed;opacity:.42;
box-shadow:none;transform:none}

.op-kop svg,.op-zoek svg,.op-bel svg,.op-wis svg,
.op-voet svg{fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.op-zoek svg,.op-uitbel svg{stroke:var(--faint)}
.op-bel svg{width:16px;height:16px;stroke:#fff}

.op-voet svg{width:14px;height:14px;stroke:currentColor}
.op-wis svg{width:14px;height:14px;stroke:currentColor}

@container operator (max-width:1000px){
  .op-vlak{grid-template-columns:340px minmax(0,1fr)}
}
@container operator (max-width:640px){
  .op-vlak{grid-template-columns:1fr}
  .op-context{border-left:0;border-top:1px solid var(--rand-2)}
  
  
  
  .op-lijst{max-height:none}
}
@container operator (max-width:440px){
  .op-voet button{flex-direction:column;gap:var(--s1);padding:var(--s2) var(--s1)}
}
@media (prefers-reduced-motion:reduce){
  /* Deze regel gold alleen voor het toetsenblok (`.op`). De rest van de werkplek
     bewoog gewoon door: de menulade schuift, de CRM-kaarten lichten op, panelen
     vouwen open. Wie deze voorkeur aanzet doet dat meestal niet uit smaak - voor
     mensen met evenwichtsklachten of migraine is beweging op een scherm een
     lichamelijke reactie. De voorkeur geldt nu voor het hele scherm. */
  *,*::before,*::after{transition-duration:.01ms !important;
  animation-duration:.01ms !important;animation-iteration-count:1 !important;
  scroll-behavior:auto !important}
  .op-toets:active,.op-toets.druk,.op-bel:active{transform:none}
}
@media (forced-colors:active){
  .op,.op-display,.op-toets,.op-bel,.op-zoek input{border:1px solid CanvasText}
  
  .op :focus-visible{outline:2px solid Highlight;outline-offset:2px}
  
}

/* ---- knoppen en velden die overal terugkomen ---- */
/* ═══ ÉÉN KNOP ═══
   Deze klasse werd op acht plekken opnieuw gedefinieerd, elke keer met andere
   padding en een ander lettertje - 6px/12px hier, 7px/12,5px daar. Wie een
   knop toevoegde kreeg een andere maat dan de knop ernaast, afhankelijk van
   in welk scherm hij stond. Next heeft er één; dit is die ene. */
.knop{display:inline-flex;align-items:center;gap:7px;border-radius:8px;
border:1px solid var(--line);background:var(--wit);padding:6px 12px;
font-size:13px;font-weight:500;color:var(--text);cursor:pointer;white-space:nowrap;
transition:background .12s,border-color .12s,color .12s}
.knop:hover{border-color:var(--petrol);color:var(--petrol);background:var(--wit)}
.knop.klein{padding:3px 8px;font-size:12px}
a.knop{text-decoration:none}
/* ⚠️ `.45` MAAKTE HET LABEL ONLEESBAAR. Een uitgezette knop is vrijgesteld van
   de contrasteis, maar de klant moet wél kunnen zien WAT er niet kan - anders
   is het een grijze vlek waar hij naar moet raden. Op .62 haalt donkere tekst
   op licht ruim 4,5, en de knop ziet er nog steeds uit alsof hij uit staat. */
.knop:disabled{opacity:.62;cursor:not-allowed;box-shadow:none;transform:none}
.knop svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.knop.vol{background:var(--petrol);border-color:var(--petrol);color:#fff}
.knop.vol:hover{background:var(--petrol-l);border-color:var(--petrol-l);color:#fff}
.knop.gevaar{background:var(--rood);border-color:var(--rood);color:#fff}
/* ⚠️ EEN UITGEZETTE KNOP IS VRIJGESTELD VAN DE CONTRASTEIS (WCAG 2.1 noemt
   inactieve bedieningselementen expliciet), maar wit op #AEBAB5 haalt 2,0 en
   dat is niet te lezen. De klant moet kúnnen zien wát er niet kan. #6E7A76
   haalt 4,6 met wit en blijft duidelijk grijs - hij ziet er niet uit als een
   knop die het wél doet. */
/* `opacity:.45` van `.knop:disabled` telde hier bovenop en bracht het contrast
   terug van 4,6 naar 4,46 - net onder de eis. Het grijze vlak plus
   `cursor:not-allowed` zeggen al genoeg dat de knop uit staat; de doorzichtigheid
   maakte het label alleen onleesbaar. */
.knop.vol:disabled{background:#68736F;box-shadow:none;opacity:1}
.knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-size:12px;font-weight:650;color:var(--soft-op)}
.veld input,.veld select{font-family:var(--fb);font-size:13.5px;color:var(--text);padding:10px 12px;
border:1px solid var(--rand-2);border-radius:10px;background:var(--wit);width:100%}
.veld input:focus,.veld select:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(15,95,91,.1)}
.slot{font-size:12px;color:var(--faint-op);line-height:1.5}
/* `.hint` werd al op vijf plekken gebruikt en bestond niet: die regels vielen
   terug op gewone bodytekst en lazen dus even zwaar als de cijfers erboven.
   `.let-op` is de variant voor iets dat de klant moet WETEN, niet iets dat hij
   mag weten - bijvoorbeeld dat de verbruikstelling achterloopt. */
/* De link "Minder gebruikers nodig?" was een <a href="javascript:void(0)">.
   Dat is script in een adres, en een CSP met script-src 'self' weigert het.
   Het is nu een knop die eruitziet als een link - hij deed altijd al wat een
   knop doet. */
.ablink{font-size:13.5px;color:#57645F;text-decoration:underline;
  text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:13.5px;color:#57645F}
.ablink:hover{color:var(--petrol)}
/* ── Teamoverzicht ─────────────────────────────────────────────────────────
   Een operationeel scherm, geen dashboard om naar te kijken. Cijfers groot waar
   ze een beslissing dragen, rustig waar ze context zijn. Alles wat aanklikbaar
   is opent het detail eronder - en dat detail komt uit dezelfde telling. */
.tmperiode{display:flex;gap:6px;flex-wrap:wrap}
.tmperiode .knop.aan{background:var(--petrol);color:#fff;border-color:var(--petrol)}

/* De band is Next' strook; de vorm staat bij de bouwstenen. Alleen de twee
   uitzonderingskleuren staan hier - let op en gemist mogen wel opvallen. */
.tmband{margin:4px 0 16px}
.tmband .wa.let{color:#8A5A12}
.tmband .wa.mis{color:#8E3A25}
.tmband .n{font-size:11.5px;color:var(--soft)}
/* De centrale niet kunnen bereiken is iets anders dan nul wachtenden. */
.tmstil{background:#FFF7EC;border:1px solid #F0DCC0;color:#8A5A12;border-radius:12px;
  padding:12px 14px;font-size:13.5px;margin:0 0 16px}

.tmrij{display:grid;grid-template-columns:1.4fr repeat(6,minmax(0,1fr));gap:10px;
  align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.tmrij:last-child{border-bottom:0}
.tmrij.kop{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--line2)}
.tmrij b{font-weight:650}
.tmrij .n{text-align:right;font-variant-numeric:tabular-nums}
.tmrij .n button{font-variant-numeric:tabular-nums;font-weight:650;color:var(--petrol);
  text-decoration:underline;text-underline-offset:3px;padding:2px 4px;border-radius:6px}
.tmrij .n button:hover{background:var(--paper)}
.tmrij .nul{color:var(--faint)}

.tmwacht{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.tmwacht:last-child{border-bottom:0}
.tmwacht .tijd{font-family:var(--fh);font-weight:750;font-size:19px;min-width:62px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tmwacht.lang .tijd{color:#8E3A25}
.tmwacht .wie{flex:1;min-width:0}
.tmwacht .wie b{display:block;font-weight:650}
.tmwacht .wie span{font-size:12.5px;color:var(--soft)}

.tmagent{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr)) auto;gap:10px;
  align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.tmagent:last-child{border-bottom:0}
.tmagent.kop{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--line2)}
.tmagent .n{text-align:right;font-variant-numeric:tabular-nums}
.tmstand{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.tmstand i{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.tmstand.vrij i{background:var(--groen)}
.tmstand.bezig i{background:var(--oranje)}
.tmstand.pauze i{background:var(--paars)}
.tmstand.uit i{background:var(--line2)}

.tmuren{display:flex;align-items:flex-end;gap:3px;height:96px;margin-top:6px}
.tmuur{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.tmuur i{display:block;background:var(--petrol);border-radius:3px 3px 0 0;min-height:2px}
.tmuur i.mis{background:#E0A392}
.tmuur span{font-size:9.5px;color:var(--faint);text-align:center;margin-top:4px}
.tmuurleeg{font-size:13px;color:var(--soft);padding:14px 0}

@media(max-width:1100px){ .tmband{grid-template-columns:repeat(3,1fr)} }
@media(max-width:760px){
  .tmband{grid-template-columns:repeat(2,1fr)}
  /* ⚠️ GEEN BREDE TABEL DIE HORIZONTAAL SCHUIFT. Op een telefoon wil een
     manager niet zijwaarts vegen om te zien of er iemand wacht; hij wil per
     wachtrij één kaart met de cijfers eronder. */
  .tmrij,.tmagent{grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px 4px}
  .tmrij.kop,.tmagent.kop{display:none}
  .tmrij>*:first-child,.tmagent>*:first-child{grid-column:1/-1;font-weight:650;font-size:15px}
  .tmrij .n,.tmagent .n{text-align:left}
  .tmrij .n::before,.tmagent .n::before{content:attr(data-k) " ";font-size:11px;
    letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700}
  .tmuren{height:70px}
}
.hint{font-size:12.5px;color:var(--faint-op);line-height:1.55;margin-top:8px}
.hint.let-op{color:#8E5A25;background:#FFF7EC;border:1px solid #F0DCC0;border-radius:10px;padding:9px 12px}

/* ---- speler voor gemaakte opnames ---- */
.speler{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;
border:1px solid var(--rand-2);border-radius:12px;background:var(--paper)}
/* ⚠️ DOORZICHTIGHEID IS HIER HET VERKEERDE GEREEDSCHAP. Op .55 haalde de
   tijdweergave 2,4, en zelfs op .8 blijft hij onder 4,5 - je kunt met opacity
   geen leesbare tekst maken. Dat de speler leeg is, blijkt uit de knoppen die
   uit staan en uit de tekst ernaast. */
.speler.leeg{opacity:1}
.sp-knop{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
background:var(--petrol);border:0;cursor:pointer;transition:background .12s,transform .08s}
.sp-knop:hover{background:var(--petrol-l,#16847C)}
.sp-knop:active{transform:scale(.96)}
.sp-knop:disabled{background:#68736F;cursor:not-allowed}
.sp-knop svg{width:15px;height:15px;fill:#fff;stroke:none;margin-left:1px}
/* De golfvorm. Staafjes met een VASTE breedte - eerder groeide elk staafje mee
   met de beschikbare ruimte (flex:1), en in een breed paneel werden het daardoor
   blokken van dertig pixels in plaats van een golf. Het aantal staafjes wordt in
   bouwGolf() uit de breedte berekend, zodat de balk op elk scherm klopt. */
.sp-golf{flex:1;display:flex;align-items:center;gap:2px;height:30px;min-width:0;overflow:hidden}
.sp-golf i{flex:0 0 3px;width:3px;border-radius:2px;background:#C6D0CB;
transition:background .12s,height .28s cubic-bezier(.2,.8,.3,1)}
.sp-golf i.op{background:var(--petrol)}
/* Het staafje waar de naald staat: even hoger en lichter, zodat je ziet dat er
   iets loopt - ook midden in een stilte. */
.sp-golf i.naald{background:var(--petrol-l,#16847C);transform:scaleY(1.55);
box-shadow:0 0 6px rgba(15,95,91,.45)}
.speler.speelt .sp-golf i{transition:background .1s,transform .1s}
.sp-tijd{font-size:12px;color:var(--soft-op);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:38px;text-align:right}

/* ---- abonnement en facturen ---- */
.abgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
/* Een kaart die de hele rij pakt. Een tabel met zes kolommen hoort niet in een
   vak van tweehonderdtachtig pixels. */
.abgrid>.abbreed{grid-column:1/-1}
.abbreed .abtabel{min-width:620px}
.abkop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.abkop h2{font-size:14.5px;font-weight:600}
.abkop .mut{font-size:12px;color:var(--faint-op)}
.abgroot{font-size:26px;font-weight:750;letter-spacing:-.02em}
.abgroot small{font-size:13px;font-weight:600;color:var(--faint-op);letter-spacing:0}
.abbalk{height:8px;border-radius:100px;background:var(--paper);overflow:hidden;margin:12px 0 8px}
.abbalk i{display:block;height:100%;background:var(--petrol);border-radius:100px}
.abbalk.op i{background:var(--oranje)}
.abregel{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.abregel:last-child{border-bottom:0}
.abregel .n{font-variant-numeric:tabular-nums;white-space:nowrap}
.abtot{display:flex;justify-content:space-between;gap:14px;padding-top:11px;margin-top:5px;
border-top:1.5px solid var(--rand-2);font-weight:750;font-size:13.5px}
.abtabel{width:100%;border-collapse:collapse;font-size:13px}
.abtabel th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--faint-op);font-weight:700;padding:0 10px 9px 0;border-bottom:1px solid var(--line)}
.abtabel td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.abtabel tr:last-child td{border-bottom:0}
.abtabel .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⚠️ BETAALD IS DE GEWONE GANG VAN ZAKEN EN KRIJGT GEEN VLAK.
   Alle drie de statussen stonden hier als gevulde pil in hoofdletters, dus ook
   de twee die precies zeggen dat er niets aan de hand is. Op een lijst van
   twaalf facturen betekent groen dan niets meer dan "er staat tekst".

   Betaald wordt een stipje met gewone letters, net als elders in de werkplek.
   Wat WEL een vlak verdient: een incasso die mislukte - want daar moet je iets
   mee - en een factuur die nog open staat. */
.abstatus{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;
white-space:nowrap;background:none;padding:2px 0;color:var(--soft)}
.abstatus::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;background:#B9C2BE}
.abstatus.betaald::before{background:var(--groen)}
.abstatus.open,.abstatus.mislukt{padding:2px 8px;border-radius:20px;font-weight:600}
.abstatus.open::before,.abstatus.mislukt::before{display:none}
.abstatus.open{background:rgba(232,163,60,.16);color:#8A5F0C}
.abstatus.mislukt{background:rgba(224,101,75,.14);color:#A33A25}
.abnummer{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.abnummer:last-child{border-bottom:0}
.abnummer b{font-weight:650;font-variant-numeric:tabular-nums}

/* ---- als app gestart: onder de notch en boven de streep blijven ---- */
@media (display-mode: standalone){
  #zij{padding-top:env(safe-area-inset-top)}
  
  .scherm{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* ---- waarschuwing als de microfoon niet mag ---- */
.mic-balk{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
display:flex;align-items:center;gap:11px;max-width:min(680px,calc(100vw - 32px));
padding:12px 14px;border-radius:12px;background:#7A2E20;color:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.28);font-size:13px;line-height:1.45}
.mic-balk[hidden]{display:none}
.mic-balk svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.mic-balk button{flex:none;margin-left:4px;padding:6px 11px;border:1px solid rgba(255,255,255,.35);
border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-family:var(--fb);
font-size:12.5px;font-weight:600;cursor:pointer}
.mic-balk button:hover{background:rgba(255,255,255,.22)}

/* ---- knop om te installeren ----
   Hij stond in de DONKERE zijbalk en droeg die kleuren: witte tekst op een
   doorzichtige witte rand. Sinds 22 augustus staat hij in het profielmenu, en
   dat is een WIT vlak - daar was hij letterlijk onzichtbaar. Hij erft nu de
   opmaak van elke andere knop in dat menu (.popover button) en zet alleen wat
   hij zelf nodig heeft: hij begint verborgen en de JS zet hem op flex zodra
   installeren echt kan. */
#installeer{display:none;color:var(--petrol)}
#installeer svg{stroke:currentColor;flex:none}

/* ---- kanaal: toets en soort ---- */
.wq-kop .toets{
  width:30px;height:30px;flex:none;border-radius:9px;background:var(--zij);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13.5px;font-family:var(--fb)
}
.soortmerk{
  margin-left:8px;padding:2px 8px;border-radius:20px;background:var(--paper);
  border:1px solid var(--rand-2);color:var(--faint-op);
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase
}
.wq.wacht::before,.wq.leeg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.wq{position:relative}
.wq.wacht::before{background:#B57A0B}
.wq.leeg::before{background:#A64A32}
.wq.wacht .wq-kop,.wq.leeg .wq-kop{padding-left:14px}

/* ---- belgroepen ---- */
.grrij{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.grrij:last-child{border-bottom:0}
.grrij .info{flex:1;min-width:0}
.grrij .nm{font-weight:650;font-size:13.5px}
.grrij .sub{font-size:12px;color:var(--faint-op);margin-top:2px}
.grrij .weg{flex:none;border:0;background:none;color:var(--faint-op);cursor:pointer;font-size:17px;
line-height:1;padding:4px 7px;border-radius:6px}
.grrij .weg:hover{color:var(--rood-tekst);background:#FBEFEC}
.grleden{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.grleden label{display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--rand-2);
border-radius:9px;background:var(--wit);font-size:12.5px;cursor:pointer}
.grleden label.aan{border-color:var(--petrol);background:#EEF6F4;font-weight:600}
.grleden input{accent-color:var(--petrol)}

/* ---- verbonden toestellen in het profielmenu ---- */
.popover .bol{width:8px;height:8px;border-radius:50%;background:var(--rand-2);flex:none;margin-right:2px}
.popover button[data-rinkel].aan .bol{background:var(--groen)}
.popover button[data-rinkel].aan{font-weight:650}
.apparaten{padding:2px 14px 10px}
/* `min-width:0` op de rij zelf: zonder dat weigert een flexregel te krimpen
   onder zijn min-content (de nowrap-naam) en loopt hij het menu uit. Samen met
   de vaste menubreedte hierboven is dit het slot op die bug. */
.apparaten .ap{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;color:var(--ink);min-width:0}
.apparaten .ap .stip{width:7px;height:7px;border-radius:50%;flex:none}
/* De naam krimpt en kapt af; de cijfers erachter ("24 ms", "2x") blijven heel -
   die zijn kort en zeggen juist iets. */
.apparaten .ap .apnaam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apparaten .ap > small{flex:none}
/* ⚠️ DEZE TWEE HEETTEN `.op` EN `.af`, EN DAAR ZAT EEN BUG IN.
   `.op` bestaat ook als GENERIEKE klasse: het is het vlak van de belwerkplek,
   en dat draagt `margin:-14px -16px` (zie de regel `.op` eerder in dit
   bestand). Die negatieve marge gold dus ook voor elke statusstip in dit menu:
   de stip werd 16 px naar links getrokken, viel over de eerste letter van de
   toestelnaam, en sleepte de hele regel het menu uit - zichtbaar als
   "Webwerkplek" met een groen streepje door de W. Gemeten in de browser:
   `margin: 5px -16px -14px` op een stip van 7 px.
   Een eigen voorvoegsel kan niet meer botsen. */
.apparaten .ap .stip-aan{background:var(--groen)}
.apparaten .ap .stip-uit{background:var(--rand-2)}
.apparaten .ap small{color:var(--faint-op);font-size:11.5px}
.apparaten .slot{font-size:12.5px;color:var(--faint-op)}
/* De afmeldknop van een ander toestel. Klein en rustig: hij hoort er te zijn
   als je hem zoekt, en niet op te vallen als je hem niet nodig hebt. */
.apparaten .ap.sessie{align-items:flex-start;padding:5px 0}
.apparaten .ap.sessie .stip{margin-top:5px}
.apparaten .apinfo{min-width:0;flex:1;display:block}
.apparaten .apinfo b{display:block;font-weight:650;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apparaten .apinfo small{display:block;color:var(--faint-op);font-size:11.5px;line-height:1.3}
/* ⚠️ `width:auto` IS HIER GEEN OVERBODIGE REGEL. `.popover button` zet
   `width:100%` - bedoeld voor de menuknoppen die de volle breedte vullen - en
   die gold ook voor deze. De knop duwde daardoor de naam van het toestel tot
   één letter in elkaar. Gezien op een schermafdruk, niet in de code. */
.apparaten .apaf{margin-left:auto;flex:none;width:auto;font-size:11.5px;font-weight:650;
  color:var(--petrol);padding:2px 7px;border:1px solid var(--line);border-radius:100px;
  background:var(--wit)}
.apparaten .apaf:hover{background:var(--paper);border-color:var(--petrol)}
.apparaten .apaf[disabled]{opacity:.5;cursor:default}

/* ---- eigen contacten ---- */
.ctrij{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ctrij:last-child{border-bottom:0}
.ctrij .avatar{width:36px;height:36px;border-radius:11px;color:#fff;display:grid;place-items:center;
font-weight:700;font-size:12.5px;flex:none}
.ctrij .info{flex:1;min-width:0}
.ctrij .naam{font-weight:650;font-size:13.5px}
.ctrij .sub{font-size:12px;color:var(--faint-op);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⚠️ #E0A32E HAALDE 2,05 OP PAPIER. Een ster is geen tekst, dus de eis is 3,0
   en niet 4,5 - maar ook die haalde hij niet. #B8790E haalt 3,35 en is
   dezelfde kleur, twee tinten donkerder. Wie kleur slecht ziet moet kunnen
   zien welk contact een favoriet is; dat is de hele functie van dat sterretje. */
.ctrij .ster{color:#B8790E}
.ctrij .knop svg{width:14px;height:14px;fill:currentColor;stroke:none}
.ctrij .weg{flex:none;border:0;background:none;color:var(--faint-op);cursor:pointer;font-size:17px;
line-height:1;padding:4px 7px;border-radius:6px}
.ctrij .weg:hover{color:var(--rood-tekst);background:#FBEFEC}

/* ---- wat er nu aan dit bericht hangt ---- */
.huidig{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;
border:1px solid var(--rand-2);border-radius:11px;background:var(--wit)}
.huidig[hidden]{display:none}
.huidig .speel{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--rand-2);
background:var(--paper);cursor:pointer;display:grid;place-items:center;color:var(--petrol)}
.huidig .speel:hover{background:#EEF6F4}
.huidig .speel svg{width:13px;height:13px;fill:currentColor;stroke:none}
.huidig .info{flex:1;min-width:0}
.huidig .nm{font-weight:650;font-size:13px}
.huidig .sub{font-size:11.5px;color:var(--faint-op);margin-top:2px}
.huidig.leeg{border-style:dashed;background:transparent}

/* ---- bibliotheek met opnames ---- */
.oprij{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.oprij:last-child{border-bottom:0}
.oprij .speel{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--rand-2);
background:var(--wit);cursor:pointer;display:grid;place-items:center;color:var(--petrol)}
.oprij .speel:hover{background:var(--paper)}
.oprij .speel svg{width:13px;height:13px;fill:currentColor;stroke:none}
.oprij .info{flex:1;min-width:0}
/* Een naam die uit een bestandsnaam komt kan eindeloos lang zijn - afkappen,
   anders duwt hij de koppelknop uit beeld. De hele naam staat in de tooltip.
   Waar de opname aan hangt staat op de regel eronder: dat label mag nooit
   wegvallen omdat de naam toevallig lang is. */
.oprij .nm{font-weight:650;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oprij .sub{font-size:11.5px;color:var(--faint-op);margin-top:3px;
display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.oprij select{font-family:var(--fb);font-size:12.5px;padding:6px 9px;border:1px solid var(--rand-2);
border-radius:8px;background:var(--wit);max-width:190px}
.oprij .weg{flex:none;border:0;background:none;color:var(--faint-op);cursor:pointer;font-size:16px;
line-height:1;padding:4px 6px;border-radius:6px}
.oprij .weg:hover{color:var(--rood-tekst);background:#FBEFEC}

/* ---- eigen opname uploaden ---- */
.upvak{margin-top:18px;padding:16px;border:1.5px dashed var(--rand-2);border-radius:var(--r);
background:var(--paper);transition:border-color .15s, background .15s}
.upvak.sleep{border-color:var(--petrol);background:#EEF6F4}
.upkop{display:flex;gap:12px;align-items:flex-start}
.upkop svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--petrol);
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.upkop b{display:block;font-size:13.5px;font-weight:650}
.upkop span{display:block;font-size:12.5px;color:var(--faint-op);line-height:1.5;margin-top:3px}
.upvak .knoppen{margin-top:14px}

/* ---- wachtrijen ---- */
.wq{border-bottom:1px solid var(--line)}
.wq:last-child{border-bottom:0}
.wq-kop{display:flex;align-items:center;gap:14px;padding:13px 0;cursor:pointer}
.wq-kop:hover .wq-naam{color:var(--petrol)}
.wq-naam{font-weight:650;font-size:14px;transition:color .12s}
.wq-cijfers{display:flex;gap:18px;margin-top:3px;font-size:12.5px;color:var(--faint-op)}
.wq-cijfers b{color:var(--ink);font-weight:650}
.wq-cijfers .druk b{color:var(--rood-tekst)}
.wq-mid{flex:1;min-width:0}
.wq-mij{display:flex;align-items:center;gap:9px;flex:none}
.wq-mij .tekst{font-size:12.5px;color:var(--faint-op);min-width:64px;text-align:right}
.wq-pijl{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--faint-op);
transition:transform .18s ease}
.wq.open .wq-pijl{transform:rotate(90deg)}
.wq-pijl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wq-leden{display:none;padding:2px 0 14px 0}
.wq.open .wq-leden{display:block}
.wq-lid{display:flex;align-items:center;gap:12px;padding:9px 0 9px 14px;border-left:2px solid var(--line);margin-left:4px}
.wq-lid .av{width:30px;height:30px;border-radius:9px;background:var(--petrol);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
.wq-lid .nm{flex:1;min-width:0;font-size:13px;font-weight:600}
.wq-lid .st{display:block;font-size:11.5px;color:var(--faint-op);font-weight:500;margin-top:2px}
.wq-lid .st.bezet{color:var(--rood-tekst)}
.wq-lid .st.weg{color:var(--faint-op)}
.wq-leeg{padding:10px 0 12px 18px;font-size:12.5px;color:var(--faint-op)}

/* ---- medewerkers ---- */
.mwrij{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.mwblok:last-child .mwrij{border-bottom:0}
.mwtoegang{padding:4px 0 18px 50px}
.tgkop{font-size:12.5px;font-weight:700;margin-bottom:10px}
.tglijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 18px}
.tgvink{display:flex;align-items:flex-start;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer}
.tgvink:hover{background:var(--paper)}
.tgvink input{width:15px;height:15px;margin-top:2px;accent-color:var(--petrol);flex:none;cursor:pointer}
.tgvink span{display:flex;flex-direction:column;line-height:1.35}
.tgvink b{font-size:12.5px;font-weight:650}
.tgvink i{font-style:normal;font-size:11.5px;color:var(--faint-op)}
.tgmanager{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 12px;
border:1px solid var(--rand-2);border-radius:9px;background:var(--paper);cursor:pointer;max-width:620px}
.tgmanager input{width:15px;height:15px;margin-top:2px;accent-color:var(--petrol);flex:none;cursor:pointer}
.tgmanager span{display:flex;flex-direction:column;line-height:1.4}
.tgmanager b{font-size:12.5px;font-weight:700}
.tgmanager i{font-style:normal;font-size:11.5px;color:var(--faint-op);margin-top:2px}
.tgvoet{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--faint-op);max-width:620px}
.mwrij .acties .knop.aan{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.mwrij .av{width:36px;height:36px;border-radius:11px;background:var(--petrol);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none}
.mwrij .info{flex:1;min-width:0}
.mwrij .naam{font-weight:650;font-size:13.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mwrij .sub{font-size:12px;color:var(--faint-op);margin-top:2px}
.mwrij .pil{padding:2px 8px;font-size:10.5px;font-weight:700;letter-spacing:.02em;
text-transform:uppercase;border-radius:6px;background:var(--paper);color:var(--faint-op)}
.mwrij .pil.oranje{background:rgba(214,138,32,.13);border-color:rgba(214,138,32,.3);color:#8A5A12}
.mwrij .pil.groen{background:rgba(15,95,91,.1);border-color:rgba(15,95,91,.25);color:var(--petrol)}
.mwrij select{font-family:var(--fb);font-size:12.5px;padding:6px 9px;border:1px solid var(--rand-2);
border-radius:8px;background:var(--wit)}
.mwrij .acties{display:flex;gap:6px;flex:none}
.mwrij .acties .knop.weg{color:var(--rood-tekst);border-color:rgba(178,58,48,.28)}
.mwrij .acties .knop.weg:hover{background:rgba(178,58,48,.07);border-color:rgba(178,58,48,.45)}
.mwrij .acties .knop.weg svg{width:13px;height:13px}
.codeblok{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.codeblok>div{background:var(--paper);border:1px solid var(--rand-2);border-radius:10px;padding:12px 14px}
.codeblok .label{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--faint-op);font-weight:700;margin-bottom:4px}
.codeblok b{font-size:17px;font-weight:750;letter-spacing:.04em;user-select:all}
.codehoe{margin-top:14px;display:grid;gap:8px}
.codehoe p{font-size:12.5px;line-height:1.55;color:var(--faint-op)}
.codehoe p b{color:var(--ink);font-weight:650}
.codehoe .klein{font-size:11.5px;padding-top:6px;border-top:1px solid var(--line)}

/* ---- wachtmuziek: wat er nu aanstaat ---- */
.nuaan{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:12px;
border-radius:10px;background:rgba(55,192,143,.10);border:1px solid rgba(55,192,143,.28)}
.nuaan .label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#15694A}
.nuaan b{font-size:14px;font-weight:750}
.nuaan span:last-child{font-size:12px;color:var(--soft-op)}
.opn.actief .t{color:var(--petrol)}

/* ---- belplan: openingstijden naast het keuzemenu ---- */
.dagtijd.dicht input{display:none}
.dagtijd.dicht::after{content:'Gesloten';color:var(--faint-op);font-size:13px}
.blokkop{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.blokkop h2{font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.blokkop .aanuit{margin-left:0}
.belplan{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1180px){.belplan{grid-template-columns:1fr}}
.belplan .paneel{max-width:none !important}
/* De rechterhelft van het belplan is zelf al een halve pagina; daar pasten
   het keuzemenu en het gesproken bericht op 1280 en 1366 niet ook nog eens
   naast elkaar. Het keuzemenu hield dan zo'n 200 pixels over, liep zijn
   paneel uit en je klikte per ongeluk op de knoppen van het paneel ernaast.
   Onder elkaar houdt elk paneel de volle breedte. */
.belplan .rooster{grid-template-columns:minmax(0,1fr)}

/* ---- keuzemenu ---- */
.aanuit{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:650;color:var(--soft-op)}
/* minmax(0,1fr) en niet 1fr: een gewone 1fr weigert kleiner te worden dan de
   inhoud, dus een keuzelijst met "Iedereen laten rinkelen" erin duwde de rij
   buiten het paneel. Zo krimpt hij netjes mee. */
.kmrij{display:grid;grid-template-columns:44px minmax(0,1fr) 130px minmax(0,1fr) 32px;align-items:center;gap:10px;
padding:9px 0;border-bottom:1px solid var(--line)}
.kmrij:last-of-type{border-bottom:0}
.kmrij .toets{width:36px;height:36px;border-radius:10px;border:1px solid var(--rand-2);
background:var(--wit);text-align:center;font-size:15px;font-weight:700;font-family:var(--fb);
box-shadow:var(--sch-1);color:var(--ink)}
.kmrij input,.kmrij select{font-family:var(--fb);font-size:13px;padding:8px 10px;
border:1px solid var(--rand-2);border-radius:9px;background:var(--wit);width:100%;min-width:0}
.kmrij input:focus,.kmrij select:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(15,95,91,.1)}
.kmrij .weg{width:28px;height:28px;border-radius:8px;border:1px solid var(--rand-2);background:var(--wit);
color:var(--faint-op);font-size:15px;line-height:1;cursor:pointer}
.kmrij .weg:hover{background:#FFF1EC;border-color:#F3CFC4;color:#8E3A25}
.kmkop{display:grid;grid-template-columns:44px minmax(0,1fr) 130px minmax(0,1fr) 32px;gap:10px;padding-bottom:6px;
font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint-op);font-weight:700}
/* Op een laptopscherm (1280, 1366) is een vaste kolom van 130px voor Soort te
   duur: dan blijft er voor Wat de beller kiest en Bestemming te weinig over.
   Daar verdelen we de drie velden gewoon gelijk. */
@media(max-width:1400px){
  .kmrij,.kmkop{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 32px}
}

/* ---- bereikbaarheidsschermen ---- */
.veld textarea{font-family:var(--fb);font-size:13.5px;color:var(--text);padding:10px 12px;
border:1px solid var(--line);border-radius:10px;background:var(--wit);width:100%;resize:vertical;line-height:1.5}
.veld textarea:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(15,95,91,.1)}
/* De stemmenlijst. Bewust in een eigen scrollvak: er zijn er twee dozijn, en
   anders staan de knoppen eronder buiten beeld en denkt de klant dat er niets
   te bestellen valt. */
.stemvak{max-height:238px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;
padding:8px 10px;background:var(--paper)}
.stemkop{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
font-weight:700;margin:10px 2px 2px}
.stemkop:first-child{margin-top:2px}
.stemrij{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);
border-radius:10px;margin-top:6px;cursor:pointer;background:var(--wit);
transition:border-color .12s,background .12s}
.stemrij:hover{border-color:#B9C6C0}
.stemrij.aan{border-color:var(--petrol);background:rgba(15,95,91,.06);box-shadow:0 0 0 1px var(--petrol)}
.stemrij.kan-niet{cursor:default;background:transparent}
.stemrij.kan-niet .nm b{color:var(--soft)}
.stemrij .nm{flex:1;min-width:0}
.stemrij .nm b{display:block;font-size:13px;font-weight:650}
.stemrij .nm span{font-size:11.5px;color:var(--faint)}
.stemrij .prijs{font-size:11.5px;font-weight:650;color:var(--soft);white-space:nowrap}
.stemrij .prijs.gratis{color:#1C7A56}
.stemrij .slotje{font-size:11px;color:var(--faint);white-space:nowrap}
/* luisterknop per stem - kost niets, dat mag je zien */
.luister{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line);
background:var(--wit);display:grid;place-items:center;cursor:pointer;padding:0;
transition:background .12s,border-color .12s}
.luister:hover{border-color:var(--petrol);background:rgba(15,95,91,.07)}
.luister svg{width:12px;height:12px;fill:var(--petrol);stroke:none;margin-left:1px}
.luister.speelt{background:var(--petrol);border-color:var(--petrol)}
.luister.speelt svg{fill:#fff;margin-left:0}
.stapkop{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
.stapkop:first-of-type{margin-top:14px}
.stapkop i{width:20px;height:20px;flex:none;border-radius:50%;background:var(--petrol);color:#fff;
font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center}
.stapkop b{font-size:12.5px;font-weight:650}
.stapkop span{font-size:11.5px;color:var(--faint)}
.dagrij{display:grid;grid-template-columns:44px 96px 1fr;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.dagrij:last-child{border-bottom:0}
.dagnaam{font-weight:650;font-size:13px}
.dagtijd{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.dagtijd input{width:78px;padding:6px 9px;font-size:13px;border:1px solid var(--line);border-radius:8px;background:var(--wit);font-family:var(--fb)}
/* Het woordje "tot" hoort bij de twee tijdvelden. Verdwijnen die bij een
   gesloten dag, dan moet hij mee - anders leest er "tot Gesloten". */
.dagtijd.dicht .tot{display:none}
/* Dezelfde reden als hierboven: .55 maakt "08:30 tot 17:30" onleesbaar terwijl
   het woord "Gesloten" er al staat. De tijden blijven staan omdat ze weer gaan
   gelden zodra de dag aangaat - ze horen dus leesbaar te blijven. */
.dagrij.dicht .dagtijd{opacity:1;color:var(--faint)}

.schakel{position:relative;width:40px;height:24px;border-radius:100px;background:#D8DED8;cursor:pointer;flex:none;border:0;transition:background .16s}
.schakel::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(8,32,29,.3);transition:transform .16s}
.schakel.aan{background:var(--groen)}
.schakel.aan::after{transform:translateX(16px)}
.opn{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.opn:last-child{border-bottom:0}
.opn .info{flex:1 1 250px;min-width:0}
.opn .t{font-weight:650;font-size:13.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* Een opnamenaam die uit een bestandsnaam komt kan eindeloos lang zijn; die
   mag de kolom niet uit elkaar duwen. */
.opn .t .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opn .s{font-size:12px;color:var(--faint);margin-top:2px}
/* Een opnamenaam is vaak een exportnaam van een stemdienst en dus lang. Twee
   regels en dan afkappen: langer maakt de regel onleesbaar, en de volledige
   naam staat in de tooltip. */
.opn .s{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.opn .knoppen{margin-top:0;flex:none}

/* ---- gesprek in beeld: identiteit, meter, kwaliteit ---- */
.tk-kop{display:flex;align-items:center;gap:12px;margin-top:2px;text-align:left}
.tk-av{width:44px;height:44px;border-radius:14px;background:var(--petrol);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(8,32,29,.14)}
.tk-ident{flex:1;min-width:0}
.tk-ident .tk-wie{display:block;font-size:17px;font-weight:750;letter-spacing:-.01em;
color:var(--ink);text-align:left;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-sub{display:block;font-size:12px;color:var(--faint-op);margin-top:1px}
.tk-kwaliteit{display:inline-flex;align-items:flex-end;gap:2px;height:14px;flex:none}
.tk-kwaliteit i{width:3px;border-radius:2px;background:#D6DCD6}
.tk-kwaliteit i:nth-child(1){height:6px}
.tk-kwaliteit i:nth-child(2){height:10px}
.tk-kwaliteit i:nth-child(3){height:14px}
.tk-kwaliteit[data-q="3"] i{background:var(--groen)}
.tk-kwaliteit[data-q="2"] i:nth-child(-n+2){background:var(--oranje)}
.tk-kwaliteit[data-q="1"] i:nth-child(1){background:#E05B44}
/* geluidsmeter: beweegt mee met wat je hoort */
.tk-meter{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:22px;margin-top:12px}
.tk-meter i{width:3px;height:3px;border-radius:2px;background:var(--petrol);opacity:.28;
transition:height .09s linear,opacity .09s linear}
/* doorverbindstand: het blok Collega's wordt een doellijst */
/* Het blok Collega's terwijl je doorverbindt: elke rij is een doel. */
.verbindt{box-shadow:0 0 0 1px var(--petrol),var(--schaduw)}
.verbindt .kaart-kop h2{color:var(--petrol)}
.verbindt .arij{background:rgba(15,95,91,.045);cursor:pointer}
.verbindt .arij:hover{background:rgba(15,95,91,.11)}
.verbindt .belknopje{opacity:1;background:var(--petrol);border-color:var(--petrol)}
.verbindt .belknopje svg{stroke:#fff}

/* ---- belvenster ---- */

/* ⚠️ `.belscherm` WORDT NERGENS GEBRUIKT. Er is geen markup en geen regel
   JavaScript die deze klasse zet; het inkomende gesprek verschijnt in de
   telefoonkaart. Hij blijft staan omdat weghalen niets oplevert en de
   volgende die hem zoekt anders denkt dat er een belscherm bestaat -
   vandaar deze regel in plaats van een stille verwijdering. */

.belkaart .sluit{position:absolute;margin-left:262px;margin-top:-8px;color:#9FC0BA;font-size:20px}
.beltoon{width:100%;background:none;border:0;color:#fff;font-size:22px;text-align:center;font-family:var(--fb);padding:6px 0 14px;outline:none;letter-spacing:.02em}
.toetsen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.toetsen button{height:52px;border-radius:50%;background:rgba(255,255,255,.08);font-size:19px;font-weight:600;color:#fff}
.toetsen button:hover{background:rgba(255,255,255,.16)}
.toetsen button span{display:block;font-size:8.5px;letter-spacing:.14em;color:#9FC0BA;font-weight:700}

.rond{width:54px;height:54px;border-radius:50%;display:grid;place-items:center}
.rond svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rond.groen{background:var(--groen)}.rond.groen:hover{background:#2EA477}
.rond.rood{background:#E05B44}.rond.rood:hover{background:#C74A35}

/* ---- inloggen ---- */
/* ═══ HET INLOGSCHERM ═══
   Een rustige werkplek-bij-schemer achter de kaart (huisstijl, geen stockfoto).
   De donkere gradient-overlay LIGT EROVER zodat de witte kaart en zijn tekst
   altijd leesbaar blijven, ook op een lichte plek in de foto. De foto dekt het
   hele scherm (cover) en blijft gecentreerd op elk formaat.
   ⚠️ De donkere grond blijft als TERUGVAL onder de foto staan: laadt de foto
   niet, dan is het scherm nog steeds donker en de kaart leesbaar. */
.inlog{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:
    linear-gradient(180deg, rgba(6,20,18,.44) 0%, rgba(6,20,18,.26) 45%, rgba(6,20,18,.52) 100%),
    var(--zij) url('/assets/werkplek-inlog.webp?v=inlog2') center/cover no-repeat;}
/* Dark mode: overlay iets donkerder voor extra contrast. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .inlog{
    background:
      linear-gradient(180deg, rgba(4,14,12,.58) 0%, rgba(4,14,12,.40) 45%, rgba(4,14,12,.66) 100%),
      var(--zij) url('/assets/werkplek-inlog.webp?v=inlog2') center/cover no-repeat;}
}
:root[data-theme="dark"] .inlog{
  background:
    linear-gradient(180deg, rgba(4,14,12,.58) 0%, rgba(4,14,12,.40) 45%, rgba(4,14,12,.66) 100%),
    var(--zij) url('/assets/werkplek-inlog.webp?v=inlog2') center/cover no-repeat;}
/* De kaart krijgt een zachte schaduw zodat hij van de foto loskomt. */
.inlog .inlogkaart{box-shadow:0 24px 60px -18px rgba(3,14,12,.65)}
.inlogkaart{width:340px;background:var(--wit);border-radius:18px;padding:26px}
.inlogkaart h1{font-family:var(--fh);font-size:19px;font-weight:750;margin-bottom:4px}
.inlogkaart p{font-size:13.5px;color:var(--soft);margin-bottom:14px}
.inlogkaart label{display:block;font-size:12.5px;font-weight:650;color:var(--soft);margin:12px 0 5px}
.inlogkaart input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px}
.inlogkaart input:focus{outline:none;border-color:var(--petrol)}
.inlogkaart .knop{width:100%;margin-top:18px;padding:12px;border-radius:100px;background:var(--ink);color:#fff;font-weight:650}
.inlogfout{margin-top:12px;font-size:13px;color:#8E3A25;background:#FFF1EC;border:1px solid #F3CFC4;border-radius:10px;padding:9px 12px}

/* ═══ WAAR DE TOETSENBORDFOCUS STAAT ═══
   De invoervelden hadden hun eigen focusstijl (rand plus schaduw), maar knoppen
   en links leunden op de standaardring van de browser. Die is er wél, maar hij
   is één pixel dun en heeft de kleur van het BESTURINGSSYSTEEM - op de donkere
   zijbalk en op de petrolgroene knoppen is dat een gok.

   `:focus-visible` en niet `:focus`: een muisklik hoort geen ring achter te
   laten, een Tab wel. Op donkere vlakken de lichte variant, zodat de ring daar
   niet in de achtergrond verdwijnt. */
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:6px}
.overslaan{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:#fff;
  padding:9px 16px;border-radius:10px;font-weight:650;font-size:13.5px;text-decoration:none}
.overslaan:focus{left:8px}
.zijbalk :focus-visible,.op :focus-visible,.mobielmelding :focus-visible{outline-color:var(--teal)}

/* De meldingen wonen in één vast gebied, zodat een schermlezer ze aankondigt.
   Het gebied zelf is doorzichtig en vangt geen klikken. */
#meldingen{position:fixed;left:0;right:0;bottom:0;z-index:110;pointer-events:none}
.melding{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:100px;font-size:13.5px;z-index:110;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}

/* ═══ OP EEN TELEFOON ═══
   Hier stond `.zijbalk,.vlak,.fab{display:none}`: onder 760 pixels verdween de
   HELE werkplek achter een scherm met "gebruik de app". Bellen hoort inderdaad
   in de app - WebRTC in een mobiele browser levert geen telefoon die overgaat
   als je scherm uit staat. Maar Medewerkers, Belplan, Openingstijden, Voicemail,
   Contacten en Facturen zijn gewone lijsten en formulieren, en die waren op een
   telefoon onbereikbaar. Een eigenaar die op vrijdagmiddag eerder wil sluiten
   moest daarvoor achter een computer gaan zitten.

   Er stonden zelfs al regels klaar die nooit aan konden komen: `.dndbalk` op
   560, `.lijnrooster` op 820, de CRM-kaarten op 620. Geschreven voor een breedte
   waarop alles verborgen was.

   Wat nu gebeurt onder 760 pixels:
     · de zijbalk wordt een lade die over het scherm schuift, met een knop
       linksboven en een donkere achtergrond die hem sluit;
     · het werkvlak vult de breedte;
     · de toetsen en de belknop verdwijnen, met één kaart die zegt waarom en
       waar je wél mee belt.
   Bellen belooft de werkplek op een telefoon dus nog steeds niet. De rest werkt. */
.mobielmelding{display:none}
.zb-sluit{display:none}
.navknop{display:none}
.zijbaldek{display:none}

/* ═══ NEXT' AFKAPPUNTEN ═══
   Next klapt de zijbalk in op 860 pixels en de topbalk op 700. Productie deed
   allebei op 760: dan staat er op een tablet van 800 nog een zijbalk van 236
   naast de inhoud, en houdt de inhoud 564 over voor twee kolommen. */
@media(max-width:860px){
  .schil{grid-template-columns:1fr}
  .zijbalk{position:fixed;top:0;bottom:0;left:0;width:236px;max-width:80vw;z-index:130;height:100vh;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .zijbalk.open{transform:none}
  .inhoud{padding:16px 14px 90px}
  .zoekknop{max-width:none}
  .tabelwrap table,table.next{min-width:520px}
  .zijbaldek{display:block;position:fixed;inset:0;background:rgba(8,32,29,.5);z-index:125;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  .zijbaldek.open{opacity:1;pointer-events:auto}
  .navknop{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;flex:none}
  .navknop svg{width:19px;height:19px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round}
  .zb-sluit{display:grid;place-items:center;position:absolute;top:14px;right:12px;
    width:32px;height:32px;border-radius:9px;color:#CFE4DF}
  .zb-sluit svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  
  /* De telefoonkaart en de toetsen horen bij de app; ze zijn hier geen halve
     versie maar helemaal weg, met de kaart hieronder als antwoord. */
  .telefoonkaart{display:none !important}
  .mobielmelding{display:block;background:var(--zij);color:#fff;border-radius:16px;
    padding:18px 18px 20px;margin-bottom:14px;line-height:1.55}
  .mobielmelding b{display:block;font-size:15px;margin-bottom:6px}
  .mobielmelding a{display:inline-block;margin-top:10px}

  /* Alleen de bol en het pijltje; het woord "Beschikbaar" past hier niet naast
     een zoekveld en een profiel. De keuze zelf verandert niet. */
  #statusknop #statustekst{display:none}
  /* Twee kolommen naast elkaar passen niet op 375 pixels. `.rooster` hield een
     vaste kolom van 380 aan (Gesprekken, Contacten, Wachtmuziek); die liep dus
     tot 67 pixels buiten beeld en daar stonden knoppen in. `.belplan` had al een
     regel op 1180, maar zijn kinderen dwongen alsnog 391 af omdat een grid-kind
     standaard niet kleiner wil worden dan zijn inhoud. */
  .rooster,.rooster:not(.r2):not(.r3):not(.r-hoofd){grid-template-columns:1fr}
  .belplan{grid-template-columns:1fr}
  .rooster>*,.belplan>*,.dashraster>*{min-width:0}
  /* Een rij knoppen mag afbreken in plaats van uit het kader te lopen. */
  .knoppen{flex-wrap:wrap}
  .knoppen .knop{max-width:100%}
  /* Openingstijden: dag, schakelaar en twee tijdvelden naast elkaar wordt op
     375 pixels dertien pixels te breed - net genoeg om het tweede tijdveld half
     af te snijden. De tijden gaan onder de dag staan. */
  .dagrij{grid-template-columns:44px 1fr;gap:8px 12px}
  .dagrij .dagtijd{grid-column:1/-1;flex-wrap:wrap}
  .dagrij input{min-width:0}
  .kop,.s-kop{flex-wrap:wrap;gap:10px}
  .dashraster{grid-template-columns:1fr;gap:12px}
  .dashraster>[data-w]{grid-column:1/-1 !important;height:auto !important;overflow:visible !important}
  
  /* Brede tabellen (facturen, gesprekken) mogen NOOIT de pagina laten schuiven;
     ze schuiven binnen hun eigen kader. */
  .abtabel{min-width:560px}
  .paneel>table,.abtabel{display:table}
}

/* ═══ SMAL SCHERM ═══
   De topbalk moet inklappen in plaats van omvallen: op 375 pixels past een
   zoekveld met zeven woorden er niet in, en dan wordt de balk drie regels hoog
   en duwt hij de pagina scheef. Het veld wordt een knop, de lijnpil krimpt
   tot bol en pijltje (hem verbergen liet mobiel zonder statusknop achter -
   de zijbalkvoet TOONT de status alleen maar), en rijen mogen krimpen. */
@media (max-width:700px){
  .top{gap:8px;padding:0 12px}
  .zoekknop{flex:none;width:34px;height:32px;padding:0;justify-content:center;font-size:0}
  .zoekknop span,.zoekknop kbd{display:none}
  .zoekknop svg{width:15px;height:15px}
  .lijnpil{padding:5px 9px}
  .kruimels{flex:1;min-width:0;overflow:hidden}
  .kop h1,.s-kop h1{font-size:21px}
  .rij,.arij,.oprij,.ctrij{flex-wrap:wrap;gap:8px}
  .rij .hoofd,.arij .info,.oprij .info,.ctrij .info{flex:1 1 60%;min-width:0}
  .rij .rechts{margin-left:auto}
  .rij .acties{display:flex;flex:1 1 100%}
  .kaart-kop{flex-wrap:wrap}
  .cijferrij{gap:16px}
}

/* ── CRM-integraties ──────────────────────────────────────────────────────
   Rust, ruimte en één accentkleur. Beweging alleen waar je iets kunt
   aanwijzen; alles wat beweegt doet dat met dezelfde curve, zodat de pagina
   één ding lijkt en geen verzameling losse onderdelen. */

/* De kop is Next' `.s-kop`; hier alleen de breedte van de uitleg eronder. */
.crm-hero{margin:0 0 18px}
.crm-hero p{max-width:780px}
/* Next heeft één kopmaat voor elk scherm. Dit scherm had er een eigen -
   32/770 tegenover 25/600 - waardoor Teamleader zwaarder aankwam dan
   Teamoverzicht, zonder dat daar een reden voor was. */
.crm-hero h1{font-size:25px;font-weight:600;letter-spacing:-.015em;margin:0 0 10px;line-height:1.2}
.crm-hero p{color:var(--faint);font-size:13.5px;line-height:1.6;margin:3px 0 0}

.crm-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 14px}
.crm-cijfer{background:var(--kaart);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--schaduw);padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:12px}
.crm-cijfer .ico{width:34px;height:34px;border-radius:10px;background:#F1F5F2;display:grid;place-items:center}
.crm-cijfer .ico svg{width:17px;height:17px;color:var(--petrol)}
.crm-cijfer .k{font-size:11.5px;font-weight:700;letter-spacing:.35px;text-transform:uppercase;color:var(--faint)}
.crm-cijfer .v{font-size:25px;font-weight:770;color:var(--text);line-height:1.05;margin-top:3px;letter-spacing:-.5px}
.crm-cijfer .v.klein{font-size:15px;font-weight:700;letter-spacing:0;line-height:1.35;padding-top:5px}

/* ── De grote statuskaart ─────────────────────────────────────────────── */
.crm-status{margin-bottom:36px}
.crm-status .vak{border-radius:20px;padding:28px 30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.crm-status .vak.leeg{background:var(--wit);border:1px dashed #D3DAD3}
.crm-status .vak.aan{background:linear-gradient(135deg,#0F5F5B,#0A4744);color:#EAF3F0;
  box-shadow:0 14px 40px rgba(15,95,91,.22)}
.crm-status .rest{flex:1;min-width:230px}
.crm-status h3{font-size:19px;font-weight:740;margin:0;letter-spacing:-.2px}
.crm-status .onder{font-size:13.5px;line-height:1.6;margin:6px 0 0;color:var(--soft);max-width:520px}
.crm-status .vak.aan .onder{color:rgba(234,243,240,.82)}
.crm-status .feiten{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.crm-status .feit .k{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:rgba(234,243,240,.6)}
.crm-status .feit .v{font-size:13.5px;font-weight:640;margin-top:3px}
.crm-status .knoppen{display:flex;gap:9px;flex-wrap:wrap}

.crm-leegteken{width:56px;height:56px;border-radius:16px;background:#F1F5F2;display:grid;place-items:center;flex:none}
.crm-leegteken svg{width:27px;height:27px;color:var(--petrol);opacity:.85}

/* ── Secties ──────────────────────────────────────────────────────────── */
.crm-sectie{margin-bottom:40px}
.crm-sectiekop{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.crm-sectiekop h2{font-size:14.5px;font-weight:600;margin:0;letter-spacing:-.015em}
.crm-sectiekop p{color:var(--soft);font-size:13.5px;margin:5px 0 0}

.crm-rooster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}

/* ── Kaarten ──────────────────────────────────────────────────────────── */
.crm-kaart{position:relative;background:var(--kaart);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--schaduw);padding:24px;display:flex;flex-direction:column;gap:14px;cursor:pointer;
  transition:box-shadow .24s cubic-bezier(.2,.7,.3,1),border-color .24s cubic-bezier(.2,.7,.3,1),
             transform .24s cubic-bezier(.2,.7,.3,1)}
.crm-kaart:hover{box-shadow:0 14px 38px rgba(8,32,29,.11);border-color:#CFD8D0;transform:translateY(-4px)}
.crm-kaart:hover .pil{background:var(--teal);color:var(--ink)}
.crm-kaart:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}
.crm-kaart.aan{border-color:var(--petrol);box-shadow:0 0 0 1px var(--petrol) inset}
.crm-kaart.straks{opacity:.66;cursor:default}
.crm-kaart.straks:hover{transform:none;box-shadow:none;border-color:var(--line)}
/* Ons eigen CRM springt eruit: hij vult twee kolommen en heeft een eigen rand. */
.crm-kaart.eigen{grid-column:span 2;border-color:rgba(15,95,91,.35);background:
  linear-gradient(180deg,rgba(47,212,190,.05),transparent 42%)}

.crm-ster{position:absolute;top:-10px;left:22px;background:var(--petrol);color:#fff;font-size:10.5px;
  font-weight:750;letter-spacing:.35px;padding:4px 11px;border-radius:999px;
  box-shadow:0 4px 12px rgba(15,95,91,.3)}

.crm-merk{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:#F3F6F3}
.crm-merk svg{width:25px;height:25px;display:block}
.crm-merk .letters{color:#fff;font-weight:800;font-size:15px;letter-spacing:.4px}

.crm-titel{font-size:16.5px;font-weight:720;color:var(--text);line-height:1.25;letter-spacing:-.2px}
.crm-tekst{font-size:13.5px;color:var(--soft);line-height:1.6}
.crm-kan{display:flex;flex-direction:column;gap:7px;flex:1;margin-top:2px}
.crm-kaart.eigen .crm-kan{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.crm-kan span{font-size:12.5px;color:var(--soft);display:flex;gap:8px;align-items:center}
.crm-kan svg{width:13px;height:13px;flex:none;color:var(--groen-tekst)}

/* ⚠️ "VERBONDEN" EN "NIET GEKOPPELD" ZIJN GEEN UITROEPTEKENS.
   Alle vier de standen stonden als gevulde pil in vette letters. Twee ervan
   zeggen dat er niets aan de hand is - de koppeling doet het, of hij is nooit
   gemaakt. Die krijgen een stipje, net als elders in de werkplek. Wat WEL een
   vlak verdient: een koppeling die stuk is, en een die eraan komt maar er nog
   niet is. Next tekent dit precies zo. */
/* `align-self` omdat de kaart een flexkolom is: zonder dat rekt het merkje
   over de hele breedte uit, en een vlak van 235 pixels breed voor het woord
   "Fout" is geen merkje meer maar een balk. */
.crm-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;
  font-size:11px;font-weight:500;padding:2px 0;white-space:nowrap;color:var(--soft)}
.crm-badge.aan .crm-stip{background:var(--groen)}
.crm-badge.uit .crm-stip{background:#B9C2BE}
.crm-badge.straks,.crm-badge.fout{padding:2px 8px;border-radius:20px;font-weight:600}
.crm-badge.straks .crm-stip,.crm-badge.fout .crm-stip{display:none}
.crm-badge.straks{background:rgba(232,163,60,.16);color:#8A5F0C}
.crm-badge.fout{background:rgba(224,101,75,.14);color:#A33A25}
.crm-stip{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.crm-regel{display:flex;align-items:center;gap:12px}
.crm-meta{font-size:12.5px;color:var(--faint);line-height:1.5}
.crm-knoprij{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.pil.grijs{background:#EEF1ED;color:var(--text)}
.pil.wit{background:rgba(255,255,255,.16);color:#EAF3F0}
.pil.wit:hover{background:rgba(255,255,255,.26)}
.pil.klein{padding:8px 15px;font-size:13px}
.pil.uit{opacity:.45;pointer-events:none}

/* ── Skeletons ────────────────────────────────────────────────────────── */
.crm-skelet{background:var(--kaart);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:14px}
.crm-balk{background:linear-gradient(90deg,#EEF1ED 25%,#F7F9F6 37%,#EEF1ED 63%);
  background-size:400% 100%;border-radius:7px;animation:crmGlans 1.4s ease infinite}
@keyframes crmGlans{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){ .crm-balk{animation:none} .crm-kaart{transition:none} }

/* ── Vensters ─────────────────────────────────────────────────────────── */
.crm-overlay{position:fixed;inset:0;background:rgba(8,32,29,.45);backdrop-filter:blur(4px);
  display:grid;place-items:center;z-index:60;padding:20px;animation:crmIn .18s ease}
.crm-overlay[hidden]{display:none}
@keyframes crmIn{from{opacity:0}to{opacity:1}}
.crm-venster{position:relative;background:var(--kaart);border-radius:14px;padding:30px;
  width:min(560px,100%);max-height:86vh;overflow:auto;box-shadow:0 28px 70px rgba(8,32,29,.28)}
.crm-sluit{position:absolute;top:16px;right:18px;border:0;background:none;font-size:26px;
  line-height:1;color:var(--faint);cursor:pointer}
.crm-sluit:hover{color:var(--text)}
.crm-kop{display:flex;align-items:center;gap:15px;margin-bottom:4px}
.crm-kop h2{margin:0;font-size:20px;font-weight:740;letter-spacing:-.2px}
.crm-uitleg{font-size:13.5px;color:var(--soft);line-height:1.65;margin:10px 0 20px}
.crm-label{display:block;font-size:12px;font-weight:700;color:var(--faint);margin-bottom:7px;letter-spacing:.3px}
.crm-invoer{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px}
.crm-invoer:focus{outline:0;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(15,95,91,.1)}
.crm-fout{color:var(--rood-tekst);font-size:13px;margin-top:9px}
.crm-voorbeeld{background:var(--zij);color:#CFE4DF;border-radius:12px;padding:16px;font-size:12px;
  line-height:1.6;overflow-x:auto;margin-top:18px}
.crm-knoppen{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.crm-lijst{list-style:none;padding:0;margin:18px 0 0}
.crm-lijst li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.crm-lijst li:last-child{border-bottom:0}
.crm-lijst .k{color:var(--faint)}
.crm-lijst .v{color:var(--text);font-weight:620;text-align:right}
.crm-onderdeel{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0}
.crm-onderdeel .ok{color:#1B7355;font-weight:700}
.crm-onderdeel .nok{color:var(--rood-tekst);font-weight:700}
.crm-onderdeel .nvt{color:var(--faint)}
.crm-melding{grid-column:1/-1;background:var(--wit);border:1px solid var(--line);border-radius:18px;
  padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.crm-melding b{font-size:15.5px;color:var(--text)}
.crm-melding span{font-size:13.5px;color:var(--soft)}

@media (max-width:1180px){
  .crm-rooster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-kaart.eigen{grid-column:span 2}
}
@media (max-width:860px){ .crm-cijfers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .crm-rooster{grid-template-columns:minmax(0,1fr)}
  .crm-kaart.eigen{grid-column:span 1}
  .crm-kaart.eigen .crm-kan{grid-template-columns:1fr}
  .crm-cijfers{grid-template-columns:minmax(0,1fr)}
  .crm-hero h1{font-size:26px}
}

/* ═══ HET GESPREK DAT MEEREIST ═══
   `#tk-call` staat normaal in de telefoonkaart van het dashboard. Zodra je
   tijdens een gesprek naar een ander scherm gaat, verhuist belPaneelPlaats()
   de knoop naar <body> en zet deze klas erop. Alleen dán zweeft hij; op het
   dashboard verandert er niets aan wat je gewend bent.

   Rechtsonder en niet in beeld gecentreerd: een gesprek hoort je werk niet af
   te dekken. Op een telefoon over de volle breedte, want daar is rechtsonder
   geen plek maar een marge. */
/* Next' maten: 356 breed, 14 radius, 20 van de rand. */
#tk-call.zwevend{
  position:fixed;right:20px;bottom:20px;width:356px;z-index:60;
  background:var(--kaart);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 50px -16px rgba(8,32,29,.4);padding:16px;
  /* De basisregel geeft #tk-call een minimumhoogte van 406px omdat hij daar
     een kaartvlak vult. Zwevend is dat een leeg blok onderaan het scherm. */
  min-height:0;flex:none;
  max-height:calc(100vh - 40px);overflow-y:auto
}
@media (max-width:860px){
  #tk-call.zwevend{left:10px;right:10px;bottom:10px;width:auto;max-height:70vh}
}
@media (prefers-reduced-motion:no-preference){
  #tk-call.zwevend{animation:tkzweef .18s ease}
  @keyframes tkzweef{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ══════════════════════════════════════════════════════════════════════════
   DE NIEUWE INDELING · kop, statusstrip, aandacht en de zijbalkvoet
   ══════════════════════════════════════════════════════════════════════════
   Alles hieronder gebruikt uitsluitend gegevens die de werkplek al ophaalt:
   de sessie, de wachtrijen uit queues.php, de voicemails en de recente
   gesprekken. Er is geen enkel nieuw endpoint bijgekomen.                    */

.dashonder{color:var(--soft);font-size:13.5px;margin-top:3px}

/* ⚠️ EEN VAK STAAT ER PAS ALS ER IETS TE MELDEN IS. Vijf streepjes op een rij
   lijken kapot; een korte strook die klopt is beter dan een lange die gokt. */
/* `.statusstrip` is de productienaam; de vorm staat bij de bouwstenen als
   `.strip`. Hier alleen wat deze strook extra doet. */
.statusstrip{margin:0 0 14px}
.statusstrip .wa.let{color:var(--oranje-tekst)}
.statusstrip .bol{width:6px;height:6px;border-radius:50%;flex:none}

/* Aandacht nodig - drie rijen die naar een gefilterde lijst leiden. Het getal
   links is geen versiering: het is hoeveel er wachten. */
/* ⚠️ NADRUK DOOR COMPOSITIE, NIET DOOR EEN PIL. Dit is het enige blok dat
   zegt wat er op je WACHT, en het zag eruit als "Collega's" of "Vandaag" -
   dezelfde rand, dezelfde kop, hetzelfde vlak. Een gevulde pil erop zou de
   productregel breken (een vlak is voor iets dat wacht of mislukte, en dan
   zou het hele blok een uitroepteken worden). Een randje aan de zijkant en
   een spoor kleur onder de kop doen het werk: het leest als een werkbak waar
   iets klaarstaat, niet als alarm. */
.aandacht{border-left:3px solid var(--petrol);background:#F7FAF8}
.aandacht>.kaart-kop{background:rgba(15,95,91,.035)}
.aandacht .arij{cursor:pointer}
.aandacht .telvak{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-weight:700;font-size:13px;flex:none
}
.aandacht .naar{margin-left:auto;color:var(--faint);font-size:12.5px;white-space:nowrap}
.aandacht .arij:hover .naar{color:var(--petrol)}
.aandacht .leeg{padding:22px 16px;text-align:center;color:var(--soft);font-size:13px}

/* De voet van de zijbalk: wie ben je, op welk toestel, en hoe sta je erbij.
   Stond eerst als losse knop "Mijn instellingen" onderin; die blijft bestaan,
   maar nu met de mens erboven in plaats van alleen een tandwiel. */
.zb-voet{margin-top:auto;border-top:1px solid var(--zij-lijn);padding:10px;
  display:flex;align-items:center;gap:9px}
.zb-voet .wie{min-width:0;flex:1}
.zb-voet .nm{color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Next zet hier #6E8B85; dat haalt 4,10 op de donkere zijbalk waar 4,5 de eis
   is. #75938D haalt 4,55 en is dezelfde kleur, een tikje lichter. */
.zb-voet .st{color:#75938D;font-size:11.5px;display:flex;align-items:center;gap:5px}

/* ══════════════════════════════════════════════════════════════════════════
   BERICHTEN TUSSEN COLLEGA'S
   ══════════════════════════════════════════════════════════════════════════
   Links met wie, rechts het gesprek. Op een telefoon onder elkaar: de lijst
   boven (38vh, scrollend) en het gesprek eronder - twee kolommen van 160
   pixels naast elkaar is geen indeling maar een puzzel.

   Bewust NIET: de lijst wegklappen zodra je iemand kiest. Dat vraagt een
   terugknop, een tweede plek waar 'welk scherm sta ik op' wordt bijgehouden,
   en een antwoord op de browserterugknop. Voor een lijst van hooguit enkele
   tientallen collega's is scrollen goedkoper dan die machinerie.             */
.chatvlak{
  display:grid;grid-template-columns:280px minmax(0,1fr);
  background:var(--wit);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;min-height:460px
}
.chatlijst{border-right:1px solid var(--line);overflow-y:auto;max-height:64vh}
.chatlijst .arij{cursor:pointer;padding:9px 12px 9px 13px}
/* Dezelfde markering als een gekozen zoekresultaat (.zoekuit .tr.aan): een
   balkje in petrol plus een lichte grond. Alleen een grondkleur was hier te
   zwak - op wit is var(--paper) op een schermafdruk niet te onderscheiden. De
   linkerpadding is 13px zodat de tekst niet verspringt zodra het balkje er
   staat. */
.chatlijst .arij.aan{background:rgba(15,95,91,.07);box-shadow:inset 3px 0 0 var(--petrol);padding-left:10px}
.chatlijst .arij:hover{background:rgba(15,95,91,.04)}
/* Eén regel per gesprek. De voorvertoning is een hint, geen inhoud: laat je
   hem afbreken, dan krijgen rijen ongelijke hoogtes en wordt de lijst onrustig
   precies wanneer er veel gesprekken zijn. */
.chatlijst .arij .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatlijst .tel{
  margin-left:auto;background:var(--petrol);color:#fff;border-radius:20px;
  padding:1px 7px;font-size:11px;font-weight:700
}
.chatgesprek{display:flex;flex-direction:column;min-width:0}
.chatkop{
  padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:9px
}
.chatkop b{font-size:14.5px}
.chatkop span{color:var(--faint);font-size:12.5px}
.chatregels{
  flex:1;overflow-y:auto;max-height:52vh;padding:16px;
  display:flex;flex-direction:column;gap:8px;justify-content:flex-end
}
.chatregels .bel{
  max-width:74%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45;
  word-wrap:break-word;overflow-wrap:anywhere
}
.chatregels .bel.ik  {align-self:flex-end;background:var(--petrol);color:#fff;border-bottom-right-radius:4px}
.chatregels .bel.hij {align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px}
.chatregels .wanneer{font-size:10.5px;opacity:.75;display:block;margin-top:3px}
.chatinvoer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.chatinvoer input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font:inherit;font-size:13.5px;background:var(--wit);color:var(--text)
}
.chatinvoer input:focus-visible{outline:2px solid var(--petrol);outline-offset:1px}
@media (max-width:760px){
  .chatvlak{grid-template-columns:1fr;min-height:0}
  .chatlijst{border-right:0;border-bottom:1px solid var(--line);max-height:38vh}
  .chatregels{max-height:44vh}
}

/* ══════════════════════════════════════════════════════════════════════════
   SPRAAK & AI

   ⚠️ GEEN EIGEN AI-WERELD. Geen paarse gloed, geen tweede kleurensysteem en
   geen nieuwe iconenset: de Voice Agent hoort net zo goed bij KobiVoice als de
   wachtrij. Alles hieronder gebruikt de bestaande variabelen en leunt op de
   bestaande `.paneel`, `.tabs` en `.knop`.

   ⚠️ EN DE BREEDTE WORDT GEBRUIKT. Het oude scherm zette drie panelen in een
   kolom en liet op een groot scherm de halve breedte leeg; `.sa-twee` zet
   samenhangende blokken naast elkaar zodra er ruimte is, en klapt terug op één
   kolom zodra die er niet meer is.
   ══════════════════════════════════════════════════════════════════════════ */
.sa-tabs{margin:14px 0 16px}
.sa-vak[hidden]{display:none}
.sa-twee{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
/* ⚠️ EEN STAPEL, GEEN RASTERRIJ. Stonden de paren als rijen in dit raster, dan
   bepaalde de langste kaart de hoogte van allebei en viel er onder de kortste
   een gat. Elke kolom is nu een eigen stapel die zijn eigen hoogte volgt. */
.sa-stapel{display:grid;gap:14px;align-content:start}
.sa-twee>*{margin:0}
@media(max-width:1100px){.sa-twee{grid-template-columns:1fr}}

/* statusstrip: compact, en kleur is nooit het enige signaal */
.sa-systeem,.sa-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  padding:9px 13px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;
  background:var(--wit);font-size:13px;color:var(--soft)}
.sa-systeem b,.sa-status b{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-right:4px}
.sa-systeem span,.sa-status span{display:inline-flex;align-items:center;gap:6px}

.sa-stip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--soft)}
.sa-stip i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.sa-stip.s-goed i{background:var(--groen)}
.sa-stip.s-proef i{background:var(--oranje)}
.sa-stip.s-let i{background:var(--oranje)}
.sa-stip.s-uit i{background:var(--faint);opacity:.45}

/* actie nodig: alleen zichtbaar als er echt iets is, en gesorteerd op impact */
.sa-actie ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.sa-actie li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--paper)}
.sa-actie li b{font-size:13.5px;color:var(--text)}
.sa-actie li span{grid-column:1;font-size:12.5px;color:var(--soft)}
.sa-actie li button{grid-row:1/3;grid-column:2}
.sa-actie li.e-kritiek{border-left:3px solid var(--rood)}
.sa-actie li.e-aandacht{border-left:3px solid var(--oranje)}

/* naam-waarderijtjes */
.sa-rij{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:10px 0 0;font-size:13.5px}
.sa-rij dt{color:var(--faint)}
.sa-rij dd{margin:0;color:var(--text)}

.sa-tabel{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.sa-tabel th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:700;padding:0 10px 6px 0;border-bottom:1px solid var(--line)}
.sa-tabel td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
.sa-tabel tr:last-child td{border-bottom:0}

.sa-groep{margin-top:14px}
.sa-groep h3{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:0 0 6px}
.sa-cap{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sa-cap:last-child{border-bottom:0}
/* De hoofdschakelaar op "Wat hij kan": de schakelaar met het woord ernaast, in
   dezelfde kolom waar anders de stand staat. Zonder het woord is een schuifje
   op een stil scherm niet te lezen - staat hij nu links of rechts? */
.ag-hoofd{display:inline-flex;align-items:center;gap:9px}
.ag-hoofd b{font-size:12.5px;font-weight:650;color:var(--soft);min-width:24px}
.sa-cap em{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--faint)}
/* ⚠️ EEN SCHAKELAAR DIE AL BEWOGEN IS MAAR DE BELLER NOG NIET HEEFT BEREIKT.
   Oranje en klein: het is geen fout, het is een stap die nog moet. Rood zou van
   elke gewone bewerking een alarm maken. `--oranje-tekst` is de leeskleur, niet
   de vulkleur - zie de toelichting bij --rood-tekst. */
/* ══ TERUGBELLEN ═══════════════════════════════════════════════════════════
   ⚠️ EEN RIJ HIER IS GEEN REGEL MAAR EEN DOSSIERTJE: wie, waarover, wat hij al
   verteld heeft. Daarom `align-items:flex-start` - met verticaal centreren
   zweven de knoppen in het midden van een blok tekst en lijkt de rij scheef. */
.tb-rij{align-items:flex-start;padding:12px 2px;gap:14px}
.tb-rij .naam{white-space:normal}
/* ⚠️ DE SAMENVATTING IS NAVERTELD, DE VRAAG IS LETTERLIJK - EN DAT MOET JE
   ZIEN. Stonden ze in dezelfde kleur, dan leest een collega de parafrase van de
   telefonist als woorden van de beller. Zachter dus, en de vraag eronder in de
   volle tekstkleur; dezelfde volgorde als in de mail. */
.tb-samen{margin-top:6px;font-size:13px;color:var(--soft);line-height:1.5}
.tb-vraag{margin-top:5px;font-size:13px;color:var(--text);line-height:1.45}
.tb-intake{margin-top:7px;display:grid;gap:3px}
.tb-veld{display:flex;gap:8px;font-size:12px;line-height:1.5}
.tb-veld b{font-weight:600;color:var(--soft);min-width:116px;text-transform:lowercase}
.tb-veld b::first-letter{text-transform:uppercase}
/* ⚠️ "WIST HET NIET" IS GEEN ANTWOORD EN HOORT ER OOK NIET ALS ANTWOORD UIT TE
   ZIEN. Zou het in dezelfde kleur staan als een echte waarde, dan leest een
   collega het als iets wat de beller heeft gezegd. */
.tb-veld .zacht{color:var(--faint);font-style:italic}
.tb-acties{display:flex;flex-direction:column;gap:6px;flex:none}
.tb-acties .knop{white-space:nowrap}
.tb-notitie{margin-left:6px}

.sa-nietlive{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--oranje-tekst);background:rgba(216,142,26,.12);
  padding:2px 7px;border-radius:100px;margin-left:8px;white-space:nowrap;vertical-align:1px}

/* vrijgegeven testbellers */
.sa-bellers{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sa-pil{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13px}
.sa-pil .x{border:0;background:none;cursor:pointer;color:var(--faint);font-size:16px;line-height:1;padding:0 2px}
.sa-pil .x:hover{color:var(--rood-tekst)}
.sa-toevoeg{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-top:14px}
.sa-toevoeg label{display:block;font-size:12.5px;color:var(--soft);margin-bottom:4px}
.sa-toevoeg input{width:190px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px}

/* de route die een beller loopt - leesbaar, geen knopentekenaar */
.sa-route{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.sa-route li{position:relative;padding:0 0 18px 22px;border-left:2px solid var(--line)}
.sa-route li:last-child{padding-bottom:0;border-left-color:transparent}
.sa-route li::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--wit);border:2px solid var(--petrol)}
.sa-route li b{display:block;font-size:13.5px;color:var(--text)}
.sa-route li span{display:block;font-size:12.5px;color:var(--soft);margin-top:1px}

.sa-check{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:1px}
.sa-check li{display:grid;grid-template-columns:18px 1fr;gap:2px 8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sa-check li:last-child{border-bottom:0}
.sa-check li::before{content:"✓";color:var(--groen-tekst);font-weight:700}
.sa-check li.nee::before{content:"!";color:var(--oranje-tekst);font-weight:700}
.sa-check li em{grid-column:2;font-style:normal;font-size:12px;color:var(--faint)}

/* ⚠️ SPAARZAAM. Eén blok met een rode rand, niet een rode pagina. */
.sa-gevaar{border-color:#E8CFC8}
.sa-leeg{max-width:640px}
/* De bovenbalk plakt op 56 px; zonder deze marge landt de kop van het
   detailpaneel er precies achter. */
#gs-detail{scroll-margin-top:72px}

/* ══ GESPREKKEN ═══════════════════════════════════════════════════════════
   De werkbank. Rustig, compact, en zonder tegels: dit is een lijst waar
   iemand 's ochtends doorheen scant, geen dashboard.

   ⚠️ DE TABEL SCROLLT IN ZIJN EIGEN VAK. Op een telefoon past hij niet, en
   een pagina die horizontaal meebeweegt maakt de hele Werkplek onbruikbaar -
   niet alleen deze tab. */
.gs-balk{ display:flex; gap:.75rem; flex-wrap:wrap; margin:0 0 1rem; }
.gs-zoek{ flex:1 1 16rem; }
.gs-zoek input{ width:100%; }
.gs-filter select{ min-width:11rem; }
.gs-lijst{ overflow-x:auto; }
.gs-melding{ color:var(--zacht,#667); margin:1rem 0; }
/* ⚠️ DEZE MELDING MOET OPVALLEN, DE ANDERE NIET. De playoutmeldingen zijn een
   nuance bij een beurt die verder klopt; deze zegt dat er niets staat waar een
   collega op kan varen. Zou hij net zo grijs zijn als de rest, dan leest iemand
   er langs heen en handelt hij op een verslag dat door onze eigen reconstructie
   is verzonnen. Geen rood: er is niets stuk voor de beller. */
.gs-onzeker{ color:var(--text); background:var(--line-2,#f4f4f6); border-left:3px solid var(--soft,#889);
             padding:.6rem .8rem; border-radius:4px; line-height:1.5; }
.gs-tabel{ width:100%; border-collapse:collapse; font-size:.92rem; }
.gs-tabel th{ text-align:left; font-weight:600; color:var(--zacht,#667);
  padding:.5rem .6rem; border-bottom:1px solid var(--rand,#e3e6ea); white-space:nowrap; }
.gs-tabel td{ padding:.55rem .6rem; border-bottom:1px solid var(--rand,#eef0f3); vertical-align:top; }
.gs-tabel tr:last-child td{ border-bottom:0; }
.gs-naam{ display:block; font-weight:600; }
/* Een onbekende beller hoort niet even zwaar te wegen als een naam die we
   kennen - maar hij moet wel leesbaar blijven. Geen lichtgrijs op wit. */
.gs-onbekend{ font-weight:500; color:var(--zacht,#667); }
.gs-sub{ display:block; font-size:.82rem; color:var(--zacht,#667); margin-top:.15rem; }
.gs-badge{ display:inline-block; padding:.12rem .5rem; border-radius:999px;
  font-size:.8rem; font-weight:600; white-space:nowrap; }
.gs-afgerond{ background:#e8f5ec; color:#1e6b39; }
.gs-medewerker{ background:#e8f5ec; color:#1e6b39; }
.gs-actie{ background:#fdf0dc; color:#8a5a12; }
.gs-gemist{ background:#fdeaea; color:#8a2020; }
.gs-mislukt{ background:#fdeaea; color:#8a2020; }
.gs-onbekend-badge{ background:#eef0f3; color:#556; }
@media (max-width:640px){
  .gs-tabel{ font-size:.86rem; }
  .gs-tabel th:nth-child(3), .gs-tabel td:nth-child(3){ display:none; }
}

/* ── gespreksdetail ──────────────────────────────────────────────────────── */
.gs-rij{ cursor:pointer; }
.gs-rij:hover{ background:var(--hover,#f6f8fa); }
.gs-rij:focus-visible{ outline:2px solid var(--focus,#2b6cb0); outline-offset:-2px; }
.gs-kop{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.gs-kop h3{ margin:0 0 .15rem; font-size:1.05rem; }
.gs-sluit{ flex:0 0 auto; }
.gs-dtabs{ margin:1rem 0 .75rem; }
.gs-dvak{ padding-top:.25rem; }
.gs-samenvatting{ margin:0 0 1rem; line-height:1.55; }
.gs-dvak h4{ margin:1rem 0 .25rem; font-size:.85rem; text-transform:uppercase;
  letter-spacing:.03em; color:var(--zacht,#667); }
.gs-dvak p{ margin:0; line-height:1.55; }
.gs-opvolging{ padding:.6rem .75rem; border-left:3px solid #e0a83a; background:#fdf8ef; }
/* Beurten: de spreker draagt de uitlijning, niet een kleurvlak. Rustiger, en
   het blijft leesbaar zonder kleur. */
.gs-beurt{ margin:0 0 .85rem; padding-left:.85rem; border-left:2px solid var(--rand,#e3e6ea); }
.gs-b-ai{ border-left-color:#7aa5d2; }
.gs-b-caller{ border-left-color:#8fbf8f; }
.gs-wie{ display:block; font-size:.8rem; font-weight:600; color:var(--zacht,#667); margin-bottom:.15rem; }
.gs-ms{ font-weight:400; font-variant-numeric:tabular-nums; opacity:.75; }
.gs-tijdlijn{ list-style:none; margin:0; padding:0; }
.gs-tijdlijn li{ padding:.35rem 0 .35rem 0; border-bottom:1px solid var(--rand,#eef0f3); }
.gs-tijdlijn li:last-child{ border-bottom:0; }
.gs-tijdlijn .gs-ms{ display:inline-block; min-width:3.5rem; }
.gs-hybride{ background:#eaf1fa; color:#22507e; }
.gs-ai{ background:#eaf1fa; color:#22507e; }
@media (max-width:640px){
  .gs-kop{ flex-direction:column; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AI-TELEFONIST — DE BEHEEROMGEVING

   Zo weinig mogelijk nieuws: het scherm leunt op `.paneel`, `.kaart-kop`,
   `.sa-groep`, `.sa-cap`, `.sa-pil`, `.sa-toevoeg` en `.knop`. Hieronder staat
   alleen wat er niet al was - een veldopmaak, een keuzeknoppenrij en de
   uitklapbare afdelingskaart.

   ⚠️ KLEUR IS NOOIT HET ENIGE SIGNAAL. Een uitgeschakelde keuze draagt naast
   de lichtere inkt ook een reden in tekst; zie `.ag-vink.uit i`.
   ══════════════════════════════════════════════════════════════════════════ */
.ag-tabs{margin:14px 0 16px}

/* één veld: label boven, uitleg eronder - dezelfde ritmiek als .sa-rij */
.ag-veld{margin-top:12px}
/* ⚠️ OOK VOOR EEN KOP ZONDER VELD. Een `label` hoort bij een invoerveld; boven
   een schakelaar (doorverbinden per lijn) staat er geen, en een `for` die
   nergens heen wijst is een kapotte verwijzing voor een schermlezer. Zelfde
   uiterlijk, andere tag. */
.ag-veld>label,.ag-veld>.ag-veld-kop{display:block;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:5px}
.ag-veld input[type=text],.ag-veld input:not([type]),.ag-veld select{
  width:100%;max-width:480px;padding:8px 10px;font:inherit;font-size:13.5px;
  border:1px solid var(--rand-2);border-radius:10px;background:var(--wit);color:inherit}
.ag-veld .slot{margin-top:5px}

/* een rij keuzeknoppen: precies één staat aan, en dat is te zien én te lezen */
.ag-keuzes{display:flex;flex-wrap:wrap;gap:8px}
.knop.keuze{padding:6px 14px}

/* de uitklapbare afdelingskaart */
.ag-afd .kaart-kop{align-items:center;gap:10px}
.ag-afd .kaart-kop .knop{margin-left:auto}
.ag-blok{margin-top:18px;padding-top:14px;border-top:1px solid var(--rand-1)}
.ag-blok:first-of-type{border-top:0;padding-top:0}
.ag-blok h3{font-size:12px;letter-spacing:.04em;font-weight:750;margin:0 0 4px}
.ag-blok h4{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:12px 0 4px}

/* een aanvinkbare handeling: titel, uitleg en - waar nodig - de reden dat hij
   niet kan. De reden staat er ALTIJD in woorden bij; grijs alleen zegt niets. */
.ag-vink{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:start;
  padding:8px 0;border-bottom:1px solid var(--rand-1);cursor:pointer}
.ag-vink:last-child{border-bottom:0}
.ag-vink input{margin-top:3px}
.ag-vink b{display:block;font-size:13.5px;font-weight:650}
.ag-vink em{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:1px}
.ag-vink i{display:block;font-style:normal;font-size:12px;color:var(--faint-op,var(--faint));
  margin-top:2px;font-weight:600}
.ag-vink.uit{cursor:not-allowed}
.ag-vink.uit b,.ag-vink.uit em{color:var(--faint)}

/* kennisitems: titel, een voorproefje van de tekst, en waar hij vandaan komt */
.ag-kennis{padding:10px 0;border-bottom:1px solid var(--rand-1)}
.ag-kennis:last-child{border-bottom:0}
.ag-kennis-kop{display:flex;align-items:center;gap:10px}
.ag-kennis-kop b{font-size:13.5px;font-weight:650}
.ag-kennis-kop .knop{margin-left:auto}
.ag-kennis .slot{margin-top:3px}
/* ⚠️ HERKOMST EN CONTROLEDATUM ZIJN META, EN META STAAT NOOIT IN DE MAAT VAN
   EEN WAARDE. Zie regel 26b van de productstandaard. */
.ag-kennis-meta{font-size:11.5px}
.ag-kennis.uit .ag-kennis-kop b,.ag-kennis.uit .slot{color:var(--faint)}

/* het bewerkformulier valt op zonder te schreeuwen */
.ag-vorm{border-color:var(--rand-3)}
.ag-vorm textarea{width:100%;max-width:640px;padding:8px 10px;font:inherit;font-size:13.5px;
  border:1px solid var(--rand-2);border-radius:10px;background:var(--wit);color:inherit;resize:vertical}
.ag-vorm .ag-veld input[type=date]{max-width:200px}

/* de audit van één gesprek: besluit, stand, en waar het vandaan komt */
.gs-audit{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:4px 0 14px;align-items:baseline}
.gs-audit dt{font-size:12px;color:var(--faint);font-weight:650}
.gs-audit dd{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* ⚠️ META STAAT NOOIT IN DE MAAT VAN EEN WAARDE - regel 26b van de standaard.
   De bron is herkomst, geen uitkomst. */
.gs-bron{font-style:normal;font-size:11px;color:var(--faint);opacity:.75}
.gs-audit-leeg dd{color:var(--faint);font-size:12.5px}

/* de stemmenbank: luisteren, vergelijken, kiezen */
.ag-stem{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--rand-1)}
.ag-stem:last-child{border-bottom:0}
.ag-stem.aan{background:rgba(8,32,29,.03);border-radius:8px;padding-left:8px;padding-right:8px}
.ag-play{width:32px;height:32px;border-radius:50%;border:1px solid var(--rand-2);background:var(--wit);
  cursor:pointer;font-size:11px;line-height:1;color:var(--soft);padding:0}
.ag-play:hover{border-color:var(--rand-3);color:inherit}
.ag-stem-naam b{display:block;font-size:13.5px;font-weight:650}
.ag-stem-naam em{display:block;font-style:normal;font-size:12px;color:var(--faint)}

/* de drie standen: uit, testfase, live - naast elkaar, met het gevolg erbij */
/* auto-fit: de kaart 'wie neemt op' heeft twee keuzes, andere rijen drie. */
.ag-standen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
@media(max-width:700px){.ag-standen{grid-template-columns:1fr}}
.ag-stand{text-align:left;padding:10px 12px;border:1px solid var(--rand-2);border-radius:10px;
  background:var(--wit);cursor:pointer;font:inherit;color:inherit}
.ag-stand:hover{border-color:var(--rand-3)}
.ag-stand b{display:block;font-size:13.5px;font-weight:700}
.ag-stand em{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:2px}
/* ⚠️ DE GEKOZEN STAND IS NIET ALLEEN EEN KLEUR: hij draagt aria-current, en de
   rand is dikker. Kleur alleen is geen status - zie §44 van de standaard. */
.ag-stand.aan{border-color:var(--groen,#1f6f5c);border-width:2px;padding:9px 11px}

/* ══ DE OPNAMESPELER ═════════════════════════════════════════════════════
 *
 * Eén component, twee plekken: het tabblad Opname bij Gesprekken en de
 * gesprekskaart naast de samenvatting.
 *
 * ⚠️ WAAROM NIET DE BROWSERSPELER. `<audio controls>` werkt, maar draagt de
 * vormtaal van Chrome of Safari en niet die van dit product - en hij ziet er op
 * elke computer anders uit. Jack, 25 september: "maak het enterprise." Voor een
 * scherm waar iemand een klantgesprek terugluistert is de speler geen detail;
 * hij is het werktuig.
 *
 * ⚠️ VIJF BEDIENINGEN EN GEEN ZESDE. Afspelen, schuiven, vijftien seconden
 * terug, snelheid en de tijd. Geen volumeschuif (dat doet het apparaat al),
 * geen golfvorm (mooi, maar hij eist dat het hele bestand wordt gedecodeerd en
 * zegt bij spraak niets), en geen downloadknop - een opname die het platform
 * verlaat is een besluit, geen gemak.
 */
.kv-speler{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--wit);max-width:560px;margin-top:12px}
.kv-speler[hidden]{display:none}

/* De ronde hoofdknop. Groot genoeg om zonder kijken te raken. */
.kv-sp-play{width:38px;height:38px;flex:none;border-radius:50%;border:0;
  background:var(--petrol);color:#fff;display:grid;place-items:center;cursor:pointer}
.kv-sp-play:hover{background:var(--petrol-l)}
.kv-sp-play:disabled{background:#8C9793;cursor:default}
.kv-sp-play svg{width:16px;height:16px;fill:currentColor}

/* ⚠️ DE SCHUIF IS EEN ECHTE input[type=range] EN DAT IS EEN KEUZE. Een eigen
 * div met muisgebeurtenissen ziet er hetzelfde uit en kan niet met het
 * toetsenbord. Deze kan het meteen: pijltjes, Home, End. */
.kv-sp-balk{flex:1 1 110px;min-width:90px;appearance:none;height:4px;border-radius:4px;
  background:var(--line);cursor:pointer}
.kv-sp-balk::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--petrol);border:2px solid var(--wit);box-shadow:0 0 0 1px var(--line)}
.kv-sp-balk::-moz-range-thumb{width:13px;height:13px;border:2px solid var(--wit);
  border-radius:50%;background:var(--petrol)}
.kv-sp-balk:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

/* Tijd in cijfers die niet dansen terwijl hij loopt. */
.kv-sp-tijd{font-size:12.5px;color:var(--soft);font-variant-numeric:tabular-nums;
  white-space:nowrap;min-width:74px;text-align:right}

.kv-sp-knop{border:1px solid var(--line);background:var(--wit);border-radius:8px;
  padding:5px 8px;font:inherit;font-size:12px;font-weight:600;color:var(--soft);cursor:pointer}
.kv-sp-knop:hover{border-color:var(--rand-3,#CFD8D2);color:var(--text)}
.kv-sp-knop:disabled{opacity:.45;cursor:default}
.kv-sp-knop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}

/* De melding als het niet lukte. Rood, want dit is geen mededeling maar een
   mislukking: er valt niets te horen. */
.kv-sp-fout{flex:1 1 100%;font-size:12.5px;color:var(--rood)}

/* De niveaumeter. Hij hangt aan een AnalyserNode op de lopende audio, dus hij
   beweegt op wat er werkelijk gezegd wordt - en staat stil bij stilte. */
/* Smal genoeg om naast de schuif te passen zonder de rij te laten breken. */
/* ⚠️ DE METER TEKENT OP EEN <canvas>, EN DAAR WERKEN VARIABELEN NIET. De
   staafjes worden met `getComputedStyle().color` opgehaald, dus de kleur moet
   hier staan - anders tekent hij zwart in een donker vlak. */
.kv-sp-meter{width:44px;height:14px;flex:none;color:var(--teal,#2FD4BE)}
/* ⚠️ DE DOWNLOADKNOP IS EEN <a>, DUS HIJ MOET ZELF DOEN WAT EEN KNOP DOET.
   Zonder deze regels staat hij te hoog in de rij en heeft hij geen duidelijke
   uitgeschakelde stand voordat het kaartje er is. */
.kv-sp-dl{display:inline-flex;align-items:center;justify-content:center;
  padding:5px 8px;text-decoration:none}
.kv-sp-dl[aria-disabled="true"]{opacity:.45;pointer-events:none}