/* Aktsyn | stylesheet van demo v13, de definitieve cascade (UI-REGELS.md, hoofdstuk 3).
   Gemaakt met: python3 app/maak-v13-css.py, uit Kantoorplatform-v13/Aktsyn-PoC-Kantoorplatform-v13.html
   (regel 174 tot 2076). Niet met de hand bewerken: een regel die in v13 bestaat, verandert in de demo of komt
   met een verwijzing naar de demo in app/css/aktsyn.css. Overschreven declaraties bij dezelfde selector in
   dezelfde @media zijn weggelaten (de laatste regel wint); de volgorde is die van de demo.
   383 overschreven declaraties weggelaten; demo-hulp en klantportaal weggelaten (lijst onderaan). */
:root{--messing:#D9B75B;--ok:#2E7D5B;--err:#B4453A;--messing-l:#F1E7CD;--messing-d:#6F5719;--ok-l:#E3F0E9;--err-l:#F6E4E1;--sans:'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}
.zacht{color:var(--zacht)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.r{text-align:right}
.nowrap{white-space:nowrap}
.hide{display:none!important}
svg.g{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side svg.g .a,.tl .ti .ic.auto svg.g .a,.btn svg.g .a,.tag.ink svg.g .a,.toast svg.g .a,.seg button.on svg.g .a,.attn .it .ic[style*=ink] svg.g .a{stroke:var(--ijs)}
svg.g.s{width:15px;height:15px}
svg.g.xs{width:13px;height:13px}
/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:228px 1fr;height:100vh}
.side{display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.brand svg{width:30px;height:30px}
.brand b{font:600 19px/1 var(--serif);letter-spacing:.01em}
.brand small{display:block;font-size:11px;margin-top:3px;letter-spacing:.01em}
.goto{white-space:nowrap;margin:4px 14px 10px;display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;width:calc(100% - 28px);text-align:left}
.goto kbd{margin-left:auto;font:11px var(--mono);padding:1px 6px;border-radius:5px}
.navscroll{flex:1;overflow-y:auto;padding:4px 10px 12px;scrollbar-width:thin}
.ngroup>.nk{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;padding:0 10px 7px;display:flex;justify-content:space-between}
.nitem{display:flex;align-items:center;gap:10px;font-size:13.5px;margin:1px 0}
.nitem .cnt{margin-left:auto;font:11px var(--mono);border-radius:10px;padding:0 7px;line-height:18px}
.nitem.sub{padding-left:38px;font-size:13px}
.nitem.more{font-size:13px}
.me{border-top:1px solid rgba(250,249,246,.08);padding:10px 12px;display:flex;align-items:center;gap:10px;position:relative}
.me .av{background:#2F4550;color:#fff}
.me .who{flex:1;min-width:0;text-align:left}
.me .who b{display:block;font-weight:500;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .who span{font-size:11.5px;color:#9FB2BA}
.av{width:30px;height:30px;border-radius:50%;font:600 11px/1 var(--sans);flex:none;letter-spacing:.02em}
.av.sm{width:22px;height:22px;font-size:9.5px}
.av.lg{width:44px;height:44px;font-size:15px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
header.top{height:58px;display:flex;align-items:center;gap:16px;padding:0 32px;flex:none;background:var(--paper);border-bottom:1px solid var(--haar)}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--zacht);font-size:13px;min-width:0;white-space:nowrap;overflow:hidden}
.crumbs a:hover{color:var(--petrol)}
.crumbs b{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:#B8BFC4}
header.top .sp{flex:1}
.bell{position:relative;width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.bell:hover{background:var(--veld)}
.bell .n{position:absolute;top:3px;right:2px;min-width:17px;height:17px;border-radius:9px;background:var(--petrol);color:#fff;font:600 10px/17px var(--sans);text-align:center;padding:0 4px}
.today{font:12px var(--mono);color:var(--zacht)}
.view{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:auto}
.page{padding:28px 36px 90px;max-width:1260px;margin:0 auto}
.page.wide{max-width:none}
/* ---------- Page head ---------- */
.phead{display:flex;align-items:flex-end;gap:24px}
.phead .t{flex:1;min-width:0}
.kick{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);margin-bottom:9px;display:flex;gap:8px;align-items:center}
.phead h1{font:500 30px/1.15 var(--serif);letter-spacing:-.005em}
.lead{color:var(--zacht);margin-top:7px;font-size:14.5px}
.acts{display:flex;align-items:center;gap:18px;flex:none}
/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--petrol);color:#fff;font-weight:500;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--petrol-d)}
.btn:disabled,.btn.dis{cursor:not-allowed}
.btn.lg{padding:12px 20px;font-size:15px}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.ink{background:var(--ink)}
.btn.confirm{background:var(--ink)}
.drawer .df{flex-wrap:wrap}
.btn.ink:hover{background:#2C3D47}
.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--petrol);font-weight:500;white-space:nowrap;cursor:pointer}
.lnk:hover{color:var(--petrol-d)}
.lnk.muted{color:var(--zacht);font-weight:400}
.lnk.muted:hover{color:var(--ink)}
.lnk.err{color:var(--err)}
.lnk.sm{font-size:13px}
.lnk.confirm{color:var(--err)}
.arr{display:inline-block;transition:transform .15s}
.lnk:hover .arr,.btn:hover .arr{transform:translateX(2px)}
/* ---------- Panels ---------- */
.panel{background:#fff;box-shadow:var(--sh)}
.pad{padding:20px 22px}
.panel h3,.h3{font:500 16px/1.3 var(--serif)}
.ph{display:flex;align-items:center;gap:12px;padding:16px 20px 10px}
.ph h3{flex:1}
.ph .sub{font-size:12.5px;color:var(--zacht)}
.sect{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);margin:26px 0 12px;display:flex;align-items:center;gap:10px}
.sect:first-child{margin-top:0}
.sect .ln{flex:1;height:1px;background:var(--haar)}
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g21{grid-template-columns:2fr 1fr}
.g12{grid-template-columns:1fr 2fr}
.row{display:flex;align-items:center;gap:10px}
.row.top{align-items:flex-start}
.col{display:flex;flex-direction:column;gap:10px}
.sp{flex:1}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}
.mt24{margin-top:24px}
.mb12{margin-bottom:12px}
.mb16{margin-bottom:16px}
.small{font-size:12.5px}
.tiny{font-size:11.5px}
.b{font-weight:600}
.w5{font-weight:500}
.sepbar{color:#B8BFC4;padding:0 2px;display:inline!important}
/* ---------- Tags ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tag.ghost{padding-left:0}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.stat-ok{color:var(--ok)}
.stat-err{color:var(--err)}
.stat-p{color:var(--petrol)}
.seal{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--messing);box-shadow:inset 0 0 0 3px #E7CE86, inset 0 0 0 4px var(--messing);flex:none}
.seal.lg{width:34px;height:34px;box-shadow:inset 0 0 0 5px #E7CE86, inset 0 0 0 7px var(--messing)}
/* ---------- Tabs (gevuld, zonder onderstreping) ---------- */
.tabs{display:inline-flex;flex-wrap:wrap}
.tabs button,.tabs a{white-space:nowrap}
.tabs .c{font:11px var(--mono);margin-left:5px}
.seg{display:inline-flex}
.seg button{white-space:nowrap}
.seg.acc button.on[data-v="Middelhoge prioriteit"]{background:var(--petrol);color:#fff}
.seg.acc button.on[data-v="Hoogste prioriteit"]{background:var(--ink);color:#fff}
/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;table-layout:auto}
.tbl th{font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--zacht);text-align:left;padding:10px 12px;position:sticky;top:0;background:#fff;z-index:1;white-space:nowrap;border-bottom:1px solid var(--haar)}
.tbl td{vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr.cl{cursor:pointer}
.tbl .nm{font-weight:500}
.tbl .sub{font-size:12px;color:var(--zacht)}
.tbl td.chk,.tbl th.chk{width:34px;padding-right:0}
.tbl tr.child td:first-child{padding-left:30px}
.tbl tr.hl td{background:#FCF9EF}
.tblwrap{overflow:clip}
.sheet .tbl th,.drawer .tbl th,.modal .tbl th,.sealed .tbl th{position:static}
.sealed .tbl th{background:transparent}
.tfoot{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:12.5px;color:var(--zacht);border-top:1px solid var(--haar)}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.search{display:flex;align-items:center;gap:8px;padding:7px 11px;min-width:240px;color:var(--zacht)}
.search input{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--ink)}
.filt{display:inline-flex;align-items:center;gap:6px;padding:0 4px 0 11px;font-size:13px;color:var(--zacht)}
.filt select{border:0;background:transparent;padding:7px 4px;outline:0;color:var(--ink);font-weight:500;cursor:pointer;max-width:240px}
/* ---------- Form fields ---------- */
.fields{display:grid;grid-template-columns:1fr;gap:2px}
.fld{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:12px;min-height:40px;position:relative;padding:3px 0}
.fld>label{font-size:13px;color:var(--zacht);line-height:1.3;display:flex;gap:4px;align-items:flex-start}
.fld>label .req{color:var(--err);font-weight:600}
.fld>label svg{margin-top:1px}
.fld.dirty::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--petrol)}
.fld.top{align-items:start}
.fld.stack{grid-template-columns:1fr!important;gap:6px}
.seg.acc{flex-wrap:wrap}
.fld.top>label{padding-top:9px}
.inp{width:100%;background:var(--veld);border:0;padding:8px 11px;outline:0;transition:background .12s, box-shadow .12s}
.inp:hover{background:var(--veld-h)}
.inp:focus{background:#fff;box-shadow:0 0 0 2px var(--petrol)}
.inp.mono{font:13px var(--mono)}
.inp[readonly],.inp.locked{background:transparent;box-shadow:inset 0 0 0 1px var(--haar);color:var(--zacht)}
textarea.inp{resize:vertical;min-height:72px;line-height:1.45}
select.inp{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%235A6670' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer}
.inpwrap{position:relative;display:flex;align-items:center}
.inpwrap .inp{padding-right:36px}
.inpwrap .ic{position:absolute;right:9px;color:var(--zacht);display:flex}
.inpwrap .ic:hover{color:var(--petrol)}
.lookup{display:flex;align-items:center;gap:8px;background:var(--veld);border-radius:8px;min-height:36px;padding:3px 9px 3px 4px;cursor:pointer;position:relative}
.lookup:hover{background:var(--veld-h)}
.lookup .chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:6px;padding:2px 7px 2px 3px;font-size:13px;color:var(--petrol);font-weight:500;box-shadow:0 1px 1px rgba(30,43,51,.06)}
.lookup .chip .x{color:var(--zacht);display:flex}
.lookup .chip .x:hover{color:var(--err)}
.lookup .ph{color:var(--zacht);font-size:13px;padding:0 6px}
.lookup .ic{margin-left:auto;color:var(--zacht);display:flex}
.pop{position:absolute;z-index:40;background:#fff;border-radius:10px;box-shadow:var(--sh-hi);padding:6px;min-width:260px}
.pop .q{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid var(--haar);margin-bottom:4px;color:var(--zacht)}
.pop .q input{border:0;outline:0;flex:1}
.pop .opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13.5px}
.pop .opt:hover,.pop .opt.on{background:var(--ijsvlak)}
.pop .opt small{color:var(--zacht);margin-left:auto;font-size:12px}
.yn{display:inline-flex;background:var(--veld);border-radius:8px;padding:3px;gap:2px}
.yn button{padding:5px 14px;border-radius:6px;font-size:13px;color:var(--zacht);font-weight:500}
.yn button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(30,43,51,.1)}
.chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;user-select:none}
.chk .bx{display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.chk .bx svg{opacity:0}
.chk.on .bx svg{opacity:1}
.chklist{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.lock{display:inline-flex;color:var(--zacht)}
.savebar{position:sticky;bottom:18px;margin:24px auto 0;width:max-content;max-width:100%;display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;padding:10px 12px 10px 18px;border-radius:12px;box-shadow:var(--sh-hi);z-index:20;font-size:13.5px}
.savebar .lnk{color:var(--ijs)}
.savebar .dot{background:var(--ijs)}
.saved{font-size:12px;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.unsaved{font-size:12px;color:var(--petrol);display:inline-flex;align-items:center;gap:5px}
/* ---------- Toast, drawer, modal, palette ---------- */
.toast{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast div{background:var(--ink);color:#fff;padding:11px 16px 11px 13px;border-radius:10px;box-shadow:var(--sh-hi);display:flex;gap:10px;align-items:center;font-size:13.5px;max-width:440px;animation:tin .25s ease}
.toast div svg{color:var(--ijs)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scrim{position:fixed;inset:0;background:rgba(30,43,51,.34);z-index:60;animation:fin .15s}
@keyframes fin{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:92vw;background:var(--paper);z-index:61;box-shadow:var(--sh-hi);display:flex;flex-direction:column;animation:din .22s ease}
@keyframes din{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.drawer.wide{width:700px}
.drawer .dh{padding:20px 24px 14px;display:flex;gap:12px;align-items:flex-start;background:#fff;box-shadow:0 1px 0 var(--haar)}
.drawer .dh h2{font:500 21px/1.25 var(--serif)}
.drawer .db{flex:1;overflow-y:auto;padding:18px 24px 30px}
.drawer .df{padding:14px 24px;background:#fff;display:flex;gap:18px;align-items:center;box-shadow:0 -1px 0 var(--haar)}
.x{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--zacht);flex:none}
.x:hover{background:var(--veld);color:var(--ink)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:720px;max-width:94vw;max-height:90vh;background:var(--paper);z-index:62;box-shadow:var(--sh-hi);display:flex;flex-direction:column;animation:min .2s ease}
.modal.wide{width:940px}
@keyframes min{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal .mh{padding:22px 26px 12px;display:flex;gap:12px;align-items:flex-start}
.modal .mh h2{font:500 23px/1.25 var(--serif)}
.modal .mb{padding:4px 26px 20px;overflow-y:auto}
.modal .mf{padding:14px 26px 18px;display:flex;gap:18px;align-items:center;border-top:1px solid var(--haar)}
.palette{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:640px;max-width:94vw;background:#fff;box-shadow:var(--sh-hi);z-index:70;overflow:hidden;animation:fin .12s}
.palette .pq{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--haar);color:var(--zacht)}
.palette .pq input{flex:1;border:0;outline:0;font-size:16px;color:var(--ink)}
.palette .pr{max-height:420px;overflow-y:auto;padding:6px}
.palette .pg{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:12px 12px 6px}
.palette .pi{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer}
.palette .pi.on,.palette .pi:hover{background:var(--ijsvlak)}
.palette .pi small{margin-left:auto;color:var(--zacht);font-size:12px}
.palette .pfoot{padding:9px 16px;font-size:12px;color:var(--zacht);border-top:1px solid var(--haar);display:flex;gap:16px}
.notif{position:fixed;top:54px;right:26px;width:420px;background:#fff;border-radius:14px;box-shadow:var(--sh-hi);z-index:70;overflow:hidden;animation:fin .12s}
.notif .nh{padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--haar)}
.notif .nh h3{flex:1}
.notif .ni{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--haar);cursor:pointer}
.notif .ni:hover{background:#FCFBF8}
.notif .ni .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.notif .ni .ic.err{background:var(--err-l)}
.notif .ni b{font-weight:500;display:block;font-size:13.5px}
.notif .ni span{font-size:12.5px;color:var(--zacht)}
.menu{position:fixed;z-index:72;background:#fff;box-shadow:var(--sh-hi);padding:8px;width:300px;animation:fin .12s}
.menu .mk{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:10px 10px 6px}
.menu .mi{display:flex;gap:10px;padding:8px 10px;cursor:pointer}
.menu .mi:hover{background:var(--ijsvlak)}
.menu .mi.on{background:var(--ijsl)}
.menu .mi b{display:block;font-weight:500;font-size:13.5px}
.menu .mi span{font-size:12px;color:var(--zacht);line-height:1.35;display:block}
/* ---------- Demo-hulp ---------- */
/* ---------- Klantakte (het levende dossier) ---------- */
.akte{display:grid;grid-template-columns:212px minmax(0,1fr);gap:28px;align-items:start}
.aidx{position:sticky;top:18px;display:flex;flex-direction:column;gap:1px;font-size:13px}
.aidx .ik{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:14px 10px 7px}
.aidx .ik:first-child{padding-top:2px}
.aidx a{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;color:var(--zacht);line-height:1.3}
.aidx a:hover{color:var(--ink);background:var(--veld)}
.aidx a.on{color:var(--ink);background:#fff;box-shadow:var(--sh)}
.aidx a .st{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C4CACD;flex:none}
.aidx a .st.bz{box-shadow:none;background:linear-gradient(90deg,var(--petrol) 50%,var(--ijsl) 50%)}
.aidx a .st.kl{box-shadow:none;background:var(--petrol)}
.aidx a .st.vz{box-shadow:none;background:var(--messing)}
.aidx a .nr{font:11px var(--mono);color:#9AA3A9;width:16px}
.aidx .legend{padding:14px 10px 0;font-size:11.5px;color:var(--zacht);display:grid;gap:5px}
.aidx .legend span{display:flex;align-items:center;gap:7px}
.aidx .legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.sheet{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:40px 52px 56px;min-width:0}
.ahead{display:flex;gap:18px}
.ahead h1{font:500 32px/1.15 var(--serif)}
.ahead .meta{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:9px;font-size:13px;color:var(--zacht)}
.ahead{padding-bottom:10px;border-bottom:0;align-items:center}
.ameta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13px;color:var(--zacht);padding-bottom:18px;border-bottom:1px solid var(--haar)}
.ameta .tag{margin-right:10px}
.ameta .sepbar{padding:0 7px}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0 0 6px;border-bottom:1px solid var(--haar)}
.facts>div{padding:14px 14px 14px 0}
.facts>div+div{padding-left:14px;box-shadow:-1px 0 0 var(--haar)}
.facts small{display:block;font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--zacht);margin-bottom:6px}
.facts b{font-weight:500;font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap{padding-top:34px;scroll-margin-top:12px}
.chap+.chap{margin-top:14px;border-top:1px solid var(--haar)}
.chh{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.chh .nr{font:500 12px/28px var(--mono);color:#98A1A7;width:26px;flex:none}
.chh h2{font:500 22px/1.25 var(--serif)}
.chh p{margin:4px 0 0;color:var(--zacht);font-size:13.5px}
.chh .t{flex:1;min-width:0}
.chh .state{flex:none;margin-top:3px}
.chb{padding-left:40px}
.chb .g2 .fld{grid-template-columns:132px minmax(0,1fr)}
.drawer .fld{grid-template-columns:150px 1fr}
.waiting{background:var(--paper);border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:16px;color:var(--zacht)}
.waiting .ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.waiting b{color:var(--ink);font-weight:500;display:block}
.sealed{background:linear-gradient(180deg,#FDFAF1,#fff);box-shadow:inset 0 0 0 1px var(--messing-l);padding:18px 20px}
.sealed .sh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sealed .sh b{font:500 16px var(--serif)}
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px}
.kv small{display:block;font-size:11.5px;color:var(--zacht);margin-bottom:2px}
.kv b{font-weight:500}
.tl{display:flex;flex-direction:column}
.tl .ti{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--haar)}
.tl .ti:last-child{border-bottom:0}
.tl .ti .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.tl .ti .ic.auto{background:var(--ink)}
.tl .ti .ic.seal{background:var(--messing-l);box-shadow:none;width:28px;height:28px;border-radius:8px}
.tl .ti b{font-weight:500;font-size:13.5px}
.tl .ti span{font-size:12px;color:var(--zacht)}
.note-in{display:flex;gap:8px;align-items:center;background:var(--veld);border-radius:9px;padding:6px 6px 6px 12px;margin-bottom:6px}
.note-in input{flex:1;border:0;background:transparent;outline:0}
.subtabs{display:flex;gap:4px;margin:4px 0 16px}
/* ---------- Calculatie ---------- */
.stepper{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:20px}
.stepper button{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;background:transparent;text-align:left;color:var(--zacht);font-size:13px;line-height:1.25}
.stepper button:hover{background:var(--veld)}
.stepper button .n{width:24px;height:24px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px #C9CED1;font:500 11px/24px var(--mono);text-align:center;color:var(--zacht)}
.stepper button.done .n{background:var(--ijsl);box-shadow:none;color:var(--petrol-d)}
.stepper button.on{background:#fff;box-shadow:var(--sh);color:var(--ink);font-weight:500}
.stepper button.on .n{background:var(--petrol);color:#fff;box-shadow:none}
.calc{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.bon{position:sticky;top:18px}
.bon .bh{padding:18px 20px 12px}
.bon .model{padding:14px 20px;border-top:1px solid var(--haar)}
.bon .mk{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);margin-bottom:10px;display:flex;justify-content:space-between}
.bon .ln{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px}
.bon .ln span:first-child{color:var(--zacht);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bon .tot{display:flex;align-items:baseline;justify-content:space-between;padding-top:8px;margin-top:6px;border-top:1px solid var(--haar)}
.bon .tot b{font:500 26px/1 var(--serif)}
.ring{--v:50;width:62px;height:62px;border-radius:50%;background:conic-gradient(var(--petrol) calc(var(--v)*1%), var(--ijsl) 0);display:flex;align-items:center;justify-content:center;flex:none}
.ring i{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font:500 17px var(--serif);font-style:normal}
.meter{position:relative;overflow:hidden}
.meter i{position:absolute;left:0;top:0;bottom:0}
.meter.ok i{background:var(--ok)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{background:#fff;border-radius:12px;box-shadow:var(--sh);padding:15px 16px;cursor:pointer;position:relative;transition:box-shadow .15s}
.tile:hover{box-shadow:var(--sh-hi)}
.tile.on{box-shadow:inset 0 0 0 2px var(--petrol), var(--sh)}
.tile .tk{font-size:11.5px;color:var(--zacht);margin-bottom:3px}
.tile b{font-weight:500;font-size:14.5px;display:block}
.tile p{margin:5px 0 0;font-size:12.5px;color:var(--zacht);line-height:1.4}
.tile .ck{position:absolute;right:14px;top:14px}
.tile .meta{margin-top:9px;font-size:12px;color:var(--zacht)}
.slider{display:grid;grid-template-columns:minmax(0,1fr) 54px 190px 30px;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--haar)}
.slider:last-child{border-bottom:0}
.slider .w{font:12px var(--mono);color:var(--zacht);text-align:right}
.slider .v{font:500 15px var(--mono);color:var(--petrol);text-align:right}
.slider small{display:block;color:var(--zacht);font-size:12px;margin-top:2px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--veld);border-radius:2px;outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--petrol);cursor:pointer;box-shadow:0 0 0 4px #fff, 0 1px 4px rgba(30,43,51,.3)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--petrol);border:0;cursor:pointer}
.cx{display:grid;grid-template-columns:minmax(0,1fr) 150px 70px 90px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--haar)}
.scale{position:relative;height:40px;margin:18px 0 6px}
.scale .zones{display:flex;height:10px;border-radius:5px;overflow:hidden;position:absolute;left:0;right:0;top:14px}
.scale .zones i{height:100%}
.scale .pin{position:absolute;top:0;width:2px;height:38px;background:var(--ink);transform:translateX(-1px)}
.scale .pin b{position:absolute;top:-4px;left:8px;font:500 12px var(--mono);white-space:nowrap}
.pk3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pk{background:#fff;border-radius:14px;box-shadow:var(--sh);padding:0 0 16px;position:relative;cursor:pointer;display:flex;flex-direction:column}
.pk.on{box-shadow:inset 0 0 0 2px var(--petrol), var(--sh)}
.pk .ph{padding:16px 18px 12px;display:block}
.pk .band{height:6px;border-radius:14px 14px 0 0}
.pk.brons .band{background:#B8875A}
.pk.zilver .band{background:#9AA7B0}
.pk.goud .band{background:#C9A646}
.pk .nm{font:500 19px var(--serif)}
.pk .aanb{position:absolute;top:14px;right:14px;background:var(--petrol);color:#fff;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:6px}
.pk .pr{padding:0 18px}
.pk .pr b{font:500 28px/1 var(--serif)}
.pk .pr span{font-size:12.5px;color:var(--zacht)}
.pk ul{list-style:none;margin:14px 0 0;padding:12px 18px 0;border-top:1px solid var(--haar);font-size:12.5px;display:grid;gap:5px;flex:1;align-content:start}
.pk li{display:flex;gap:7px;align-items:flex-start;line-height:1.35}
.pk li svg{margin-top:1px}
.pk li.out{color:var(--zacht)}
.pk .cf{padding:10px 18px 0;font-size:12px;color:var(--zacht)}
.doc{background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(30,43,51,.1), 0 12px 30px rgba(30,43,51,.08);padding:40px 44px;font-size:12.5px;line-height:1.55}
.doc h2{font:500 22px/1.2 var(--serif);margin-bottom:6px}
.doc h4{font:500 13.5px var(--serif);margin:18px 0 6px}
.doc .lh{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--haar)}
.doc table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
.doc td,.doc th{padding:6px 6px;border-bottom:1px solid var(--haar);text-align:left;vertical-align:top}
.doc th{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--zacht)}
.doc .ab{background:var(--ijsvlak)}
.mail{box-shadow:var(--sh)}
.mail .mr{display:grid;grid-template-columns:70px 1fr;padding:9px 16px;border-bottom:1px solid var(--haar);font-size:13px;align-items:center}
.mail .mr span{color:var(--zacht)}
.mail textarea{width:100%;border:0;outline:0;padding:14px 16px;min-height:230px;resize:vertical;line-height:1.55;font-size:13px;background:transparent}
.banner{gap:16px}
.banner .ico{width:36px;height:36px;border-radius:10px;background:var(--ijsvlak);color:var(--petrol);display:flex;align-items:center;justify-content:center;flex:none}
.banner.gold{box-shadow:inset 0 0 0 1px var(--messing-l), var(--sh)}
.banner b{font-weight:500;display:block}
.banner .t{flex:1;min-width:0}
.banner span{font-size:13px;color:var(--zacht)}
/* ---------- Aan tafel (gespreksmodus) ---------- */
.tafel{position:fixed;inset:0;z-index:80;background:var(--paper);display:flex;flex-direction:column;animation:fin .2s}
.tafel .tt{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;padding:16px 44px}
.tafel .twie{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.tafel .twie>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tafel.klant .tsteps button{pointer-events:none}
.tafel.klant .tf{justify-content:center}
.tafel.klant .pk{cursor:default}
.tafel .tt .cl{font:500 15px var(--serif)}
body.tafelopen .toast{bottom:96px}
.bigin{display:block;width:100%;border:0;background:transparent;font:400 30px/1.2 var(--serif);color:var(--ink);padding:2px 0;margin-top:6px;border-bottom:1.5px dashed transparent;outline:0;border-radius:0}
.bigin:hover{border-bottom-color:#CFCBC0}
.bigin:focus{border-bottom-color:var(--petrol)}
select.bigin{appearance:none;-webkit-appearance:none;cursor:pointer}
.tafel .tsteps{display:flex;gap:6px;justify-content:center}
.tafel .tsteps button{padding:7px 14px;border-radius:20px;font-size:13px;color:var(--zacht)}
.tafel .tsteps button.on{background:var(--ink);color:#fff}
.tafel .tb{flex:1;overflow-y:auto;padding:10px 44px 40px}
.tafel .tin{max-width:1180px;margin:0 auto}
.tafel h1{font:400 42px/1.12 var(--serif);letter-spacing:-.01em;max-width:860px}
.tafel .tl2{font-size:17px;color:var(--zacht);margin-top:12px;max-width:760px;line-height:1.5}
.tafel .tf{display:flex;align-items:center;gap:20px;padding:16px 44px;border-top:1px solid var(--haar);background:var(--paper)}
.tvd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.tvd .blk{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:22px 26px}
.tvd .blk h3{font:500 19px var(--serif);display:flex;align-items:center;gap:10px}
.tvd .blk h3 span{margin-left:auto;font:500 14px var(--mono);color:var(--petrol)}
.drv{padding:14px 0;border-bottom:1px solid var(--haar)}
.drv:last-child{border-bottom:0}
.drv b{font-weight:500;font-size:15px}
.drv p{margin:3px 0 10px;color:var(--zacht);font-size:13.5px}
.dots11{display:flex;gap:6px}
.dots11 button{width:31px;height:31px;border-radius:50%;background:var(--veld);font:500 11.5px var(--mono);color:var(--zacht)}
.dots11 button.f{background:var(--ijsl);color:var(--petrol-d)}
.dots11 button.on{background:var(--petrol);color:#fff}
.tpk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;align-items:stretch}
.tpk .pk{padding-bottom:22px}
.tpk .pk .nm{font-size:24px}
.tpk .pk .pr b{font-size:40px}
.tpk .pk ul{font-size:14px;gap:8px}
.tpk .pk.rec{transform:translateY(-10px);box-shadow:inset 0 0 0 2px var(--petrol), var(--sh-hi)}
.tpk .pk .intern{margin:12px 18px 0;padding-top:10px;border-top:1px dashed #D9D5CA;font:12px var(--mono);color:var(--zacht)}
.tuw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px;align-items:start}
.tuw .c{background:#fff;border-radius:14px;box-shadow:var(--sh);padding:18px 20px}
.tuw .c small{display:block;font-size:12.5px;color:var(--zacht)}
.tuw .c b{font:400 30px/1.2 var(--serif);display:block;margin-top:6px}
.tuw .c input,.tuw .c select{margin-top:10px}
/* ---------- Planbord ---------- */
.bord{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 18px;align-items:flex-start}
.kol{width:246px;flex:none;background:#F3F1EB;border-radius:12px;padding:10px 8px 10px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 290px)}
.kol.eind{background:#EFF4F1}
.kol.over{box-shadow:inset 0 0 0 2px var(--petrol)}
.kol .kh{padding:4px 6px 4px;display:flex;align-items:baseline;gap:8px}
.kol .kh b{font-weight:600;font-size:13px;flex:1;line-height:1.3}
.kol .kh span{font:11px var(--mono);color:var(--zacht)}
.kol .kn{padding:0 6px 4px;font-size:11.5px;color:var(--zacht)}
.kol .cards{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:2px}
.kaart{background:#fff;box-shadow:0 1px 2px rgba(30,43,51,.08);padding:11px 12px;cursor:grab;transition:box-shadow .15s, transform .15s}
.kaart:hover{box-shadow:0 2px 10px rgba(30,43,51,.12)}
.kaart.drag{opacity:.4}
.kaart.flash{animation:flash 1.4s ease}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--ijs)}100%{box-shadow:0 1px 2px rgba(30,43,51,.08)}}
.kaart .kn2{font-weight:500;font-size:13.5px;line-height:1.3}
.kaart .kn2 small{font:11.5px var(--mono);color:var(--zacht);font-weight:400}
.kaart .rl{display:flex;gap:10px;margin-top:8px;font-size:11.5px;color:var(--zacht)}
.kaart .rl span{display:inline-flex;align-items:center;gap:5px}
.kaart .rl i{font:500 9.5px/1 var(--mono);font-style:normal;color:var(--petrol-d);background:var(--ijsl);padding:2px 4px}
.kaart .rl i.rb{color:var(--ink);background:var(--veld)}
.kaart .kf{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:11.5px;color:var(--zacht)}
.kaart .kf span{display:inline-flex;align-items:center;gap:4px}
.kaart .kf .late{color:var(--err);font-weight:500}
.kaart .prog{border-radius:2px;margin-top:9px;overflow:hidden}
.kaart .prog i{display:block;height:100%}
.kaart .stil{color:var(--err)}
.kaart .flags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.cl-item{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--haar)}
.cl-item:last-child{border-bottom:0}
.cl-item .t{flex:1;min-width:0}
.cl-item .t b{font-weight:500;font-size:13.5px;display:block}
.cl-item .t span{font-size:12px;color:var(--zacht);display:block}
.cl-item .t span.auto{color:var(--petrol-d)}
.rules{display:grid;gap:8px}
.rules div{display:flex;gap:10px;align-items:flex-start;font-size:13px;background:#fff;border-radius:10px;padding:10px 12px;box-shadow:var(--sh)}
.rules div svg{color:var(--petrol);margin-top:1px}
/* ---------- Inzicht ---------- */
.kpi{background:#fff}
.kpi b{display:block;font:400 30px/1.15 var(--serif);margin-top:6px}
.kpi span{font-size:12px;color:var(--zacht)}
.kpi .d{font-size:12px;margin-top:4px}
.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:200px minmax(0,1fr) 90px;gap:12px;align-items:center;font-size:13px;position:relative}
.bar .tr{position:relative}
.bar .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0}
.bar .tr .norm{position:absolute}
.bar .v{font:12.5px var(--mono);text-align:right}
.tip{position:fixed;z-index:95;background:var(--ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:7px;pointer-events:none;box-shadow:var(--sh-hi);max-width:280px}
.dev{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.dev .track{width:120px;height:10px;position:relative;background:var(--veld);border-radius:3px}
.dev .track .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#9AA3A9}
.dev .track i{position:absolute;top:0;bottom:0;border-radius:3px}
/* ---------- Beheer ---------- */
.adm{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.adm nav{position:sticky;top:18px;display:flex;flex-direction:column;gap:1px}
.adm nav a{padding:8px 12px;border-radius:8px;color:var(--zacht);font-size:13.5px;display:flex;justify-content:space-between}
.adm nav a:hover{color:var(--ink);background:var(--veld)}
.adm nav a.on{background:#fff;color:var(--ink);box-shadow:var(--sh);font-weight:500}
.adm nav .ak{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:14px 12px 6px}
.cell-in{background:transparent;border:0;border-radius:6px;padding:5px 7px;width:100%;outline:0;font:13px var(--mono);text-align:right}
.cell-in:hover{background:var(--veld)}
.cell-in:focus{background:#fff;box-shadow:0 0 0 2px var(--petrol)}
.cell-in.t{font-family:var(--sans);text-align:left}
/* ---------- Home ---------- */
.hello{font:400 34px/1.15 var(--serif);letter-spacing:-.01em}
.agenda .ai{display:grid;grid-template-columns:58px 1fr auto;gap:12px;padding:12px 20px;border-top:1px solid var(--haar);align-items:center}
.agenda .ai .tm{font:500 13px var(--mono)}
.attn .it{display:flex;gap:14px;align-items:center;padding:13px 20px;border-top:1px solid var(--haar)}
.attn .it .ic{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.attn .it .ic.err{background:var(--err-l)}
.attn .it .ic.m{background:var(--messing-l)}
.attn .it .t{flex:1;min-width:0}
.attn .it b{font-weight:500;display:block;font-size:13.5px}
.attn .it span{font-size:12.5px;color:var(--zacht)}
.journey{display:flex;align-items:center;gap:3px}
.journey i{width:22px;height:5px;border-radius:3px;background:var(--veld)}
.journey i.d{background:var(--petrol)}
.journey i.c{background:var(--ijs)}
.journey i.s{background:var(--messing)}
.empty{padding:34px 20px;text-align:center;color:var(--zacht)}
.lib{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.lib button{text-align:left;display:flex;flex-direction:column;justify-content:flex-start;background:#fff;border-radius:12px;padding:13px 14px;box-shadow:var(--sh);position:relative}
.lib button b{display:flex;justify-content:space-between;font-weight:500}
.lib button b span{font:12px var(--mono);color:var(--zacht)}
.lib button p{margin:4px 0 0;font-size:12px;color:var(--zacht);line-height:1.35}
.lib button .fl{position:absolute;right:-9px;top:50%;margin-top:-6px;color:#C3C9CC;z-index:1}
.aichip{display:inline-flex;align-items:center;gap:5px;background:var(--ijsvlak);color:var(--petrol-d);border-radius:6px;padding:2px 7px;font-size:12px;font-weight:500;white-space:nowrap}
.aichip em{font-style:normal;font:11px var(--mono);color:var(--zacht)}
.preview{background:#fff;border-radius:8px;box-shadow:var(--sh);height:360px;padding:26px 28px;font-size:11px;color:#8A949A;overflow:hidden;position:relative}
.preview .pl{height:8px;border-radius:4px;background:var(--veld);margin:9px 0}
.fx{animation:fin .4s}
.effects{display:grid;gap:4px;margin-top:10px}
.effects .ef{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border-radius:9px;background:#fff;opacity:.25;transition:opacity .3s}
.effects .ef.on{opacity:1}
.effects .ef .ic{width:24px;height:24px;border-radius:50%;background:var(--veld);color:var(--zacht);display:flex;align-items:center;justify-content:center;flex:none}
.effects .ef.on .ic{background:var(--ok);color:#fff}
.effects .ef b{font-weight:500;font-size:13.5px;display:block}
.effects .ef span{font-size:12.5px;color:var(--zacht)}
.sealanim{animation:sealpop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes sealpop{0%{transform:scale(.2) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:1360px){
  .page{padding:24px 26px 90px}
  .sheet{padding:32px 36px 48px}
  .akte{grid-template-columns:188px minmax(0,1fr);gap:20px}
  .calc{grid-template-columns:minmax(0,1fr) 300px}
  .fld{grid-template-columns:160px 1fr}
  .stepper button{font-size:12px;padding:9px 8px}
  .kv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slider{grid-template-columns:minmax(0,1fr) 44px 150px 26px}
  .bar{grid-template-columns:160px minmax(0,1fr) 80px}
  .tbl th{white-space:normal;padding:9px 7px}
  .tbl td{padding:10px 7px}
  .tbl td.small,.tbl .sub{word-break:break-word}
  .sheet .tbl td,.sheet .tbl th{padding-left:5px;padding-right:5px}
  .num{font-size:12px}
}
/* inklapbare hoofdstukken */
.chap.dicht{padding-top:0;margin-top:0!important}
.chap.dicht+.chap,.chap+.chap.dicht{margin-top:0}
.chap.dicht .chh{width:100%;display:flex;align-items:center;gap:14px;padding:15px 8px 15px 0;margin:0;text-align:left;border-radius:10px;cursor:pointer}
.chap.dicht .chh:hover{background:#FCFBF8}
.chap.dicht .chh .nr{line-height:20px}
.chap.dicht .chh .t{flex:1;min-width:0;display:flex;align-items:baseline;gap:14px}
.chap.dicht .chh .h2{font:500 17px/1.3 var(--serif);white-space:nowrap}
.chap.dicht .chh .sum{font-size:13px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chap.dicht .chh .state{margin-top:0}
.chap.open>.chh{cursor:pointer}
.chev{color:var(--zacht);display:flex;flex:none;transition:transform .15s}
.chev.op{transform:rotate(180deg);margin-top:5px}
.chap.open{padding-bottom:18px}
.chap.open+.chap{border-top:1px solid var(--haar)}
.chap.dicht+.chap.dicht{border-top:1px solid var(--haar)}
.chap.open+.chap.dicht,.chap.dicht+.chap.open{border-top:1px solid var(--haar)}
.akcol{min-width:0}
.arail{display:none;position:sticky;top:0;z-index:15;background:var(--paper);padding:10px 0 10px;margin-bottom:14px;box-shadow:0 1px 0 var(--haar)}
.arail .rr{display:flex;flex-wrap:wrap;gap:4px}
.arail .rr a{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;font-size:12.5px;color:var(--zacht);white-space:nowrap}
.arail .rr a:hover{background:var(--veld);color:var(--ink)}
.arail .rr a.on{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.arail .rr .st{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C4CACD;flex:none}
.arail .rr .st.bz{box-shadow:none;background:linear-gradient(90deg,var(--petrol) 50%,var(--ijsl) 50%)}
.arail .rr .st.kl{box-shadow:none;background:var(--petrol)}
.arail .rr .st.vz{box-shadow:none;background:var(--messing)}
.arail .rr.klein{margin-top:2px}
.arail .rr.klein a{font-size:12px;padding:3px 8px}
.arail .rk{font:500 10px/24px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#98A1A7;padding:0 4px 0 10px}
.arail .rk:first-child{padding-left:10px}
@media (max-width:1399px){
  .akte{grid-template-columns:minmax(0,1fr)!important}
  .aidx{display:none}
  .arail{display:block}
}
.tview{margin-top:14px;border-top:1px solid var(--haar);padding-top:10px}
.tview summary{cursor:pointer;color:var(--petrol);font-weight:500;font-size:13px;display:inline-flex;align-items:center;gap:6px;list-style:none}
.tview summary::-webkit-details-marker{display:none}
.tview[open] summary{margin-bottom:8px}
.tview .tbl{margin-bottom:10px}
.tview .tbl th{white-space:normal;padding:8px 8px}
.tview .tbl td{padding:7px 8px}
@media (max-width:1399px){
  .chb .g2{grid-template-columns:minmax(0,1fr)!important}
  .chb .g2 .fld{grid-template-columns:190px minmax(0,1fr)}
  .chb .g2 .sect:first-child{margin-top:0}
}
body:has(.drawer) .toast,body:has(.modal .mf) .toast{bottom:92px}
/* =====================================================================
   v6: samengevoegd (dossier A, overzichten B, uren nieuw) in de taal van D
   ===================================================================== */
.ngroup{margin-top:10px}
@media (max-height:860px){
  .pinned{display:none}
}
.seg.acc button.on[data-v="Standaard"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(30,43,51,.12)}
/* accountwaardering */
.wt{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;white-space:nowrap}
.wmark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;vertical-align:-2px;margin-left:4px}
.wmark.hoog{background:var(--ink);color:var(--ijs)}
.wmark.mid{background:var(--ijsl);color:var(--petrol-d)}
.wmark svg.g{width:11px;height:11px;stroke-width:2}
/* ---------- Record (dossier, contactpersoon) ---------- */
.rec{padding:0 36px 90px;max-width:1440px;margin:0 auto}
.cmdbar{top:0;z-index:18;display:flex;align-items:center;gap:18px;box-shadow:0 1px 0 var(--haar);flex-wrap:wrap}
.cmd{display:inline-flex;align-items:center;gap:7px;color:var(--petrol);font-weight:500;font-size:13.5px;white-space:nowrap;cursor:pointer;background:none;border:0;padding:0;font-family:inherit}
.cmd:hover{color:var(--petrol-d)}
.cmd.dim,.cmd[disabled]{color:#A9B2B7;cursor:default}
.cmd.muted{color:var(--zacht);font-weight:400}
.cmd.muted:hover{color:var(--ink)}
.cmd.err{color:var(--err)}
.cmdsep{width:1px;height:20px;background:#E3E0D6;flex:none}
.menu .mi.opt{display:none}
.cmdbar.dirty .cmd.opt,.cmdbar.dirty .cmd.opt2{display:none}
.menu .mi.opt.toon{display:flex}
@media (max-width:1360px){
  .cmdbar{gap:15px}
  .cmd.opt{display:none}
  .menu .mi.opt{display:flex}
}
.cmdbar .ro{display:inline-flex;align-items:center;gap:8px;color:var(--zacht);font-size:13px}
.rhead{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:22px 26px 0;margin-bottom:16px}
.rhead.np{padding-bottom:20px}
.rtop{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.rlogo{width:50px;height:50px;border-radius:12px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font:500 17px var(--serif);flex:none;letter-spacing:.02em}
.rlogo.c{border-radius:50%;background:var(--ijsl);color:var(--petrol-d);font-family:var(--sans);font-weight:600;font-size:16px}
.rname{flex:1;min-width:320px}
.rname h1{font:500 28px/1.15 var(--serif);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;letter-spacing:-.005em}
.svst{font:400 12.5px var(--sans);color:var(--zacht);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.svst.d{color:var(--petrol);font-weight:500}
.svst.d::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--petrol)}
.rmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13px;color:var(--zacht);margin-top:7px}
.rmeta .tag{margin-right:8px}
.rsum{margin-top:9px;font-size:14px;line-height:1.5;max-width:760px}
.rsum.wide{margin:12px 0 0 68px;max-width:900px}
@media (max-width:1360px){
  .rhead .hfacts{margin-left:68px;max-width:calc(100% - 68px);flex-wrap:wrap;row-gap:10px}
  .rhead .hfacts>div{padding:0 14px}
  .rhead .hfacts>div:first-child{padding-left:0}
  .dtabs>*{padding:6px 10px!important;font-size:13px!important}
}
.hfacts{display:flex;flex:none;margin-left:auto;padding-top:4px}
.hfacts>div{padding:0 18px;box-shadow:-1px 0 0 var(--haar);min-width:0}
.hfacts>div:first-child{box-shadow:none;padding-left:0}
.hfacts>div:last-child{padding-right:0}
.hfacts small{display:block;font-size:12px;color:var(--zacht);margin-bottom:5px;white-space:nowrap}
.hfacts b{font-weight:500;font-size:13.5px;white-space:nowrap;display:flex;align-items:center;gap:6px}
@media (max-width:1360px){
  .rec{padding:0 24px 90px}
  .hfacts{margin-left:0;width:100%;padding-top:10px}
  .hfacts>div{padding:0 14px}
  .rname{min-width:0}
}
/* dossierpanelen */
.dgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.dgrid>.col{gap:16px}
.pnl{background:#fff;box-shadow:var(--sh);padding:16px 20px 18px;min-width:0}
.pnl>.hd{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-height:24px}
.pnl>.hd h3{flex:1;font:500 16px/1.3 var(--serif)}
.pnl>.hd .sub{font-size:12.5px;color:var(--zacht)}
.pnl .fld{grid-template-columns:142px minmax(0,1fr);gap:10px}
.pnl .fld.stack{grid-template-columns:1fr}
.pnl .tbl th{position:static}
.pnl .tbl th:first-child,.pnl .tbl td:first-child{padding-left:0}
.pnl .tbl th:last-child,.pnl .tbl td:last-child{padding-right:0}
.pnl .chklist{grid-template-columns:1fr}
@media (max-width:1360px){
  .dgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dgrid>.col:nth-child(3){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .pnl .fld{grid-template-columns:124px minmax(0,1fr)}
}
.fld.err .inp,.fld.err .lookup{box-shadow:0 0 0 2px var(--err)}
.ferr{font-size:12px;color:var(--err)}
.tlf button{padding:3px 9px;border-radius:6px;font-size:12px;color:var(--zacht)}
.mini{font-size:12px;color:var(--zacht)}
.kblok{cursor:pointer}
.kblok:hover{box-shadow:var(--sh-hi)}
/* onboarding (A) */
.fstrip{display:flex;gap:3px;margin:10px 0 6px}
.fstrip i{flex:1;height:6px;border-radius:3px;background:var(--veld)}
.fstrip i.d{background:var(--petrol)}
.fstrip i.c{background:var(--ijs)}
.fstrip i.e{background:var(--ok)}
.fnames{display:grid;gap:6px;font-size:12px;color:var(--zacht);line-height:1.3}
.fnames .on{color:var(--petrol-d);font-weight:600}
.okrow{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--haar)}
.okrow:last-child{border-bottom:0}
.okrow .ok{width:22px;height:22px;border-radius:50%;background:var(--veld);color:#B5BCC0;display:flex;align-items:center;justify-content:center;flex:none;transition:background .25s}
.okrow.done .ok{background:var(--ok);color:#fff}
.okrow .ok svg.g{width:12px;height:12px;stroke-width:2.4}
.okrow .t{flex:1;min-width:0}
.okrow b{font-weight:500;font-size:13.5px;display:block}
.okrow .s{font-size:12px;color:var(--zacht);display:block;line-height:1.4}
.okrow .s.auto{color:var(--petrol-d)}
.okrow.pending{opacity:.35}
.okgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.rolchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.rolchip i{font:500 9.5px/1 var(--mono);font-style:normal;color:var(--petrol-d);background:var(--ijsl);padding:3px 5px;border-radius:4px}
.rolchip i.rb{color:var(--ink);background:var(--veld)}
/* stat-tegels klikbaar */
.kpi.cl{cursor:pointer}
.kpi.cl:hover{box-shadow:var(--sh-hi)}
.kpi .bar2{height:5px;border-radius:3px;background:var(--veld);margin-top:10px;overflow:hidden}
.kpi .bar2 i{display:block;height:100%;background:var(--petrol)}
/* sorteerbare kolommen en filterchips */
th.srt{cursor:pointer;user-select:none}
th.srt:hover{color:var(--ink)}
th.srt .sa{display:inline-block;margin-left:4px;color:var(--petrol)}
.fbox{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:6px 18px;margin-bottom:14px}
.frow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--haar)}
.frow:last-child{border-bottom:0}
.frow .fk{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--zacht);width:118px;flex:none}
.chipf{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--veld);font-size:12.5px;color:var(--ink);cursor:pointer;white-space:nowrap;line-height:20px}
.chipf:hover{background:var(--veld-h)}
.chipf em{font-style:normal;font:11px var(--mono);color:var(--zacht)}
.actf{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.actf .chipf{background:var(--ijsl);color:var(--petrol-d)}
.actf .chipf svg.g{width:11px;height:11px}
/* calculatie stap 6 (B) */
.s6{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.s6 .doc{padding:34px 38px}
.somr{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--haar);font-size:13px}
.somr:last-child{border-bottom:0}
.somr>span:first-child{color:var(--zacht);white-space:nowrap}
.somr>span:last-child{text-align:right}
.mailf .fld{grid-template-columns:86px minmax(0,1fr)}
@media (max-width:1360px){
  .s6{grid-template-columns:minmax(0,1fr)}
}
/* akkoord (A) */
.akgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.akgrid .fld{grid-template-columns:180px minmax(0,1fr)}
@media (max-width:1360px){
  .akgrid{grid-template-columns:minmax(0,1fr) 340px}
  .akgrid .fld{grid-template-columns:150px minmax(0,1fr)}
}
.verd td.num b{font-weight:600}
.seal.xl{width:58px;height:58px;box-shadow:inset 0 0 0 8px #E7CE86, inset 0 0 0 11px var(--messing)}
/* uren */
.wk .uc.fut{outline:1.5px dashed var(--ijs);outline-offset:-4px}
.uwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.u-sm{display:none!important}
@media (max-width:1360px){
  .u-sm{display:inline-flex!important}
  .uwrap{grid-template-columns:minmax(0,1fr)}
  .uwrap>aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:start}
}
.wk{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.wk th{font:500 10.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);padding:12px 3px 10px;text-align:center;border-bottom:1px solid var(--haar);background:#fff}
.wk th.l{text-align:left;padding-left:18px}
.wk th .dn{display:block;font:500 13px var(--sans);text-transform:none;letter-spacing:0;color:var(--ink);margin-top:3px}
.wk th.vd .dn{color:#fff;background:var(--petrol);border-radius:10px;padding:0 7px;display:inline-block}
.wk td{border-bottom:1px solid var(--haar);padding:6px 3px;text-align:center;vertical-align:middle}
.wk td.l{text-align:left;padding:9px 6px 9px 18px}
.wk .we{background:#FBFAF6}
.wk tbody tr:hover td.we{background:#F8F6F1}
.wk .rl{display:flex;align-items:center;gap:10px;min-width:0}
.wk .rl .t{flex:1;min-width:0;cursor:pointer}
.wk .rl b{font-weight:500;font-size:13.5px;display:block}
.wk .rl span.s{font-size:12px;color:var(--zacht);display:block}
.uc{width:100%;max-width:60px;height:34px;border:0;background:var(--veld);text-align:center;font:13px var(--mono);outline:0;color:var(--ink);padding:0 2px}
.uc:hover{background:var(--veld-h)}
.uc:focus{background:#fff;box-shadow:0 0 0 2px var(--petrol)}
.uc.has{background:var(--ijsvlak);color:var(--petrol-d);font-weight:500}
.we .uc{background:transparent;box-shadow:inset 0 0 0 1px #ECE9E0}
.we .uc.has{background:var(--ijsvlak);box-shadow:none}
.uc[readonly]{background:transparent;box-shadow:none;cursor:default}
.uc.mis{box-shadow:inset 0 0 0 1.5px var(--err)}
.uc.flash{animation:flash 1.4s ease}
.wk .tot{font:500 13px var(--mono);color:var(--ink)}
.wk tfoot td{border-bottom:0;padding:8px 3px 12px;font:12px var(--mono);color:var(--zacht)}
.wk tfoot td.l{font-family:var(--sans)}
.dbar{height:5px;border-radius:3px;background:var(--veld);overflow:hidden;margin:6px auto 4px;max-width:52px}
.dbar i{display:block;height:100%;background:var(--ijs);border-radius:3px}
.dbar i.vol{background:var(--petrol)}
.ract{display:flex;gap:2px;align-items:center;justify-content:flex-end}
.ib{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--zacht);flex:none}
.ib:hover{background:var(--veld);color:var(--ink)}
.ib.on{background:var(--petrol);color:#fff}
.ib.go{color:var(--petrol)}
.addrow{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--haar);position:relative}
.addrow .pk2{flex:1;display:flex;align-items:center;gap:8px;background:var(--veld);border-radius:9px;padding:0 10px;min-height:38px;color:var(--zacht)}
.addrow .pk2 input{border:0;background:transparent;outline:0;flex:1;min-width:0;color:var(--ink);padding:8px 0}
.addrow .pk2:focus-within{background:#fff;box-shadow:0 0 0 2px var(--petrol)}
.pickl{position:absolute;left:18px;right:18px;top:100%;margin-top:-6px;z-index:30;background:#fff;border-radius:12px;box-shadow:var(--sh-hi);padding:6px;max-height:360px;overflow-y:auto}
.pickl .pg{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:10px 10px 6px}
.pickl .po{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13.5px}
.pickl .po:hover,.pickl .po.on{background:var(--ijsvlak)}
.pickl .po small{margin-left:auto;color:var(--zacht);font-size:12px}
.pickl .po .pin{color:#C3C9CC}
.pickl .po .pin.on{color:var(--petrol)}
.dkeus{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 18px 0}
.ukey{font:11.5px var(--mono);color:var(--zacht);display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.ukey kbd{font:11px var(--mono);background:#fff;box-shadow:var(--sh);border-radius:4px;padding:0 5px;color:var(--ink);margin-right:4px}
.sug{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--haar)}
.sug:first-of-type{border-top:0}
.sug .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.sug .t{flex:1;min-width:0}
.sug b{font-weight:500;font-size:13px;display:block;line-height:1.35}
.sug span{font-size:12px;color:var(--zacht);display:block;line-height:1.4}
.sug .uur{font:500 12.5px var(--mono);color:var(--ink)}
.sug.gedaan{opacity:.5}
.uweek{display:flex;align-items:center;gap:10px}
.uweek .wl{font:500 15px var(--serif);min-width:0;white-space:nowrap}
.timerbox{margin:0 10px 10px;padding:9px 10px 9px 12px;border-radius:10px;display:flex;align-items:center;gap:10px}
.timerbox .pulse{width:8px;height:8px;border-radius:50%;animation:pulse 1.4s infinite;flex:none}
.timerbox .tt{flex:1;min-width:0;line-height:1.25}
.timerbox .tt b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timerbox .tt span{font:12px var(--mono)}
.timerbox button{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.mtx{width:100%;border-collapse:collapse}
.mtx th{font:500 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--zacht);text-align:left;padding:10px 10px;border-bottom:1px solid var(--haar);white-space:nowrap}
.mtx td{padding:9px 10px;border-bottom:1px solid var(--haar);vertical-align:middle}
.mtx tr:last-child td{border-bottom:0}
.wcel{display:flex;flex-direction:column;gap:4px;min-width:84px}
.wcel .v{font:12.5px var(--mono);display:flex;align-items:center;gap:6px;white-space:nowrap}
.wcel .dbar{margin:0;max-width:80px}
.st-i{display:inline-flex;width:16px;height:16px;border-radius:50%;align-items:center;justify-content:center;flex:none}
.st-i.ok{background:var(--ok-l);color:var(--ok)}
.st-i.no{background:var(--err-l);color:var(--err)}
.st-i svg.g{width:10px;height:10px;stroke-width:2.6}
.dlist .de{display:grid;grid-template-columns:88px minmax(0,1.2fr) minmax(0,1.5fr) 92px 70px 34px;gap:12px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--haar)}
.dlist .de .tm{font:12.5px var(--mono);color:var(--zacht)}
.dlist .de b{font-weight:500;font-size:13.5px;display:block}
.dlist .de .s{font-size:12px;color:var(--zacht)}
.daytabs{display:flex;gap:4px;flex-wrap:wrap}
.daytabs button{padding:6px 12px;border-radius:9px;font-size:13px;color:var(--zacht);background:var(--veld);display:flex;flex-direction:column;align-items:center;min-width:64px;line-height:1.3}
.daytabs button b{font:500 12px var(--mono);color:var(--ink)}
.daytabs button.on{background:var(--ink);color:#fff}
.daytabs button.on b{color:var(--ijs)}
.daytabs button.we{opacity:.7}
/* =====================================================================
   v7: process first en eenvoudiger
   ===================================================================== */
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mb24{margin-bottom:24px}
.kpi.cl b{font-size:28px}
.kpi b span{font-size:inherit;color:inherit}
.kpi b span.stat-err{color:var(--err)}
.phead{margin-bottom:20px}
.phead h1{font-size:28px}
.kick:empty{display:none}
.rchip{display:inline-flex;font:500 9.5px/1 var(--mono);color:var(--petrol-d);background:var(--ijsl);padding:3px 5px;letter-spacing:.02em;vertical-align:1px}
.auto{color:var(--petrol);display:inline-flex}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--ijsvlak);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px;color:var(--ink)}
.note svg{color:var(--petrol);margin-top:1px}
/* takenlijst */
.trow{display:grid;grid-template-columns:22px minmax(0,1fr) auto 84px;gap:14px;align-items:center;padding:11px 20px;border-top:1px solid var(--haar);cursor:pointer}
.panel>.trow:first-child,.subk+.trow{border-top:0}
.trow .tt{min-width:0}
.trow .tt b{font-weight:500;font-size:13.5px;display:block;line-height:1.35}
.trow .tt span{font-size:12.5px;color:var(--zacht);display:block}
.trow.klaar .tt b{color:var(--zacht);text-decoration:line-through;text-decoration-color:#B8BFC4}
.trow.more{cursor:default;grid-template-columns:22px 1fr}
.dl{font:12.5px var(--mono);color:var(--zacht);text-align:right;white-space:nowrap}
.dl.late{color:var(--err);font-weight:500}
.dl.nu{color:var(--ink);font-weight:500}
.subk{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:14px 20px 8px;border-top:1px solid var(--haar)}
.ph+.subk{border-top:0;padding-top:4px}
.wrow{display:grid;grid-template-columns:minmax(0,1fr) 84px 136px;gap:14px;align-items:center;padding:11px 20px;border-top:1px solid var(--haar);cursor:pointer}
.subk+.wrow{border-top:0}
.wrow .tt{min-width:0}
.wrow .tt b{font-weight:500;font-size:13.5px;display:block}
.wrow .tt span{font-size:12.5px;color:var(--zacht);display:block}
/* checklist in het zijpaneel */
.ckl .ci,.pnl .ci{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--haar)}
.ckl .ci:first-child{border-top:0}
.ci .t{flex:1;min-width:0}
.ci .t b{font-weight:500;font-size:13.5px;display:block}
.ci .t .s{font-size:12px;color:var(--zacht);display:block;line-height:1.4}
.ci .t .s.auto{color:var(--petrol-d);display:block}
.ci.focus{background:linear-gradient(90deg,var(--ijsvlak),transparent);margin:0 -10px;padding:10px;border-radius:8px}
.ci .chk{margin-top:1px}
.ci .seg button{padding:4px 12px}
.nrk{width:22px;height:22px;border-radius:50%;background:var(--veld);font:500 11px/22px var(--mono);text-align:center;color:var(--zacht);flex:none}
/* mini-stappenketen */
.mk2{display:flex;gap:3px;align-items:flex-start}
.mk2 span{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mk2 i{display:block;background:var(--veld)}
.mk2 span.d i{background:var(--petrol)}
.mk2 span.o i{background:repeating-linear-gradient(90deg,var(--ijs) 0 4px,transparent 4px 7px)}
.mk2 span.c i{background:var(--ijs);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.mk2 em{font-style:normal;font-size:10.5px;color:var(--zacht);line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mk2 span.c em{color:var(--ink);font-weight:500}
.mk2.klein em{display:none}
.sect.late{color:var(--err)}
.sect.late .ln{background:rgba(180,60,50,.18)}
.nwdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--petrol);margin:0 8px 1px 0;vertical-align:middle}
.chk.auto{cursor:default}
.chk.auto .bx{background:var(--ijsvlak);box-shadow:none;color:var(--petrol)}
.chk.auto .bx svg{opacity:1;width:11px;height:11px}
/* workflow-tijdlijn */
.wtl{display:flex;flex-direction:column}
.wtl .ws{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;position:relative;padding-bottom:18px}
.wtl .ws::before{content:"";position:absolute;left:12px;top:28px;bottom:2px;width:2px;background:var(--haar);border-radius:1px}
.wtl .ws:last-child::before{display:none}
.wtl .ws.d::before,.wtl .ws.s::before{background:var(--ijs)}
.wtl .wc{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #C9CED1;background:#fff;display:flex;align-items:center;justify-content:center;font:500 11px var(--mono);color:var(--zacht);position:relative;z-index:1}
.wtl .ws.d .wc{background:var(--petrol);color:#fff;box-shadow:none}
.wtl .ws.d .wc svg{width:12px;height:12px;stroke-width:2.4}
.wtl .ws.c .wc{background:var(--ijsl);color:var(--petrol-d);box-shadow:inset 0 0 0 2px var(--petrol)}
.wtl .ws.s .wc{background:var(--veld);box-shadow:none}
.wtl .ws b{font-weight:500;font-size:14px;line-height:26px}
.wtl .ws.f b,.wtl .ws.s b{color:var(--zacht);font-weight:400}
.wtl .ws .s2{font-size:12.5px;color:var(--zacht);line-height:1.45}
.wtl .ws .dt{font:12px/26px var(--mono);color:var(--zacht);white-space:nowrap}
.wtl .ckl{background:#fff;border-radius:10px;box-shadow:var(--sh);padding:4px 14px}
.fm{display:inline-flex;align-items:center;gap:3px;color:var(--petrol-d);margin-left:6px}
/* workflows: kaarten, keten, bord */
.wfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.wfcard{background:#fff;box-shadow:var(--sh);padding:18px 20px;cursor:pointer;display:flex;flex-direction:column;gap:11px;transition:box-shadow .15s}
.wfcard:hover{box-shadow:var(--sh-hi)}
.wfcard h3{font:500 17px/1.3 var(--serif)}
.wfcard .meta{font-size:12.5px;color:var(--zacht)}
.wfcard .ft{display:flex;gap:14px;font-size:12.5px;color:var(--zacht);align-items:center;flex-wrap:wrap}
.dist{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.dist i{display:block;height:100%}
.chain{display:flex;align-items:stretch;flex-wrap:wrap;row-gap:10px}
.chain .cs{flex:1 1 0;min-width:96px;background:#fff;box-shadow:var(--sh);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column}
.chain .cs:hover{box-shadow:var(--sh-hi)}
.chain .ca{width:16px;flex:none;display:flex;align-items:center;justify-content:center;color:#C3C9CC}
.chain .cs.on{box-shadow:inset 0 0 0 2px var(--petrol), var(--sh)}
.chain .cs .nr{font:500 11px var(--mono);color:var(--zacht);display:flex;gap:6px;align-items:center}
.chain .cs b{display:block;font-weight:500;font-size:12.5px;line-height:1.3;margin-top:5px;flex:1;overflow-wrap:anywhere}
.chain .cs .n{font:400 26px/1 var(--serif);margin-top:10px}
.chain .cs .l{font-size:11.5px;color:var(--err);margin-top:3px;min-height:16px}
.chain .cs .l2{font-size:11.5px;color:var(--zacht);margin-top:6px}
.chain .cs.eind{background:#F2F6F3;cursor:default}
.chain.bld{flex-wrap:nowrap}
.chain.bld .cs{min-width:0}
/* v11.1: geen gedeeltelijke omlijning; status als bolletje rechtsboven */
.kaart.vk{cursor:pointer;position:relative}
.kaart.vk.late .kn2,.kaart.vk.wacht .kn2{padding-right:14px}
.kaart.vk .kn2{overflow-wrap:anywhere;hyphens:auto}
.kaart.vk.late::after,.kaart.vk.wacht::after{content:"";position:absolute;top:13px;right:12px;width:8px;height:8px;border-radius:50%}
.kaart.vk.late::after{background:var(--err)}
.kaart.vk.wacht::after{background:var(--ijs);box-shadow:inset 0 0 0 1px rgba(20,122,140,.35)}
.kaart.vk .kf span .av{margin-right:5px;width:20px;height:20px;font-size:9px}
/* klantenlijst */
.klrow{display:grid;grid-template-columns:40px minmax(0,1.25fr) minmax(0,1.5fr) 150px;gap:16px;align-items:center;padding:12px 20px;border-top:1px solid var(--haar);cursor:pointer}
.panel>.klrow:first-child{border-top:0}
.klrow .nm{min-width:0}
.klrow .nm b{display:block;font-weight:500;font-size:14px}
.klrow .nm>span{font-size:12.5px;color:var(--zacht);display:block}
.kmeta .sepbar{padding:0 7px}
.kmeta .wq{display:inline-flex;align-items:center;gap:4px}
.kmeta .wq svg{color:var(--petrol)}
.later{display:none}
.toonl .later{display:grid}
.kico{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none}
.kico.rond{font:600 12px var(--sans)}
.kico.lg{width:52px;height:52px}
.pchips{display:flex;flex-wrap:wrap;gap:5px}
.pchip{font-size:12px;padding:2px 8px;background:var(--veld);color:var(--ink);white-space:nowrap;line-height:18px}
/* klantkaart */
.kkop{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.kkop h1{font:500 28px/1.15 var(--serif);letter-spacing:-.005em}
.kkop .acts{gap:16px;padding-top:6px}
.kmeta{font-size:13px;color:var(--zacht);margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px;margin-bottom:22px}
.prod{background:#fff;box-shadow:var(--sh);padding:13px 15px 12px;cursor:pointer;transition:box-shadow .15s;min-width:0}
.prod:hover{box-shadow:var(--sh-hi)}
.prod.leeg{cursor:default}
.prod .pn{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--zacht)}
.prod b{display:block;font-weight:500;font-size:14px;margin:6px 0 0}
.prod .pst{font-size:12px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod .meter{margin:9px 0 7px}
.prod .pf{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--zacht);gap:10px}
.prod .pf .pst{min-width:0}
.prod .pf .dl{font-size:11.5px}
.prod>.row{height:auto;min-height:20px}
.prod>.row{flex-wrap:wrap;row-gap:4px}
.prod>.row b{margin:0;min-width:auto}
.prod .pf .pst{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prod .p2{display:flex;justify-content:space-between;gap:10px;margin-top:9px;padding-top:8px;border-top:1px solid var(--haar);font-size:12px;color:var(--ink2,#3A4A52)}
.prod .p2 span:first-child{white-space:nowrap}
.prod .p2 .pst{text-align:right}
.prod .p2:hover span:first-child{color:var(--petrol)}
.procrow{display:flex;align-items:center;gap:14px;background:#fff;box-shadow:var(--sh);padding:11px 15px;margin-bottom:12px;cursor:pointer;font-size:13px}
.procrow:hover{box-shadow:var(--sh-hi)}
.akdet{margin-top:4px}
.sug1{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--haar);font-size:13px}
.sug1:first-child{border-top:0}
.sug1 .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.sug1 .tm{font:500 12px/18px var(--mono);color:var(--zacht);flex:none}
.sug1 .uur{line-height:18px}
.sug1 .ib{margin-top:-4px}
.sug1 .t{flex:1;min-width:0;line-height:1.35;-webkit-box-orient:vertical}
.sug1 .uur{font:500 12px var(--mono);flex:none}
.sug1.gedaan{opacity:.55}
.akdet summary{cursor:pointer;color:var(--petrol);font-size:13.5px;list-style:none;display:inline-flex}
.akdet summary::-webkit-details-marker{display:none}
.procrow b{font-weight:500;font-size:14px;white-space:nowrap}
.procrow .meter{flex:0 0 160px;margin:0}
.procrow .pst{flex:1;min-width:0;color:var(--zacht)}
.procrow .dl{font-size:12px}
.pnl .sam{margin:0;font-size:14px;line-height:1.6}
.pnl.flush .trow{margin:0 -20px}
.pnl.flush .trow:first-of-type{border-top:0}
.qrow{display:grid;gap:12px;align-items:center;padding:7px 0;font-size:13px}
.alleg{display:flex;align-items:center;gap:8px;width:100%;margin-top:16px;padding:13px 16px;border-radius:12px;background:#fff;box-shadow:var(--sh);color:var(--petrol);font-weight:500;text-align:left}
.alleg:hover{box-shadow:var(--sh-hi)}
.alleg.op svg{transform:rotate(180deg)}
.alleg span{font-weight:400}
.cmdbar{position:static;min-height:0;padding:0 0 12px;margin-bottom:14px;background:transparent}
.cmdbar .svst::before{display:none}
.tile.uit{opacity:.55;cursor:default}
.kvi small{display:block;font-size:11.5px;color:var(--zacht);margin-bottom:4px}
.kvi b{font-weight:500}
.bar .tr.stk{overflow:hidden;border-radius:0 4px 4px 0}
.bar .tr.stk i{border-radius:0}
i.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bord .kol{max-height:none}
.bord{min-height:0}
@media (max-width:1360px){
  .g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .g5 .kpi{padding:14px 14px}
  .g5 .kpi small{font-size:12px}
  .klrow{grid-template-columns:38px minmax(0,1.2fr) minmax(0,1.4fr) 136px;gap:12px}
  .wrow{grid-template-columns:minmax(0,1fr) 76px 128px}
  .chain .cs{min-width:84px;padding:9px 10px}
  .chain .ca{width:12px}
}
/* ---------- v7.1: thema Steen, instelbaar accent, gebruiker rechtsboven ---------- */
:root{--paper:#F7F6F3;--ink:#262421;--zacht:#6B675F;--haar:#E7E4DD;--veld:#F0EEE9;--veld-h:#EAE7E1;--serif:var(--sans);--petrol:#147A8C;--petrol-d:#106473;--ijs:#95C3CB;--ijsvlak:#ECF4F6;--ijsl:#E8F2F4;--acc-on:#D7E5E5;--acc-stroke:#66A9B4;--side-z:#8C877D;--side-nav:#3D3A35}
svg.g .a{stroke:var(--acc-stroke)}
h1,h2,h3,h4,.serif{font-weight:600!important;letter-spacing:-.012em}
.side{background:var(--side);color:var(--ink);border-right:1px solid var(--side-haar)}
.brand b{font-family:'IBM Plex Serif',Georgia,serif;color:var(--ink)}
.brand small{color:var(--side-z)}
.goto{background:#E6E3DC;color:var(--zacht)}
.goto:hover{background:#E1DDD5}
.goto kbd{background:var(--side);color:var(--side-z)}
.ngroup>.nk{color:var(--side-z)}
.nitem{color:var(--side-nav)}
.nitem:hover{background:var(--veld-h);color:var(--ink)}
.nitem.sub{color:var(--zacht)}
.nitem.sub.on{color:var(--petrol-d);background:var(--acc-on)}
.nitem.more{color:var(--zacht)}
.nitem .cnt{background:var(--veld-h);color:var(--zacht)}
.nitem .cnt.hot{background:var(--petrol);color:#fff}
.side svg.g .a{stroke:var(--acc-stroke)}
.navscroll{scrollbar-color:#D6D2C9 transparent}
.timerbox{background:var(--acc-on);color:var(--ink)}
.timerbox .pulse{background:var(--petrol)}
.timerbox .tt span{color:var(--petrol-d)}
.timerbox button{background:rgba(38,36,33,.06);color:var(--ink)}
.timerbox button:hover{background:rgba(38,36,33,.12)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(38,36,33,.25)}70%{box-shadow:0 0 0 7px rgba(38,36,33,0)}100%{box-shadow:0 0 0 0 rgba(38,36,33,0)}}
.sidefoot{border-top:1px solid var(--side-haar);padding:12px 18px 14px;font-size:11.5px;color:var(--side-z);line-height:1.35}
.sidefoot b{font-weight:600;color:var(--zacht)}
header.top .today{margin-right:6px}
.ibtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.ibtn:hover,.ibtn.on{background:var(--veld)}
.usr{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;text-align:left;margin-left:4px}
.usr:hover{background:var(--veld)}
.usr .av{background:var(--acc-on);color:var(--petrol-d)}
.usr b{display:block;font-weight:500;font-size:13px;line-height:1.2;white-space:nowrap}
.usr span.r{display:block;font-size:11.5px;color:var(--zacht);line-height:1.2;white-space:nowrap}
.usr svg.g{color:var(--zacht)}
.instel{width:320px;padding:14px 16px 16px}
.instel h4{font-size:14px;margin:2px 0 2px}
.instel .sw{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.instel .sw button{height:34px;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.instel .sw button.on::after{content:'';position:absolute;inset:-3px;box-shadow:0 0 0 2px var(--ink)}
.instel .eigen{display:flex;align-items:center;gap:10px;margin-top:12px}
.instel .eigen input[type=color]{width:38px;height:34px;border:0;padding:0;background:none;cursor:pointer}
.instel .eigen input[type=text]{flex:1;font:13px var(--mono);padding:8px 10px;border:0;background:var(--veld)}
.instel .vb{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--paper)}
.instel .vb .btn{pointer-events:none}
.instel .note{font-size:12px;color:var(--zacht);line-height:1.4;margin-top:10px}
.instel .rij{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--haar);font-size:12.5px;color:var(--zacht)}
/* ================= v7.3: designkeuzes Nils (3 oktober 2026) =================
   HR-3 radius per laag | KN-1 knoppen | ST-3 omlijnd label met radius van ST-1 | WV-1 dunne voortgangsbalk
   DG-1 bullet graph | KP-1..4 kerncijfers gecentreerd | TB-1 + DI-3 tabellen en lijsten | KA-1 schaduw
   TA-1 segmented control | ZM-1 getinte pill | IV-1 velden | SV-1 selectievak | AV-1/AV-2 avatars
   ML-2 banner met kop | LS-3 lijnillustratie. Alle accenttinten volgen het instelbare accent (--petrol). */
:root{--r-tag:4px;--r-st:8px;--r-btn:6px;--r-inp:6px;--r-card:8px;--r-pane:12px;--r:12px;--haar-s:#D3CEC4;--acc-l:color-mix(in srgb,var(--petrol) 10%,#FFFFFF);--acc-m:color-mix(in srgb,var(--petrol) 22%,#FFFFFF);--sh:0 1px 2px rgba(38,36,33,.14),0 1px 3px 1px rgba(38,36,33,.07);--sh-hi:0 2px 6px rgba(38,36,33,.08),0 14px 36px rgba(38,36,33,.14);--sh-seg:0 1px 3px rgba(38,36,33,.14),0 0 0 .5px rgba(38,36,33,.06)}
/* KN-1: één gevulde hoofdknop, verder tekstlinks */
.btn,.btn.lg,.btn.sm{border-radius:var(--r-btn)}
.btn{padding:9px 16px}
.btn:disabled,.btn.dis{background:#C9C4BA}
/* HR-3: kaarten 8, panelen en dialogen 12 */
.kpi,.prod,.procrow,.wfcard,.kaart,.chain .cs,.qkaart,.sug,.cl-card,.okrow{border-radius:var(--r-card)}
.panel,.pnl,.banner,.menu,.modal,.palette,.sealed,.toast .bn{border-radius:var(--r-pane)}
.tblwrap{border-radius:var(--r-pane)}
/* IV-1: gevuld zonder rand, focus wit met accentring */
.inp,.uc,.instel .eigen input[type=text]{border-radius:var(--r-inp)}
.inp{min-height:36px}
.search,.filt{background:var(--veld-h);box-shadow:none;border-radius:var(--r-inp)}
.search:focus-within,.filt:focus-within{background:#fff;box-shadow:0 0 0 2px var(--petrol)}
.chipf{border-radius:var(--r-btn)}
/* ST-3 omlijnd label, afronding van ST-1 */
.tag{border-radius:var(--r-st);font-size:12px;font-weight:500}
.tag.p{border-color:currentColor}
.tag.ok{border-color:currentColor}
.tag.err{border-color:currentColor}
.tag.m{border-color:var(--messing)}
.tag.ink{border-color:currentColor}
.tag.ghost{border-color:transparent}
.prod .tag{font-size:11.5px}
.rchip,.pchip,.kaart .rl i{border-radius:var(--r-tag)}
/* WV-1: dunne balk van 4 px */
.meter,.qrow .meter,.procrow .meter,.prod .meter{height:4px;border-radius:2px;background:var(--veld-h)}
.meter i{border-radius:2px}
.kaart .prog{height:4px;background:var(--veld-h)}
/* DG-1: horizontale balken met normstreep */
.bar .tr{background:var(--veld-h);border-radius:0 4px 4px 0}
.bar .tr .norm{width:2px}
.bar .v{color:var(--zacht)}
.bul{position:relative;display:block;background:var(--veld-h);border-radius:0 4px 4px 0;min-width:40px}
.bul i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;max-width:100%}
.bul b{position:absolute;width:2px;margin-left:-1px}
.bul.sm{height:6px;margin-top:8px}
.bul.w70{width:70px;flex:none}
.qrow{grid-template-columns:minmax(0,1fr) 120px 44px}
.model .bul{margin:6px 0 2px}
/* KP: kerncijfers, waarden gecentreerd */
.kpi{text-align:center;padding:16px 18px;box-shadow:var(--sh)}
.kpi small{display:block;font-size:12.5px;color:var(--zacht)}
.kpi.kp1 b,.kpi.cl.kp1 b{font:400 30px/1.15 var(--sans);letter-spacing:-.01em;margin-top:6px}
.kpi.kp2 b,.kpi.kp4 b,.kpi.cl.kp2 b{font:600 24px/1.2 var(--sans);margin-top:4px}
.kpi .h{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--zacht);line-height:1.35}
.kpi .h span{font-size:12px;color:var(--zacht)}
.bg{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-size:11.5px;padding:1px 6px;border-radius:var(--r-tag);line-height:17px}
.bg.o{background:var(--ok-l);color:var(--ok)}
.bg.e{background:var(--err-l);color:var(--err)}
.bg.n{background:var(--veld-h);color:var(--ink)}
.kpi .h .bg{color:inherit}
.kpi .h .bg.o{color:var(--ok)}
.kpi .h .bg.e{color:var(--err)}
.kpi .h .bg.n{color:var(--ink)}
.kpi.kp4 b .van{font-size:14px;font-weight:400;color:var(--zacht);margin-left:5px}
.kpi .pb{position:relative;height:8px;border-radius:4px;background:var(--veld-h);margin:10px 0 6px}
.kpi .pb i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.kpi .pb em{position:absolute;width:2px;margin-left:-1px}
.kpi.kp4 .h{justify-content:space-between}
.kpi.vlak{background:transparent;box-shadow:none;padding:0;text-align:left}
.kpi.vlak small{display:none}
.kpi.vlak b{font:400 30px/1.15 var(--sans)}
.kp1row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px}
.kp1row>div{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--paper);border-radius:var(--r-card);padding:12px 10px}
.kp1row>div>small,.kp1row>div>.small{order:-1;font-size:12.5px;color:var(--zacht)}
.kp1row b{display:block;font:400 30px/1.15 var(--sans);margin-top:4px}
.kp3{border-radius:var(--r-card);box-shadow:0 0 0 1px var(--haar)}
.kp3 .r{display:grid;grid-template-columns:minmax(0,1fr) 72px auto;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--haar)}
.kp3 .r:first-child{border-top:0}
.kp3 .r b{display:block;font-size:13px;font-weight:600}
.kp3 .r>div>span{display:block;font-size:11.5px;color:var(--zacht)}
.kp3 .v{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.spark{width:72px;height:26px;display:block}
.spark polyline{fill:none;stroke:var(--petrol);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
/* TB-1 en DI-3: haarlijnen, grijze kop, hover, rijen van 64 px */
.tbl td{height:64px;padding:10px 12px;border-bottom:0;border-top:1px solid var(--haar)}
.tbl tbody tr:first-child td{border-top:0}
.tbl tbody tr:hover td,.tbl tbody tr.cl:hover td{background:var(--veld)}
.tbl.compact td{height:auto;padding:9px 12px}
.trow,.wrow,.klrow{min-height:64px;padding-top:10px;padding-bottom:10px}
.trow:hover,.wrow:hover,.klrow:hover{background:var(--veld)}
.attn .it{min-height:64px}
.wk tbody td{height:64px}
.wk tbody tr:hover td{background:var(--veld)}
/* TA-1: alle tabbladen en segmenten als segmented control */
.tabs,.seg,.seg.acc{background:var(--veld-h);padding:2px;gap:0;border-radius:8px}
.tabs button,.tabs a,.seg button{padding:5px 12px;border-radius:6px;color:var(--ink);font-weight:500;font-size:13px}
.tabs .on,.seg button.on,.seg.w button.on,.seg.acc button.on,.seg.acc button.on[data-v]{background:#fff;color:var(--ink);box-shadow:var(--sh-seg)}
.tabs button:hover,.tabs a:hover,.seg button:hover{color:var(--ink);background:rgba(255,255,255,.5)}
.tabs .on:hover,.seg button.on:hover{background:#fff}
.tabs .c{color:var(--zacht)}
/* ZM-1: getinte pill */
.nitem.on{background:var(--acc-m);color:var(--petrol-d);font-weight:600}
.nitem.on svg.g{color:var(--petrol-d)}
/* SV-1: afgerond vierkant van 18 px */
.chk .bx{width:18px;height:18px;border-radius:5px}
.chk .bx svg{width:12px;height:12px;stroke-width:2.4}
/* AV-1 personen rond in accenttint; AV-2 organisaties vierkant */
.av{background:var(--acc-l);color:var(--petrol-d)}
.kico.rond,.kico.lg.rond{border-radius:50%;background:var(--acc-l);color:var(--petrol-d)}
/* ML-2: banner met kop. Kop in een getinte strook met icoon, uitleg en acties eronder, sluitknop rechts */
.banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:0;align-items:center;padding:0;background:#fff;box-shadow:var(--sh),0 0 0 1px var(--haar);overflow:hidden;margin-bottom:18px;--bt:var(--acc-l);--bc:var(--petrol-d)}
.banner.err{--bt:var(--err-l);--bc:var(--err)}
.banner.ok{--bt:var(--ok-l);--bc:var(--ok)}
.banner.gold{--bt:var(--messing-l);--bc:var(--messing-d);background:#fff}
.banner::before{content:'';grid-row:1;grid-column:1/-1;background:var(--bt);align-self:stretch}
.banner>.ico,.banner>.seal{grid-row:1;grid-column:1;width:auto;height:auto;background:transparent!important;color:var(--bc)!important;margin:9px 0 9px 14px;position:relative;border-radius:0;box-shadow:none}
.banner>.ico svg{width:17px;height:17px}
.banner>.seal{width:18px;height:18px;border-radius:50%;background:var(--messing)!important;box-shadow:inset 0 0 0 3px #E7CE86,inset 0 0 0 4px var(--messing)}
.banner>.t{display:contents}
.banner>.t>b{grid-row:1;grid-column:2;position:relative;font-weight:650;font-size:13px;color:var(--ink);padding:9px 0}
.banner>.t>span{grid-row:2;grid-column:1/-1;padding:10px 14px 0;font-size:13px;color:var(--ink)}
.banner>.t>span:empty{display:none}
.banner>a,.banner>button:not(.bnx),.banner>.row{grid-row:3;grid-column:1/-1;justify-self:start;margin:8px 14px 0}
.banner>a.lnk,.banner>button.lnk{font-size:12.5px;font-weight:550;background:var(--veld-h);border-radius:var(--r-btn);padding:4px 10px;color:var(--ink)}
.banner>a.lnk:hover{background:var(--veld)}
.banner::after{content:'';grid-row:4;grid-column:1/-1;height:12px}
.banner>.bnx{grid-row:1;grid-column:3;position:relative;width:28px;height:28px;margin-right:8px;display:flex;align-items:center;justify-content:center;color:var(--zacht);border-radius:var(--r-btn)}
.banner>.bnx:hover{color:var(--ink);background:rgba(255,255,255,.6)}
/* De korte bevestiging na een handeling: rechtsonder, in dezelfde bannerstijl */
.toast .bn{background:#fff;color:var(--ink);padding:0;box-shadow:var(--sh-hi),0 0 0 1px var(--haar);overflow:hidden;max-width:440px;display:block;--bt:var(--acc-l);--bc:var(--petrol-d)}
.toast .bn.ok{--bt:var(--ok-l);--bc:var(--ok)}
.toast .bn.err{--bt:var(--err-l);--bc:var(--err)}
.toast .bn .hd{display:flex;align-items:center;gap:9px;background:var(--bt);padding:10px 14px;font-size:13px;font-weight:600}
.toast .bn .hd svg{width:17px;height:17px;color:var(--bc);flex:none}
.toast .bn .hd span{color:var(--ink)}
/* LS-3: lijnillustratie in het accent, links uitgelijnd met kop, uitleg en link */
.empty.ls3{padding:22px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;color:var(--ink)}
.empty.ls3 .ill{width:64px;height:64px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:6px}
.empty.ls3 .ill svg.g{width:60px;height:60px;stroke-width:1.2;color:var(--petrol)}
.empty.ls3 b{font-size:15px;font-weight:600}
.empty.ls3 p{margin:0;font-size:13px;color:var(--zacht);max-width:52ch}
.empty.ls3 .lk{margin-top:4px;display:flex;gap:14px}
td .empty.ls3{padding:18px 8px}
.empty.kort{padding:14px 16px;text-align:left}
.trow .tt span,.wrow .tt span,.wrow .tt b,.klrow .nm b,.klrow .nm>span,.wk .rl b,.wk .rl span.s,.prod b,.procrow .pst,.sug1 .t,.dl .r .n{white-space:normal;overflow:visible;text-overflow:clip}
.wt{border-radius:var(--r-st)}
.wt.hoog{border-color:currentColor}
.wt.hoog svg.g{color:var(--ink);stroke:currentColor}
.wt.mid{border-color:currentColor}
.sug1 .t{display:block;-webkit-line-clamp:unset}
.kp3 .r,.kp3 .r>div{text-align:left}
.banner:not(:has(>.t>span:not(:empty))):not(:has(>a)):not(:has(>button:not(.bnx))):not(:has(>.row))::after{display:none}
.instel .sw button{border-radius:var(--r-btn)}
.instel .sw button.on::after{border-radius:8px}
.prod .p2{flex-wrap:wrap;row-gap:2px}
.prod .p2 .pst{white-space:nowrap;overflow:visible;text-overflow:clip;margin-left:auto}
.prod.leeg .pst{white-space:normal;overflow:visible}
/* HR-3 ook voor kleine bedieningselementen en icoontegels */
.ib,.ibtn,.goto,.usr,.menu .mi,.attn .it .ic,.timerbox button,.pi{border-radius:var(--r-btn)}
.mk2 i{height:4px;border-radius:2px}
/* WV-5: stappenbalk met cirkels (één workflow: zijpanelen en procesregel op de klantkaart) */
.wv5s{overflow-x:auto;scrollbar-width:thin;padding:2px 0 2px}
.apt{display:flex;padding-top:4px;min-width:0}
.apt>div{flex:1 1 0;min-width:58px;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;font-size:12px;line-height:1.25;color:var(--zacht);text-align:center;padding:0 3px}
.apt>div::before{content:'';position:absolute;top:7px;left:-50%;right:50%;height:2px;background:var(--haar-s)}
.apt>div:first-child::before{display:none}
.apt i{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--haar-s);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:none}
.apt i svg.g{width:10px;height:10px;stroke-width:3;color:#fff}
.apt .d i{box-shadow:none}
.apt .c i{background:#fff}
.apt .c{color:var(--ink);font-weight:600}
.apt .d{color:var(--ink)}
.apt .o{color:var(--zacht);text-decoration:line-through;text-decoration-color:var(--haar-s)}
.apt .o i{background:var(--veld-h);box-shadow:inset 0 0 0 2px var(--haar-s)}
.apt span{overflow-wrap:break-word;hyphens:manual}
.procrow.wv{display:block;padding:12px 16px 12px}
.procrow.wv .pkop{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.procrow.wv .pst{flex:none}
/* ================= v7.4: aanpassingen Nils (3 oktober 2026) =================
   Lichte klanticonen | statuslabels weer gevuld en licht | lichtere balken en selectievakjes
   zijmenu minder rond | oude tabelkoppen | IBM Plex Sans terug (Mono voor metadata, Serif voor het woordmerk) */
:root{--acc-bar:color-mix(in srgb,var(--petrol) 55%,#FFFFFF);--err-bar:color-mix(in srgb,var(--err) 65%,#FFFFFF)}
/* klanticonen: licht in de accenttint, organisaties vierkant */
.kico,.kico.lg{border-radius:var(--r-card);background:var(--acc-l);color:var(--petrol-d);font:600 12.5px var(--sans);letter-spacing:.02em}
.kico.lg{border-radius:10px;font-size:17px}
/* statuslabels: lichte vulling, geen rand */
.tag{background:var(--veld);border:0;color:var(--ink);padding:1px 8px;line-height:19px}
.tag.p{background:var(--acc-l);color:var(--petrol-d)}
.tag.ok{background:var(--ok-l);color:var(--ok)}
.tag.err{background:var(--err-l);color:var(--err)}
.tag.m{background:var(--messing-l);color:var(--messing-d)}
.tag.ink{background:var(--veld-h);color:var(--ink)}
.tag.ghost{background:transparent;color:var(--zacht)}
.prod .tag{padding:0 7px;line-height:18px}
.wt{border:0;background:var(--veld);padding:1px 8px;line-height:19px}
.wt.hoog{background:var(--veld-h);color:var(--ink)}
.wt.mid{background:var(--acc-l);color:var(--petrol-d)}
.wt.std{background:var(--veld);color:var(--zacht)}
/* balken: lichtere vulling, normstreep in grijs */
.meter i,.kaart .prog i,.bar .tr i,.bul i,.kpi .pb i{background:var(--acc-bar)}
.meter.err i,.bar .tr i.err,.bul i.err,.kpi .pb i.err{background:var(--err-bar)}
.bul,.bar .tr{height:8px}
.bul b,.bar .tr .norm,.kpi .pb em{background:var(--zacht);top:-3px;bottom:-3px}
.apt .d i{background:var(--acc-bar)}
.apt>div.d::before,.apt>div.c::before,.apt>div.o::before{background:var(--acc-bar)}
.apt .c i{box-shadow:inset 0 0 0 5px var(--acc-bar)}
/* selectievakjes: licht, ook aangevinkt */
.chk .bx{background:#fff;box-shadow:inset 0 0 0 1.5px #CFCBC0}
.chk.on .bx{background:var(--acc-m);box-shadow:none;color:var(--petrol-d)}
/* zijmenu: afronding zoals voorheen */
.nitem{border-radius:8px;padding:7px 10px}
.today{white-space:nowrap}
/* uren: voorstelregels op workflows */
.wk tr.vkop td{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:14px 12px 6px;text-align:left}
.wk tr.vkop td .zacht{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.wk tr.vrow td{background:#FCFBF8}
.wk .vu{display:inline-block;min-width:40px;padding:4px 6px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--acc-m);color:var(--petrol-d);font:12.5px var(--mono);text-align:center}
.sjr{border:0;background:var(--veld);border-radius:6px;font:12px var(--sans);padding:2px 6px;color:var(--ink);margin-left:4px}
/* ================= v7.5: klantportaal, één regel per stap, lichte uitbreidingen ================= */
/* Mijn taken: één regel per stap met "2 van 5" */
.trow.srow{grid-template-columns:22px minmax(0,1fr) auto 58px 84px}
.trow .tel{font:12px var(--mono);color:var(--zacht);text-align:right;white-space:nowrap}
.chk.rg{cursor:default}
.sring{width:18px;height:18px;display:block}
.sring circle{fill:none;stroke:var(--haar-s,#E2DED3);stroke-width:2.4}
.sring circle.v{stroke:var(--acc-bar,var(--petrol));stroke-linecap:round}
/* korte bevestiging met ongedaan maken */
.toast .bn{pointer-events:auto}
.toast .bn .hd .undo{margin-left:10px;color:var(--petrol-d);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
/* legenda onder de segmentbalk */
.wfcard .legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--zacht);margin-top:-3px}
.wfcard .legend span{display:inline-flex;align-items:center;gap:6px}
.wfcard .legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
/* notitie per workflow */
.notitie{margin:0 0 6px}
.notitie label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--zacht);margin-bottom:5px}
.notitie textarea{min-height:46px;font-size:13px;line-height:1.45}
.notitie .small{display:block;margin-top:4px}
/* reviewpunten */
.ci.rp.af .t b{color:var(--zacht);text-decoration:line-through;text-decoration-color:#B8BFC4}
/* contactmomenten */
.cmin{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.cmin .inp{flex:1;min-height:34px;padding:6px 11px;font-size:13px}
.cm{display:grid;gap:10px;padding:9px 0;border-top:1px solid var(--haar);font-size:13px}
.cm .d{font:12px var(--mono);color:var(--zacht);padding-top:1px}
.cm b{font-weight:500;display:block;font-size:12.5px}
.cm span{color:var(--ink);line-height:1.45}
/* klantgroep */
.kgroep{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;color:var(--zacht);margin-top:6px}
.kgroep .lnk{font-weight:500}
.kgroep b{font-weight:500;color:var(--ink)}
.klrow.kind{padding-left:44px;background:#FDFCF9;border-top-style:dashed}
.klrow.kind .kico{width:32px;height:32px;font-size:12px}
.kico.sm{border-radius:6px}
.kico.rond.sm{border-radius:50%}
/* werkvoorraad */
.tbl.wv td{vertical-align:middle}
.tbl.wv .bul{width:140px}
/* facturatieschema */
.tbl.schema td:first-child{padding-left:0;white-space:nowrap}
.tbl.schema td:last-child{padding-right:0;white-space:nowrap}
.tbl.schema .eh{display:block;font:11.5px var(--sans);color:var(--zacht);margin-top:1px}
.banner.sm{padding:11px 14px;gap:12px;margin-bottom:12px}
.banner.sm .ico{width:30px;height:30px}
/* klantportaal */
.pblok{padding-bottom:10px}
.pblok>.hd{margin-bottom:4px}
.pgk{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:14px 0 6px}
.prow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--haar)}
.pgk+.prow{border-top:0}
.prow .t b{display:block;font-weight:500;font-size:13.5px}
.prow .t>span{display:block;font-size:12.5px;color:var(--zacht);line-height:1.4}
.prow .pacts{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.prow .pacts .lnk{font-size:12.5px}
.prow.klaar .t b{color:var(--zacht)}
.pic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.pic.m{background:var(--messing-l)}
.pic.ok{background:var(--ok-l,#E6F2EC)}
.pblok2{margin-top:8px}
.pent{display:flex;align-items:center;gap:9px;font-weight:500;font-size:14px;margin:18px 0 10px}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pcard{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh);padding:15px 16px 13px;display:flex;flex-direction:column;gap:9px;min-width:0}
.pcard .pkop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pcard .pkop b{font:500 15px/1.3 var(--serif)}
.pcard .pkop span{font-size:12.5px;color:var(--zacht)}
.pstat{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500}
.pstat i{width:8px;height:8px;border-radius:50%;background:var(--acc-bar,var(--petrol));flex:none;opacity:.6}
.pstat.u{color:var(--petrol-d)}
.pstat.u i{background:var(--petrol);opacity:1}
.pstat.ok{color:var(--ok)}
.pstat.ok i{background:var(--ok);opacity:1}
.wv5s.pf .apt>div{min-width:52px;font-size:11.5px}
.pcard .pdat{font-size:12px;color:var(--zacht)}
.pcard .p2{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--zacht);border-top:1px solid var(--haar);padding-top:8px}
.pcard .p2 span:last-child{text-align:right}
/* ================= v7.6: tweerichtingsverkeer, losse taken, documenten ================= */
.uitst{font-size:12px;color:var(--zacht);margin-top:-4px}
.uitst.err{color:var(--err)}
.wfcard.los h3{display:flex;align-items:center;gap:8px}
.lospl{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--zacht)}
.lospl span{display:inline-flex;align-items:center;gap:6px}
.cm{grid-template-columns:78px minmax(0,1fr) auto}
.cm>.lnk{align-self:start;font-size:12px;white-space:nowrap}
.ci.al .t b{font-weight:500}
.ci.al .chk{cursor:pointer}
.panel.kls .klrow{grid-template-columns:40px minmax(0,1.2fr) minmax(0,1.3fr) 250px}
.klrow .r{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.klrow .kx{font-size:12.5px;color:var(--zacht);white-space:nowrap}
.kbrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 4px;border-top:1px solid var(--haar);cursor:pointer}
.kbrow:first-of-type{border-top:0}
.kbrow:hover{background:var(--veld)}
.kbrow .pic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.kbrow .t b{display:block;font-weight:500;font-size:13.5px}
.kbrow.nw .t b{font-weight:600}
.kbrow .t span{display:block;font-size:12.5px;color:var(--zacht)}
.mail{border:1px solid var(--haar);border-radius:12px;background:#fff;overflow:hidden}
.mail .mk{padding:14px 18px;background:var(--veld);display:grid;gap:4px;font-size:12.5px}
.mail .mk>div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px}
.mail .mk small{color:var(--zacht);font-size:12px}
.mail .mk b{font-weight:600}
.mail .mbody{padding:18px;font-size:13.5px;line-height:1.6}
.mail .mlink{padding:0 18px 20px}
.pdrop{border:1.5px dashed var(--haar2,#cfd6da);border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--zacht);text-align:center;margin-top:6px}
.pdrop b{color:var(--ink);font-weight:500}
.pdrop.vol{border-style:solid;background:var(--veld)}
.pantw{margin-top:8px;padding:9px 12px;background:var(--veld);border-radius:8px;font-size:13px;line-height:1.5;color:var(--ink)}
.pantw small{display:block;color:var(--zacht);font-size:12px;margin-bottom:2px}
.prow.vr{align-items:start}
.pkeus{padding:14px 16px;border-radius:12px;background:var(--veld);margin-bottom:16px}
.pkeus .seg{flex-wrap:wrap}
.pblok>.hd{display:flex;align-items:center;gap:10px}
.pblok>.hd h3{white-space:nowrap}
.wk tr.vkop td.r{text-align:right;padding-right:12px}
.wk tr.vkop td.r a{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12.5px}
.bord.wfb{overflow-x:visible;gap:10px}
.bord.wfb .kol{flex:1 1 0;min-width:0;width:auto;padding:10px 6px}
.bord.wfb .kol.leeg{flex:0 0 92px}
.bord.wfb .kaart .kf{flex-wrap:wrap;row-gap:4px}
/* ================= v7.7: Nu te doen, klanttijdlijn, portefeuille, budget, portaal op de telefoon ================= */
.wkregel{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--zacht);margin:-6px 0 16px}
.wkregel .bul{width:150px}
.wkregel b{color:var(--ink);font-weight:600}
.alleg.wachtk{margin-top:4px;color:var(--ink)}
.cmin select.inp{width:auto;max-width:170px;min-height:34px;padding:4px 28px 4px 10px;font-size:12.5px;flex:none}
.tlf{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.tlr{display:grid;grid-template-columns:72px 18px minmax(0,1fr) auto;gap:8px;padding:9px 0;border-top:1px solid var(--haar);font-size:13px;align-items:start}
.tlr .d{font:12px var(--mono);color:var(--zacht);padding-top:1px}
.tlr .ic{color:var(--zacht);padding-top:2px}
.tlr .ic.pz{color:var(--petrol)}
.tlr b{font-weight:500;font-size:12.5px}
.tlr .wfl{font-size:12px;color:var(--zacht)}
.tlr .tx{display:block;line-height:1.45}
.tlr>.lnk{font-size:12px;white-space:nowrap}
.notitie .tlr{grid-template-columns:72px 18px minmax(0,1fr)}
.notitie .tlr>span:last-child:empty{display:none}
.budget{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.budget .bul{width:140px}
.pzi{display:inline-flex;color:var(--petrol);opacity:.75}
.pzl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--petrol);background:var(--veld);border-radius:6px;padding:2px 8px;white-space:nowrap}
.sect .pzl{margin-left:8px;text-transform:none;letter-spacing:0;font-family:var(--sans)}
.hoort{margin-top:5px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ookrij{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:18px;padding:12px 18px;background:#fff;border-radius:var(--r);box-shadow:var(--sh)}
.pft td.pf{font-size:12.5px;cursor:pointer;white-space:normal}
.pft td.pf i,.pflg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--ok)}
.pft td.pf:hover{background:var(--veld)}
.pft td.pf.late i,.pflg i.late{background:var(--err)}
.pft td.pf.wacht i,.pflg i.wacht{background:var(--petrol)}
.pft td.pf.af i,.pflg i.af{background:var(--haar)}
.pft td.pf.gp i,.pflg i.gp{background:transparent;box-shadow:inset 0 0 0 1.5px var(--zacht)}
.pft td.pf.af,.pft td.pf.gp{color:var(--zacht)}
.pflg{display:flex;gap:18px;flex-wrap:wrap}
.szn{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end}
.szm{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--zacht)}
.szb{position:relative;height:110px;width:100%;max-width:38px;background:var(--veld);border-radius:6px;overflow:hidden}
.szb i{position:absolute;left:0;right:0;bottom:0;background:var(--petrol);opacity:.75;border-radius:6px 6px 0 0}
.szb i.err{background:var(--err)}
.szb em{position:absolute;left:-2px;right:-2px;height:2px;background:var(--ink)}
.szm b{font-weight:500;color:var(--ink);font-size:12px}
.chk.ovc{display:inline-flex;margin-right:10px;vertical-align:middle;cursor:pointer}
.klrow.kc{grid-template-columns:40px minmax(0,1fr) minmax(0,1.4fr) 170px}
.klrow .pzr{display:flex;gap:5px;align-items:center;margin-top:2px}
.klrow .kacts{display:flex;gap:12px;justify-content:flex-end}
.bsin{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.bsin .inp{min-height:34px;padding:4px 10px;font-size:13px}
.pafsp{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:9px 10px;border-radius:10px;background:var(--veld);font-size:12.5px}
.pafsp b{display:block;font-weight:500;color:var(--ink)}
.pafsp span{display:block;color:var(--zacht)}
.pafsp .pak{display:flex;gap:12px;margin-top:4px}
.pdat.laat{color:var(--ink)}
.pbet .t .kenm{display:block;font-size:11.5px;color:var(--zacht);margin-top:2px}
.pbedr{text-align:right;white-space:nowrap}
.pbedr small{display:block;font-size:11.5px;color:var(--zacht)}
.pbedr b{font:500 15px var(--mono)}
.pbedr.terug b{color:var(--ok)}
.prow.pbet{grid-template-columns:30px minmax(0,1fr) auto}
.pantw.u{background:#fff;box-shadow:inset 0 0 0 1px var(--haar)}
.pantw .bij{display:inline-flex;gap:4px;align-items:center;margin-left:8px;font-size:12px;color:var(--zacht)}
.pvraagq{padding:9px 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--haar);font-size:13px;line-height:1.5;color:var(--ink)}
.pvraagq small{display:block;color:var(--zacht);font-size:12px;margin-bottom:2px}
.pbij{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:13px}
label.radio{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer}
label.radio input{accent-color:var(--petrol);margin:3px 0 0;width:15px;height:15px;flex:none}
label.radio b{display:block;font-weight:500}
label.radio small{display:block;color:var(--zacht);font-size:12.5px}
/* portaal op de telefoon: één kolom, menu bovenaan, niets horizontaal */
/* ================= v7.8: één statustaal, eenvoudiger ================= */
.reden{font-size:12px;color:var(--zacht);white-space:nowrap}
.reden.err{color:var(--err);font-weight:500}
.reden+.tag,.tag+.reden{margin-left:8px}
.reden.p{color:var(--petrol);font-weight:500;display:inline-flex;align-items:center;gap:4px}
.trow .rr{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.legenda{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--zacht);margin:-8px 0 12px;flex-wrap:wrap}
.legenda .chk.lg{margin-left:6px}
.legenda .chk.lg:first-child{margin-left:0}
.chk.lg{cursor:default}
.chk.lg .bx{width:16px;height:16px}
.legenda .stvr{margin-left:auto}
.stvr{display:inline-flex;align-items:center;gap:5px}
.stuitleg{display:flex;flex-direction:column;gap:10px}
.stuitleg>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start;font-size:13px}
.stuitleg>div>span:last-child{color:var(--ink);line-height:1.5}
.stuitleg .tag{justify-self:start}
.pzet{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--ink)}
.pzet .chk .bx{width:16px;height:16px}
.urenk{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:9px;color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.urenk:hover,.urenk.on{background:var(--veld)}
.urenk.loopt{color:var(--petrol)}
.szb i.k{background:var(--ijs)}
.psam{background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px var(--haar);padding:16px 18px}
.psh{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.psh b{font-weight:600;flex:1}
.ptoel{margin-top:12px;padding:10px 12px;background:var(--veld);border-radius:8px;font-size:13px;line-height:1.5;color:var(--ink)}
.ptoel small{display:block;color:var(--zacht);font-size:12px;margin-bottom:2px}
.pcard{cursor:pointer}
.pcard:hover{box-shadow:0 0 0 1px var(--haar-s),0 4px 14px rgba(30,43,51,.08)}
.pinz{display:inline-flex;align-items:center;gap:5px;margin-top:10px}
/* ================= v7.9 ================= */
.reeksrij{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 14px;padding:9px 14px;border-radius:10px;background:var(--veld);font-size:13px}
.reeksrij .lnk{display:inline-flex;gap:6px;align-items:center}
.tbl.reeks td{vertical-align:middle}
.pstuk{background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px var(--haar);padding:14px 16px}
.pstuk .preview{margin-top:12px;max-height:150px;overflow:hidden}
/* v7.10: een lijst onder een kantoorcijfer zegt dat ze een selectie toont */
.selk{white-space:nowrap}
.selk .sepbar{color:var(--zacht)}
.seldemo{font-size:13px;color:var(--zacht);padding:10px 14px;border-top:1px dashed var(--haar)}
tr.seldemo td{font-size:13px;color:var(--zacht);padding:10px 14px;border-top:1px dashed var(--haar)}
.szn.geld .szb{max-width:34px}
/* v7.11 */
.chk.leeg{visibility:hidden}
.alleg.wacht30{margin:6px 14px 10px;width:calc(100% - 28px);font-size:13px}
.cvraag{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;gap:10px;align-items:center}
.cvraag .inp{min-height:36px}
.pterm{color:var(--err);font-weight:500}
.small.pterm{margin-top:6px}
.mutrij{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1.2fr);gap:8px;margin-bottom:8px}
@media (max-width:520px){
  .mutrij{grid-template-columns:1fr}
}
/* v7.12 */
.rverb{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:500;color:var(--petrol);white-space:nowrap}
.reeksrij .rsg{display:inline-flex;align-items:center;gap:8px}
.reeksrij .rsg b{font-weight:550}
.reeksrij .rsg+.rsg{padding-left:12px;border-left:1px solid var(--haar)}
.alleg.afgk{margin-top:12px;color:var(--ink)}
.afrij{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 20px;border-top:1px solid var(--haar)}
.panel>.afrij:first-child{border-top:0}
.afrij .ok{display:inline-flex;width:20px;height:20px;border-radius:6px;align-items:center;justify-content:center;background:var(--ok-l,#e3f1ea);color:var(--ok,#2f7a52)}
.afrij .tt{display:flex;flex-direction:column;min-width:0}
.afrij .tt b{font-weight:500}
.afrij .tt span{font-size:12.5px;color:var(--zacht)}
.vrkop{margin:12px 0 2px;font-size:12px;font-weight:550;color:var(--zacht);letter-spacing:.02em}
.vraw{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--haar)}
.vraw b{font-weight:500;font-size:13.5px}
.vraw>span{font-size:13px}
.cl-item.wp .t span{color:var(--zacht)}
.chk.sjtg{display:inline-flex;align-items:center;gap:8px;width:auto;cursor:pointer}
.rzin{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rzin .sjr{max-width:100%}
.vrfld label{white-space:normal;line-height:1.4}
.fld.vrfld{grid-template-columns:1fr;gap:6px}
.aandacht .it .t span{white-space:normal}
.wrow .r .reden{white-space:normal;text-align:right}
/* v7.13 */
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;width:1%}
.tbl td.num{white-space:nowrap}
.tbl td.r,.tbl th.r{text-align:right}
.tbl th.r{white-space:nowrap}
.tbl td.num+td:not(.num):not(.r),.tbl th.num+th:not(.num):not(.r){padding-left:32px}
.tbl td.chk,.tbl th.chk{display:table-cell;cursor:default}
.tbl td.chk .chk,.tbl th.chk .chk{vertical-align:middle}
.tbl tr.tot td{border-top:2px solid var(--haar);font-weight:500}
.tbl tr.sel td{background:var(--acc-l,var(--ijsl))}
.selbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;box-shadow:var(--sh);border-radius:var(--r-card);padding:10px 16px;margin:0 0 12px;font-size:13px}
.selbar b{font-weight:600}
.menu .mi{align-items:center}
.av{display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;text-align:center}
.menu .mi .av{font-size:11px;color:var(--petrol-d)}
.drawer .db .blok{background:#fff;border-radius:var(--r-card);padding:14px 16px;margin-top:14px}
.drawer .db .blok>.sect{margin:0 0 12px !important;min-height:20px}
.drawer .db .blok>.sect .ln{background:none}
.drawer .db .blok>.sect .lnk{margin-left:0}
.drawer .db .blok>:last-child{margin-bottom:0}
.drawer .db .blok .cl-item:last-child,.drawer .db .blok .ckl .ci:last-child{border-bottom:0;padding-bottom:0}
.drawer .db .blok .notitie{background:none;padding:0;margin:0}
.drawer .db .blok .notitie>label{display:none}
.pft th,.pft td{padding-left:8px;padding-right:8px}
.pft td.pf{min-width:96px}
.pft td.pf .reden{white-space:normal}
.tbl.kwt th,.tbl.kwt td{padding-left:4px;padding-right:4px}
.tbl.kwt th{min-width:0 !important;font:500 11.5px/1.25 var(--sans) !important;text-transform:none;letter-spacing:0}
@media (max-width:520px){
  .tbl td.num,.tbl th.num,.tbl td.r,.tbl th.r{width:auto}
  .tbl td.r,.tbl th.r{white-space:normal}
  .tbl td.num+td:not(.num):not(.r),.tbl th.num+th:not(.num):not(.r){padding-left:14px}
}
/* v9 */
.dpw .dpic{cursor:pointer}
.dpop{position:fixed;z-index:200;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-hi);padding:10px 12px 8px;width:268px;animation:fin .1s}
.dpop .dph{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dpop .dph b{font-weight:600;font-size:13.5px}
.dpop .dpn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-btn);color:var(--ink)}
.dpop .dpn:hover{background:var(--veld)}
.dpop .dpn[disabled]{color:var(--haar);cursor:default;background:none}
.dpop .dpg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpop .dpwd{font:500 10.5px var(--mono);color:var(--zacht);text-align:center;padding:4px 0;text-transform:uppercase}
.dpop .dpwd.we{opacity:.6}
.dpop .dpd{height:32px;border-radius:var(--r-btn);font:13px var(--sans);color:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;font-variant-numeric:tabular-nums}
.dpop button.dpd:hover{background:var(--veld)}
.dpop .dpd.we{color:var(--zacht)}
.dpop .dpd.uit{color:#C9CCCB;cursor:default}
.dpop .dpd.vd{font-weight:600;box-shadow:inset 0 0 0 1px var(--haar)}
.dpop .dpd.hd::after{content:'';position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--err)}
.dpop .dpd.fc{box-shadow:inset 0 0 0 1.5px var(--petrol)}
.dpop .dpd.sel{background:var(--petrol);color:#fff;font-weight:600}
.dpop .dpd.sel::after{background:#fff}
.dpop .dpl{display:flex;gap:14px;margin-top:8px;padding-top:7px;border-top:1px solid var(--haar);font-size:11.5px;color:var(--zacht)}
.dpop .dpl i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.dpop .dpl i.vd{box-shadow:inset 0 0 0 1px var(--zacht)}
.dpop .dpl i.hd{width:6px;height:6px;border-radius:50%;background:var(--err);vertical-align:1px}
.seg.dpsnel{display:inline-flex}
.dpop .dpsn{display:flex;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--haar)}
.dpop .dpsn button{flex:1;padding:6px 4px;border-radius:var(--r-btn);font-size:12px;background:var(--veld);color:var(--ink);white-space:nowrap}
.dpop .dpsn button:hover{background:var(--veld-h,var(--haar))}
.dpop .dpsn button.on{background:var(--petrol);color:#fff}
.rolt{font-size:11.5px;color:var(--zacht);font-weight:400;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.kol .kn .rolt{font-size:11.5px}
.sect.wfgk{margin-top:22px}
.pk .band{display:none}
.pk{--dot:#9AA7B0}
.pk.brons{--dot:#B8875A}
.pk.zilver{--dot:#9AA7B0}
.pk.goud{--dot:#C9A646}
.pk .nm::before{content:'';display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--dot);margin-right:9px;vertical-align:2px}
.tpk .pk .nm::before{width:14px;height:14px;vertical-align:3px}
.pk .ph{padding-top:18px}
.pk.on{background:var(--acc-l,#fff)}
.pk.rec{padding:0 0 16px;max-width:none;margin:0}
.tpk .pk.rec{padding-bottom:22px}
.bon .mk{line-height:1.35;gap:10px}
.bon .mk>span:last-child{white-space:nowrap}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0;background:#9AA7B0}
.pdot.brons{background:#B8875A}
.pdot.goud{background:#C9A646}
.sbar{display:flex;align-items:stretch;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden}
.sbar .sseg{flex:1 1 0;min-width:0;padding:10px 10px 9px;border-left:1px solid var(--haar);cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.sbar .sseg:first-child{border-left:0}
.sbar .sseg:hover{background:var(--veld)}
.sbar .sseg .sn{display:flex;gap:6px;font-size:12.5px;line-height:1.3;font-weight:500;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
.sbar .sseg .sn .nr{font:500 11px/17px var(--mono);color:var(--zacht);flex:none;display:inline-flex;align-items:flex-start}
.sbar .sseg .sc{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.sbar .sseg .sc b{font:500 18px/1 var(--sans);font-variant-numeric:tabular-nums}
.sbar .sseg .late{font-size:11.5px;color:var(--err)}
.sbar .sseg.leeg .sc b{color:var(--zacht)}
.sbar .sseg.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--petrol)}
.sbar .sseg.eind{background:var(--paper);cursor:default}
@media (max-width:1100px){
  .sbar{flex-wrap:wrap}
  .sbar .sseg{flex:1 1 22%;border-top:1px solid var(--haar)}
}
/* ---------- v10: zijmenu AB1 (vast vlak, witte pil) en iconen zonder gekleurd vlak ---------- */
:root{--side:#E8E5DE;--side-haar:#DCD8CF}
body:not(.portaal) .side{background:var(--side);border-right:1px solid var(--side-haar)}
body:not(.portaal) .side .goto{background:#DEDAD2}
body:not(.portaal) .side .goto:hover{background:#D9D5CC}
body:not(.portaal) .side .goto kbd{background:var(--side)}
body:not(.portaal) .side .nitem:hover{background:#DFDBD3;color:var(--ink)}
body:not(.portaal) .side .nitem.on{background:#FFFFFF;color:var(--petrol-d);font-weight:600;box-shadow:0 1px 2px rgba(38,36,33,.08)}
body:not(.portaal) .side .nitem.on svg.g{color:var(--petrol)}
body:not(.portaal) .side .nitem .cnt{background:#DCD8CF}
body:not(.portaal) .side .nitem .cnt.hot{background:var(--petrol);color:#fff}
body:not(.portaal) .side .sidefoot{border-top-color:var(--side-haar)}
body:not(.portaal) .side .navscroll{scrollbar-color:#CFCAC0 transparent}
.attn .it .ic,.notif .ni .ic,.tl .ti .ic,.sug .ic,.sug1 .ic,.pic,.kbrow .pic,.waiting .ico{background:transparent!important;box-shadow:none!important;color:var(--petrol)}
.attn .it .ic.err,.notif .ni .ic.err{color:var(--err)}
.attn .it .ic.m,.pic.m,.tl .ti .ic.seal{color:var(--messing-d)}
.pic.ok{color:var(--ok)}
.tl .ti .ic.auto{color:var(--ink)}
.attn .it .ic svg.g,.notif .ni .ic svg.g,.pic svg.g,.waiting .ico svg.g,.tl .ti .ic svg.g,.sug .ic svg.g,.sug1 .ic svg.g{width:20px;height:20px;stroke-width:2.1}
.attn .it .ic svg.g .a,.notif .ni .ic svg.g .a,.pic svg.g .a,.waiting .ico svg.g .a,.tl .ti .ic svg.g .a,.sug .ic svg.g .a,.sug1 .ic svg.g .a{stroke:currentColor}
/* v10: selectie in Documenten en filterchips in accenttint in plaats van zwart, zoals de stappenbalk */
.lib button.on{background:var(--ijsl);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.lib button.on b{color:var(--petrol-d)}
.lib button.on b span{color:var(--petrol-d)}
.lib button.on p{color:var(--zacht)}
.sbar .sseg.on{background:var(--ijsl);box-shadow:inset 0 0 0 1.5px var(--petrol)}
.sbar .sseg.on::after{display:none}
.sbar .sseg.on .sn{color:var(--petrol-d)}
.sbar .sseg.on+.sseg{border-left-color:transparent}
.chipf.on,.tlf button.on{background:var(--acc-on);color:var(--petrol-d)}
.chipf.on em{color:var(--petrol)}
/* v11: producten op de klantkaart, gepland vooruit, relatie en factuurrelatie */
.prodbar{margin-bottom:12px}
.relseg button .mono{font-size:11.5px;margin-left:3px;color:var(--zacht)}
.relseg button.on .mono{color:inherit}
.pnl>.hd .relseg{margin-left:auto}
.pnl>.hd .relseg+.sub{margin-left:4px}
.relkop{display:flex;align-items:center;gap:11px;margin:22px 0 10px}
.relkop:first-of-type{margin-top:4px}
.relkop b{display:block;font-size:15px;font-weight:600}
.relkop span{font-size:12.5px;color:var(--zacht)}
.kico.sm{width:30px;height:30px;font-size:11px}
.prodblk{margin-bottom:14px;padding-bottom:6px}
.pbk{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px}
.pbt{flex:1;min-width:0}
.pbt h3{font:500 16px/1.3 var(--serif)}
.pbt .sub{font-size:12.5px;color:var(--zacht);margin-top:2px}
.pbz{display:flex;align-items:center;gap:14px;font-size:12.5px;flex:none}
.pbzi{display:inline-flex;align-items:center;gap:5px}
.pbn{display:flex;align-items:center;gap:6px;padding:6px 0 8px}
.prodwf{margin:0;width:100%}
.prodwf td:first-child{padding-left:0}
.prodwf td:last-child{padding-right:0;width:150px}
.prodwf td:nth-child(2){width:32%}
.prodwf td:nth-child(3){width:170px}
.prodwf td:nth-child(4){width:150px}
.prodwf td.nm{font-weight:500;white-space:nowrap}
.prodwf tr.gp td.nm{color:var(--zacht);font-weight:400}
.prodwf tr.gp td{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(0,0,0,.012) 7px 14px)}
.wcar{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border-radius:4px;color:var(--zacht);vertical-align:-3px;transition:transform .15s}
.wcar:hover{background:var(--veld);color:var(--ink)}
.wcar.op{transform:rotate(90deg)}
.wcar.leeg{visibility:hidden}
.prodwf tr.tkrij td{padding-top:6px;padding-bottom:6px;font-size:12.5px;background:#FCFBF8}
.prodwf tr.tkrij td.nm{font-weight:400;padding-left:40px;white-space:normal}
.tchk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--haar-s);margin-right:8px;vertical-align:-3px;color:transparent}
.tchk.on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.tchk.auto{border-style:dashed;color:var(--zacht)}
.tchk svg.g{width:11px;height:11px}
.prodwf tr.pmeer td{padding-top:6px;padding-bottom:8px;background:transparent}
.prodwf tr.pmeer .lnk{display:inline-flex;align-items:center;gap:5px;padding-left:24px}
.prodblk.ov .pbt h3{color:var(--zacht)}
.prod .pvolg{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:8px;border-top:1px dashed var(--haar);font-size:12px;color:var(--zacht);cursor:pointer}
.prod .pvolg span:first-of-type{color:var(--ink);white-space:nowrap}
.prod .pvolg .pst{margin-left:auto;text-align:right}
.prod .pvolg:hover span:first-of-type{color:var(--petrol)}
.kfact{display:inline-flex;align-items:center;gap:5px;margin-left:18px;color:var(--zacht)}
.kgroep .kfact:first-child{margin-left:0;padding-left:0;border-left:0}
.relrij{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--haar);cursor:pointer}
.relrij:first-of-type{border-top:0}
.relrij .t{flex:1;min-width:0}
.relrij .t b{display:block;font-weight:500;font-size:13.5px}
.relrij .t span{font-size:12px;color:var(--zacht)}
.relrij:hover .t b{color:var(--petrol)}
.wfcard .gpl{display:flex;align-items:center;gap:6px;margin:8px 0 -2px;font-size:12px;color:var(--zacht)}
.wfcard .gpl .zacht{margin-left:auto}
.gpm .trow2{display:grid;grid-template-columns:22px minmax(0,1fr) auto 90px;gap:14px;align-items:center;padding:10px 20px;border-top:1px solid var(--haar);cursor:pointer}
.gpm .trow2:first-child{border-top:0}
.gpm .trow2:hover{background:var(--veld)}
.gpm .trow2 .ic{color:var(--zacht);display:flex}
.gpm .trow2 .t b{display:block;font-weight:500;font-size:13.5px}
.gpm .trow2 .t span{font-size:12.5px;color:var(--zacht)}
.gpm .trow2 .tag{justify-self:end}
.pft tr.pfkind td.nm{padding-left:30px}
.startt td{vertical-align:middle}
.startt .inp{height:32px}
.plst{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--haar)}
.plst .mono{width:16px}
.inp.sm{height:30px;padding:3px 8px;font-size:13px;max-width:240px}
.plinfo{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:8px;background:var(--ijsl);font-size:13px;line-height:1.5;color:var(--ink)}
.plinfo svg.g{flex:none;margin-top:2px;color:var(--petrol)}
.somr select.inp.sm{min-width:230px}
.startt.ak td:nth-child(2){width:160px;min-width:150px}
.startt.ak td:nth-child(3){width:110px}
.pcard .pdaarna{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--haar);font-size:12.5px;color:var(--zacht)}
.gpseg{margin-left:10px}
.plbel{display:flex;align-items:center;gap:6px;color:var(--zacht)}
.relkop .tag{margin-left:6px;vertical-align:1px}
.prod .pvolg{flex-wrap:wrap}
.prod .pvolg .pst{white-space:normal}
/* Weggelaten uit v13 (de app heeft dit niet):
   - demo-hulp, rolwissel (.me .demo): 1 selectoren
   - demo-hulp, paneel (.demo-p): 17 selectoren
   - demo-hulp, knop Demo (.demok): 2 selectoren
   - klantportaal (body.portaal): 76 selectoren
   - klantportaal, merk van het kantoor (.pbrand): 4 selectoren
   - klantportaal, contactblok (.pcontact): 5 selectoren
   - klantportaal, balk Bekijk als (.alsbar): 3 selectoren
   - klantportaal (.portaalp): 1 selectoren
   - klantportaal op de telefoon (.pmobc): 1 selectoren
*/