/* WP Masters Support: portaal. Licht werkscherm met donkere merkbalk (ontwerp A), Manrope voor koppen, Mulish voor tekst. */
@font-face{font-family:"Manrope";src:url("fonts/Manrope.ttf") format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:"Mulish";src:url("fonts/Mulish.ttf") format("truetype");font-weight:200 900;font-display:swap}

:root{
  --brand:#192327; --brand-2:#22343F; --brand-3:#2D4656; --on-brand:#FFFFFF; --on-brand-soft:#C9D2D6; --on-brand-muted:#8FA3AD;
  --bg:#F5F7F8; --surface:#FFFFFF; --surface-2:#F7F9FA; --surface-3:#EEF1F3; --ink:#192327; --muted:#5B6B73; --line:#E3E7EA; --line-strong:#D3D9DD;
  --accent:#EE6A3C; --accent-text:#B8491F; --button:#37608F; --button-hover:#2F5683; --on-button:#FFFFFF; --select:#EEF3F9;
  --ok:#246B44; --ok-bg:#E3F3EA; --warn:#7A5500; --warn-bg:#FDF1D3; --bad:#B42318; --bad-bg:#FDE8E7;
  --info:#2F5683; --info-bg:#E3ECF6; --idle:#4A5960; --idle-bg:#ECEFF1; --open:#A8431C; --open-bg:#FDEDE6; --note-bg:#F2F5F9; --note-line:#DCE3EB;
  --task:#5B3FA8; --task-bg:#EFEAFB; --task-row:#FAF8FE;
  --f-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:10px;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);min-height:100vh}
