/* Shiftje-huisstijl v1.2: Nunito (SIL OFL 1.1, zelf gehost), merkkleuren als custom properties hieronder */
@font-face{font-family:"Nunito";src:url("fonts/Nunito.ttf") format("truetype");font-weight:200 1000;font-style:normal;font-display:swap}
:root{--sj-navy:#0F2D5B;--sj-orange:#FF8A00;--sj-orange-text:#A65300;--sj-light:#E8EDF4;--sj-white:#FFFFFF;--brand:var(--sj-navy);--brand2:var(--sj-orange);--bg:#f4f7f6;--card:#fff;--text:#1f2933;--muted:#6b7a86;--line:#e3e8ea;--err:#c0392b;--warn:#b7791f;--ok:#15803d}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 "Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--brand)}h1{font-size:1.5rem;margin:0 0 1rem}h2{font-size:1.1rem;margin:0 0 .8rem}
.top{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--brand);color:#fff;position:sticky;top:0;z-index:10}
.top a{color:#fff;text-decoration:none}.top .company{opacity:.8;margin-right:auto}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1rem}.brand.big{font-size:1.6rem;justify-content:center;color:var(--brand);margin-bottom:1rem}
.logo{display:inline-grid;place-items:center;width:1.8em;height:1.8em;border-radius:.5em;background:linear-gradient(135deg,var(--brand2),#0b4f4a);color:#fff;font-weight:800}
.bell{position:relative}.bell b{position:absolute;top:-.5em;right:-.8em;background:#f59e0b;border-radius:1em;padding:0 .4em;font-size:.7rem}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.4rem}
.wrap{display:flex;min-height:calc(100vh - 52px)}
.side{width:210px;background:#fff;border-right:1px solid var(--line);padding:1rem 0;flex-shrink:0}
.side a{display:block;padding:.55rem 1.2rem;color:var(--text);text-decoration:none}.side a.on,.side a:hover{background:#e6f4f1;color:var(--brand);font-weight:600}
main{flex:1;padding:1.5rem;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem;margin-bottom:1rem;overflow-x:auto}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stat small{display:block;color:var(--muted)}.stat b{display:block;font-size:1.4rem;margin:.2rem 0}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.5rem;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:.8rem;color:var(--muted);text-transform:uppercase}
tr.total td{font-weight:700}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem 1rem;align-items:end}.form h2,.form .wide,.form .actions,.form fieldset{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted)}label.check{flex-direction:row;align-items:center;gap:.4rem;color:var(--text)}
input,select{font:inherit;padding:.5rem .6rem;border:1px solid #cfd8dc;border-radius:8px;background:#fff;color:var(--text)}input[type=checkbox]{width:auto}input[type=color]{padding:0;width:3rem;height:2.3rem}
fieldset{border:1px solid var(--line);border-radius:8px;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.btn{display:inline-block;font:inherit;padding:.5rem .9rem;border-radius:8px;border:1px solid #cfd8dc;background:#fff;color:var(--text);cursor:pointer;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.danger{background:var(--err);border-color:var(--err);color:#fff}.btn.big{font-size:1.2rem;padding:1rem 1.6rem}.btn:disabled{opacity:.5}
button.link{background:none;border:0;color:var(--brand);cursor:pointer;padding:0;text-decoration:underline}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem}.bar h1{margin:0 auto 0 0}.bar label{flex-direction:row;align-items:center}
.inline{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap}.actions{display:flex;gap:.5rem;flex-wrap:wrap}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.5rem}.row.indent{margin-left:2rem}.row.perms{padding:.5rem 0;border-bottom:1px solid var(--line)}
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;background:#dcfce7;color:var(--ok)}.flash.err{background:#fde2e1;color:var(--err)}.flash.warn{background:#fef3c7;color:var(--warn)}
.muted{color:var(--muted)}.warn-text{color:var(--warn)}
.badge{display:inline-block;padding:.1rem .5rem;border-radius:1em;background:#e5e7eb;font-size:.8rem}.s-approved{background:#dcfce7;color:var(--ok)}.s-pending{background:#fef3c7;color:var(--warn)}.s-declined{background:#fde2e1;color:var(--err)}.s-open{background:#dbeafe}
.sched-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
.sched{min-width:1000px}.sched th:first-child{width:160px}.sched td.cell{min-height:60px;height:60px;border-left:1px solid var(--line);width:12%}
.sched td.cell.over{background:#e6f4f1}.sched tr.openrow{background:#fffbeb}.sched .tot{font-weight:600;white-space:nowrap}
.shift{--c:#3b82f6;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);border-radius:6px;padding:.25rem .4rem;margin-bottom:.3rem;font-size:.8rem;display:flex;flex-direction:column}
.shift[draggable=true]{cursor:grab}.shift.draft{background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.05) 6px 12px)}.shift i{color:var(--muted)}.shift a{font-size:.7rem}
.absence{background:#fde2e1;color:var(--err);font-size:.75rem;border-radius:4px;padding:.1rem .3rem;margin-bottom:.2rem}
.avail{font-size:.7rem;border-radius:4px;padding:0 .3rem;margin-bottom:.2rem}.avail.available{background:#dcfce7}.avail.unavailable{background:#e5e7eb;text-decoration:line-through}.avail.partial{background:#fef3c7}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}.cal .day{border:1px solid var(--line);border-radius:8px;padding:.4rem;min-height:70px;font-size:.85rem;display:flex;flex-direction:column}
.cal .available{background:#dcfce7}.cal .unavailable{background:#f1f1f1}.cal .partial{background:#fef3c7}.cal i{font-size:.75rem;color:var(--muted)}
.clock{text-align:center}.clock-now{font-size:4rem;font-weight:700;color:var(--brand)}.clock-btns{display:flex;flex-direction:column;align-items:center;gap:1rem}
.notes{list-style:none;margin:0;padding:0}.notes li{padding:.6rem 0;border-bottom:1px solid var(--line)}.notes li.unread{font-weight:600}
.todo li{margin:.3rem 0}.details{font-family:monospace;font-size:.75rem;max-width:380px;word-break:break-all}
body.login{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg,#0f766e,#134e4a)}.login-card{width:min(380px,92vw);display:flex;flex-direction:column;gap:1rem}
/* Huisstijl v2: gedeelde stijl voor desktop en mobiel (kleuren, lettertype, kaarten, knoppen, tabellen, formulieren) */
:root{--brand:var(--sj-navy);--brand2:var(--sj-orange);--bg:var(--sj-light);--card:#fff;--text:var(--sj-navy);--muted:#4A5F80;--line:#D2DAE6;--err:#d92d20;--warn:#b45309;--ok:#1f9d55;--ink:var(--sj-navy);--pill:#D6DFEC;--soft:#F3F6FA}
body{font-family:"Nunito","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--link)}h1{font-size:1.6rem;font-weight:800;letter-spacing:-.01em}h2{font-size:1.02rem;font-weight:700}
.top{background:#fff;color:var(--text);border-bottom:1px solid var(--line);padding:.6rem 1.25rem}
.top a{color:var(--text)}.top .company{color:var(--muted);opacity:1}.top .me{font-weight:600}
.logo{background:linear-gradient(120deg,#e35a18,#ea3c55 50%,#dd34de);border-radius:.55em}
.bell{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid #e6e3dc;background:#fff;font-size:.95rem}
.bell b{top:-6px;right:-6px;background:#ef3b2d;color:#fff;border:1.5px solid #fff;font-weight:700}
.side{background:transparent;border-right:1px solid var(--line);padding:1rem .6rem}
.side a{border-radius:10px;padding:.55rem .9rem;margin-bottom:.15rem;font-weight:500}
.side a:hover{background:#ebe8e0;color:var(--text);font-weight:500}.side a.on{background:var(--pill);color:var(--ink);font-weight:700}
main{padding:1.75rem 2rem}
.card{border-color:var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card>h2:first-child,.form>h2:first-of-type{padding-bottom:.55rem;border-bottom:1px solid #f0ede7}
.stat small{font-size:.78rem;font-weight:600;letter-spacing:.02em}.stat b{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}.stat a{font-weight:600;text-decoration:none}
th{font-size:.7rem;letter-spacing:.05em;font-weight:700;color:#777;border-bottom:1px solid #e6e3dc;background:var(--soft)}
th:first-child{border-top-left-radius:8px}th:last-child{border-top-right-radius:8px}
td{border-bottom-color:#f0ede7}table:not(.sched) tr:hover>td{background:#faf9f6}
td a{font-weight:600;text-decoration:none}td a:hover{text-decoration:underline}
input,select,textarea{border-color:#e2ded5;border-radius:8px}input:focus,select:focus{outline:2px solid rgba(15,45,91,.22);outline-offset:0;border-color:var(--brand)}
input.w-num{width:5em}
label{font-weight:600;font-size:.8rem;color:#555}label.check{font-weight:500;font-size:.88rem}
fieldset{border-color:var(--line);border-radius:10px;padding:.6rem .8rem}legend{font-size:.8rem;font-weight:700;color:#555;padding:0 .3rem}
.btn{border-radius:8px;border-color:#e2ded5;font-weight:600;transition:background .15s}.btn:hover{background:var(--soft)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.btn.primary:hover{background:var(--primaryhover)}
.btn.danger{background:var(--err);border-color:var(--err);color:#fff}.btn.danger:hover{background:#b42318}
button.link{color:var(--link);font-weight:600}
.flash{border-radius:10px;border:1px solid #bbf7d0;font-weight:500}.flash.err{border-color:#fecaca}.flash.warn{border-color:#fde68a}
.badge{font-weight:700;font-size:.72rem;padding:.15rem .6rem}
ul.warn{margin:.2rem 0 .4rem;padding:.5rem .8rem .5rem 1.6rem;background:#fef3c7;color:#92400e;border-radius:8px;font-size:.82rem}
.row.perms,.row{border-color:#f0ede7}.row.perms{padding:.6rem 0}
.sched-wrap{border-color:var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}.sched th{background:var(--soft)}.sched td.cell.over{background:#eef1fd}.sched tr.openrow{background:#fff8ec}
.cal .day{border-color:#eeebe5;border-radius:10px;background:#fff}.cal .available{background:#e8f7ee}.cal .unavailable{background:#f1efe9}.cal .partial{background:#fff3d6}
.clock-now{color:var(--text);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.notes li{display:flex;align-items:center;gap:.8rem;border-color:#f0ede7}.notes li>span:last-child{display:flex;flex-direction:column}.notes li small{color:var(--muted);font-weight:500}.notes li.unread .m-mi{background:#ffe4e6;color:#e11d48}
.m-prof{display:flex;align-items:center;gap:.9rem}.m-prof p{margin:0}.m-prof .m-mi{width:46px;height:46px;font-weight:800;font-size:1rem}
.m-mi{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dbeefe;color:#2b8ae6;flex:none;font-weight:700;font-size:.8rem}
body.login{background:radial-gradient(circle at 20% 10%,rgba(255,138,0,.16),transparent 45%),radial-gradient(circle at 85% 90%,rgba(15,45,91,.14),transparent 45%),var(--bg)}.brand.big{color:var(--text)}
.login-card{padding:1.6rem;box-shadow:0 8px 30px rgba(0,0,0,.08)}.login-card .btn.primary{padding:.7rem;font-size:1rem}
@media (max-width:800px){.menu-btn{display:block}.top .company,.top .me{display:none}.side{position:fixed;left:-230px;top:52px;bottom:0;z-index:9;transition:left .2s;box-shadow:2px 0 10px rgba(0,0,0,.1)}body.nav-open .side{left:0}
main{padding:1rem}.two{grid-template-columns:1fr}.cal{grid-template-columns:repeat(2,1fr)}table{font-size:.85rem}}
.m-home,.tabbar{display:none}
@media (max-width:800px){
.top{padding-top:calc(.6rem + env(safe-area-inset-top));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
.side{top:calc(52px + env(safe-area-inset-top))}
main{padding-bottom:calc(5rem + env(safe-area-inset-bottom))}
.tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:11;background:#fff;border-top:1px solid var(--line);padding:.3rem env(safe-area-inset-right) calc(.3rem + env(safe-area-inset-bottom)) env(safe-area-inset-left)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;font:inherit;font-size:.68rem;color:var(--muted);text-decoration:none;background:none;border:0;padding:.2rem 0;cursor:pointer}
.tabbar a.on{color:var(--brand);font-weight:600}
.r-dashboard .top{display:none}.r-dashboard .side{top:0;padding-top:env(safe-area-inset-top)}.r-dashboard main{padding-top:0}
.desk-only{display:none}.m-home{display:block}
.r-dashboard main{background:#f5f3ee;min-height:100vh}
.m-head{display:flex;align-items:center;justify-content:space-between;margin:0 -1rem .8rem;padding:calc(.8rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .6rem max(1rem,env(safe-area-inset-left))}
.m-head>b{font-size:1.3rem}
.m-ico{color:var(--text);position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#ebe8e0}.m-dot{position:absolute;top:4px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--err)}
.m-clockcard{border-radius:16px;padding:1rem;margin-bottom:1rem;color:#fff;background:linear-gradient(110deg,#e8590c,#e11d74 60%,#d63384)}
.m-clockcard p{margin:.3rem 0 .8rem;font-size:.85rem}.m-timer{display:flex;justify-content:space-between;align-items:flex-start}.m-timer b{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.m-timer small{opacity:.9}
.m-btns{display:flex;gap:.6rem}.m-btns>*{flex:1}
.m-clock{display:block;width:100%;padding:.85rem;border:0;border-radius:10px;background:var(--ok);color:#fff;font:inherit;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}.m-clock.out{background:#1f1f1f}.m-clock.alt{background:#f9a8d4;color:#3b0a24}
.m-h{font-size:1rem;margin:.4rem 0 .5rem;display:flex;justify-content:space-between}.m-card{padding:0 1rem}
.m-list{list-style:none;margin:0;padding:0}.m-list li{border-bottom:1px solid var(--line);padding:.7rem 0}.m-list li:last-child{border:0}
.m-list a{display:flex;align-items:center;gap:.8rem;color:var(--text);text-decoration:none}.m-list a>span:nth-last-child(1),.m-list a>span:not(.m-date){flex:1;display:flex;flex-direction:column}.m-list small{color:var(--muted)}
.m-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:8px;background:#f1efe9;font-size:.65rem;color:var(--muted);flex:none!important}.m-date b{color:var(--text);font-size:1rem;line-height:1}
.m-bar{width:4px;height:2.2rem;border-radius:2px;background:var(--ok)}.m-ring{flex:none}
.tabbar a.on{background:#e0e7ff;border-radius:10px}
}
@media (max-width:800px){
.r-dashboard main{background:var(--mbg);font-family:"Nunito","Segoe UI",system-ui,sans-serif;padding-left:max(.85rem,env(safe-area-inset-left));padding-right:max(.85rem,env(safe-area-inset-right))}
.m-head{margin:0 -.85rem .55rem;padding:calc(.7rem + env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) .4rem max(.85rem,env(safe-area-inset-left))}
.m-head>b{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;margin-left:2.4rem}.m-head>a:last-child{margin-left:2.4rem}
.m-ico{width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid #e6e3dc;color:#2b2b2b;box-shadow:0 1px 2px rgba(0,0,0,.04)}.m-dot{top:-3px;right:-3px;width:9px;height:9px;background:#ef3b2d;border:1.5px solid var(--mbg)}
.m-clockcard{position:relative;border-radius:14px;padding:.85rem .75rem .85rem 1.55rem;margin-bottom:1.1rem;background:linear-gradient(100deg,#e35a18 0%,#ea3c55 45%,#e535b3 80%,#dd34de 100%);box-shadow:0 6px 16px rgba(225,60,120,.22)}
.m-clockcard::before{content:"";position:absolute;left:.7rem;top:.85rem;height:3.1rem;width:5px;border-radius:3px;background:var(--accent)}
.m-timer b{font-size:3rem;font-weight:800;letter-spacing:-.02em;line-height:.95}.m-timer b i{font-style:normal;font-size:1rem;font-weight:700;margin-left:.15rem;letter-spacing:0}
.m-timer small{font-size:.68rem;font-weight:600;display:flex;align-items:center;gap:.25rem;margin-top:.2rem}
.m-clockcard p{font-size:.68rem;font-weight:600;margin:.35rem 0 .75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-btns{gap:.45rem;margin-left:-.8rem}.m-clock{padding:.7rem .5rem;border-radius:8px;font-size:.8rem;font-weight:600}.m-clock.out{background:#222}.m-clock.alt{background:#f6a3cc;color:#2a1020}
.m-h{font-size:.95rem;font-weight:700;margin:.2rem 0 .55rem .1rem;align-items:baseline}.m-h small{font-size:.78rem;font-weight:500;color:#555}
.m-card.card{border:1px solid #ebe8e1;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:0 .9rem;margin-bottom:1rem}
.m-list li{padding:.65rem 0;border-color:#eeebe5}.m-list a{gap:.7rem;font-size:.85rem}.m-list b{font-weight:600}.m-list small{color:#3d3d3d;font-size:.82rem;letter-spacing:.02em}
.m-list a>span.m-chev{flex:none;display:block;color:#333;font-size:1.2rem;padding-right:.1rem}
.m-date{width:2.2rem;height:2.2rem;border-radius:7px;background:#f7f5f0;border:1px solid #e6e3dc;font-size:.55rem;color:#666;font-weight:600}.m-date b{font-size:.95rem;font-weight:700}.m-av{color:#333}
.m-bar{width:4px;height:2rem;background:var(--accent)}.m-ring{width:30px;height:30px}
.tabbar{background:#fff;border-top:1px solid #ebe8e1;padding-left:max(.4rem,env(safe-area-inset-left));padding-right:max(.4rem,env(safe-area-inset-right))}
.tabbar a,.tabbar button{color:#2b2b2b;font-size:.62rem;font-weight:600;gap:.2rem;padding:.4rem 0;margin:0 .15rem}
.tabbar a.on{background:#dfe5fb;color:#1f2a44;border-radius:12px;font-weight:700}
}
.m-only,.m-top{display:none}
.m-menu{list-style:none;margin:0 0 1rem;padding:0;background:#fff;border:1px solid var(--line);border-radius:12px}.m-menu li+li{border-top:1px solid var(--line)}
.m-menu a{display:flex;align-items:center;gap:.9rem;padding:.75rem 1rem;color:var(--text);text-decoration:none}.m-menu b{flex:1}
.m-mi{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dbeefe;color:#2b8ae6;flex:none}.m-chev{color:#333;font-size:1.3rem}
@media (max-width:800px){
.m-style .top{display:none}.m-style .side{top:0;padding-top:env(safe-area-inset-top)}
.m-style main{padding-top:0;background:var(--mbg);min-height:100vh;font-family:"Nunito","Segoe UI",system-ui,sans-serif;padding-left:max(.85rem,env(safe-area-inset-left));padding-right:max(.85rem,env(safe-area-inset-right))}
.m-only{display:block}.m-top{display:flex}
.m-top>b{margin-left:0!important}.m-top>a:last-child{margin-left:0!important}
.m-style .card{border:1px solid #ebe8e1;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.m-list .m-row{display:flex;align-items:center;gap:.7rem;font-size:.85rem}.m-list .m-row>span:not(.m-date):not(.m-badge){flex:1;display:flex;flex-direction:column;min-width:0}
.m-list a>span.m-badge{flex:none;display:inline-block}
.m-badge{flex:none;padding:.15rem .55rem;border-radius:1em;font-size:.68rem;font-weight:700;background:#eef0f3;color:#333;white-space:nowrap}.m-badge.day{background:#fff3d6;color:#8a5a00}.m-badge.eve{background:#e4e7fb;color:#2d3a8c}
.m-badge.s-approved{background:#dcfce7;color:#15803d}.m-badge.s-pending,.m-badge.s-review{background:#fef3c7;color:#92400e}.m-badge.s-declined{background:#fde2e1;color:#b42318}.m-badge.s-open{background:#dbeafe;color:#1d4ed8}
.m-bar.wait{background:#f59e0b}.m-bar.off{background:#d1d5db}
.m-list a>span.m-mi{flex:none;display:grid;width:2.2rem;height:2.2rem}body.m-style{background:var(--mbg)}
.m-week{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}.m-week>b{display:flex;flex-direction:column;align-items:center;font-size:.95rem}.m-week small{font-weight:500;color:#555;font-size:.75rem}.m-week .m-ico{text-decoration:none;font-size:1.2rem}
.m-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem .9rem!important}.m-card .m-sum{padding:.6rem 0!important;border-top:1px solid #eeebe5}.m-sum small{display:block;font-size:.7rem;color:#666}.m-sum b{font-size:1rem}
.m-acts{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 0 2.9rem}.m-acts input{padding:.35rem .5rem;font-size:.8rem}.m-acts .btn{padding:.35rem .7rem;font-size:.8rem}
.m-style .form{grid-template-columns:1fr 1fr;gap:.6rem .7rem}.m-style .form h2{font-size:.95rem}.m-style .form input,.m-style .form select{width:100%;min-width:0}
.m-style .form .btn.primary,.m-style .form .btn.danger{flex:1;padding:.7rem;border-radius:8px;font-weight:600}.m-style .btn.primary{background:var(--primary);border-color:var(--primary);}
.m-filter{background:#fff;border:1px solid #ebe8e1;border-radius:14px;padding:.6rem .7rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.m-filter label{flex-direction:column;align-items:stretch}.m-filter input,.m-filter select{width:100%;min-width:0}
.m-menu{border-radius:14px;border-color:#ebe8e1}.m-menu li+li{border-color:#eeebe5}.m-menu a{font-size:.95rem}
}
/* Huisstijl v2 mobiel: overige medewerkers- en beheerpagina's */
@media (max-width:800px){
.m-style main>h1,.m-style main>.bar>h1,.m-style main>div>.bar>h1{display:none}
.m-style main>.bar,.m-style main>div>.bar,.m-style main>form.bar{margin-bottom:.8rem}
.m-style .bar .btn{padding:.45rem .8rem;font-size:.82rem;background:#fff}.m-style .bar .btn.primary{background:var(--primary);color:var(--on-primary)}
.m-style main>form.bar{background:#fff;border:1px solid #ebe8e1;border-radius:14px;padding:.6rem .7rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.m-style main>form.bar label{flex-direction:column;align-items:stretch}.m-style main>form.bar input,.m-style main>form.bar select{width:100%;min-width:0}.m-style main>form.bar .btn{grid-column:1/-1}
.m-style .card{padding:.85rem .9rem}.m-style .card>h2:first-child{font-size:.95rem}
.m-style .grid4{grid-template-columns:1fr 1fr;gap:.6rem}.m-style .grid4 .card{margin-bottom:0}.m-style .grid4+*{margin-top:1rem}
.m-style .stat b{font-size:1.1rem}.m-style .stat small{font-size:.7rem}
.m-style .flash{font-size:.85rem}
.m-style .m-acts{margin-left:3.3rem}.m-style .m-acts form{display:inline-flex;gap:.4rem;flex-wrap:wrap;align-items:center}.m-style .m-acts ul.warn{flex-basis:100%}
.m-style .m-list .m-row>span:not(.m-date):not(.m-badge) small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-style .m-list a>span.m-mi{font-size:.78rem;font-weight:700}
/* tabellen als kaartjes */
.m-style table.m-stack,.m-style table.m-stack tbody,.m-style table.m-stack tr,.m-style table.m-stack td{display:block;width:auto}
.m-style table.m-stack tr.m-thead{display:none}
.m-style table.m-stack tr{padding:.55rem 0;border-bottom:1px solid #eeebe5}.m-style table.m-stack tr:last-child{border-bottom:0}
.m-style table.m-stack td{border:0;padding:.12rem 0;display:flex;justify-content:space-between;align-items:center;gap:.8rem;text-align:right;font-size:.85rem;min-height:1.4rem}
.m-style table.m-stack td::before{content:attr(data-label);flex:none;text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#888}
.m-style table.m-stack td:first-child{font-weight:700;font-size:.92rem}.m-style table.m-stack td[colspan]{justify-content:flex-start}.m-style table.m-stack td[colspan]::before{display:none}
.m-style table.m-stack td:empty{display:none}.m-style table.m-stack tr:hover>td{background:none}
.m-style table.m-stack td input:not([type=checkbox]){max-width:60%}.m-style table.m-stack td .inline,.m-style table.m-stack td form{justify-content:flex-end}
.m-style table.m-stack .details{max-width:none;text-align:right}
.m-style .card:has(> table:not(.m-stack)){overflow-x:auto}
/* formulieren in rijen (instellingen) */
.m-style form.row{background:#faf9f6;border:1px solid #eeebe5;border-radius:10px;padding:.6rem;gap:.45rem;margin-bottom:.55rem}
.m-style form.row>input:not([type=checkbox]):not([type=color]):not([type=hidden]),.m-style form.row>select{flex:1 1 130px;min-width:0}
.m-style form.row.indent{margin-left:.8rem}.m-style .row.perms{border-bottom:1px solid #eeebe5}
.m-style fieldset{gap:.4rem .9rem}
/* prikklok */
.r-clock .card.clock{border:0;color:#fff;background:linear-gradient(100deg,#e35a18 0%,#ea3c55 45%,#e535b3 80%,#dd34de 100%);box-shadow:0 6px 16px rgba(225,60,120,.22);padding:1.2rem 1rem}
.r-clock .clock-now{color:#fff;font-size:3.4rem}.r-clock .clock p{font-size:.85rem;font-weight:600}.r-clock .clock .badge{background:rgba(255,255,255,.9);color:#92400e}
.r-clock .clock-btns{align-items:stretch;gap:.5rem}.r-clock .clock-btns .btn.big{font-size:.95rem;padding:.8rem;border:0;border-radius:10px;background:#f6a3cc;color:#2a1020}
.r-clock .clock-btns .btn.big.danger{background:#222;color:#fff}.r-clock .clock-btns .btn.big.primary{background:var(--primary);color:var(--on-primary)}
.r-clock .clock label{color:#fff}.r-clock .clock select{width:100%}
/* meldingen, profiel, rooster-teamweergave */
.m-style .notes li{padding:.65rem 0;font-size:.86rem}.m-style .notes li a{color:var(--text);text-decoration:none}
.m-prof p>span{display:block;font-size:.82rem;color:#555}.m-prof p>span{word-break:break-word}
.m-style .sched-wrap{margin:0 -.1rem}.m-style .cal{grid-template-columns:repeat(2,1fr)}
.m-style .actions .btn{flex:1}.m-style .form .actions{display:flex}
}
/* Huisstijl v2: correcties */
label input,label select,label textarea{font-weight:400;font-size:.92rem;color:var(--text)}
.sched tr+tr>th{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:600;color:var(--text);background:#fff}.sched tr.openrow>th{background:#fff8ec}
.bell svg{display:block}
@media (max-width:800px){.m-style .form input[type=checkbox]{width:auto}.m-style .form label.check{grid-column:1/-1}.m-style fieldset label.check{flex:1 1 100%}}

/* Import & export */
.dio-sum{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .8rem}ul.warn.err{background:#fde2e1;color:#b42318}.dio-confirm{margin-top:.8rem}.dio-preview td ul.warn{margin:0;text-align:left}.dio-cells{font-size:.85rem;max-width:34rem}.dio-preview td:first-child{white-space:nowrap}
/* Rooster v2: diensttypen en beschikbaarheid in Shiftbase-stijl */
.sched td.cell{vertical-align:top;padding:.3rem}
.sched .shift{border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 16%,#fff);border-radius:4px;padding:.3rem .45rem;margin-bottom:.25rem;font-size:.78rem;line-height:1.25;gap:.05rem}
.sched .shift:not(.typed){--c:#94a3b8}
.sched .shift b{font-weight:700;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched .shift span{color:#374151;white-space:nowrap}
.sched .shift[data-href]{cursor:pointer}.sched .shift[data-href]:hover{background:color-mix(in srgb,var(--c) 26%,#fff)}
.sched .shift[data-href]:focus-visible{outline:2px solid var(--c);outline-offset:1px}
.sched .avail{display:block;width:100%;box-sizing:border-box;font-size:.72rem;line-height:1.3;border-radius:4px;padding:.2rem .4rem;margin-bottom:.25rem;text-decoration:none;font-weight:500}
.sched .avail.available,.sched .avail.partial{background:#d9f2e3;color:#14663a}
.sched .avail.unavailable{background:#e9e9ec;color:#555b66;text-decoration:none}
/* Help */
.help-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid #e6e3dc;background:#fff;font-weight:700;font-size:.95rem;line-height:1}
.help-btn:hover,.help-btn:focus-visible{border-color:var(--brand)}
.help-search label{display:flex;flex-direction:column;gap:.35rem;font-weight:600}.help-search input{width:100%;max-width:520px}
.help-toc ul{columns:2 220px;margin:.3rem 0 .6rem;padding-left:1.1rem}.help-toc li{margin:.2rem 0;break-inside:avoid}.help-toc h3{margin:.6rem 0 .2rem;font-size:.95rem}
.help-topic{scroll-margin-top:70px}.help-topic p,.help-topic li{line-height:1.55;max-width:75ch}.help-topic ol,.help-topic ul{padding-left:1.3rem}.help-topic li{margin:.2rem 0}
.help-topic h2 .badge{font-size:.7rem;vertical-align:middle}.help-topic:target{outline:2px solid var(--brand);outline-offset:2px}
/* Profielfoto's / avatars */
.av-s{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#dbeefe;color:#2b8ae6;flex:none;font-weight:700;font-size:.66rem;line-height:1;overflow:hidden}
.av-s.open{background:#ffe9c7;color:#b26a00;font-size:.9rem}
.av{overflow:hidden;padding:0}.av img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.m-mi.av{background:#e9e6df}
.who{display:inline-flex;align-items:center;gap:.5rem}.sched th .who{display:flex;font-weight:600;text-align:left}
.m-ico.m-av{padding:0;overflow:hidden;border-radius:50%}.m-ico.m-av .av-s{width:100%;height:100%}
.bar .av-l{width:42px;height:42px;font-size:.95rem}
.sched td.cell[data-add]{cursor:pointer;position:relative}.sched td.cell[data-add]::after{content:'+';position:absolute;right:.35rem;bottom:.2rem;font-size:1rem;line-height:1;color:var(--muted,#8a8f98);opacity:0;transition:opacity .15s;pointer-events:none}
.sched td.cell[data-add]:hover::after,.sched td.cell[data-add]:focus-visible::after,.sched td.cell[data-add]:active::after{opacity:.7}.sched td.cell[data-add]:hover,.sched td.cell[data-add]:active{background:rgba(0,0,0,.025)}
.sched td.cell[data-add]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
#form{scroll-margin-top:4.5rem}#form.flash-in{animation:pbflash 1s ease}@keyframes pbflash{from{box-shadow:0 0 0 3px var(--brand)}to{box-shadow:none}}
/* Rooster: dagweergave (mobiel standaard) en weekweergave */
.sv-auto .sday,.sv-week .sday,.sv-day .sweek,.sv-auto.force-week .sday,.sv-auto.force-day .sweek,.sv-auto.force-day~.sform-week{display:none}
.sv-auto.force-day .sday,.sv-auto.force-week .sweek{display:block}.sv-auto.force-week~.sform-week{display:block}
@media (max-width:800px){.sv-auto:not(.force-week) .sday{display:block}.sv-auto:not(.force-week) .sweek,.sv-auto:not(.force-week)~.sform-week{display:none}}
.sday{max-width:560px}.dv-tog{display:flex;justify-content:flex-end;margin-bottom:.6rem}.dv-tog .btn{padding:.3rem .7rem;font-size:.8rem}
.dv-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}.dv-dep{flex:1;min-width:0}.dv-dep select{width:100%;font-weight:700;background:#fff}
.dv-sw{padding:.45rem .7rem;font-size:.85rem}.dv-add{text-decoration:none;font-size:1.35rem;font-weight:600;line-height:1;width:38px;height:38px;flex:none}
.dv-seg{display:flex;background:#ebe8e0;border-radius:10px;padding:3px;margin-bottom:.6rem}.dv-seg a{flex:1;text-align:center;padding:.45rem .2rem;border-radius:8px;color:#444;text-decoration:none;font-size:.85rem;font-weight:600;white-space:nowrap}
.dv-seg a.on{background:#fff;color:var(--ink,#1f2a44);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dv-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}.dv-nav>b{font-size:.98rem;text-align:center}.dv-nav>b a{font-size:.75rem;font-weight:500;margin-left:.3rem}.dv-nav .m-ico{text-decoration:none;font-size:1.25rem}
.dv-card{padding:.3rem 1rem .6rem}.dv-h{font-size:1rem;font-weight:800;margin:.8rem 0 .2rem}.dv-list{list-style:none;margin:0;padding:0}
.dv-item{border-bottom:1px solid #eeebe5}.dv-item:last-child{border:0}.dv-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;color:var(--text);text-decoration:none}
a.dv-row:active{background:var(--soft,#f7f5f0)}.dv-main{flex:1;display:flex;flex-direction:column;min-width:0}.dv-main b{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}.dv-main small{color:#444;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-side{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;flex:none}
.dv-pill{--c:#94a3b8;padding:.15rem .55rem;border-radius:6px;font-size:.72rem;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--c) 18%,#fff);color:color-mix(in srgb,var(--c) 70%,#000)}
.dv-concept{font-size:.65rem;font-weight:700;color:#666;background:#eee;border-radius:5px;padding:.05rem .4rem}
.dv-item.draft .dv-row{background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.04) 6px 12px)}
.dv-av{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#dbeefe;color:#2b8ae6;flex:none;font-weight:700;font-size:.9rem;overflow:hidden}.dv-av img{width:100%;height:100%;object-fit:cover}.dv-av.open{background:#ffe9c7;color:#b26a00;font-size:1.1rem}
.dv-bar{--c:#94a3b8;width:4px;height:2.4rem;border-radius:2px;background:var(--c);flex:none}.dv-bar.off{background:#d1d5db}
.dv-acts{display:flex;align-items:center;gap:.6rem;padding:0 0 .7rem 3.25rem}.dv-empty{padding:.9rem 0;margin:0}
/* Horecavergunning: badge bij leidinggevenden en waarschuwing bij dagen zonder vergunningshouder */
.lic-badge{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;margin-left:.3rem;border-radius:4px 4px 50% 50%;background:#1d4ed8;color:#fff;font-size:.62rem;font-weight:800;line-height:1;vertical-align:.1em;flex:none}
.lic-warn{display:block;margin-top:.25rem;padding:.2rem .4rem;border-radius:5px;background:#fde2e1;color:#b42318;border:1px solid #f5b4ae;font-size:.68rem;font-weight:700;line-height:1.25;text-transform:none;letter-spacing:0;white-space:normal}
.sched th.lic-gap{background:#fdecea;color:#b42318;box-shadow:inset 0 -3px 0 #e5484d}
.sched td.cell.lic-gap{background:#fff5f4}
.sday .lic-warn{margin:0 0 .6rem;padding:.5rem .7rem;font-size:.82rem}
/* Printweergave rooster (?r=schedule_print) */
.r-print{background:#fff;padding:1rem 1.2rem;font-size:13px}
.pr-tools{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.pr-tools .muted{font-size:.8rem}
.pr-head h1{font-size:1.25rem;margin:0}.pr-head p{margin:.2rem 0 .7rem;color:var(--muted)}
.pr-grid{table-layout:fixed;width:100%;border:1px solid #cfd4da}.pr-grid th,.pr-grid td{border:1px solid #d9dde2;padding:.25rem .3rem;vertical-align:top}
.pr-grid thead th{background:#f3f4f6;color:#111;font-size:.75rem;text-align:center}.pr-grid thead th:first-child{width:13%;text-align:left}.pr-grid thead th:last-child{width:5%}
.pr-grid tbody th{font-size:.8rem;text-transform:none;color:#111;font-weight:600}.pr-grid tr.pr-open th{background:#fff8ec}
.pr-grid tbody tr{break-inside:avoid}
.pr-shift{--c:#94a3b8;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 18%,#fff);border-radius:3px;padding:.1rem .3rem;margin-bottom:.15rem;font-size:.74rem;line-height:1.25}
.pr-shift b{white-space:nowrap}.pr-shift i{color:#555;display:block;font-size:.68rem}
.pr-shift.draft{background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(0,0,0,.07) 5px 10px)}
.pr-abs{font-size:.7rem;background:#eef2f7;border-radius:3px;padding:.1rem .3rem;margin-bottom:.15rem;color:#374151}
.pr-tot{text-align:right;font-weight:600;white-space:nowrap;font-size:.78rem}
.pr-foot{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:.6rem;font-size:.75rem}
.pr-key{--c:#94a3b8;display:inline-flex;align-items:center;gap:.3rem}.pr-key::before{content:"";width:.8rem;height:.8rem;border-radius:2px;background:var(--c)}
@media print{
  @page{size:A4 landscape;margin:8mm}
  .r-print{padding:0;font-size:11px}.pr-tools{display:none}
  .r-print *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pr-grid thead{display:table-header-group}
}
.help-mini p{margin:.3rem 0;font-size:.85rem}
/* Sjablonen & herhalen (rooster, alleen planners) */
.plan-tools{margin-top:1rem}.plan-tools h3{font-size:.95rem;margin:0}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.plan-grid .form{border:1px solid var(--line);border-radius:10px;padding:.9rem;align-content:start;grid-template-columns:1fr 1fr}.plan-grid .form h3{grid-column:1/-1}.plan-grid .form p{margin:0;font-size:.82rem}
.plan-rep{background:#f6faf7;border:1px solid #cfe8d8;border-radius:10px;padding:.7rem .9rem;margin-bottom:1rem;font-size:.88rem}.plan-rep ul{margin:.4rem 0;padding-left:1.2rem}.plan-rep p{margin:.3rem 0 0}
.plan-rep .plan-warn{color:var(--warn)}.plan-rep details{margin-top:.3rem}.plan-rep summary{cursor:pointer;color:var(--brand)}
.plan-list{list-style:none;padding:0;margin:.5rem 0 0}.plan-list li{padding:.4rem 0;border-top:1px solid var(--line)}.plan-list form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.plan-list input{max-width:16rem}.plan-list .muted{font-size:.8rem;margin-right:auto}
.push-ios{background:#f4f6fb;border-radius:8px;padding:.5rem .7rem}
[data-push] [hidden]{display:none!important}
/* Weergave per gebruiker: thema (licht/donker/automatisch), hoog contrast en grotere tekst.
   De kleuren hieronder lopen via custom properties; de standaardwaarden zijn gelijk aan de lichte huisstijl. */
:root{color-scheme:light;--surface:#fff;--hover:#DCE3EE;--line2:#E4E9F1;--line3:#E1E7EF;--fborder:#C9D3E1;--field:#fff;--btnbg:#fff;--label:#555;--th:#777;--link:var(--sj-orange-text);--rowhover:#F3F6FA;
--mix:#fff;--tint:16%;--tint2:18%;--pillk:70%;--pillink:#000;--sb:#1f2937;--ss:#374151;--stripe:rgba(0,0,0,.05);--cellhover:rgba(0,0,0,.025);
--okbg:#dcfce7;--okink:var(--ok);--okline:#bbf7d0;--errbg:#fde2e1;--errink:var(--err);--errline:#fecaca;--warnbg:#fef3c7;--warnink:#92400e;--warnline:#fde68a;--infobg:#dbeafe;--infoink:#1d4ed8;--badgebg:#e5e7eb;
--avok:#d9f2e3;--avokink:#14663a;--avno:#e9e9ec;--avnoink:#555b66;--avpart:#fff3d6;--avbg:#dbeefe;--avink:#2b8ae6;--avopen:#ffe9c7;--avopenink:#b26a00;--openrow:#fff8ec;--over:#eef1fd;
--licbg:#fde2e1;--licink:#b42318;--licline:#f5b4ae;--licgap:#fdecea;--liccell:#fff5f4;--tabon:#D6DFEC;--tabink:var(--sj-navy);--ico:#2b2b2b;--seg:#DCE3EE;--segink:#444;--sub:#444;--focus:var(--brand);--focusw:2px;--primary:var(--sj-orange);--primaryhover:#E67C00;--on-primary:var(--sj-navy);--accent:var(--sj-orange);--mbg:var(--sj-light)}
@media screen{html[data-theme=dark]{color-scheme:dark;--bg:#0A1F40;--card:#0F2D5B;--surface:#0F2D5B;--text:#FFFFFF;--muted:#B8C4D6;--line:#24467A;--line2:#1D3D6E;--line3:#20416F;--soft:#143566;--hover:#1A3C70;--pill:#24467A;--ink:#e1e7ff;
--fborder:#3A5F95;--field:#0A1F40;--btnbg:#143566;--label:#c5cad3;--th:#aeb5c0;--link:#FF8A00;--rowhover:#133463;--mix:#0F2D5B;--tint:30%;--tint2:32%;--pillk:42%;--pillink:#fff;--sb:#f4f5f7;--ss:#d9dce2;--stripe:rgba(255,255,255,.06);--cellhover:rgba(255,255,255,.05);
--okbg:#13311f;--okink:#8be3ab;--okline:#24603b;--errbg:#3b1b1b;--errink:#ffb4ab;--errline:#7a3131;--warnbg:#3a2d10;--warnink:#fcd58a;--warnline:#6d5520;--infobg:#1b2b4a;--infoink:#aac8ff;--badgebg:#24467A;
--avok:#163a26;--avokink:#93e2b2;--avno:#2b2e35;--avnoink:#c0c5cd;--avpart:#3a2d10;--avbg:#1f3552;--avink:#a3cdff;--avopen:#3d2e12;--avopenink:#ffc970;--openrow:#231d12;--over:#232a45;
--licbg:#3b1b1b;--licink:#ffb4ab;--licline:#8a3434;--licgap:#3b1b1b;--liccell:#211819;--tabon:#24467A;--tabink:#e1e7ff;--ico:#e6e8ec;--seg:#143566;--segink:#cdd2da;--sub:#c3c8d0;--focus:#FF8A00;--brand:#FF8A00;--mbg:#0A1F40}}
@media screen and (prefers-color-scheme:dark){html[data-theme=auto]{color-scheme:dark;--bg:#0A1F40;--card:#0F2D5B;--surface:#0F2D5B;--text:#FFFFFF;--muted:#B8C4D6;--line:#24467A;--line2:#1D3D6E;--line3:#20416F;--soft:#143566;--hover:#1A3C70;--pill:#24467A;--ink:#e1e7ff;
--fborder:#3A5F95;--field:#0A1F40;--btnbg:#143566;--label:#c5cad3;--th:#aeb5c0;--link:#FF8A00;--rowhover:#133463;--mix:#0F2D5B;--tint:30%;--tint2:32%;--pillk:42%;--pillink:#fff;--sb:#f4f5f7;--ss:#d9dce2;--stripe:rgba(255,255,255,.06);--cellhover:rgba(255,255,255,.05);
--okbg:#13311f;--okink:#8be3ab;--okline:#24603b;--errbg:#3b1b1b;--errink:#ffb4ab;--errline:#7a3131;--warnbg:#3a2d10;--warnink:#fcd58a;--warnline:#6d5520;--infobg:#1b2b4a;--infoink:#aac8ff;--badgebg:#24467A;
--avok:#163a26;--avokink:#93e2b2;--avno:#2b2e35;--avnoink:#c0c5cd;--avpart:#3a2d10;--avbg:#1f3552;--avink:#a3cdff;--avopen:#3d2e12;--avopenink:#ffc970;--openrow:#231d12;--over:#232a45;
--licbg:#3b1b1b;--licink:#ffb4ab;--licline:#8a3434;--licgap:#3b1b1b;--liccell:#211819;--tabon:#24467A;--tabink:#e1e7ff;--ico:#e6e8ec;--seg:#143566;--segink:#cdd2da;--sub:#c3c8d0;--focus:#FF8A00;--brand:#FF8A00;--mbg:#0A1F40}}
/* Hoog contrast (licht) */
html[data-contrast=high]{--text:#000;--muted:#2e2e2e;--label:#1a1a1a;--th:#1a1a1a;--sub:#1a1a1a;--line:#6e6e6e;--line2:#8a8a8a;--line3:#8a8a8a;--fborder:#4d4d4d;--link:#14206e;--sb:#000;--ss:#111;--tint:20%;
--okink:#0a4a25;--okline:#2e7d4f;--errink:#8a1410;--errline:#b3261e;--warnink:#5c2a00;--warnline:#9a6a00;--infoink:#0c2f8a;--avokink:#0a4a25;--avnoink:#1f1f1f;--avink:#0b4a91;--avopenink:#6b3a00;--licink:#8a1410;--licline:#b3261e;
--ink:#0d1530;--tabink:#0d1530;--ico:#000;--segink:#111;--focus:#000;--focusw:3px;--primary:var(--sj-navy);--primaryhover:#0A1F40;--on-primary:#FFFFFF;--pillk:85%}
html[data-contrast=high][data-theme=dark]{--bg:#000;--card:#0c0d10;--surface:#0c0d10;--mbg:#000;--text:#fff;--muted:#e2e2e2;--label:#f2f2f2;--th:#f2f2f2;--sub:#ececec;--line:#9a9a9a;--line2:#7a7a7a;--line3:#7a7a7a;--fborder:#c2c2c2;--field:#000;--btnbg:#16181d;--link:#c9d6ff;--sb:#fff;--ss:#f2f2f2;--tint:26%;--mix:#0c0d10;
--okink:#a8f0c2;--okline:#5fbf86;--errink:#ffc9c2;--errline:#e07a70;--warnink:#ffe2a6;--warnline:#c9a24a;--infoink:#c6dbff;--avokink:#b2f2c9;--avnoink:#ececec;--avink:#c4e0ff;--avopenink:#ffd896;--licink:#ffc9c2;--licline:#e07a70;
--ink:#fff;--tabink:#fff;--ico:#fff;--segink:#f2f2f2;--focus:#ffd400;--pillk:30%;--primary:#FF8A00;--primaryhover:#FFA033;--on-primary:#000}
@media screen and (prefers-color-scheme:dark){html[data-contrast=high][data-theme=auto]{--bg:#000;--card:#0c0d10;--surface:#0c0d10;--mbg:#000;--text:#fff;--muted:#e2e2e2;--label:#f2f2f2;--th:#f2f2f2;--sub:#ececec;--line:#9a9a9a;--line2:#7a7a7a;--line3:#7a7a7a;--fborder:#c2c2c2;--field:#000;--btnbg:#16181d;--link:#c9d6ff;--sb:#fff;--ss:#f2f2f2;--tint:26%;--mix:#0c0d10;
--okink:#a8f0c2;--okline:#5fbf86;--errink:#ffc9c2;--errline:#e07a70;--warnink:#ffe2a6;--warnline:#c9a24a;--infoink:#c6dbff;--avokink:#b2f2c9;--avnoink:#ececec;--avink:#c4e0ff;--avopenink:#ffd896;--licink:#ffc9c2;--licline:#e07a70;
--ink:#fff;--tabink:#fff;--ico:#fff;--segink:#f2f2f2;--focus:#ffd400;--pillk:30%;--primary:#FF8A00;--primaryhover:#FFA033;--on-primary:#000}}
/* Componenten via de variabelen hierboven */
a{color:var(--link)}button.link{color:var(--link)}
.top{background:var(--surface)}.bell,.help-btn{background:var(--btnbg);border-color:var(--fborder);color:var(--text)}.bell b{border-color:var(--surface)}
.side a:hover{background:var(--hover)}
.card>h2:first-child,.form>h2:first-of-type{border-bottom-color:var(--line2)}
th{color:var(--th);border-bottom-color:var(--fborder)}td{border-bottom-color:var(--line2)}table:not(.sched) tr:hover>td{background:var(--rowhover)}
input,select,textarea{background:var(--field);color:var(--text);border-color:var(--fborder)}
label{color:var(--label)}legend{color:var(--label)}label.check{color:var(--text)}
.btn{background:var(--btnbg);border-color:var(--fborder);color:var(--text)}.btn:hover{background:var(--soft)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.btn.primary:hover{background:var(--primaryhover)}.btn.danger{color:#fff}
.flash{background:var(--okbg);color:var(--okink);border-color:var(--okline)}.flash.err{background:var(--errbg);color:var(--errink);border-color:var(--errline)}.flash.warn{background:var(--warnbg);color:var(--warnink);border-color:var(--warnline)}
.warn-text{color:var(--warnink)}
.badge{background:var(--badgebg);color:var(--text)}.s-approved{background:var(--okbg);color:var(--okink)}.s-pending{background:var(--warnbg);color:var(--warnink)}.s-declined{background:var(--errbg);color:var(--errink)}.s-open{background:var(--infobg);color:var(--infoink)}
ul.warn{background:var(--warnbg);color:var(--warnink)}ul.warn.err{background:var(--errbg);color:var(--errink)}
.sched-wrap{background:var(--card)}.sched tr+tr>th{background:var(--card);color:var(--text)}.sched tr.openrow,.sched tr.openrow>th{background:var(--openrow)}.sched td.cell.over{background:var(--over)}
.shift{background:color-mix(in srgb,var(--c) var(--tint),var(--mix));color:var(--text)}.shift.draft,.sched .shift.draft{background-image:repeating-linear-gradient(45deg,transparent 0 6px,var(--stripe) 6px 12px)}
.sched .shift{background-color:color-mix(in srgb,var(--c) var(--tint),var(--mix))}.sched .shift b{color:var(--sb)}.sched .shift span{color:var(--ss)}
.sched .shift[data-href]:hover{background-color:color-mix(in srgb,var(--c) calc(var(--tint) + 10%),var(--mix))}
.absence{background:var(--errbg);color:var(--errink)}
.avail.available{background:var(--okbg);color:var(--avokink)}.avail.unavailable{background:var(--avno);color:var(--avnoink)}.avail.partial{background:var(--avpart);color:var(--warnink)}
.sched .avail.available,.sched .avail.partial{background:var(--avok);color:var(--avokink)}.sched .avail.unavailable{background:var(--avno);color:var(--avnoink)}
.cal .day{background:var(--card);border-color:var(--line3)}.cal .available{background:var(--avok)}.cal .unavailable{background:var(--avno)}.cal .partial{background:var(--avpart)}
.sched td.cell[data-add]:hover,.sched td.cell[data-add]:active{background:var(--cellhover)}
.notes li{border-color:var(--line2)}
.m-mi,.av-s,.dv-av{background:var(--avbg);color:var(--avink)}.av-s.open,.dv-av.open{background:var(--avopen);color:var(--avopenink)}.m-mi.av{background:var(--hover)}
.m-menu{background:var(--card);border-color:var(--line)}.m-menu li+li{border-color:var(--line3)}.m-chev{color:var(--sub)}
.m-prof p>span{color:var(--sub)}
.m-ico{background:var(--hover);color:var(--ico)}
.dv-seg{background:var(--seg)}.dv-seg a{color:var(--segink)}.dv-seg a.on{background:var(--card);color:var(--ink)}
.dv-dep select{background:var(--field)}.dv-main small{color:var(--sub)}.dv-item{border-color:var(--line3)}
.dv-pill{background:color-mix(in srgb,var(--c) var(--tint2),var(--mix));color:color-mix(in srgb,var(--c) var(--pillk),var(--pillink))}
.dv-concept{background:var(--badgebg);color:var(--sub)}.dv-item.draft .dv-row{background-image:repeating-linear-gradient(45deg,transparent 0 6px,var(--stripe) 6px 12px)}
.lic-warn{background:var(--licbg);color:var(--licink);border-color:var(--licline)}.sched th.lic-gap{background:var(--licgap);color:var(--licink)}.sched td.cell.lic-gap{background:var(--liccell)}
.push-ios{background:var(--soft);color:var(--text)}
.plan-rep{background:color-mix(in srgb,var(--okbg) 40%,var(--card));border-color:var(--okline);color:var(--text)}.plan-rep .plan-warn{color:var(--warnink)}
input:focus,select:focus,textarea:focus{outline:var(--focusw) solid color-mix(in srgb,var(--focus) 45%,transparent);border-color:var(--focus)}
@media (max-width:800px){
.tabbar{background:var(--surface);border-top-color:var(--line)}.tabbar a,.tabbar button{color:var(--ico)}.tabbar a.on{background:var(--tabon);color:var(--tabink)}
.r-dashboard main,.m-style main,body.m-style{background:var(--mbg)}
.m-ico{background:var(--btnbg);border-color:var(--fborder);color:var(--ico)}.m-dot{border-color:var(--mbg)}
.m-card.card,.m-style .card{border-color:var(--line)}.m-list li{border-color:var(--line3)}.m-list small{color:var(--sub)}.m-list a>span.m-chev{color:var(--sub)}.m-h small{color:var(--sub)}
.m-date{background:var(--soft);border-color:var(--fborder);color:var(--muted)}.m-av{color:var(--ico)}
.m-badge{background:var(--badgebg);color:var(--text)}.m-badge.day{background:var(--warnbg);color:var(--warnink)}.m-badge.eve{background:var(--pill);color:var(--ink)}
.m-badge.s-approved{background:var(--okbg);color:var(--okink)}.m-badge.s-pending,.m-badge.s-review{background:var(--warnbg);color:var(--warnink)}.m-badge.s-declined{background:var(--errbg);color:var(--errink)}.m-badge.s-open{background:var(--infobg);color:var(--infoink)}
.m-week small,.m-sum small{color:var(--sub)}.m-card .m-sum{border-color:var(--line3)}
.m-filter,.m-style main>form.bar{background:var(--card);border-color:var(--line)}.m-menu{border-color:var(--line)}.m-menu li+li{border-color:var(--line3)}
.m-style .bar .btn{background:var(--btnbg)}.m-style .bar .btn.primary,.m-style .btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.m-style table.m-stack tr{border-color:var(--line3)}.m-style table.m-stack td::before{color:var(--th)}
.m-style form.row{background:var(--soft);border-color:var(--line3)}.m-style .row.perms{border-color:var(--line3)}
.m-style .notes li a{color:var(--text)}
}
@media screen{html[data-theme=dark] body.login{background:radial-gradient(circle at 20% 10%,rgba(255,138,0,.14),transparent 45%),radial-gradient(circle at 85% 90%,#143566,transparent 50%),var(--bg)}html[data-theme=dark] .logo{color:#fff}}
@media screen and (prefers-color-scheme:dark){html[data-theme=auto] body.login{background:radial-gradient(circle at 20% 10%,rgba(255,138,0,.14),transparent 45%),radial-gradient(circle at 85% 90%,#143566,transparent 50%),var(--bg)}}
/* Hoog contrast: duidelijke randen en dikke focusrand */
html[data-contrast=high] :focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px!important}
html[data-contrast=high] .card,html[data-contrast=high] .sched-wrap,html[data-contrast=high] .m-menu,html[data-contrast=high] .cal .day,html[data-contrast=high] .btn,html[data-contrast=high] input,html[data-contrast=high] select,html[data-contrast=high] textarea{border-width:2px;border-color:var(--line)}
html[data-contrast=high] .sched td.cell{border-left-color:var(--line)}html[data-contrast=high] td{border-bottom-color:var(--line2)}
html[data-contrast=high] .sched .shift,html[data-contrast=high] .shift{border-left-width:6px;outline:1px solid color-mix(in srgb,var(--c) 70%,var(--text))}
html[data-contrast=high] .top .company{opacity:1;color:var(--text)}html[data-contrast=high] .side a.on{outline:2px solid var(--text);outline-offset:-2px}html[data-contrast=high] .tabbar a.on{outline:2px solid var(--tabink)}
html[data-contrast=high] a:not(.btn):not(.side a):not(.tabbar a):not(.m-ico):not(.bell):not(.help-btn):not(.dv-row):not(.me){text-decoration:underline}
html[data-contrast=high] .btn:disabled{opacity:.7}html[data-contrast=high] .avail.unavailable{text-decoration:line-through}
/* Grotere tekst: ca. 118%; het rooster mag horizontaal scrollen */
html[data-text=large]{font-size:118%}html[data-text=large] body{font-size:17.7px}
html[data-text=large] .sched{min-width:1200px}html[data-text=large] .sched th:first-child{width:190px}
html[data-text=large] .sched .shift,html[data-text=large] .sched .avail{white-space:normal}html[data-text=large] .sched .shift b{white-space:normal}
html[data-text=large] .tabbar a,html[data-text=large] .tabbar button{font-size:.7rem}html[data-text=large] .side{width:240px}
.theme-pick label.check,#weergave fieldset label.check{flex:1 1 100%;align-items:flex-start}#weergave label.check input{margin-top:.3rem}#weergave label.check small{font-weight:400}
#weergave input[type=radio],#weergave input[type=checkbox]{width:auto!important;flex:none}

/* Shiftje: logo, login en merkaccenten */
.brand-logo{display:inline-flex;align-items:center;line-height:0}.brand-logo img{height:34px;width:auto}.brand-logo .logo-d{display:none}
.brand-logo.big img{height:64px}.top a.brand{display:flex;align-items:center;text-decoration:none}
@media screen{html[data-theme=dark] .brand-logo .logo-l{display:none}html[data-theme=dark] .brand-logo .logo-d{display:inline}}
@media screen and (prefers-color-scheme:dark){html[data-theme=auto] .brand-logo .logo-l{display:none}html[data-theme=auto] .brand-logo .logo-d{display:inline}}
.login-brand{text-align:center;margin-bottom:.4rem}.login-brand .brand-logo{justify-content:center}.login-brand p{margin:.2rem 0 0}
.login-brand .slogan{font-weight:800;font-size:1.05rem;color:var(--text)}.login-brand .tagline{font-weight:700;color:var(--link)}
.login-ver{text-align:center;font-size:.75rem;margin:0}.help-ver{text-align:center;font-size:.8rem}
.m-style .tabbar a.on,.tabbar a.on{color:var(--brand)}