/* 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:#FFF6E0; --note-line:#F0D48A;
  --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.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=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)}
.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)}
.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}
td.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}
.inbox tr.unread td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.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}
.savebox .row{margin-top:8px}

.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(--note-bg);border-color:var(--note-line)}
.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}

/* 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-left:3px solid var(--accent);border-radius:0 10px 10px 0;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 */
.meter{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.meter span{display:block;height:100%;background:var(--ok)}
.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)}

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