:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#f3f4f6;--card:#fff;--ink:#1d2430;--mute:#667085;--line:#d9dde4;--k:#2f5d8a;--b:#c4562a;--ok:#1f7a4d;--bad:#b42318;--warn:#9a6700;--soft:#eef0f3}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#14171c;--card:#1d2229;--ink:#e8ebf0;--mute:#9aa3b0;--line:#323a45;--k:#6ea3d8;--b:#ee8a5e;--ok:#4cc38a;--bad:#ff8a80;--warn:#e3b341;--soft:#262c35}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#14171c;--card:#1d2229;--ink:#e8ebf0;--mute:#9aa3b0;--line:#323a45;--k:#6ea3d8;--b:#ee8a5e;--ok:#4cc38a;--bad:#ff8a80;--warn:#e3b341;--soft:#262c35}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:14px}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
h1{font-size:20px;margin:0;font-weight:700}
.note{font-size:12.5px;color:var(--mute);margin:0 0 12px}
.btn{text-decoration:none;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 12px;cursor:pointer;min-height:38px}
.btn:hover{background:var(--soft)}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.btn.bad{color:var(--bad)}
.tabs{display:flex;gap:6px}
.tabs .btn[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.bar h2{font-size:17px;margin:0 6px;min-width:150px;text-transform:capitalize}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--mute);margin:0 0 10px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dow{background:var(--soft);padding:6px;font-size:12px;text-align:center;color:var(--mute)}
.day{background:var(--card);min-height:96px;padding:4px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.day.off{background:var(--soft);opacity:.7}
.day .n{font-size:12px;color:var(--mute);padding:0 2px}
.day.today .n{color:var(--bg);background:var(--ink);border-radius:10px;padding:0 6px;align-self:flex-start;font-weight:700}
.chip{display:block;width:100%;text-align:left;border-radius:5px;padding:2px 5px;font-size:11.5px;line-height:1.3;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:2px solid}
.chip.k{--c:var(--k)}.chip.b{--c:var(--b)}
.chip.conf{background:var(--c);border-color:var(--c);color:#fff}
.dark-chip{color:#101418}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.conf{color:#101418}}
:root[data-theme="dark"] .chip.conf{color:#101418}
.chip.opt{background:transparent;border-style:dashed;border-color:var(--c);color:var(--c);font-weight:600}
.bar-hall{display:inline-block;width:8px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:16px;z-index:20}
.overlay.on{display:flex}
.modal{background:var(--card);border-radius:12px;max-width:560px;width:100%;padding:16px;margin:auto}
.modal h3{margin:0 0 10px;font-size:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{display:block;font-size:13px;color:var(--mute);margin-bottom:8px}
label input,label select{display:block;width:100%;margin-top:3px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-height:38px}
.halls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.hallbtn{border:2px solid var(--line);border-radius:10px;padding:9px;background:var(--bg);cursor:pointer;text-align:left}
.hallbtn[aria-pressed=true].k{border-color:var(--k);background:color-mix(in srgb,var(--k) 14%,var(--card))}
.hallbtn[aria-pressed=true].b{border-color:var(--b);background:color-mix(in srgb,var(--b) 14%,var(--card))}
.hallbtn b{display:block}
.st{font-size:12.5px;display:block;margin-top:2px}
.st.ok{color:var(--ok)}.st.bad{color:var(--bad)}.st.warn{color:var(--warn)}
.msg{border-radius:8px;padding:8px 10px;font-size:13.5px;margin-bottom:10px;background:var(--soft)}
.msg.bad{border:1px solid var(--bad);color:var(--bad)}
.msg.ok{border:1px solid var(--ok);color:var(--ok)}
.chk{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:14px;padding:8px 10px;border:1px dashed var(--line);border-radius:8px}
.chk input{width:auto;margin:0;min-height:0}
.acts{display:flex;gap:8px;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{border:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top;font-size:14px}
th{background:var(--soft)}
td.pen{width:18%;height:46px}
td.nw{white-space:nowrap}
.sub{color:var(--mute);font-size:12.5px}
tr.opt-r td{border-style:dashed}
.tag{font-size:12px;font-weight:700}
.opt-t{color:var(--warn)}
.printhead{display:none}
.tblwrap{overflow-x:auto}
@media (max-width:640px){.day{min-height:70px}.chip{font-size:10.5px;padding:1px 3px}.grid2{grid-template-columns:1fr 1fr}}
@media print{
 :root{--bg:#fff;--card:#fff;--ink:#000;--line:#555;--soft:#eee;--mute:#333;padding:0}
 body{background:#fff;color:#000;font-size:12px}
 .noprint{display:none!important}
 .printhead{display:block;margin-bottom:8px}
 .printhead h1{font-size:18px}
 th,td{font-size:12px;padding:7px 6px}
 td.pen{height:42px}
 tr{break-inside:avoid}
 .wrap{padding:0;max-width:none}
 .tblwrap{overflow:visible}
 table{width:calc(100% - 2px)}
}
/* login, gebruikers */
.box{max-width:420px;margin:8vh auto;background:var(--card);border-radius:12px;padding:20px}
.box h1{margin-bottom:14px}
.inline{display:inline}
.err{color:var(--bad);font-size:13px;margin:-4px 0 8px}
details{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:8px}
summary{cursor:pointer}
a{color:inherit}