/* 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;
--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 ---- */
.popover{position:absolute;top:52px;right:0;background:var(--wit);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 ---- */
.inhoud{padding:22px 24px 80px;max-width:1220px;width:100%}
.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. */
.kaart,.paneel{background:var(--kaart);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--schaduw);min-width:0}
.kaart-kop{padding:13px 15px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.kaart-kop h2,.kaart-kop h3{font-family:var(--fh);font-size:14.5px;font-weight:600}
.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:14.5px;font-weight:600;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. */
.strip,.statusstrip{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.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. */
.lijst{display:flex;flex-direction:column;width:100%}
.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}}
.tabs{display:flex;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 */
.wrij{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line)}
.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)}

/* agent/contact-rij */
.arij{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line)}
.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}
/* --- 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)}.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. */
.telefoonkaart{text-align:center}
.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(--faint);line-height:1.7}
.blokkop .aanuit .schakel.aan + span{background:rgba(55,192,143,.15);color:#1B8A62}
/* 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);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}
.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,#FFFFFF 0%,#FDFEFC 46%,#FAFBF8 100%);
border-radius:10px;overflow:visible;color:var(--text);
font-variant-numeric:tabular-nums lining-nums}

.op .op-uitbel,.op .op-voet button{color:var(--soft-op)}

/* ---------- 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:linear-gradient(180deg,#FFFFFF,#FDFEFC);
box-shadow:inset 0 -1px 0 var(--rand-1)}
.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:var(--soft);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:var(--text)}
.op-uitbel:hover b{color:var(--petrol)}
.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:#15694A;background:rgba(55,192,143,.13);
box-shadow:inset 0 0 0 1px rgba(55,192,143,.22)}
.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. */
.op-vlak{display:grid;grid-template-columns:minmax(264px,1.08fr) minmax(248px,.92fr);
align-items:stretch}
.op-context{padding:var(--s5);border-left:1px solid var(--rand-2);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}
.kctx-leeg span{font-size:12.5px;color:var(--soft);line-height:1.5}
.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:var(--paper);border:1px solid var(--line)}
.op-display:focus-within{border-color:var(--petrol);background:var(--wit);
box-shadow:0 0 0 3px rgba(15,95,91,.11)}
.op-nr{position:relative;z-index:1;width:100%;background:none;border:0;outline:none;
color:var(--text);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:var(--faint);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:var(--faint)}
.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:52px;padding:var(--s2) 0;
font-size:var(--t-toets);font-weight:var(--w-half);
border:1px solid var(--rand-2);border-bottom-color:rgba(8,32,29,.17);border-radius:var(--r-m);
background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFA 58%,#F4F7F3 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(8,32,29,.03),var(--sch-2);
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:var(--faint)}
.op-toets:hover{border-color:rgba(8,32,29,.19);background:linear-gradient(180deg,#FFFFFF,#FDFEFC);
box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(8,32,29,.06),0 8px 16px -10px rgba(8,32,29,.22)}
.op-toets:active,.op-toets.druk{transform:translateY(1px) scale(.995);
background:linear-gradient(180deg,#EEF2ED,#F5F8F4);border-color:rgba(8,32,29,.20);
box-shadow:inset 0 2px 4px rgba(8,32,29,.15),inset 0 1px 0 rgba(8,32,29,.06)}
.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(--petrol);background:var(--petrol);color:#fff;
transition:background .12s,border-color .12s}
.op-bel:hover{background:var(--petrol-l);border-color:var(--petrol-l)}
.op-bel:disabled{background:#68736F;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:linear-gradient(180deg,#F1F3EF 0%,#F6F7F4 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 3px 6px -4px rgba(8,32,29,.14)}
.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:var(--soft);box-shadow:inset -1px 0 0 var(--rand-1);
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:var(--petrol)}
.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:minmax(264px,1.15fr) minmax(220px,.85fr)}
}
@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)}

/* ⚠️ "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)}
.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. */
.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}
}