h1,h2,h3{font-family:var(--f-display);line-height:1.2;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.05rem;font-weight:700}
p{margin:0}
a{color:var(--info)}
a:hover{color:var(--ink)}
img{max-width:100%}
code,.mono{font-family:var(--f-mono);font-size:.85em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.nowrap{white-space:nowrap}
.grow{flex:1 1 auto;min-width:0}
.stack{display:grid;gap:16px;align-content:start;min-width:0}
.stack-s{display:grid;gap:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Klantportaal: balk bovenaan ---------- */
.appbar{display:flex;align-items:center;gap:16px;padding:12px max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));background:var(--brand);color:var(--on-brand);flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;color:inherit;text-decoration:none;font-size:16px}
.logo:hover{color:inherit}
.logo-mark{display:block;height:30px;width:auto;flex:0 0 auto}
.logo .logo-word{padding-left:12px;border-left:1px solid rgba(255,255,255,.2);line-height:1.3}
.appbar nav{display:flex;gap:4px;flex-wrap:wrap}
.appbar nav a{font-size:.92rem;padding:7px 12px;border-radius:7px;color:var(--on-brand-soft);text-decoration:none}
.appbar nav a:hover{color:#fff;background:var(--brand-2)}
.appbar nav a.on{background:var(--brand-3);color:#fff;font-weight:700}
.me{margin-left:auto;display:flex;align-items:center;gap:12px}
.me form{margin:0}
.appbar .linkbtn{color:var(--on-brand-soft)}
.page{width:100%;max-width:1120px;margin:0 auto;padding:28px max(20px,env(safe-area-inset-right,0px)) 48px max(20px,env(safe-area-inset-left,0px));display:grid;gap:18px;align-content:start}
.foot{text-align:center;font-size:.78rem;color:var(--muted);padding:18px 16px 28px}

/* ---------- Teamomgeving: zijbalk + werkvlak ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{flex:0 0 240px;background:var(--brand);color:var(--on-brand);display:flex;flex-direction:column;gap:20px;padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo{padding:2px 12px 4px}
.side-h{font:700 11px var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--on-brand-muted);padding:0 12px 6px}
.side-nav{display:flex;flex-direction:column;gap:1px}
.side-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:8px;color:var(--on-brand-soft);text-decoration:none;font-size:14px}
.side-nav a:hover{background:var(--brand-2);color:#fff}
.side-nav a.on{background:var(--brand-3);color:#fff;font-weight:700}
.side-nav b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--on-brand-soft)}
.side-nav b.hot{color:#FF9C7A}
.side-foot{margin-top:auto}
.side-empty{display:block;padding:0 12px;font-size:12px;color:var(--on-brand-muted)}
.workpage.flash-only{padding-bottom:0}
.work{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 28px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.search{flex:1 1 320px;max-width:540px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;background:var(--surface-2)}
.search input{border:0;background:transparent;font:14px var(--f-body);color:var(--ink);padding:9px 0;flex:1;min-width:0;outline:none}
.search:focus-within{border-color:var(--button);background:#fff}
.kbd{font-size:11px;color:var(--muted);border:1px solid var(--line-strong);border-radius:4px;padding:0 5px;background:#fff}
.workpage{padding:24px 28px 48px;display:grid;gap:16px;align-content:start;min-width:0}
.menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
.narrow-only{display:none}
.menu-shade{position:fixed;inset:0;background:rgba(25,35,39,.45);z-index:35}
.side-logout{padding:0 12px}
.side-logout button{background:none;border:0;padding:0;color:var(--on-brand-soft);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}

/* ---------- Gedeelde onderdelen ---------- */
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.notice{border-radius:8px;padding:11px 14px;font-size:.92rem;background:var(--info-bg);color:var(--ink)}
.notice.ok{background:var(--ok-bg)}
.notice.bad{background:var(--bad-bg)}
.notice.warn{background:var(--warn-bg)}
.empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:12px;padding:32px;text-align:center;display:grid;gap:6px}
.infobox{background:var(--surface-3);border-radius:var(--r);padding:14px;display:grid;gap:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 .92rem var(--f-body);background:var(--button);color:var(--on-button);border:0;border-radius:8px;padding:9px 16px;cursor:pointer;text-decoration:none;min-height:40px;white-space:nowrap}
.btn:hover{background:var(--button-hover);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.full{width:100%}
.btn.sm{min-height:34px;padding:6px 12px;font-size:.86rem}
.btn[disabled]{opacity:.6;cursor:progress}
.linkbtn{font:inherit;font-size:.86rem;background:none;border:0;padding:0;color:var(--info);cursor:pointer;text-decoration:underline}
.avatar{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;font:800 .72rem var(--f-display);background:var(--brand-3);color:#fff;flex:0 0 auto}
.avatar.staff{background:var(--accent)}
.avatar.photo{background:var(--surface-3);overflow:hidden}
.staff-who{gap:10px;flex-wrap:nowrap;align-items:center}
.avatar.photo img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm{width:26px;height:26px;font-size:.64rem}

.field{display:grid;gap:6px;min-width:0;border:0;padding:0;margin:0}
.field>label,.field>legend{font-weight:700;font-size:.9rem;padding:0}
.field .hint{font-size:.8rem;color:var(--muted)}
.k{font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input[type=text],input[type=email],input[type=url],input[type=search],input[type=time],input[type=date],input[type=month],input[type=number],input[type=tel],textarea,select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:8px 11px;width:100%;min-width:0}
textarea{resize:vertical;min-height:90px}
input[type=file]{font-size:.85rem;max-width:100%}
.check{display:flex;gap:8px;align-items:flex-start;font-size:.92rem}
.check input{margin-top:4px}
.checks{display:flex;flex-wrap:wrap;gap:4px 14px}
/* In een tabel blijft het een gewone cel, anders lopen de lijnen van de rij niet door */
td.checks{display:table-cell}
td.checks .check{display:inline-flex;align-items:center;vertical-align:middle;margin:3px 14px 3px 0}
td.checks .check input{margin-top:0}
/* Een vinkje in het vakje mag de tekstlijn niet verschuiven */
input[type=checkbox],input[type=radio]{vertical-align:middle}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg a{font-size:.86rem;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:99px;padding:6px 14px;text-decoration:none}
.seg a[aria-current=true]{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Filterknoppen: een select die eruitziet als chip */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fchip{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding-left:11px;font-size:13px;cursor:pointer}
.fchip span{color:var(--muted);font-weight:600}
.fchip select{width:auto;field-sizing:content;max-width:190px;border:0;background-color:transparent;font:700 13px var(--f-body);color:var(--ink);padding:7px 26px 7px 2px;cursor:pointer;text-overflow:ellipsis}
.fchip:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.fchip select:focus-visible{outline:0}
.fchip.on{border-color:var(--button);background:var(--select)}
.fchip.on select{color:var(--info)}

.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.cat{position:relative;display:grid;gap:2px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;cursor:pointer}
.cat input{position:absolute;opacity:0;pointer-events:none}
.cat b{font-family:var(--f-display);font-size:.93rem}
.cat span{font-size:.8rem;color:var(--muted)}
.cat:has(input:checked){border-color:var(--button);background:var(--select);box-shadow:0 0 0 1px var(--button)}
.cat:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.choices{display:grid;gap:8px}
.choice{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:.92rem;font-weight:600}
.choice:has(input:checked){background:var(--brand);color:#fff;border-color:var(--brand)}
.choices.kinds{grid-template-columns:repeat(3,1fr);gap:6px}
.choices.kinds .choice{justify-content:center;padding:7px 6px;font-size:.84rem}
.choices.kinds input{position:absolute;opacity:0;pointer-events:none}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
.choices.kinds .choice:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.formgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px}
.filelist{display:flex;flex-wrap:wrap;gap:6px}
.filelist span{font-size:.78rem;background:var(--surface-3);border-radius:6px;padding:4px 8px}
.filelist span.err{background:var(--bad-bg)}

/* Status, prioriteit, SLA */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;border-radius:99px;padding:3px 10px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-new{color:var(--info);background:var(--info-bg)}
.s-open{color:var(--open);background:var(--open-bg)}
.s-wait{color:var(--warn);background:var(--warn-bg)}
.s-hold{color:var(--idle);background:var(--idle-bg)}
.s-done{color:var(--ok);background:var(--ok-bg)}
.s-closed{color:var(--idle);border:1px solid var(--line-strong)}
.s-internal{color:var(--task);background:var(--task-bg)}
.inbox tr.is-task td{background:var(--task-row)}
.task-head .crumbs .pill{vertical-align:middle}
.staff-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px}
table.tasks .quick{margin:0}
table.tasks .qsel{font-size:.8rem;font-weight:700;border-radius:99px;padding:3px 26px 3px 10px;border:0;min-height:0;width:auto}
.qsel.prio-2{color:var(--open);background-color:var(--open-bg)}.qsel.prio-3{color:var(--info);background-color:var(--info-bg)}.qsel.prio-4{color:var(--idle);background-color:var(--idle-bg)}
.qsel.st-new{color:var(--idle);background-color:var(--idle-bg)}.qsel.st-in_progress{color:var(--warn);background-color:var(--warn-bg)}.qsel.st-waiting_third{color:var(--open);background-color:var(--open-bg)}.qsel.st-waiting_customer{color:var(--task);background-color:var(--task-bg)}.qsel.st-resolved{color:var(--ok);background-color:var(--ok-bg)}
.taskgroup.g-late .sec-h{color:var(--bad)}
.taskgroup.g-done .sec-h{color:var(--ok)}
.taskgroup + .taskgroup{margin-top:18px}
.prio{font-size:.7rem;font-weight:800;border-radius:4px;padding:2px 6px;white-space:nowrap;letter-spacing:.02em}
.p1{color:var(--bad);background:var(--bad-bg)}.p2{color:var(--open);background:var(--open-bg)}.p3{color:var(--info);background:var(--info-bg)}.p4{color:var(--idle);background:var(--idle-bg)}
.t-ok{color:var(--ok)}.t-warn{color:var(--warn)}.t-bad{color:var(--bad)}.t-idle{color:var(--muted)}
.slachip{display:inline-block;font-size:.76rem;font-weight:700;border-radius:6px;padding:3px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.slachip.ok{color:var(--ok);background:var(--ok-bg)}.slachip.warn{color:var(--warn);background:var(--warn-bg)}.slachip.bad{color:#fff;background:var(--bad)}.slachip.idle{color:var(--idle);background:var(--idle-bg)}
.sla{display:grid;gap:4px;min-width:120px}
.sla .bar{height:5px;border-radius:9px;background:var(--surface-3);overflow:hidden}
.sla .bar i{display:block;height:100%;border-radius:9px}
.sla small{font-size:.76rem;font-variant-numeric:tabular-nums}
.b-ok{background:var(--ok)}.b-warn{background:#C98A00}.b-bad{background:var(--bad)}.b-idle{background:#9AA8AE}
.w0{width:0}.w1{width:5%}.w2{width:10%}.w3{width:15%}.w4{width:20%}.w5{width:25%}.w6{width:30%}.w7{width:35%}.w8{width:40%}.w9{width:45%}.w10{width:50%}
.w11{width:55%}.w12{width:60%}.w13{width:65%}.w14{width:70%}.w15{width:75%}.w16{width:80%}.w17{width:85%}.w18{width:90%}.w19{width:95%}.w20{width:100%}

/* Tabellen */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--surface-3);vertical-align:middle}
th{font-family:var(--f-display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--surface);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.pair{display:grid;gap:4px;min-width:130px}
td input[type=text],td select{padding:6px 8px;font-size:.88rem}
td input.num{width:56px}
.rowlink{color:inherit;text-decoration:none}
.rowlink:hover b{text-decoration:underline}

/* Inbox */
.inbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.inbox .scroll{overflow-x:auto}
.inbox table{min-width:920px}
.inbox tbody tr:hover{background:var(--surface-2)}
.inbox tbody tr:has(input:checked){background:var(--select)}
.inbox td{padding:11px 10px}
.inbox td:first-child,.inbox th:first-child{padding-left:16px;width:28px}
.inbox td:last-child,.inbox th:last-child{padding-right:16px;text-align:right}
.inbox .subj{font-weight:700;color:var(--ink);text-decoration:none}
.inbox .subj:hover{text-decoration:underline}
.inbox .sub2{font-size:.8rem;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle;flex:0 0 auto}
.inbox tr.unread .subj{font-weight:800}
.fchip.toggle{padding:7px 12px;font-weight:700;color:var(--ink);text-decoration:none}
.fchip.toggle .dot{margin-right:6px;background:var(--line-strong)}
.fchip.toggle.on .dot{background:var(--accent)}
.fchip.toggle.on{color:var(--info)}
.t-info{color:var(--info)}
.bulkbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--select);font-size:.88rem}
.bulkbar b{color:var(--info)}
.bulkbar select{width:auto;font-size:.86rem;padding:6px 26px 6px 10px}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.pager .grow{flex:1}

.list{display:grid;gap:8px}
.trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:inherit;text-decoration:none}
.trow:hover{border-color:var(--button);color:inherit}
.trow .sub{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .meta{font-size:.8rem;color:var(--muted)}
.trow .right{display:grid;justify-items:end;gap:4px;font-size:.78rem;color:var(--muted);text-align:right}

/* Ticket */
.tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.85rem;color:var(--muted)}
.tmeta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-strong);margin-right:14px;vertical-align:middle;position:relative;top:-1px}
.tmeta-num{font-weight:700;color:var(--ink)}
.steps{list-style:none;margin:4px 0 0;padding:16px 18px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.steps li{position:relative;display:grid;justify-items:center;gap:8px;text-align:center}
.steps li:not(:first-child)::before{content:"";position:absolute;top:7px;right:50%;width:100%;height:2px;background:var(--line-strong)}
.steps li.done::before,.steps li.now::before{background:var(--accent)}
.steps-dot{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.steps li.done .steps-dot{background:var(--accent);border-color:var(--accent)}
.steps li.done .steps-dot::after{content:"";position:absolute;left:50%;top:45%;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;box-sizing:content-box;transform:translate(-50%,-50%) rotate(45deg)}
.steps li.now .steps-dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--open-bg)}
.steps li.now .steps-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.steps-label{font-size:.82rem;color:var(--muted)}
.steps li.done .steps-label{color:var(--ink)}
.steps li.now .steps-label{color:var(--ink);font-weight:700}
@media (max-width:480px){.steps{padding:14px 8px}.steps-label{font-size:.74rem}}
.facts-inline{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0}
.facts-inline div{display:flex;gap:6px;min-width:0}
.facts-inline dt{color:var(--muted)}
.facts-inline dd{margin:0;overflow-wrap:anywhere}
.thread{display:grid;gap:14px}
.msg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.bubble{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:grid;gap:8px;min-width:0}
.bubble header{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:.82rem}
.bubble header b{font-size:.92rem}
.bubble header span{color:var(--muted)}
.bubble .body{font-size:.95rem;overflow-wrap:anywhere;line-height:1.6}
.bubble.note{background:var(--surface);border-color:var(--line)}
.bubble.fresh{background:#FFF4EE;border-color:#F6C9B4}
.bubble .tag-new{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:4px;padding:1px 6px}
.mention{font-weight:700;color:var(--info);background:var(--info-bg);border-radius:4px;padding:0 4px}
.mention.me{color:var(--accent-text);background:var(--open-bg)}
.bubble .tag-intern{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--info);background:var(--info-bg);border-radius:4px;padding:1px 6px}
/* Lang bericht: ingeklapt tot "Lees meer" */
.bubble:has(> details.longmsg:not([open])) > .body{max-height:9.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
details.longmsg{margin-top:-4px}
details.longmsg > summary{list-style:none;cursor:pointer;font-size:.84rem;font-weight:700;color:var(--button)}
details.longmsg > summary::-webkit-details-marker{display:none}
details.longmsg:not([open]) .less,details.longmsg[open] .more{display:none}
/* Eerdere berichten van een lang gesprek */
details.older{display:grid;gap:14px}
details.older > summary{list-style:none;cursor:pointer;text-align:center;font-size:.84rem;font-weight:700;color:var(--button);padding:8px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface)}
details.older > summary::-webkit-details-marker{display:none}
details.older[open] > summary{margin-bottom:14px}
details.older:not([open]) .less,details.older[open] .more{display:none}
/* Uitklapknoppen: een rustige focusrand binnen de knop, geen oranje lijnen erboven en eronder */
details.older > summary:focus-visible,details.longmsg > summary:focus-visible,details.taskgroup > summary:focus-visible,.showmore input:focus-visible + label{outline:2px solid var(--button);outline-offset:-2px;border-radius:10px}
details.older > .thread{margin-bottom:0}
.bubble.sys{background:transparent;border:0;font-size:.82rem;color:var(--muted);padding:2px 0 2px 44px}
.att{display:inline-flex;gap:6px;align-items:center;font-size:.8rem;background:var(--surface-3);border-radius:6px;padding:4px 9px;width:max-content;max-width:100%;overflow-wrap:anywhere;color:var(--ink)}

