:root{--bg:#f4f6f9;--card:#fff;--ink:#14212e;--muted:#66768a;--line:#dde3ea;--brand:#0b2a4a;--acc:#f5b400;--ok:#15803d;--warn:#b45309;--bad:#b91c1c;--blue:#1d4ed8}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.top{display:flex;align-items:center;gap:24px;padding:10px 20px;background:var(--brand);color:#fff}
.top a{color:#fff}.brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px}
.brand small{font-weight:400;opacity:.7;font-size:12px;margin-left:4px}
.logo{width:22px;height:22px;border-radius:5px;background:url(/static/favicon.svg) center/cover}
nav.main{display:flex;gap:4px}nav.main a{padding:6px 10px;border-radius:6px;opacity:.85}nav.main a.on,nav.main a:hover{background:rgba(255,255,255,.12);opacity:1;text-decoration:none}
.who{margin-left:auto;display:flex;gap:10px;align-items:center;opacity:.9}
button{font:inherit;background:var(--brand);color:#fff;border:0;border-radius:6px;padding:7px 14px;cursor:pointer}
button.alt{background:#475569}button.link{background:none;color:#fff;text-decoration:underline;padding:0}
button:disabled{opacity:.5;cursor:default}
main{max-width:1280px;margin:20px auto;padding:0 20px}
h1{font-size:20px;margin:0 0 12px}h2{font-size:16px;margin:0 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.login{max-width:420px;margin:60px auto}
label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px;margin-bottom:10px}
label small{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:400}
textarea{width:100%;resize:vertical}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}.grid .wide{grid-column:1/-1}
label.check{flex-direction:row;align-items:center;font-weight:400}
.err{color:var(--bad);font-weight:600}.ok{color:var(--ok);font-weight:600}.muted{color:var(--muted)}
.empty{color:var(--muted);padding:30px;text-align:center;background:var(--card);border:1px dashed var(--line);border-radius:10px}
.tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tabs a{padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--acc);color:#111;font-size:11px;text-align:center}
table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.list th,table.list td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.list th{background:#eef2f6;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
table.small td,table.small th{padding:5px 8px;font-size:13px}
tr.intern td{background:#fbf8ef}
.prio{display:inline-block;padding:1px 7px;border-radius:5px;font-weight:700;font-size:12px;background:#e2e8f0}
.prio-P1{background:#fee2e2;color:var(--bad)}.prio-P2{background:#ffedd5;color:var(--warn)}.prio-P3{background:#e0e7ff;color:var(--blue)}
.st{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;background:#e2e8f0}
.st-nieuw{background:#fef3c7}.st-open,.st-in_behandeling{background:#dbeafe}.st-wacht_op_klant,.st-wacht_op_derde{background:#ede9fe}
.st-opgelost{background:#dcfce7}.st-gesloten{background:#e5e7eb;color:var(--muted)}
.plan{padding:0 6px;border-radius:4px;font-size:11px;background:#e2e8f0}.plan-gold{background:#fde68a}.plan-platinum{background:#cbd5e1}.plan-silver{background:#f1f5f9}
.sla{display:inline-block;padding:1px 7px;border-radius:5px;font-size:12px;background:#dcfce7;color:var(--ok);margin:1px 0}
.sla-75{background:#fef3c7;color:var(--warn)}.sla-90{background:#ffedd5;color:#c2410c}
.sla-geschonden{background:#fee2e2;color:var(--bad);font-weight:700}.sla-gepauzeerd{background:#ede9fe;color:#6d28d9}.sla-gehaald{background:#f1f5f9;color:var(--muted)}
.ticket .meta{margin:4px 0;color:var(--muted)}
.clocks{display:flex;gap:20px;margin:12px 0;flex-wrap:wrap}.clockbox{min-width:260px}
.bar{height:6px;background:#e5e7eb;border-radius:3px;margin:6px 0 3px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ok)}
.body{white-space:pre-wrap;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.actions{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}.actions form{display:flex;gap:8px;align-items:flex-end}.actions label{margin:0}
.tl{list-style:none;margin:0 0 14px;padding:0}
.ev{border-left:3px solid var(--line);padding:6px 12px;margin-bottom:8px}
.ev-comment_public{border-color:var(--blue)}.ev-comment_internal{border-color:var(--acc);background:#fffbeb}.ev-sla{border-color:var(--bad)}
.evh{font-size:12px;color:var(--muted)}.evh b{color:var(--ink)}.evb{white-space:pre-wrap;margin-top:3px}.evp{font-size:12px;color:var(--muted)}
.comment .row{display:flex;gap:8px;margin-top:8px}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.inline label{margin:0}
.msg{max-width:560px;margin:40px auto;text-align:center}
.bar i.w0{width:0%}
.bar i.w5{width:5%}
.bar i.w10{width:10%}
.bar i.w15{width:15%}
.bar i.w20{width:20%}
.bar i.w25{width:25%}
.bar i.w30{width:30%}
.bar i.w35{width:35%}
.bar i.w40{width:40%}
.bar i.w45{width:45%}
.bar i.w50{width:50%}
.bar i.w55{width:55%}
.bar i.w60{width:60%}
.bar i.w65{width:65%}
.bar i.w70{width:70%}
.bar i.w75{width:75%}
.bar i.w80{width:80%}
.bar i.w85{width:85%}
.bar i.w90{width:90%}
.bar i.w95{width:95%}
.bar i.w100{width:100%}
.bar i.w75,.bar i.w80,.bar i.w85{background:var(--warn)}.bar i.w90,.bar i.w95{background:#c2410c}.bar i.w100{background:var(--bad)}