/* Aktsyn | Aktsyn Beheer: alleen wat Beheer eigen heeft; de basis is v13.css en aktsyn.css van de centrale app */

/* Aanmelden (voor de schil er is) */
.bh-aanmeld{min-height:100vh;display:grid;place-items:center;background:var(--papier, #F6F4EF);padding:24px}
.bh-aanmeld .panel{max-width:440px;width:100%;padding:28px 28px 24px}
.bh-aanmeld h1{font:600 26px/1.2 var(--serif);margin:14px 0 6px}
.bh-aanmeld .lead{color:var(--zacht);margin-bottom:18px}
.bh-aanmeld .fout{margin-top:14px}

/* Een gewijzigd veld: kader en lichte invulling in de accentkleur (ontwerpregel Nils 8 okt) */
.fld.anders .inp,.fld.anders select{box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl);border-color:var(--petrol)}
.fld.anders label span{color:var(--petrol);font-weight:600}

/* Bouwstenen als vinkjes naast elkaar */
.bh-chk{display:flex;flex-wrap:wrap;gap:6px 16px}
.bh-chk input{accent-color:var(--petrol)}

/* Wat verandert er (venster) */
.bh-verschil{width:100%;border-collapse:collapse;margin:4px 0 14px}
.bh-verschil td{padding:6px 8px;border-bottom:1px solid var(--haar);vertical-align:top}
.bh-verschil td.oud{color:var(--zacht);text-decoration:line-through}
.bh-verschil td.nw{font-weight:600}
.bh-reden{width:100%;min-height:72px;resize:vertical}

/* Meldingen in een paneel of venster */
.bh-melding{padding:10px 12px;border-radius:8px;font-size:13.5px;margin-top:10px}
.bh-melding.fout{background:var(--roodl, #F6E4E1);color:var(--rood, #A33B2E)}
.bh-melding.let{background:var(--messingl, #F4EAD0);color:var(--messingd, #7A5E17)}
.bh-melding.goed{background:var(--groenl, #E3F0E9);color:var(--groen, #2E7D5B)}
.bh-melding ul{margin:6px 0 0 18px}
.bh-melding code{font:12px var(--mono)}

/* Auditlog: de wijzigingen klein onder elkaar */
.bh-wijz{font:12px/1.5 var(--mono);color:var(--tekst)}
.bh-wijz .pijl{color:var(--zacht)}
.bh-log td.wat{min-width:260px}
.bh-log td.uit{max-width:240px}
.bh-leeg{padding:22px;text-align:center;color:var(--zacht)}

/* B2: de stand bij het kantoor in het zijpaneel */
.bh-regel{margin-bottom:4px;gap:12px}

/* B3: de kleur van de stand per kantoor (rood, oranje, groen). Oranje bestaat niet in v13; de waarden komen uit
   ../Support/Aktsyn-Supportdesk.html (--warn), het ontwerp van de supportschermen (register UI-REGELS.md) */
:root{--warn:#9A6210;--warn-l:#F6ECDA}
.tag.warn{background:var(--warn-l);color:var(--warn)}
.dot.bh-rood{color:var(--err)}
.dot.bh-oranje{color:var(--warn)}
.dot.bh-groen{color:var(--ok)}
.dot.bh-geen{color:var(--zacht)}
.bh-tiles{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.bh-tiles .tile b{display:flex;align-items:center;gap:8px}
.bh-tiles .tile:focus-visible{box-shadow:inset 0 0 0 1.5px var(--petrol), var(--sh)}
.bh-redenen{margin:0 0 0 18px;padding:0}
.bh-kop-tag{margin-left:8px}
.bh-fouttekst{color:var(--err)}
/* De tijdlijn: de stip in de kleur van de gebeurtenis (zoals de Supportdesk) */
.bh-tl .ti .ic{background:transparent;width:28px;height:20px}
.bh-tl .ti .b{width:9px;height:9px;border-radius:50%;background:var(--haar);display:block}
.bh-tl .ti.acc .b{background:var(--petrol)}
.bh-tl .ti.ok .b{background:var(--ok)}
.bh-tl .ti.err .b{background:var(--err)}
.bh-tl .ti.warn .b{background:var(--warn)}
@media (max-width:640px){.bh-tiles{grid-template-columns:1fr}}
/* S1: de meldingen */
.bh-mtekst{max-width:360px}
.bh-mbericht{white-space:pre-wrap;background:var(--veld);border-radius:var(--r-card);padding:10px 12px;font-size:13.5px;margin-bottom:10px}

/* S2a: de Supportdesk (ontwerp ../Support/Aktsyn-Supportdesk.html, renderDesk en renderPhones). Een lijst en de melding naast
   elkaar; op een smal scherm (de PWA op de telefoon) de lijst of de melding */
.tag.acc{background:var(--ijsl);color:var(--petrol)}
.sd-rood{color:var(--err);font-weight:600}
.sd{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:start}
.sd>*{min-width:0}
.sd-detail,.sd-detail h2,.sd-ctx dd,.sd-quote,.sd-verzonden{overflow-wrap:anywhere}
.sd-lijst{padding:8px;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 230px);overflow:auto}
.sd-item{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--veld);border:0;border-radius:var(--r-card);padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.sd-item:hover{background:var(--ijsl)}
.sd-item.on{box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl)}
.sd-item .sd-m{display:flex;gap:4px;font-size:12px;color:var(--zacht)}
.sd-item b{font-weight:600;font-size:13.5px}
.sd-item .row{gap:6px;flex-wrap:wrap}
.sd-detail{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh);padding:18px 20px;min-height:300px}
.sd-kop h2{font:600 20px/1.3 var(--serif);margin:4px 0 8px}
.sd-kop .row{gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sd-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sd-quote{background:var(--veld);border-radius:var(--r-card);padding:10px 12px;white-space:pre-wrap;font-size:13.5px}
.sd-ctx{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0;font-size:12.5px}
.sd-ctx dt{color:var(--zacht)}
.sd-ctx dd{margin:0;word-break:break-word}
.sd-log{margin-top:8px;font-size:11.5px;color:var(--zacht)}
.sd-agent{background:var(--ijsl);border-radius:var(--r-card);padding:12px 14px}
.sd-kv{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:13px;padding:3px 0}
.sd-kv>span:first-child{font:11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--zacht);padding-top:2px}
.sd-kb{display:inline-block;background:#fff;border-radius:var(--r-tag);padding:1px 8px;font:12px var(--mono);margin:0 4px 2px 0}
.sd-zek.hoog{color:var(--ok)}
.sd-zek.midden{color:var(--warn)}
.sd-zek.laag{color:var(--err)}
.sd-duiding{margin-top:8px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.sd-concept{width:100%;min-height:180px;resize:vertical;font:13.5px/1.5 var(--sans)}
.sd-verzonden{white-space:pre-wrap;font-size:13px;background:var(--veld);border-radius:var(--r-card);padding:10px 12px;margin-bottom:4px}
.sd-terug{display:none;margin-bottom:10px}
@media (max-width:900px){
  .sd{grid-template-columns:1fr}
  .sd.sd-open .sd-lijst{display:none}
  .sd:not(.sd-open) .sd-detail{display:none}
  .sd-terug{display:inline-flex;align-items:center;gap:6px}
  .sd-lijst{max-height:none}
  .sd-duo{grid-template-columns:1fr}
  .sd-detail{padding:14px}
}

/* S2b: uitklapblokken (de techniek: wat Aktsyn meestuurde, agent 1 in detail, het kantoor, de tijdlijn). Op de laptop standaard
   open, op de telefoon dicht. De kop is een .sect met een pijltje ervoor */
.bh-uit>summary{list-style:none;cursor:pointer;user-select:none}
.bh-uit>summary::-webkit-details-marker{display:none}
.bh-uit>summary::before{content:'';flex:none;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin:0 2px 0 1px;transition:transform .15s}
.bh-uit[open]>summary::before{transform:rotate(45deg)}
.bh-uit>summary:hover{color:var(--petrol)}
.bh-uit-klein{margin-top:8px}
.bh-uit-klein>summary{display:flex;align-items:center;gap:8px;color:var(--petrol);font-weight:500}
.bh-uit-klein[open]>summary{margin-bottom:6px}
.sd-analyse{white-space:pre-wrap;font-size:13px;background:#fff;border-radius:var(--r-card);padding:10px 12px;max-height:420px;overflow:auto}
.sd-agent2{margin-top:12px}
.sd-agent2 a{color:var(--petrol)}

/* S2b: de balk onderin (alleen op de telefoon) */
.bh-tabbar{display:none}

/* S2b: Beheer op de telefoon (body.mobiel, onder 760 px; BEHEER-STAPPEN 7.6). Grote tikdoelen (minstens 48 px), invoer op 16 px
   (anders zoomt iOS in), de balken onderin boven de thuisbalk (safe-area). Ontwerp: ../Support/Aktsyn-Supportdesk.html,
   renderPhones (.ptop, .chips, .pscroll, .pback, .pd, .pbar), hier met het voorvoegsel sd- */
body.mobiel .app{grid-template-columns:minmax(0,1fr);height:auto;min-height:100vh}
body.mobiel .side{display:none}
/* De veilige marge van het toestel (iPhone 16 Pro: thuisbalk 34 px, afgeronde hoeken), met een vaste ondergrens voor als iOS hem
   niet doorgeeft. Onder: de thuisbalk min 8 px (iPhone 16 Pro: 26 px; de balk zelf is 5 px hoog, 8 px boven de rand), minstens
   12 px; opzij minstens 16 px (bevinding Nils 23 okt: 46 px was te veel) */
body.mobiel{--bh-onder:max(12px, calc(env(safe-area-inset-bottom) - 8px));--bh-links:max(16px, calc(env(safe-area-inset-left) + 8px));--bh-rechts:max(16px, calc(env(safe-area-inset-right) + 8px));--bh-boven:env(safe-area-inset-top, 0px)}
body.mobiel header.top{box-sizing:content-box;height:52px;padding:var(--bh-boven) var(--bh-rechts) 0 var(--bh-links);align-items:center;position:sticky;top:0;z-index:20}
body.mobiel header.top .usr>span{display:none}
body.mobiel #crumbs b{font-size:16px}
body.mobiel .view{overflow:visible}
body.mobiel .page{padding:16px var(--bh-rechts) calc(110px + var(--bh-onder)) var(--bh-links)}
body.mobiel .page .ph,body.mobiel .page .phead{margin-bottom:14px}
body.mobiel .page h1{font-size:24px}
body.mobiel .bh-tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);box-shadow:0 -1px 0 var(--haar);padding:8px var(--bh-rechts) var(--bh-onder) var(--bh-links)}
body.mobiel .bh-tabbar>*{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;background:transparent;color:var(--zacht);font:500 12px var(--sans);border-radius:var(--r-card);text-decoration:none;cursor:pointer}
body.mobiel .bh-tabbar svg{width:22px;height:22px}
body.mobiel .bh-tabbar .on{color:var(--petrol);box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl)}
/* De melding heeft zijn eigen actiebalk; dan geen menubalk */
body.mobiel:has(.sd-pbar) .bh-tabbar{display:none}
/* Menu, venster en zijpaneel als laag onderin over de volle breedte */
body.mobiel .menu{top:auto!important;right:8px!important;left:8px;bottom:calc(76px + var(--bh-onder));width:auto;border-radius:var(--r-pane)}
body.mobiel .menu .mi{min-height:52px;align-items:center}
body.mobiel .modal{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-width:100%;max-height:92vh;border-radius:var(--r-pane) var(--r-pane) 0 0;animation:bh-op .2s ease;padding-bottom:calc(var(--bh-onder) - 14px)}
@keyframes bh-op{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
body.mobiel .modal .mh{padding:18px 18px 8px}
body.mobiel .modal .mb{padding:4px 18px 14px}
body.mobiel .modal .mf{padding:12px 18px 14px;gap:10px}
body.mobiel .drawer .dh{padding-top:calc(14px + var(--bh-boven))}
body.mobiel .drawer .db{padding:14px 16px 24px}
body.mobiel .drawer .df{padding:12px var(--bh-rechts) var(--bh-onder) var(--bh-links)}
body.mobiel .drawer .df .btn,body.mobiel .modal .mf .btn{min-height:48px;justify-content:center;flex:1}
body.mobiel .inp,body.mobiel textarea,body.mobiel select{font-size:16px}
body.mobiel .bh-uit>summary.sect{min-height:44px;margin:0!important;padding:4px 0}
body.mobiel .blok{margin-top:14px}
body.mobiel .bh-regel{padding:6px 0}
/* Wacht op jou */
.sd-ptop{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.sd-ptop h1{font:600 24px/1.2 var(--serif)}
.sd-chips,.sd-snel{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.sd-snel{flex-wrap:wrap}
.sd-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:20px;background:#fff;color:var(--zacht);box-shadow:var(--sh);font:500 14px var(--sans);cursor:pointer}
.sd-chip.on{box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl);color:var(--petrol)}
.sd-kaarten,.bh-kaarten{display:flex;flex-direction:column;gap:10px}
.sd-kaart{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;min-height:96px;background:#fff;border:0;border-radius:var(--r-card);box-shadow:var(--sh);padding:14px 16px;font:inherit;color:inherit;cursor:pointer}
.sd-kaart:active{background:var(--ijsl)}
.sd-kaart .sd-m{display:flex;font-size:12.5px;color:var(--zacht)}
.sd-kaart b{font-size:16px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sd-kaart .row{gap:6px;flex-wrap:wrap}
.bh-kaart{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
/* De melding */
.sd-pd .sd-kop h2{font:600 21px/1.25 var(--serif);margin:6px 0 10px}
.sd-pd .sd-quote{font-size:16px;line-height:1.5}
.sd-pd .sd-agent{padding:14px}
.sd-pd .sd-kv{grid-template-columns:96px 1fr;font-size:14.5px}
.sd-pd .sd-duiding{font-size:14.5px}
.sd-pd .sd-concept{min-height:220px;font-size:16px}
.sd-pback{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px 0 0;border:0;background:transparent;color:var(--petrol);font:500 15px var(--sans);cursor:pointer}
.sd-pbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;background:var(--paper);box-shadow:0 -1px 0 var(--haar);padding:10px var(--bh-rechts) var(--bh-onder) var(--bh-links)}
.btn.sd-groot{min-height:52px;font-size:16px;justify-content:center;border-radius:var(--r-card)}
.sd-pbar .btn.sd-groot:first-child{flex:1}
.btn.sd-tweede{background:#fff;color:var(--petrol);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.sd-voorbeeld{white-space:pre-wrap;background:var(--veld);border-radius:var(--r-card);padding:10px 12px;font-size:14px;max-height:40vh;overflow:auto}
/* Niets mag de pagina breder maken dan het scherm (dan zoomt de telefoon uit en zakt de balk onderin weg) */
body.mobiel .main{min-width:0;overflow-x:clip}
body.mobiel .toolbar{flex-wrap:wrap}
body.mobiel .toolbar .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
body.mobiel .toolbar .seg button{min-height:40px;flex:none}
body.mobiel .bh-kaart .bh-uit-klein>summary{min-height:36px}

/* Herontwerp van de melding (Nils, 23 okt): de vraag van de klant, het oordeel en de oplossing van agent 1, het bericht groot en
   leesbaar met Verzenden en sluiten; de rest in één uitklapblok, of open bij Opvolgen. Meer lucht tussen de blokken; tekst
   hoogstens ongeveer 90 tekens breed. Geen streepje voor een vak (ontwerpregel Nils 8 okt): kader en invulling */
.sd-detail{padding:26px 32px 30px}
.sd-detail>*{max-width:900px}
.sd-kop h2{font:600 21px/1.3 var(--serif);margin:6px 0 10px}
.sd-sectie{margin-top:24px}
.sd-label{font:600 13.5px/1.3 var(--sans);color:var(--ink);margin-bottom:8px}
.sd-label .zacht{font-weight:400}
.sd-vraag-tekst{margin:0;background:var(--veld);border-radius:var(--r-card);padding:16px 18px;font-size:17px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.sd-oordeel{background:var(--ijsl);border-radius:var(--r-card);padding:16px 18px}
.sd-oordeel-tekst{margin:0 0 10px;font-size:16px;line-height:1.5;font-weight:500}
.sd-oplossing{margin:0;font-size:15px;line-height:1.6}
.sd-tags{gap:6px;flex-wrap:wrap;align-items:center}
.sd-tags .sd-kb{margin:0}
.sd-bericht{background:#fff;border-radius:var(--r-card);box-shadow:inset 0 0 0 1.5px var(--petrol);padding:18px 20px}
.sd-bericht-kop{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.sd-bericht-kop>div:first-child{flex:1;min-width:0}
.sd-bericht .sd-label{font-size:15px}
.sd-bericht .sd-concept{display:block;width:100%;min-height:160px;padding:14px 16px;font:16px/1.6 var(--sans);color:var(--ink);background:var(--paper);border:0;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--haar);resize:vertical;overflow:hidden}
.sd-bericht .sd-concept:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--petrol)}
.sd-acties{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.sd-acties .btn.sd-groot{min-height:46px;padding:0 20px;font-size:15px}
.sd-opvolg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-l);color:var(--warn);border-radius:var(--r-card);padding:10px 14px;margin-top:16px;font-size:14px}
.sd-opvolg b{font-weight:600}
.sd-duiding-vol{white-space:pre-wrap;font-size:14.5px;line-height:1.6;margin-bottom:12px}
.sd-meer-context>summary.sect{margin:0!important}
.sd-context{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.sd-context .bh-uit{margin-top:8px}
.sd-agent2{margin-top:24px}
body.mobiel .sd-sectie{margin-top:18px}
body.mobiel .sd-vraag-tekst{font-size:16.5px;padding:14px 16px}
body.mobiel .sd-bericht{padding:14px}
body.mobiel .sd-bericht .sd-concept{padding:12px}
.sd-kop-regel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;color:var(--zacht)}
.sd-kop-regel b{color:var(--ink);font-weight:600}
.sd-detail>.sd-kop+.sd-sectie,.sd-detail>.sd-kop+.bh-melding{margin-top:16px}
/* De knoppen van het bericht schuiven mee: altijd in beeld, ook bij een lang bericht */
body:not(.mobiel) .sd-acties{position:sticky;bottom:0;z-index:2;background:#fff;margin:12px -20px -18px;padding:14px 20px;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 -1px 0 var(--haar)}
.sd-page .phead{margin-bottom:12px}
/* Ronde 2 (na de reviews): op een breed scherm links de vraag en het oordeel, rechts het bericht over de volle hoogte, zodat
   het hele bericht en de knoppen altijd in beeld zijn; smaller (container query) onder elkaar */
.sd{grid-template-columns:minmax(240px,290px) minmax(0,1fr)}
.sd-detail{container-type:inline-size;padding:22px 26px 26px}
.sd-detail>*{max-width:none}
.sd-werk{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start}
@container (min-width: 760px){
  .sd-werk:not(.zonder){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .sd-rechts{position:sticky;top:12px}
  .sd-rechts .sd-bericht{display:flex;flex-direction:column;height:calc(100vh - 210px);min-height:440px}
  .sd-rechts .sd-concept{flex:1;min-height:0;resize:none;overflow:auto}
}
.sd-rechts>.sd-sectie:first-child,.sd-links>.sd-sectie:first-child{margin-top:16px}
.sd-wie{font-size:14px;color:var(--ink);margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sd-wie b{font-weight:600}
.sd-vraag-tekst{font-size:18px;line-height:1.55}
.sd-oordeel{padding:14px 16px}
.sd-oordeel-tekst{font-size:16px;margin-bottom:8px}
.sd-oplossing{font-size:14.5px}
.sd-agent2 a{color:var(--petrol)}
.sd-bericht .sd-label{font-size:16px;margin-bottom:2px}
.sd-aan{font-size:14px;color:var(--ink);margin-bottom:2px;overflow-wrap:anywhere}
.sd-gelezen{margin-top:10px;font-size:14px;color:var(--warn)}
.sd-gelezen input{accent-color:var(--petrol);width:18px;height:18px}
body:not(.mobiel) .sd-acties{position:static;margin:14px 0 0;padding:0;box-shadow:none;background:transparent}
.btn.sd-groot:disabled{opacity:.45;cursor:not-allowed}
.sd-punten{margin:4px 0 8px 18px;padding:0;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.5}
.sd-context>.sd-label{margin-top:4px}
.sd-gesprek-regel{margin-top:10px}
.sd-reactie{font-size:15px}
/* Ongedaan maken: 8 seconden onderin het scherm */
.sd-ongedaan{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:var(--r-card);padding:10px 12px 10px 16px;box-shadow:var(--sh-hi);font-size:14.5px;max-width:calc(100vw - 32px)}
.sd-ongedaan .btn{background:#fff;color:var(--ink)}
body.mobiel .sd-ongedaan{bottom:calc(84px + var(--bh-onder))}
@container (min-width: 760px){ .sd-rechts .sd-bericht{height:calc(100vh - 300px);min-height:400px} }
.sd-acties #sdStuur{flex:1 1 200px;justify-content:center}
.sd-acties .lnk{margin-left:auto}
.sd-item .sd-m{white-space:nowrap;min-width:0}
.sd-item .sd-m>span:nth-child(3){overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Rust (Nils 23 okt: geen ruis van pills en meters): status en waarschuwingen als gewone tekst, kleur alleen waar het telt */
.sd-status{font-size:13.5px;color:var(--zacht)}
.sd-status.err{color:var(--err);font-weight:500}
.sd-status.warn{color:var(--warn);font-weight:500}
.sd-status.ok{color:var(--ok);font-weight:500}
.sd-kop-regel .sd-status+.sd-status::before{content:'| ';color:var(--haar)}
.sd-advies{font-size:14px;color:var(--zacht)}
.sd-punten .sd-kb{background:var(--veld)}
.sd-leeg{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 20px;font-size:15px}
/* Ronde 3: nog rustiger. Opvolgen als één regel tekst (geen gekleurd vlak), alleen Verzenden als echte knop, de rest tekstknoppen */
.sd-opvolg{background:transparent;color:var(--ink);padding:0 0 10px;border-radius:0;box-shadow:0 1px 0 var(--haar);margin-top:14px;font-size:14px}
.sd-opvolg .lnk{font-size:14px}
.sd-tweede-rij{display:flex;align-items:center;gap:18px;width:100%;margin-top:4px;flex-wrap:wrap}
.sd-tweede-rij .lnk{margin-left:0;font-size:14.5px}
.sd-acties #sdStuur{flex:1 1 100%}
.sd-ongedaan{font-size:15.5px;padding:12px 14px 12px 18px;gap:14px}
.sd-ongedaan .btn{min-height:40px;padding:0 16px;font-size:15px}
body.mobiel .sd-kop-regel{flex-wrap:nowrap;white-space:nowrap}
body.mobiel .sd-kantoor{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Ronde 3, laatste punten: één kopstijl voor de context (gewone letters, half vet), het oordeel op de telefoon zonder eigen vlak */
.sd-detail .bh-uit>summary.sect,.sd-pd .bh-uit>summary.sect,body.mobiel .drawer .bh-uit>summary.sect{font:600 14px/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink)}
.sd-ingeklapt .sd-oordeel{margin-top:8px}
body.mobiel .sd-oordeel:not(.sd-agent2){background:transparent;padding:0}
/* Telefoon in rust (Nils 23 okt): geen uitlegregels of tellers boven een scherm, groepkopjes in Wacht op jou, kaarten zonder pills */
body.mobiel .phead .lead,body.mobiel .phead .kick{display:none}
body.mobiel .phead{margin-bottom:10px}
.sd-mob .sd-chips{margin-bottom:6px}
.sd-chip{box-shadow:none;background:transparent;min-height:38px;padding:0 12px}
.sd-chip.on{box-shadow:inset 0 0 0 1.5px var(--petrol);background:var(--ijsl)}
.sd-groep{font:600 13.5px var(--sans);color:var(--zacht);margin:14px 2px 2px}
.sd-groep.err{color:var(--err)}
.sd-kaart{min-height:0;gap:4px;padding:14px 16px}
.sd-onder{font-size:13.5px;color:var(--zacht)}
.bh-kantoorkaart{text-align:left;border:0;font:inherit;color:inherit;cursor:pointer;width:100%;padding:14px 16px;gap:4px}
.bh-kantoorkaart b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
body.mobiel .drawer details.blok.bh-uit{padding:2px 14px;margin-top:8px}
body.mobiel .drawer details.blok.bh-uit>summary.sect{min-height:46px;display:flex;align-items:center}
body.mobiel .drawer details.blok.bh-uit[open]{padding-bottom:12px}
body.mobiel .drawer details.blok.bh-uit>summary.sect,body.mobiel .sd-pd details.bh-uit>summary.sect{margin:0!important}
/* Op de telefoon staat de titel al in de bovenbalk: geen paginakop en geen tellerregel */
body.mobiel .page>.phead,body.mobiel .page>.row.mb8{display:none}
.bh-kaart-klein{padding:10px 14px}
/* Telefoonronde (reviews): de titel van agent 1 op één regel, het oordeel kleiner dan de vraag, het verzonden bericht even groot */
.sd-kaart b.sd-titel{-webkit-line-clamp:1}
body.mobiel .sd-oordeel-tekst{font-size:15px;font-weight:600}
.sd-verzonden2{background:var(--veld)}
.sd-redenen p{margin:0 0 6px;font-size:15px;display:flex;gap:8px;align-items:baseline}
body.mobiel .sd-oordeel-tekst{font-weight:400}
.sd-oordeel>.sd-label{font-weight:600}
/* Auditlog op een smal laptopscherm (760 tot 900 px): de tabel niet samenpersen maar horizontaal laten scrollen */
.tblwrap:has(.bh-log){overflow-x:auto}
.bh-log{min-width:880px}
/* Kwaliteit (S2c, BEHEER-STAPPEN 7.7): de steekproef en de maandreview. Rustig zoals de melding: tekst in plaats van pills of
   tellers, één echte knop (Gelezen), de periode als tekst met vorige en volgende */
.kw-page .toolbar{margin-bottom:6px}
.kw-periode{display:flex;align-items:center;gap:16px;margin:10px 0 4px;font-size:14.5px}
.kw-periode b{font-weight:600;color:var(--ink)}
.kw-kaart{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh);padding:18px 22px 20px;margin-top:14px;max-width:900px}
.kw-kaart .sd-vraag-tekst{font-size:16.5px}
.kw-opmerking{margin-top:16px}
.kw-opmerking>summary.sect{font:600 14px/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink);margin:0!important}
.kw-opm{display:block;width:100%;min-height:64px;margin-top:8px;font:15px/1.5 var(--sans);resize:vertical}
.kw-kaart .sd-acties #kwGelezen{flex:0 0 auto;min-width:200px;justify-content:center}
.kw-rest{display:flex;flex-direction:column;margin-top:14px;max-width:900px}
.kw-regel{display:flex;gap:12px;align-items:baseline;text-align:left;border:0;background:transparent;font:inherit;color:inherit;padding:10px 4px;box-shadow:0 1px 0 var(--haar);cursor:pointer;min-height:44px}
.kw-regel:hover{background:var(--veld)}
.kw-regel-tekst{color:var(--zacht);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kw-klaar{font-size:16px;margin:24px 0 0}
.kw-review{max-width:820px}
.kw-review .sd-sectie:first-child{margin-top:16px}
.kw-zin{margin:0 0 6px;font-size:15px;line-height:1.55}
.kw-leeg{margin:0;font-size:14px;color:var(--zacht)}
.kw-sub{font:600 13.5px var(--sans);color:var(--zacht);margin:10px 0 2px}
.kw-groep:first-child .kw-sub{margin-top:2px}
.kw-review details.kw-blok{margin-top:18px}
.kw-review details.kw-blok>summary.sect{font:600 14px/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink)}
body.mobiel .kw-periode{justify-content:space-between;gap:8px}
body.mobiel .kw-kaart{padding:14px;margin-top:10px}
body.mobiel .kw-opm{font-size:16px}
body.mobiel .kw-review details.kw-blok>summary.sect{min-height:46px;display:flex;align-items:center;margin:0!important}
body.mobiel .kw-review details.kw-blok{margin-top:2px}