.ticket-head{background:var(--surface);border-bottom:1px solid var(--line);padding:18px 28px;display:grid;gap:12px}
.ticket-head .crumbs{font-size:.86rem;color:var(--muted)}
.ticket-head h1{font-size:1.4rem}
.ticket-props{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ticket-props label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.ticket-props select{width:auto;font-size:.88rem;font-weight:600;padding:6px 28px 6px 10px}
.presence{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--warn);background:var(--warn-bg);border-radius:8px;padding:8px 12px}
.presence .dot{margin:0;background:var(--warn)}
.presence.fresh{color:var(--info);background:var(--info-bg)}
.slastrip{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:.86rem}
.ticket-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,380px);gap:24px;padding:22px 28px 48px;align-items:start}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:14px}
.side-card dl{margin:0;display:grid;gap:10px}
.side-card dt{font:700 .7rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side-card dd{margin:2px 0 0;font-size:.9rem}
.events{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.reply{background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden}
.reply .rt{display:flex;gap:18px;padding:0 14px;border-bottom:1px solid var(--line)}
.reply .rt label{cursor:pointer}
.reply .rt input{position:absolute;opacity:0;pointer-events:none}
.reply .rt span{display:block;font-weight:700;font-size:.86rem;padding:10px 0;color:var(--muted);border-bottom:2px solid transparent}
.reply .rt label:has(input:checked) span{color:var(--ink);border-color:var(--accent)}
.reply .rt label:has(input:focus-visible) span{outline:2px solid var(--accent);outline-offset:2px}
.reply textarea{border:0;border-radius:0;padding:12px 14px}
.reply:has(input[value=internal]:checked) textarea{background:var(--note-bg)}
.reply:has(input[value=internal]:checked) [data-public-only]{display:none}
.reply .rf{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap;font-size:.86rem}
.reply .rf select{width:auto;padding:6px 10px;margin-left:6px}

.center{display:grid;place-items:center;padding:32px 0}
.login{width:min(420px,100%);display:grid;gap:16px}
.hours{display:grid;gap:8px}
.hourrow{display:grid;grid-template-columns:140px 120px 120px;gap:10px;align-items:center}

/* Contactpersonen en gevaarlijke acties */
.contacts{display:grid;gap:8px}
.contact{padding:0}
.contact summary{display:flex;gap:12px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none}
.contact summary::-webkit-details-marker{display:none}
.contact[open] summary{border-bottom:1px solid var(--line)}
.contact > form,.contact > .actions{padding:16px}
.contact > .actions{padding-top:0}
.danger{margin:0 16px 16px;padding:14px;border:1px solid #F3C1BD;border-radius:8px;background:var(--bad-bg)}
.danger input[type=text]{max-width:220px}
.btn.danger-btn{background:var(--bad);color:#fff}
.disabledlist td{color:var(--muted)}

@media (max-width:1000px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(290px,86vw);z-index:40;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .menu-open .sidebar{transform:none}
  .menu-open{overflow:hidden}
  .menu-btn{display:inline-flex}
  .wide-only{display:none}
  .narrow-only{display:block}
  .ticket-body{grid-template-columns:minmax(0,1fr)}
  .formgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){.grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .topbar,.workpage,.ticket-head,.ticket-body{padding-left:16px;padding-right:16px}
  .trow{grid-template-columns:auto minmax(0,1fr)}
  .trow .right{grid-column:1/-1;justify-items:start;text-align:left}
  .hourrow{grid-template-columns:1fr 1fr 1fr}
  .me{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Inlogscherm ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.auth-brand{background:var(--brand);color:var(--on-brand);padding:40px clamp(28px,5vw,72px);display:flex;flex-direction:column;gap:40px;position:relative;overflow:hidden}
.auth-brand::after{content:"";position:absolute;right:-180px;bottom:-180px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(238,106,60,.28),rgba(238,106,60,0) 70%);pointer-events:none}
.auth-pitch{margin-top:auto;margin-bottom:auto;display:grid;gap:22px;max-width:30rem;position:relative}
.auth-pitch h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.auth-pitch ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:var(--on-brand-soft);font-size:1rem}
.auth-pitch li{display:flex;gap:12px;align-items:flex-start}
.tick{flex:0 0 20px;height:20px;border-radius:50%;background:rgba(238,106,60,.18);position:relative;margin-top:2px}
.tick::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.auth-foot{font-size:.8rem;color:var(--on-brand-muted);position:relative}
.auth-main{display:grid;place-items:center;padding:40px 20px;background:var(--surface)}
.auth-card{width:min(400px,100%);display:grid;gap:20px}
.auth-card h1{font-size:1.75rem}
.auth-state{display:grid;gap:10px}
.auth-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--select);color:var(--button)}
.auth-alt{display:grid;gap:2px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.auth-alt a{font-weight:700}
.btn.lg{min-height:48px;font-size:1rem}
.auth-card input[type=email]{padding:12px 14px;font-size:1rem}
@media (max-width:860px){
  .auth{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .auth-brand{padding:20px;gap:0}
  .auth-pitch,.auth-foot{display:none}
  .auth-main{place-items:start center;padding-top:32px}
}

/* Rapportage */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:2px;align-content:start}
.kpi strong{font:800 1.6rem var(--f-display);font-variant-numeric:tabular-nums;line-height:1.15}
.kpi strong b{font-weight:800}
.kpi span{font-size:.84rem;color:var(--muted)}
.kpi small{font-size:.75rem;color:var(--muted)}
.contact-body{padding:0 16px 16px}
.plain{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:4px}
.plain.sites{gap:0}
.plain.sites>li{padding:12px 0;border-top:1px solid var(--line)}
.plain.sites>li:first-child{border-top:0;padding-top:4px}
.site-pack{align-items:flex-end;flex-wrap:wrap}
.site-pack .field{flex:1 1 180px;margin:0}
.site-pack .check{flex:0 0 auto;padding-bottom:10px}
.field.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.field.inline label{width:100%}.field.inline input.num{width:56px}
.packs{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.packs-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:4px}

/* Selectievakjes en keuzerondjes in huisstijl */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;flex:none;margin:0;width:18px;height:18px;
  display:inline-grid;place-content:center;vertical-align:-3px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:5px;
  transition:background-color .12s,border-color .12s;
}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--muted)}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate{background:var(--accent);border-color:var(--accent-text)}
input[type=checkbox]:checked::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid var(--on-button);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=checkbox]:indeterminate::after{content:"";width:9px;height:2px;background:var(--on-button);border-radius:1px}
input[type=radio]:checked{border-color:var(--accent-text)}
input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--button);outline-offset:2px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}

/* Bijlageknop in huisstijl */
.upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);cursor:pointer;transition:border-color .12s,background-color .12s}
.upload:hover,.upload.over{border-color:var(--accent);background:var(--surface)}
.upload.compact{padding:0;border:0;background:none}
.upload-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload-btn{display:inline-flex;align-items:center;gap:6px;pointer-events:none}
.upload:focus-within .upload-btn{outline:2px solid var(--button);outline-offset:2px}
.upload-hint{font-size:.85rem;color:var(--muted)}

/* Collega's in cc */
.cc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cc-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cc-list form{margin:0}
.checks-col{display:grid;gap:6px}

/* Tevredenheid */
.rating{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rate{position:relative;cursor:pointer}
.rate input{position:absolute;opacity:0;pointer-events:none}
.rate span{display:grid;justify-items:center;gap:4px;padding:14px 6px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font-size:.88rem;font-weight:600;text-align:center}
.rate b{font-size:1.7rem;line-height:1;font-weight:400}
.rate:hover span{border-color:var(--muted)}
.rate input:checked + span{border-color:var(--accent-text);background:var(--open-bg);box-shadow:inset 0 0 0 1px var(--accent-text)}
.rate input:focus-visible + span{outline:2px solid var(--button);outline-offset:2px}

/* Klantportaal */
.workpage.cust{max-width:1120px;width:100%}
.side-contact{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--brand-2);border:1px solid var(--brand-3);color:var(--on-brand);text-decoration:none}
.side-contact:hover,.side-contact:focus-visible{background:var(--brand-3);border-color:var(--accent);color:var(--on-brand)}
.side-contact:hover b,.side-contact:focus-visible b{color:var(--on-brand)}
.side-contact:hover small{color:var(--on-brand-soft)}
.side-contact svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--accent);color:#fff;box-sizing:border-box}
.side-contact span{display:grid;line-height:1.25}
.side-contact small{font-size:.74rem;color:var(--on-brand-muted)}
.side-contact b{font-size:.95rem;letter-spacing:.01em}
.sec-h{font-size:1rem}
a.kpi{text-decoration:none;color:inherit}
a.kpi:hover{border-color:var(--line-strong)}
.kpi-hot{border-color:var(--accent-text);background:var(--open-bg)}
.kpi-hot strong,.kpi-hot span{color:var(--accent-text)}
.wait-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.wait-card .sub{font-weight:700;color:var(--ink);text-decoration:none}
.wait-card .sub:hover{text-decoration:underline}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 0}
.is-customer .kpis{grid-template-columns:repeat(auto-fit,minmax(180px,240px))}
.only-narrow{display:none}
@media (max-width:1000px){
  .only-narrow{display:flex}
  .is-customer .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-customer .topbar .avatar{display:none}
}

/* Urenmeter: breedte via klassen, want de CSP staat geen inline style toe */
.strip{display:grid;gap:8px}
.strip-bar{display:block;width:100%;height:14px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.s-spent{fill:#6FB063;background:#6FB063}.s-plan{fill:#5B97D1;background:#5B97D1}.s-over{fill:#D04A35;background:#D04A35}
.strip-rows{display:grid;gap:2px;margin:0}
.strip-rows div{display:flex;justify-content:space-between;gap:12px}
.strip-rows dt{font:inherit;letter-spacing:normal;text-transform:none;color:var(--muted);display:flex;align-items:center;gap:6px}.strip-rows dd{margin:0;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.meter{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.meter span{display:block;height:100%;background:var(--ok)}
.meter span.near{background:#D99A00}
.meter span.full{background:var(--accent)}
.meter .w0{width:0%}.meter .w5{width:5%}.meter .w10{width:10%}.meter .w15{width:15%}.meter .w20{width:20%}.meter .w25{width:25%}.meter .w30{width:30%}.meter .w35{width:35%}.meter .w40{width:40%}.meter .w45{width:45%}.meter .w50{width:50%}.meter .w55{width:55%}.meter .w60{width:60%}.meter .w65{width:65%}.meter .w70{width:70%}.meter .w75{width:75%}.meter .w80{width:80%}.meter .w85{width:85%}.meter .w90{width:90%}.meter .w95{width:95%}.meter .w100{width:100%}

/* Eigen pijltje in keuzelijsten: iets van de rand af, overal gelijk */
select:not([multiple]){appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6B73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:10px 6px}
select:not([multiple]),td select,.bulkbar select,.ticket-props select,.reply .rf select{padding-right:34px}
.fchip select{padding-right:32px;background-position:right 13px center}

/* Meldingen (belletje) */
.notif{position:relative}
.notif-btn{list-style:none;position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;color:var(--muted);cursor:pointer}
.notif-btn::-webkit-details-marker{display:none}
.notif-btn:hover,.notif[open] .notif-btn{background:var(--surface-3);color:var(--ink)}
.notif-btn:focus-visible{outline:2px solid var(--button);outline-offset:2px}
.notif-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:700}
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(380px,calc(100vw - 32px));max-height:min(520px,75vh);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(25,35,39,.14);z-index:20}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.notif-head form{margin:0}
.notif-empty{padding:16px;margin:0}
.notif-list{list-style:none;margin:0;padding:0}
.notif-list li+li{border-top:1px solid var(--line)}
.notif-list a{display:flex;gap:12px;padding:12px 16px;color:var(--ink);text-decoration:none}
.notif-list a:hover{background:var(--surface-2)}
.notif-list li.unread a{background:var(--select)}
.notif-list li.unread .notif-text>span{font-weight:700}
.notif-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;background:var(--button)}
.notif-icon.g-reply{background:var(--ok)}
.notif-icon.g-done{background:var(--idle)}
.notif-icon.g-wait,.notif-icon.g-warn{background:#B7791F}
.notif-icon.g-bad{background:var(--bad)}
.notif-icon.g-person{background:var(--accent)}
.notif-text{display:grid;gap:2px;font-size:.88rem;line-height:1.35}
.notif-text small{color:var(--muted);font-size:.78rem}

/* Welkomstuitleg voor klanten */
.welcome{border-color:var(--line-strong)}
.welcome-steps{margin:0;padding-left:1.2rem;display:grid;gap:8px;font-size:.92rem;line-height:1.5}
.welcome form{margin:0}
.side-version{margin:-8px 0 0;padding:0 12px;font-size:.72rem;color:var(--on-brand-muted)}
.side-version a{color:inherit;text-decoration:underline;text-underline-offset:2px}.side-version a:hover{color:var(--on-brand)}
.badge-new{display:inline-block;font:700 .62rem var(--f-display);letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:99px;background:var(--accent);color:#fff;vertical-align:1px;text-decoration:none}
.changes ul{margin:0;padding-left:20px;display:grid;gap:4px}
.change-tag{justify-self:start;font:700 .68rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--surface-3);color:var(--muted)}
.change-tag.new{background:#E3F2DF;color:#2F6B25}.change-tag.better{background:#E1ECF8;color:#2B5C8F}.change-tag.fixed{background:#FBE9D7;color:#8A4B12}

/* Keuzelijst bij @collega */
.mention-wrap{position:relative}
.mention-list{position:absolute;left:12px;top:100%;margin:0;padding:4px;max-height:236px;overflow-y:auto;list-style:none;min-width:220px;max-width:320px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(25,35,39,.14);z-index:15}
.mention-list li{display:flex;gap:8px;align-items:baseline;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:.88rem}
.mention-list li span{color:var(--muted);font-size:.8rem}
.mention-list li[aria-selected=true],.mention-list li:hover{background:var(--select)}
.notif-push{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);position:sticky;bottom:0}
form.inline{display:inline}
.tentries{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.tentry{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:3px}
.tentry-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tentry-tags{display:flex;gap:4px;margin-left:auto}
.tag{font-size:.72rem;font-weight:700;border-radius:99px;padding:2px 8px;color:var(--idle);background:var(--idle-bg);white-space:nowrap}
.tag-ok{color:var(--ok);background:var(--ok-bg)}.tag-warn{color:var(--warn);background:var(--warn-bg)}.tag-bad{color:var(--bad);background:var(--bad-bg)}.tag-free{color:var(--info);background:var(--info-bg)}
.tentry-error{font-size:.8rem;color:var(--bad);background:var(--bad-bg);border-radius:7px;padding:6px 9px;margin-top:3px}
.tentry-actions{display:flex;gap:14px;font-size:.82rem;margin-top:3px}
.tentry-actions:empty{display:none}
.tentries-sum{margin:8px 0 12px}
.slalist{list-style:none;margin:0;padding:0;display:grid}
.slalist li{display:grid;grid-template-columns:minmax(0,1fr) 120px 120px;gap:4px 16px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.slalist li:first-child{border-top:0}
.slalist-what{font-weight:600}
.slalist-val{display:grid;line-height:1.3}
.slalist-val small{font-size:.74rem;color:var(--muted)}
@media (max-width:640px){
  .slalist li{grid-template-columns:1fr 1fr}
  .slalist-what{grid-column:1/-1}
  .topbar .search{order:5;flex-basis:100%;max-width:none}
  .topbar .avatar{display:none}
}
@media (max-width:640px){
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .filters > *{flex:none}
  .filters .grow{display:none}
  .inbox .bulkbar,.inbox thead{display:none}
  .inbox .scroll{overflow:visible;border:0;background:none}
  .inbox table,.inbox tbody{display:block;width:100%;min-width:0}
  .inbox tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prio ticket sla" "prio org org" "prio status who";gap:4px 10px;padding:12px;margin-bottom:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
  .inbox td{display:block;padding:0;border:0;white-space:normal}
  .inbox .c-check,.inbox .c-ago{display:none}
  .inbox .c-prio{grid-area:prio}.inbox .c-ticket{grid-area:ticket}.inbox .c-sla{grid-area:sla;justify-self:end}
  .inbox .c-org{grid-area:org;font-size:.85rem}.inbox .c-status{grid-area:status}.inbox .c-assignee{grid-area:who;justify-self:end;font-size:.82rem}
}
table.tasks{table-layout:fixed;width:100%;min-width:980px}
table.tasks th:nth-child(1){width:24%}table.tasks th:nth-child(2){width:12%}table.tasks th:nth-child(3){width:14%}table.tasks th:nth-child(4){width:9%}
table.tasks th:nth-child(5){width:11%}table.tasks th:nth-child(6){width:9%}table.tasks th:nth-child(7){width:7%}table.tasks th:nth-child(8){width:14%}
table.tasks td{overflow-wrap:anywhere;vertical-align:top}
table.tasks tr.unread .subj{font-weight:800}
table.tasks .last-snippet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Tegels bovenaan Taken */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:4px 0 14px}
.tile{display:grid;gap:2px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.tile b{font:800 1.5rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.tile span{font-size:.8rem;color:var(--muted);font-weight:600}
.tile:hover{border-color:var(--line-strong)}
.tile.on{border-color:var(--button);box-shadow:0 0 0 1px var(--button) inset}
.tile.bad b{color:var(--bad)}.tile.warn b{color:var(--open)}.tile.accent b{color:var(--accent-text)}
/* Groepen */
details.taskgroup{margin-top:18px}
details.taskgroup > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
details.taskgroup > summary::-webkit-details-marker{display:none}
details.taskgroup > summary::before{content:"▾";color:var(--muted);font-size:.8rem;width:10px}
details.taskgroup:not([open]) > summary::before{content:"▸"}
details.taskgroup > summary .sec-h{margin:0}
/* Per groep eerst de belangrijkste taken; de rest achter "Toon alle" */
details.taskgroup:has(.showmore input:not(:checked)) tr.extra{display:none}
.showmore{margin-top:8px}
.showmore label{display:block;text-align:center;cursor:pointer;font-size:.84rem;font-weight:700;color:var(--button);padding:8px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface)}
.showmore input:not(:checked) + label .less,.showmore input:checked + label .more{display:none}
details.taskgroup .count{font-size:.75rem;font-weight:800;color:var(--muted);background:var(--surface-3);border-radius:99px;padding:1px 8px;vertical-align:middle}
details.taskgroup.g-now .sec-h,details.taskgroup.g-late .sec-h{color:var(--bad)}
/* Bord */
.board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;overflow-x:auto;align-items:start;padding-bottom:6px}
.board-col{background:var(--surface-3);border-radius:12px;padding:10px;display:grid;gap:8px;align-content:start;min-height:120px}
.board-col .sec-h{margin:2px 4px 4px}
.task-card{padding:10px 12px;display:grid;gap:6px;border-radius:10px}
.task-card .subj{font-weight:700;color:var(--ink);text-decoration:none;line-height:1.35}
.task-card .subj:hover{text-decoration:underline}
.task-card.late{box-shadow:0 0 0 1px var(--bad-bg) inset}
.task-card-meta{gap:6px;align-items:center}
.board-empty{margin:4px}
.prio-chip{font-size:.72rem;font-weight:800;border-radius:99px;padding:2px 8px}
.prio-chip.prio-2{color:var(--open);background:var(--open-bg)}.prio-chip.prio-3{color:var(--info);background:var(--info-bg)}.prio-chip.prio-4{color:var(--idle);background:var(--idle-bg)}
.people{display:inline-flex}
.avatar.xs{width:24px;height:24px;font-size:.62rem;margin-left:-6px;border:2px solid var(--surface)}
.people .avatar.xs:first-child{margin-left:0}
.fchip input[type=search]{border:0;background:transparent;padding:7px 4px;width:150px;font:700 13px var(--f-body)}
@media (max-width:640px){
  .inbox tr.is-task{background:var(--task-row)}
  .inbox tr.is-task td{background:transparent}
}
/* Dashboards: Vandaag (team) en Overzicht (klant) */
.dash-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start;margin:16px 0}
.dash-grid.solo{grid-template-columns:minmax(0,1fr)}
.dash-card{padding:16px 18px;display:grid;gap:10px;align-content:start}
.dash-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:space-between}
.dash-h .sec-h{margin:0}
.dash-sub{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:6px 0 0}
.dash-list{list-style:none;margin:0;padding:0;display:grid}
.dash-list li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.dash-list li:first-child{border-top:0}
.dash-list .subj{font-weight:700;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-list .subj:hover{text-decoration:underline}
.dash-list li.done .subj{font-weight:600;color:var(--muted)}
.dash-meta{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;white-space:nowrap}
.dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dash-stats div{background:var(--surface-2);border-radius:10px;padding:10px 12px;display:grid}
.dash-stats b{font:800 1.3rem var(--f-display);font-variant-numeric:tabular-nums}
.dash-stats span{font-size:.78rem;color:var(--muted)}
.load{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.load li{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.88rem}
.load li a{color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.load li a:hover{text-decoration:underline}
.dash-card .load li:has(> span:first-child){grid-template-columns:minmax(0,1fr) auto}
.signals{list-style:none;margin:0;padding:0;display:grid}
.signals li{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:.9rem}
.signals li:first-child{border-top:0}
.signals a{color:var(--ink);text-decoration:none}
.signals a:hover{text-decoration:underline}
.sig-dot{width:8px;height:8px;border-radius:50%;background:var(--info);flex:0 0 auto}
.sig-bad .sig-dot{background:var(--bad)}.sig-warn .sig-dot{background:var(--warn)}
.dash-pack{display:grid;gap:6px;padding-bottom:6px}
.dash-pack + .dash-pack{border-top:1px solid var(--line);padding-top:10px}
.tile.accent b{color:var(--accent-text)}
@media (max-width:860px){
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .dash-list li{grid-template-columns:minmax(0,1fr);gap:4px}
  .dash-list .subj{white-space:normal}
  .dash-meta{white-space:normal;flex-wrap:wrap}
  .dash-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.load-counts{display:inline-flex;gap:10px}
.load-counts a{color:var(--ink);text-decoration:none}
.load-counts a.muted{color:var(--muted)}
.load-counts a:hover{text-decoration:underline}
/* Taken op een smal scherm: elke taak een kaart in plaats van een brede tabel */
@media (max-width:760px){
  table.tasks{min-width:0;table-layout:auto;width:100%}
  table.tasks thead{display:none}
  table.tasks tbody{display:grid;gap:8px}
  table.tasks tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
  table.tasks tr.extra{display:none}
  details.taskgroup:has(.showmore input:checked) table.tasks tr.extra{display:grid}
  table.tasks td{display:block;padding:0;border:0;width:auto}
  table.tasks td.c-ticket,table.tasks td.c-last{grid-column:1/-1}
  table.tasks .last-snippet{white-space:normal}
  details.taskgroup .tbl{border:0;background:transparent;overflow:visible}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tile{padding:8px 10px}
  .tile b{font-size:1.15rem}
  .tile span{font-size:.72rem;line-height:1.25}
  .board{grid-template-columns:repeat(4,minmax(240px,82vw))}
}

/* ==========================================================================
   Huisstijl 2: donker frame met een licht werkvlak, verloop oranje → goud als
   handtekening, en kleur alleen waar het iets betekent (rood = probleem,
   oranje = aandacht, de rest rustig).
   ========================================================================== */
:root{
  --gold:#F6C14E; --grad:linear-gradient(90deg,#EE6A3C,#F6C14E);
  --bg:#F3F5F6; --line:#E6EAEC; --surface-3:#EEF1F3;
  --shadow:0 1px 2px rgba(25,35,39,.04),0 8px 24px rgba(25,35,39,.05);
  --shadow-hover:0 2px 4px rgba(25,35,39,.05),0 12px 32px rgba(25,35,39,.08);
  --ring-track:#E9EDEF; --calm:#9DB0BA;
}
/* Frame */
body.is-staff,body.is-customer{background:var(--brand)}
.shell{background:var(--brand)}
.sidebar{gap:24px;padding:22px 14px}
.side-h{color:#5F7682;letter-spacing:.12em}
.side-nav a{border-radius:10px;padding:9px 12px}
.side-nav a:hover{background:rgba(255,255,255,.05)}
.side-nav a.on{background:rgba(255,255,255,.07);color:#fff}
.side-nav a.on span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--grad);margin-right:8px;vertical-align:2px}
.side-nav b.hot{color:var(--brand);background:var(--grad);border-radius:99px;padding:0 7px;font-size:12px}
.work{background:var(--bg);border-radius:22px 0 0 0;margin-top:10px;min-height:calc(100vh - 10px)}
.topbar{background:var(--bg);border-bottom:0;border-radius:22px 0 0 0;padding:16px 32px}
.search{background:var(--surface);border-color:var(--line);border-radius:12px}
.search:focus-within{box-shadow:0 0 0 3px rgba(55,96,143,.12)}
.workpage{padding:6px 32px 48px;gap:20px}
.topbar .avatar.staff,.topbar .avatar{width:36px;height:36px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.btn{border-radius:10px}
/* Kaarten en tabellen: zacht en ruim */
.card,.side-card,.kpi,.tile,.inbox,.tbl,.trow,.wait-card,.bubble,.reply,.steps{border-color:transparent;box-shadow:var(--shadow);border-radius:16px}
.card{padding:22px}
.bubble{border-radius:14px}
.bubble.fresh{border-color:#F6C9B4}
.empty{border-radius:16px}
th{background:transparent;color:#7A8A91}
th,td{border-bottom-color:var(--line)}
.inbox tbody tr:hover,table.tasks tbody tr:hover{background:#FAFBFB}
.ticket-head{background:var(--bg);border-bottom:0;padding:10px 32px 0}
.ticket-body{padding:20px 32px 48px}
/* Rustige kleuren: status als stip + tekst, prioriteit alleen opvallend bij P1/P2 */
.pill{background:none!important;border:0!important;padding:0;color:var(--ink);font-weight:600;font-size:.84rem}
.pill::before{width:8px;height:8px;background:var(--calm)}
.s-new::before{background:var(--button)!important}
.s-open::before{background:var(--accent)!important}
.s-wait::before{background:var(--gold)!important}
.s-hold::before{background:var(--calm)!important}
.s-done::before{background:var(--ok)!important}
.s-closed{color:var(--muted)}.s-closed::before{background:var(--line-strong)!important}
.s-internal{color:var(--task)}.s-internal::before{background:var(--task)!important}
.prio{background:none;padding:0;font-size:.74rem}
.p1{color:#fff;background:var(--bad);padding:2px 6px}
.p2{color:var(--accent-text)}
.p3,.p4{color:var(--muted);font-weight:700}
.slachip{background:none!important;padding:0;font-size:.82rem}
.slachip.ok,.slachip.idle{color:var(--muted)}
.slachip.warn{color:var(--accent-text)}
.slachip.bad{color:#fff;background:var(--bad)!important;padding:2px 8px}
.tag-task{font:800 .68rem var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--task);background:var(--task-bg);border-radius:6px;padding:1px 6px}
.inbox tr.is-task td{background:transparent}
table.tasks .qsel{background-color:var(--surface-3)!important;color:var(--ink)!important}
table.tasks .qsel.prio-2{color:var(--accent-text)!important}
table.tasks .qsel.st-resolved{color:var(--ok)!important}
.fchip{border-color:var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(25,35,39,.04)}
.fchip.on{border-color:var(--button)}
/* SLA-ring */
.ring{--p:0;--c:var(--calm);flex:none;width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--ring-track) 0)}
.ring i{width:32px;height:32px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font:800 10.5px var(--f-display);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ring.sm{width:28px;height:28px}.ring.sm i{width:21px;height:21px;font-size:0}
.ring-warn{--c:var(--accent)}
.ring-bad{--c:var(--bad)}.ring-bad i{color:var(--bad)}
.ring-idle{--c:var(--line-strong)}.ring-idle i{color:var(--muted)}
.r0{--p:0}.r1{--p:5}.r2{--p:10}.r3{--p:15}.r4{--p:20}.r5{--p:25}.r6{--p:30}.r7{--p:35}.r8{--p:40}.r9{--p:45}.r10{--p:50}
.r11{--p:55}.r12{--p:60}.r13{--p:65}.r14{--p:70}.r15{--p:75}.r16{--p:80}.r17{--p:85}.r18{--p:90}.r19{--p:95}.r20{--p:100}
.slacell{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;line-height:1.3;max-width:150px}
.slacell .t-ok,.slacell .t-idle{color:var(--muted)}
.slacell .t-warn{color:var(--accent-text);font-weight:700}
.slacell .t-bad{color:var(--bad);font-weight:700}
.who{display:inline-flex;align-items:center;gap:8px}
.who .avatar.xs{margin-left:0}
/* Dashboard: begroeting */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--brand);color:#fff;border-radius:20px;padding:28px 30px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center}
.hero::after{content:"";position:absolute;z-index:-1;right:-140px;top:-180px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(238,106,60,.38),rgba(246,193,78,.12) 45%,transparent 70%)}
.hero h1{color:#fff;font-size:clamp(1.5rem,2.4vw,1.95rem);letter-spacing:-.02em}
.hero-date{font:700 11.5px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-brand-muted);margin-bottom:6px}
.hero-line{margin-top:10px;color:#E7E8E9;font-size:1rem;max-width:36rem}
.hero-line b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hero-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.hero-kpi{display:grid;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;color:#fff;text-decoration:none;transition:background-color .15s}
.hero-kpi:hover{background:rgba(255,255,255,.1);color:#fff}
.hero-kpi b{font:800 1.75rem/1.05 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hero-kpi span{font-size:.78rem;color:var(--on-brand-soft);line-height:1.3}
.hero-kpi.bad b{color:#FF8A6A}
.hero-kpi.warn b,.hero-kpi.accent b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-add{display:inline-block;margin-top:16px;font:700 .82rem var(--f-body);color:var(--on-brand-soft);text-decoration:none;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:4px 12px}
.hero-add:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.dash-grid{gap:20px;margin:0}
.dash-card{padding:20px 22px}
.dash-card .sec-h{font-size:1.06rem;font-weight:800}
/* Nu oppakken */
.now-list{list-style:none;margin:0;padding:0;display:grid}
.now-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 2px;border-top:1px solid var(--line)}
.now-list li:first-child{border-top:0}
.now-main{display:grid;gap:2px;min-width:0}
.now-main .subj{font:700 .98rem var(--f-display);color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-main .subj:hover{text-decoration:underline}
.now-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.8rem;color:var(--muted)}
/* Werkvoorraad */
.workload{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.workload li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.workload .avatar{width:34px;height:34px}
.wl-main{display:grid;gap:6px;min-width:0}
.wl-name{font:700 .9rem var(--f-display);color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-name:hover{text-decoration:underline}
.gbar{display:block;height:8px;border-radius:99px;background:var(--ring-track);overflow:hidden}
.gbar span{display:block;height:100%;border-radius:99px;background:var(--grad)}
.gbar .w0{width:0}.gbar .w5{width:5%}.gbar .w10{width:10%}.gbar .w15{width:15%}.gbar .w20{width:20%}.gbar .w25{width:25%}.gbar .w30{width:30%}.gbar .w35{width:35%}.gbar .w40{width:40%}.gbar .w45{width:45%}.gbar .w50{width:50%}.gbar .w55{width:55%}.gbar .w60{width:60%}.gbar .w65{width:65%}.gbar .w70{width:70%}.gbar .w75{width:75%}.gbar .w80{width:80%}.gbar .w85{width:85%}.gbar .w90{width:90%}.gbar .w95{width:95%}.gbar .w100{width:100%}
.dash-stats div{background:var(--bg);border-radius:12px}
.sig-warn .sig-dot{background:var(--gold)}
.sig-info .sig-dot{background:var(--calm)}
/* Tegels op de takenpagina in dezelfde stijl */
.tile{padding:14px 16px}
.tile b{font-size:1.6rem;letter-spacing:-.02em}
.tile.warn b,.tile.accent b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile.on{box-shadow:var(--shadow),0 0 0 2px var(--button) inset}
.kpi-hot{background:var(--surface);box-shadow:var(--shadow),0 0 0 2px var(--accent) inset}
/* Meters in het verloop */
.meter span{background:var(--grad)}
.meter span.near{background:var(--accent)}
.meter span.full{background:var(--bad)}
@media (max-width:1000px){
  .work,.topbar{border-radius:0;margin-top:0}
  .topbar{padding:12px 20px}
  .workpage{padding:6px 20px 40px}
  .ticket-head{padding:10px 20px 0}.ticket-body{padding:18px 20px 40px}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);padding:22px 20px}
  .hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .now-status{display:none}
}
@media (max-width:640px){
  .topbar,.workpage,.ticket-head,.ticket-body{padding-left:16px;padding-right:16px}
  .now-main .subj{white-space:normal}
}
table.tasks th:nth-child(1){width:23%}table.tasks th:nth-child(3){width:14%}table.tasks th:nth-child(4){width:9%}
table.tasks th:nth-child(6){width:13%}table.tasks th:nth-child(7){width:6%}table.tasks th:nth-child(8){width:13%}
table.tasks .subj{color:var(--ink);font:700 .95rem var(--f-display);text-decoration:none}
table.tasks .subj:hover{text-decoration:underline}
table.tasks .slacell{white-space:normal}
@media (max-width:640px){.inbox .c-sla .ring{display:none}.inbox .c-sla .slacell{max-width:none}}
/* Ticketpagina: kop met ring, snelknoppen en eigenschappen als chips */
.ticket-head{gap:14px;padding-top:14px}
.th-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.th-actions{display:flex;gap:8px;flex-wrap:wrap}
.th-actions form{margin:0}
.th-title{display:flex;gap:16px;align-items:center}
.th-title h1{font-size:1.45rem;letter-spacing:-.01em}
.th-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.88rem;color:var(--muted)}
.th-sub a{color:var(--ink);font-weight:700;text-decoration:none}
.th-sub a:hover{text-decoration:underline}
.th-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px}
.th-bar .ticket-props{gap:8px}
.th-bar .ticket-props .fchip{color:inherit;font-size:13px}
.th-bar .ticket-props .fchip select{font-size:13px;padding:7px 32px 7px 2px;border:0;background-color:transparent}
.th-bar .slastrip{font-size:.84rem;gap:6px 16px}
.ring.lg{width:58px;height:58px}.ring.lg i{width:46px;height:46px;font-size:13px}
.cust-head{display:flex;gap:12px;align-items:center}
.org-mark{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand);color:#fff;font:800 .85rem var(--f-display);position:relative;overflow:hidden}
.org-mark::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--grad)}
.cust-name{font:800 1rem var(--f-display);color:var(--ink);text-decoration:none}
.cust-name:hover{text-decoration:underline}
.recent{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.recent h3{margin:0}
.recent ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.recent li{display:grid;gap:2px}
.recent li a{font-weight:700;font-size:.88rem;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent li a:hover{text-decoration:underline}
.recent .pill{font-size:.76rem}
.side-card > summary.k{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.side-card > summary.k::-webkit-details-marker{display:none}
.side-card > summary.k::after{content:"▾";font-size:.8rem;color:var(--muted)}
.side-card:not([open]) > summary.k::after{content:"▸"}
.reply{scroll-margin-top:90px}
.reply:focus-within{box-shadow:var(--shadow-hover),0 0 0 2px rgba(55,96,143,.25)}
@media (max-width:640px){.th-title{align-items:flex-start}.ring.lg{width:46px;height:46px}.ring.lg i{width:36px;height:36px;font-size:11px}.th-title h1{font-size:1.2rem}}
/* Klant: voortgang in het verloop en wie je helpt */
.steps li.done::before,.steps li.now::before{background:var(--grad)}
.steps li.done .steps-dot{background:var(--accent);border-color:var(--accent)}
.helper{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:12px 16px;justify-self:start}
.helper .avatar{width:40px;height:40px}
.helper span{display:grid;line-height:1.3}
.helper small{font-size:.78rem;color:var(--muted)}
.helper b{font-family:var(--f-display)}
/* Links in tabellen rustig: donker, onderstreept bij hover */
.tbl td a:not(.btn),.inbox td a:not(.btn):not(.subj){color:var(--ink);font-weight:600;text-decoration:none}
.tbl td a:not(.btn):hover,.inbox td a:not(.btn):not(.subj):hover{text-decoration:underline}
.seg a{border-color:var(--line);box-shadow:0 1px 2px rgba(25,35,39,.04)}
.seg a[aria-current=true]{background:var(--brand);border-color:var(--brand)}
/* Formulieren als kaarten */
.formgrid > *{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:22px;align-self:start;min-width:0}
input[type=text],input[type=email],input[type=url],input[type=search],input[type=time],input[type=date],input[type=month],input[type=number],input[type=tel],textarea,select{border-radius:10px;border-color:#DCE2E5;transition:border-color .12s,box-shadow .12s}
input[type=text]:focus,input[type=email]:focus,input[type=url]:focus,input[type=search]:focus,input[type=time]:focus,input[type=date]:focus,input[type=month]:focus,input[type=number]:focus,input[type=tel]:focus,textarea:focus,select:focus{outline:0;border-color:var(--button);box-shadow:0 0 0 3px rgba(55,96,143,.14)}
.reply textarea:focus,.fchip select:focus,.search input:focus{box-shadow:none}
.choice{border-color:#DCE2E5;border-radius:12px}
.cat{border-color:#DCE2E5;border-radius:12px}
.side-nav b.hot.bad{background:var(--bad);color:#fff}
/* Meldingen: nieuw valt op tot je hem leest, daarna een gewone regel */
.notif-list li.unread a{background:#FFF4EE;position:relative}
.notif-list li.unread a:hover{background:#FDEBE2}
.notif-list li.unread a::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--accent)}
.notif-list li.unread .notif-text{padding-right:18px}
.notif-list li:not(.unread) .notif-icon{opacity:.55}
.notif-list li:not(.unread) .notif-text>span{color:var(--muted)}
.notif-count{background:var(--grad);color:var(--brand)}
/* Eigen bericht bewerken */
.edited{color:var(--muted);font-style:italic}
details.msg-edit > summary{list-style:none;cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted);width:max-content}
details.msg-edit > summary::-webkit-details-marker{display:none}
details.msg-edit > summary:hover{color:var(--button)}
details.msg-edit[open] > summary{margin-bottom:8px;color:var(--button)}
details.msg-edit[open] ~ .att{display:none}
.bubble:has(> details.msg-edit[open]) > .body,.bubble:has(> details.msg-edit[open]) > details.longmsg{display:none}
/* Opmaak in berichten */
.bubble .body ul,.bubble .body ol{margin:6px 0;padding-left:22px}
.bubble .body li{margin:2px 0}
.bubble .body strong{font-weight:800}
.fmtbar{display:flex;gap:2px;padding:6px 10px 0;flex-wrap:wrap}
.field > .fmtbar,.msg-edit .fmtbar,form > .fmtbar{padding:0 0 4px}
.fmtbar button{font:700 .82rem var(--f-body);color:var(--muted);background:transparent;border:0;border-radius:7px;min-width:30px;height:28px;padding:0 8px;cursor:pointer}
.fmtbar button:hover{background:var(--surface-3);color:var(--ink)}
.fmtbar button:focus-visible{outline:2px solid var(--button);outline-offset:1px}
.fmtbar .fmt-vet{font-weight:900}
.fmtbar .fmt-cursief{font-style:italic;font-family:Georgia,serif}
.att-img{display:block;width:max-content;max-width:100%;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.att-img img{display:block;max-width:min(420px,100%);max-height:320px;object-fit:contain;background:var(--surface-2)}
.att-img:hover{box-shadow:0 0 0 2px var(--button)}
/* Beheer */
.admin-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:5px;width:max-content;max-width:100%}
.admin-tabs a{font:700 .86rem var(--f-body);color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:10px}
.admin-tabs a:hover{color:var(--ink);background:var(--surface-2)}
.admin-tabs a[aria-current=true]{background:var(--brand);color:#fff}
.admin-about{font-size:.9rem;color:var(--muted);margin-top:-4px}
.jump{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.84rem}
.jump a{color:var(--button);font-weight:700;text-decoration:none}
.jump a:hover{text-decoration:underline}
h2[id]{scroll-margin-top:90px}
.card > h2,.card > .stack-s > h2{font-size:1.06rem;font-weight:800}
.org-mark.sm{width:32px;height:32px;border-radius:9px;font-size:.7rem}
.org-mark.lg{width:60px;height:60px;border-radius:16px;font-size:1.1rem}
.org-mark.lg::after{height:4px}
.org-row{display:flex;align-items:center;gap:12px;color:var(--ink)!important;text-decoration:none!important}
.org-row:hover b{text-decoration:underline}
.org-row > span:last-child{display:grid;gap:2px}
.org-tags{display:inline-flex;gap:4px;flex-wrap:wrap}
.org-tags span{font:700 .66rem var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-3);border-radius:5px;padding:1px 6px}
.org-tags span.test{color:var(--accent-text);background:var(--open-bg)}
.count-link{font:800 .95rem var(--f-display);color:var(--ink)!important}
.org-hero{display:flex;gap:16px;align-items:center;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:18px 20px}
.org-hero h1{font-size:1.45rem}
.org-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.88rem}
.org-facts a{color:var(--ink);font-weight:700;text-decoration:none}
.org-facts a:hover{text-decoration:underline}
/* Bevestiging als melding rechtsonder */
.toast{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px));background:var(--brand);color:#fff;font-weight:600;border-radius:12px;padding:12px 16px;box-shadow:0 12px 32px rgba(25,35,39,.25);cursor:pointer;animation:toast-in .25s ease-out;transition:opacity .25s,transform .25s}
.toast.out{opacity:0;transform:translateY(8px)}
.toast-check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--grad);position:relative}
.toast-check::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid var(--brand);border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.flash-only:has(> .toast:only-child){display:contents}
/* Lege schermen: een uitnodiging, geen kale tekst */
.empty{background:var(--surface);border:0;box-shadow:var(--shadow);border-radius:18px;padding:40px 28px;justify-items:center;gap:8px}
.empty::before{content:"";width:56px;height:56px;border-radius:16px;margin-bottom:6px;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23F6C14E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/26px no-repeat}
.empty.small{padding:20px;box-shadow:none;background:var(--surface-2)}
.empty.small::before{display:none}
.empty p b{font:800 1.05rem var(--f-display)}
.empty .muted{max-width:34rem}
@media (max-width:640px){.toast{right:16px;left:16px;bottom:16px;max-width:none}}
/* Sorteerbare kolomkoppen in de takenlijst */
th a.sort{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
th a.sort:hover{color:var(--ink)}
th a.sort::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:4px;opacity:0}
th a.sort:hover::after{opacity:.4}
th a.sort.on{color:var(--ink)}
th a.sort.on::after{opacity:1;border-top-color:transparent;border-bottom-color:currentColor;margin-top:-4px}
th a.sort.on.desc::after{border-bottom-color:transparent;border-top-color:currentColor;margin-top:4px}
details.taskgroup.g-all > summary{pointer-events:none}
details.taskgroup.g-all > summary::before{display:none}
table.tasks th:nth-child(1){width:22%}table.tasks th:nth-child(2){width:11%}table.tasks th:nth-child(3){width:14%}table.tasks th:nth-child(4){width:9%}
table.tasks th:nth-child(5){width:10%}table.tasks th:nth-child(6){width:12%}table.tasks th:nth-child(7){width:9%}table.tasks th:nth-child(8){width:13%}
table.tasks td.nowrap{white-space:normal}
table.tasks .slacell span{overflow-wrap:normal;word-break:normal}

/* ==========================================================================
   Eén lijn voor dashboard, tickets en taken: dezelfde kop, tegels, filterbalk,
   lijstkaart en tabel. Wat hetzelfde betekent, ziet er hetzelfde uit.
   ========================================================================== */
/* Kop */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.eyebrow,.hero-date{font:800 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero .hero-date{color:var(--on-brand-muted)}
.page-head h1,.hero h1{font-size:clamp(1.45rem,2.2vw,1.85rem);font-weight:800;letter-spacing:-.02em}
.page-line{font-size:.95rem;color:var(--muted)}
.page-line b{color:var(--ink);font-weight:800}
/* Tegels: licht op lijstpagina's, donker in de begroeting */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.stat{display:grid;gap:4px;align-content:start;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;color:var(--ink);text-decoration:none;transition:box-shadow .15s,transform .15s}
a.stat:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px);color:var(--ink)}
.stat b{font:800 1.75rem/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-size:.8rem;font-weight:600;color:var(--muted);line-height:1.3}
.stat.on{box-shadow:var(--shadow),inset 0 0 0 2px var(--brand)}
.stat.bad b{color:var(--bad)}
.stat.warn b,.stat.accent b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats.dark .stat{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff}
.stats.dark a.stat:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.stats.dark .stat span{color:var(--on-brand-soft)}
.stats.dark .stat.bad b{color:#FF8A6A}
.hero .stats{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
/* Filterbalk */
.filters{gap:8px}
.clear-filters{font-size:.84rem;font-weight:700;color:var(--button);text-decoration:none}
.clear-filters:hover{text-decoration:underline}
/* Lijstkaart met een kop: tickets, taakgroepen en dashboardblokken */
.list-head,details.taskgroup > summary,.dash-h{min-height:52px}
.list-title,details.taskgroup > summary .sec-h,.dash-card .dash-h .sec-h{font:800 1rem var(--f-display);margin:0;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.count,details.taskgroup .count{font:800 .72rem var(--f-display);color:var(--muted);background:var(--surface-3);border-radius:99px;padding:2px 9px;vertical-align:middle}
.list-hint,details.taskgroup > summary .small{font-size:.84rem;color:var(--muted);font-weight:500}
.inbox .bulkbar{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 18px;gap:10px 12px}
.inbox .bulkbar b,.inbox .bulkbar [data-bulkcount]{color:var(--muted);font-weight:500}
.inbox:has(input[data-check]:checked) .bulkbar{background:var(--select)}
.inbox:has(input[data-check]:checked) [data-bulkcount]{color:var(--info);font-weight:800}
details.taskgroup{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);margin-top:0;overflow:hidden}
details.taskgroup + details.taskgroup{margin-top:16px}
details.taskgroup > summary{margin:0;padding:10px 18px;align-items:center;border-bottom:1px solid transparent}
details.taskgroup[open] > summary{border-bottom-color:var(--line)}
details.taskgroup .tbl{box-shadow:none;border-radius:0;background:transparent}
details.taskgroup .showmore{margin:0;padding:10px 18px;border-top:1px solid var(--line)}
details.taskgroup .showmore label{border:0;background:transparent;padding:4px}
/* Tabel: dezelfde maat, koppen en cellen */
.inbox table th,table.tasks th{font:700 .68rem var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#7A8A91;padding:12px 14px;border-bottom:1px solid var(--line)}
.inbox td,table.tasks td{padding:12px 14px;vertical-align:middle}
.inbox td:first-child,.inbox th:first-child{padding-left:18px}
.inbox .subj,table.tasks .subj{font:700 .95rem var(--f-display);color:var(--ink);text-decoration:none}
.inbox .sub2,table.tasks .sub2{font-size:.78rem;color:var(--muted);margin-top:2px}
.inbox td.c-ago{text-align:left}
.inbox td:last-child,.inbox th:last-child{text-align:left}
/* Prioriteit: één label voor tickets en taken */
.chip-prio{display:inline-block;font:700 .76rem var(--f-body);border-radius:99px;padding:3px 10px;white-space:nowrap;background:var(--surface-3);color:var(--ink)}
.chip-prio.cp1{background:var(--bad);color:#fff}
.chip-prio.cp2{background:var(--open-bg);color:var(--accent-text)}
.chip-prio.cp4{color:var(--muted)}
table.tasks .qsel{font:700 .76rem var(--f-body)!important;border-radius:99px;padding:3px 26px 3px 10px;min-height:0;background-color:var(--surface-3)!important;color:var(--ink)!important;background-position:right 9px center;background-size:8px 5px}
table.tasks .qsel.prio-2{background-color:var(--open-bg)!important;color:var(--accent-text)!important}
table.tasks .qsel.prio-4{color:var(--muted)!important}
/* Status in een keuzelijst: dezelfde stip en tekst als elders, met een pijltje */
table.tasks .qsel[name=status]{background-color:transparent!important;padding-left:16px;font-weight:600!important;
  background-image:radial-gradient(circle at 5px 50%,var(--dot,var(--calm)) 4px,transparent 4.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6B73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left center,right 9px center;background-size:auto,8px 5px}
table.tasks .qsel[name=status]:hover{background-color:var(--surface-3)!important}
.qsel.st-new{--dot:var(--button)}.qsel.st-in_progress{--dot:var(--accent)}.qsel.st-waiting_third{--dot:var(--calm)}.qsel.st-waiting_customer{--dot:var(--gold)}.qsel.st-resolved{--dot:var(--ok)}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .stat{padding:10px 12px}
  .stat b{font-size:1.2rem}
  .stat span{font-size:.72rem}
  .page-head{align-items:flex-start}
}
table.tasks .qsel{field-sizing:content;width:auto;max-width:100%}
/* Mobiel: één kaart per lijst, rijen gescheiden door een lijn (geen kaarten in kaarten) */
@media (max-width:640px){
  .inbox tr{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"ticket ticket ticket" "org org sla" "prio status who";gap:6px 10px;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;padding:14px 16px;border-top:1px solid var(--line)}
  .inbox tbody tr:first-child{border-top:0}
  .inbox .c-sla{justify-self:end;align-self:center}
  .inbox .c-prio{align-self:center}
  .inbox .c-status{align-self:center}
  .inbox .c-assignee{align-self:center}
  .inbox .bulkbar{display:flex}
  .inbox .bulkbar select,.inbox .bulkbar button,.inbox .bulkbar .list-hint{display:none}
}
@media (max-width:760px){
  table.tasks tbody{gap:0}
  table.tasks tr{border:0;border-radius:0;background:transparent;padding:14px 16px;border-top:1px solid var(--line)}
  table.tasks tbody tr:first-child{border-top:0}
  .page-head .btn{align-self:flex-start}
}
@media (max-width:640px){.inbox td,.inbox td:first-child{padding:0}.inbox .c-sla .slacell{max-width:none;white-space:nowrap}}
@media (max-width:760px){table.tasks td{padding:0}table.tasks tr{gap:8px 12px}}
/* Taakkaart op mobiel: zelfde indeling als een ticketkaart */
@media (max-width:760px){
  table.tasks tr{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"ticket ticket ticket" "org org sla" "prio status who";gap:6px 10px}
  table.tasks td.c-ticket{grid-area:ticket}table.tasks td.c-org{grid-area:org}table.tasks td.c-sla{grid-area:sla;justify-self:end}
  table.tasks td.c-prio{grid-area:prio}table.tasks td.c-status{grid-area:status}table.tasks td.c-people{grid-area:who;justify-self:end;text-align:right}
  table.tasks td.c-time,table.tasks td.c-last{display:none}
  table.tasks td.c-ticket,table.tasks td.c-last{grid-column:auto}
  table.tasks td.c-people .sub2{display:none}
}
@media (max-width:760px){table.tasks .c-sla .ring{display:none}}
table.tasks th:nth-child(1){width:21%}table.tasks th:nth-child(3){width:13%}table.tasks th:nth-child(5){width:12%}table.tasks th:nth-child(6){width:12%}table.tasks th:nth-child(7){width:8%}table.tasks th:nth-child(8){width:14%}
/* Dashboard: nieuwe reacties, vandaag en morgen, wacht lang */
.dash-grid.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.dash-grid.even.solo{grid-template-columns:minmax(0,1fr)}
.dash-grid + .dash-grid{margin-top:0}
.reply-feed,.agenda{list-style:none;margin:0;padding:0;display:grid}
.reply-feed li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 2px;border-top:1px solid var(--line)}
.reply-feed li:first-child{border-top:0}
.reply-feed li.unread .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.rf-main{display:grid;gap:2px;min-width:0;color:var(--ink);text-decoration:none}
.rf-main:hover .rf-subj{text-decoration:underline}
.rf-top{display:flex;gap:6px;align-items:baseline;font-size:.84rem;min-width:0}
.rf-ago{margin-left:auto;font-size:.78rem;color:var(--muted);white-space:nowrap}
.rf-subj{font:700 .92rem var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-feed li.unread .rf-subj::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:2px}
.rf-body{font-size:.84rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid var(--line)}
.agenda li:first-child{border-top:0}
.ag-time{font:800 .76rem var(--f-display);color:var(--muted);font-variant-numeric:tabular-nums}
.agenda .subj{font:700 .9rem var(--f-display);color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda .subj:hover{text-decoration:underline}
.ag-meta{display:inline-flex;gap:6px;align-items:center;font-size:.8rem;color:var(--muted);white-space:nowrap}
.ag-more{grid-template-columns:1fr!important}
.dash-sub{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
@media (max-width:860px){.dash-grid.even{grid-template-columns:minmax(0,1fr)}.agenda li{grid-template-columns:56px minmax(0,1fr)}.ag-meta{grid-column:2}}

/* Leesbaarheid (WCAG AA, minstens 4,5:1 voor tekst): het verloop alleen op donker, op licht een stevige kleur */
.stat.warn b,.stat.accent b,.tile.warn b,.tile.accent b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-text)}
.stats.dark .stat.warn b,.stats.dark .stat.accent b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
th,.inbox table th,table.tasks th{color:var(--muted)}
.side-h{color:var(--on-brand-muted)}
.bubble .tag-new,.badge-new{background:var(--accent-text);color:#fff}
.side-nav b.hot{color:var(--brand)}
.eyebrow{color:var(--muted)}
/* Klantoverzicht */
.list-card{padding:0;overflow:hidden}
.list-card > .list-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line)}
.cust-wait,.cust-list{list-style:none;margin:0;padding:0;display:grid}
.cust-wait li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.cust-wait li:first-child{border-top:0}
.cust-wait .avatar{width:40px;height:40px}
.cw-main{display:grid;gap:3px;min-width:0}
.cw-main .subj,.cl-main .subj{font:700 .95rem var(--f-display);color:var(--ink);text-decoration:none}
.cw-main .subj:hover,.cl-main .subj:hover{text-decoration:underline}
.cw-msg{font-size:.86rem;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cust-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--line)}
.cust-list li:first-child{border-top:0}
.cl-main{display:grid;gap:3px;min-width:0}
.cl-main .subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-meta{display:flex;gap:10px;align-items:center;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.cl-meta .pill{font-size:.8rem}
.cl-who{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;white-space:nowrap}
.cl-who .avatar.xs{margin-left:0}
.cust-list li.done .subj{color:var(--muted);font-weight:600}
@media (max-width:640px){.cust-wait li{grid-template-columns:auto minmax(0,1fr)}.cust-wait .btn{grid-column:1/-1;justify-self:start}.cust-list li{grid-template-columns:minmax(0,1fr)}}
/* Klant: ticketlijst als één kaart met rijen */
.list{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);gap:0;overflow:hidden}
.list .trow{border-radius:0;box-shadow:none;border:0;border-top:1px solid var(--line);padding:14px 18px}
.list .trow:first-child{border-top:0}
.list .trow:hover{background:#FAFBFB}
.trow .sub{font:700 .95rem var(--f-display)}
/* Voorbeeld van de opmaak en de knop naar het antwoordvenster */
.fmtbar .fmt-voorbeeld{margin-left:auto;color:var(--button)}
.fmtbar .fmt-voorbeeld[aria-pressed=true]{background:var(--select)}
.fmtbar button:disabled{opacity:.35;cursor:default}
.fmt-preview{padding:12px 14px;font-size:.95rem;line-height:1.6;background:var(--surface-2);border-radius:10px;overflow-wrap:anywhere}
.reply .fmt-preview{border-radius:0;background:var(--surface-2)}
.fmt-preview ul,.fmt-preview ol{margin:6px 0;padding-left:22px}
.fmt-preview strong{font-weight:800}
.jump-reply{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font:700 .88rem var(--f-body);text-decoration:none;border-radius:99px;padding:10px 18px 10px 14px;box-shadow:0 10px 28px rgba(25,35,39,.28);animation:toast-in .2s ease-out}
.jump-reply::before{content:"";width:8px;height:8px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.jump-reply:hover{background:var(--brand-3);color:#fff}
/* Het antwoordvenster sluit het gesprek duidelijk af */
.reply{margin-top:6px;box-shadow:var(--shadow-hover)}
.reply .rt{background:var(--surface-2)}
@media (max-width:640px){.cust-wait .btn{grid-column:2}}
/* Dashboard compacter: twee kolommen met eigen hoogte, strakkere kaarten */
.dash-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.dash-col{display:grid;gap:16px;align-content:start;min-width:0}
.dash-card{padding:16px 18px;gap:6px}
.dash-card .dash-h{min-height:0;margin-bottom:4px}
.now-list li{padding:9px 2px;gap:12px}
.now-list .ring{width:36px;height:36px}.now-list .ring i{width:28px;height:28px;font-size:9.5px}
.reply-feed li{padding:9px 2px}
.agenda li{padding:7px 2px}
.dash-sub{margin:4px 0 0}
.dash-stats{gap:8px}.dash-stats div{padding:8px 12px}
.workload{gap:9px}
.workload .avatar{width:28px;height:28px;font-size:.62rem}
.workload .gbar{height:6px}
.wl-main{gap:4px}
.workload-wrap:has(#wl-all:not(:checked)) li.extra{display:none}
.wl-toggle{display:block;margin-top:8px;font-size:.84rem;font-weight:700;color:var(--button);cursor:pointer}
#wl-all:not(:checked) + .wl-toggle .less,#wl-all:checked + .wl-toggle .more{display:none}
#wl-all:focus-visible + .wl-toggle{outline:2px solid var(--button);outline-offset:2px;border-radius:6px}
/* Begroeting: tegels op één regel naast de tekst */
.hero{grid-template-columns:minmax(0,1fr) auto;padding:24px 28px;gap:20px 28px}
.hero .stats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(96px,118px)}
.hero .stat{padding:12px 14px}
.hero .stat b{font-size:1.5rem}
@media (max-width:1280px){.hero{grid-template-columns:minmax(0,1fr)}.hero .stats{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}}
@media (max-width:980px){.dash-cols{grid-template-columns:minmax(0,1fr)}}
/* Rapportage: aantal open en "in gevaar" op één lijn, klikbaar */
.open-cell{display:inline-flex;align-items:center;gap:10px}
.risk-chip{display:inline-flex;align-items:center;gap:6px;font:600 .78rem var(--f-body);color:var(--warn);background:var(--warn-bg);border-radius:99px;padding:2px 9px;text-decoration:none;line-height:1.4}
.risk-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
a.risk-chip:hover{background:#FBE5B5;color:var(--warn)}
.count-link{font-weight:700;text-decoration:none}
.count-link:hover{text-decoration:underline}
/* Klantenlijst: namen niet zo zwaar, labels kleiner */
.org-row b{font:600 .95rem var(--f-body);color:var(--ink)}
.org-tags span{font:600 .62rem var(--f-body);letter-spacing:.03em;padding:0 5px}
.org-row{gap:10px}
.org-row > span:last-child{gap:1px}
.org-row > span:last-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}