@import url('fonts/fonts.css');
:root{--bg:#f3f4f6;--surface:#fff;--surface2:#f9fafb;--border:#e5e7eb;--text:#1f2937;--muted:#6b7280;--blue:#2563eb;--red:#ef4444;--orange:#f97316;--green:#10b981;--purple:#6366f1;--shadow:0 10px 30px rgba(15,23,42,.08);--cd-navy:#15243a;--cd-orange:#f2691c}
body.dark{--bg:#0f1117;--surface:#1a1d27;--surface2:#22263a;--border:#2e3348;--text:#e8eaf0;--muted:#9ca3af;--shadow:0 14px 34px rgba(0,0,0,.32);--cd-navy:#d5def1;--cd-orange:#ff8636}
*{box-sizing:border-box;margin:0;padding:0} body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);padding:16px 28px;display:flex;gap:16px;justify-content:space-between;align-items:center}.topbar h1{font-size:22px;letter-spacing:-.4px}.topbar h1 span{color:var(--blue)}.sub{color:var(--muted);font-size:12px;margin-top:3px}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.btn{border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:9px;padding:8px 12px;font-weight:700;font-size:12px;cursor:pointer}.btn:hover{border-color:var(--blue)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.danger{background:rgba(239,68,68,.12);color:var(--red);border-color:rgba(239,68,68,.25)}.btn.good{background:rgba(16,185,129,.12);color:var(--green);border-color:rgba(16,185,129,.25)}.main{padding:22px 28px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tabbtn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:10px 14px;font-weight:800;font-size:13px;cursor:pointer}.tabbtn.active{background:var(--blue);color:#fff;border-color:var(--blue)}.section{display:none}.section.active{display:block}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:14px;box-shadow:var(--shadow)}.val{font-size:28px;font-weight:800;line-height:1}.lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:6px}.blue{color:var(--blue)}.red{color:var(--red)}.orange{color:var(--orange)}.green{color:var(--green)}.purple{color:var(--purple)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:15px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow)}.panel-head{background:var(--surface2);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.panel h2{font-size:16px}.hint{font-size:12px;color:var(--muted);margin-top:2px}.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.search,input,select,textarea{font-family:'DM Sans',sans-serif}.search,.input{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 11px;color:var(--text);min-width:180px}textarea.input{min-height:70px;resize:vertical}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;padding:16px}.form-row{display:flex;flex-direction:column;gap:5px}.form-row label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800}.form-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 16px}.notice{padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(37,99,235,.08);color:var(--text);font-size:13px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}th{background:var(--surface2);font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.4px;cursor:pointer;white-space:nowrap}tr:hover{background:rgba(0,0,0,.03)}body.dark tr:hover{background:rgba(255,255,255,.04)}.tag{display:inline-block;border-radius:20px;padding:3px 8px;font-size:11px;font-weight:800;white-space:nowrap}.ok{background:rgba(16,185,129,.14);color:var(--green)}.bad{background:rgba(239,68,68,.14);color:var(--red)}.warn{background:rgba(249,115,22,.14);color:var(--orange)}.info{background:rgba(37,99,235,.14);color:var(--blue)}.neutral{background:rgba(107,114,128,.16);color:var(--muted)}.mono{font-family:'DM Mono',monospace}.empty{padding:24px;color:var(--muted);text-align:center}.split{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,1.5fr);gap:18px}.table-wrap{overflow-x:auto}.small{font-size:12px;color:var(--muted)}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.filedrop{border:1px dashed var(--border);border-radius:12px;padding:14px;background:var(--surface2)}.filedrop input{max-width:100%}.pillbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}.pill{border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:700;cursor:pointer}.pill:hover{border-color:var(--blue)}.pill.active{background:var(--blue);border-color:var(--blue);color:#fff}.pill-toggle{display:flex;gap:6px;margin-bottom:14px;padding:0 16px}
.reminder-group{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--surface2)}
.reminder-head{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:4px}
.reminder-bulk{margin-left:auto;display:flex;gap:6px}
.reminder-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--border)}
.reminder-naam{min-width:0;overflow:hidden;text-overflow:ellipsis}
.reminder-acts{display:flex;gap:6px;flex:0 0 auto}
.reminder-acts .btn,.reminder-bulk .btn{padding:5px 9px;font-size:12px}
@media(max-width:600px){.reminder-row{flex-direction:column;align-items:flex-start;gap:4px}.reminder-bulk{flex-wrap:wrap}}
.scan-result{margin-top:14px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface2)}
.scan-name{font-size:16px;margin-bottom:8px}
.scan-status{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.scan-acts{display:flex;flex-wrap:wrap;gap:8px}
.rijb-cats{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;min-height:38px;height:auto!important}
.rijb-cat{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.rijb-cat input{margin:0}
.rijb-cats.rijb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 14px;align-items:center}
.diet-tag{display:inline-block;border:1px solid var(--border);background:var(--surface2);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:600;margin:2px 4px 2px 0;white-space:nowrap}
.diet-tag.alg{border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.10);color:var(--orange)}
.taak-desc{color:var(--muted);margin-top:3px;line-height:1.35;white-space:normal}
.func-item{padding:8px 0;border-bottom:1px solid var(--border)}
.func-item:last-child{border-bottom:none}
.func-title{font-weight:800;font-size:13px}
.coord-cell{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.coord-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--surface2);border-radius:8px;padding:3px 6px 3px 8px;font-size:12px;font-weight:700;white-space:nowrap}
.coord-chip.hoofd{border-color:var(--blue);background:rgba(37,99,235,.10)}
.coord-star{color:var(--blue)}
.coord-mini{border:none;background:transparent;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;padding:0 2px}
.coord-mini:hover{color:var(--blue)}
.coord-add{display:inline-flex;gap:6px;align-items:center}
.coord-add .input{height:32px;width:150px}
.vp-activity-row{background:var(--surface2)}
.vp-block.vp-activity{background:var(--purple);color:#fff;font-weight:800}
.vp-sticky-top{position:sticky;top:0;z-index:30;background:var(--surface)}
.visual-planning .vp-sticky-top .vp-head{position:static}
.vp-team-pill.active{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.middel-ex-editor{display:flex;flex-wrap:wrap;gap:6px}
.middel-ex-editor input{width:88px}
/* Visuele planning beter leesbaar op mobiel: naam-kolom blijft in beeld tijdens horizontaal scrollen. */
.vp-scroll{-webkit-overflow-scrolling:touch}
@media(max-width:700px){
  .visual-planning{overflow:visible;width:max-content;min-width:100%}
  .vp-name,.vp-name-head{min-width:120px!important;max-width:120px!important;position:sticky;left:0;z-index:3;background:var(--surface);box-shadow:2px 0 0 var(--border)}
  .vp-row:hover .vp-name{background:var(--surface2)}
}
.uit-bulkbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
.uit-bulk-actions{display:flex;flex-wrap:wrap;gap:6px}
.uit-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.uit-check input{margin:0}body.compact .main{padding:14px 18px}body.compact th,body.compact td{padding:5px 7px;font-size:12px}body.compact .grid{padding:12px;gap:8px}body.compact .card{padding:10px}body.compact .val{font-size:23px}@media(max-width:900px){.split{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column;padding:14px 16px}.main{padding:16px}.search,.input{width:100%;min-width:0}.tools{width:100%}}

.visual-planning{background:var(--surface);border:1px solid var(--border);border-radius:15px;overflow:visible;box-shadow:var(--shadow)}
.vp-head{display:flex;border-bottom:1px solid var(--border);background:var(--surface2)}
.vp-name-head{min-width:210px;max-width:320px;padding:9px 12px;border-right:1px solid var(--border);font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted)}
.vp-axis{height:34px;position:relative;flex:1;min-width:760px}.vp-time{position:absolute;top:9px;transform:translateX(-50%);font-family:'DM Mono',monospace;font-size:10px;color:var(--muted)}
.vp-body{position:relative}.vp-row{display:flex;min-height:34px;border-bottom:1px solid var(--border)}.vp-row:last-child{border-bottom:none}.vp-row:hover{background:rgba(0,0,0,.03)}body.dark .vp-row:hover{background:rgba(255,255,255,.04)}
.vp-name{min-width:210px;max-width:320px;padding:7px 12px;border-right:1px solid var(--border);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vp-name .small{display:block;font-size:10px;font-weight:500;color:var(--muted)}
.vp-line{position:relative;flex:1;min-width:760px}.vp-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--border);opacity:.55}.vp-block{position:absolute;top:5px;bottom:5px;border-radius:5px;padding:2px 7px;color:white;font-size:10px;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.vp-open{outline:2px dashed rgba(255,255,255,.75);cursor:pointer}.vp-block:not(.vp-open){cursor:default}.vp-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}.vp-scroll{overflow:auto}.autoheight{overflow:hidden;min-height:auto!important}
body.compact .vp-row{min-height:24px}body.compact .vp-block{top:3px;bottom:3px;font-size:9px;padding:1px 5px}body.compact .vp-name{padding:4px 9px;font-size:11px}

.assign-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.assign-modal{width:min(560px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden}
.assign-modal-head{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface2)}.assign-modal-head h2{font-size:16px}.assign-modal-body{padding:16px}.assign-modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:0 16px 16px}.suggestions{margin-top:8px;border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:240px;overflow-y:auto;background:var(--surface)}.suggestion{padding:9px 11px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px}.suggestion:last-child{border-bottom:none}.suggestion:hover,.suggestion.active{background:rgba(37,99,235,.10)}.suggestion-new{color:var(--green);font-weight:800}.assign-shift-line{font-size:12px;color:var(--muted);margin-top:4px}

.manage-stack{display:block}
.manage-sticky{position:sticky;top:86px;z-index:90}
.manage-collapsed-bar{position:sticky;top:86px;z-index:90;display:none;align-items:center;gap:10px;width:100%;padding:13px 16px;margin-bottom:18px;background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow);cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;color:var(--blue);text-align:left}
.manage-collapsed-bar:hover{border-color:var(--blue)}
.manage-collapsed-bar .mcb-label{display:inline-flex;align-items:center;gap:8px}
.manage-collapsed-bar .mcb-hint{margin-left:auto;font-weight:700;color:var(--muted)}
.manage-collapse-btn{white-space:nowrap}
.manage-scroll{max-height:620px;overflow-y:auto}
.manage-scroll table thead th{position:sticky;top:0;z-index:8;background:var(--surface2)}
#tblPlan td:nth-child(7){min-width:460px;white-space:normal;line-height:1.35}
#tblPlan td:nth-child(3){min-width:90px}
#tblPlan td:nth-child(4){min-width:150px}
#tblTaken td:nth-child(3){min-width:320px}
#tblMed td:nth-child(9){min-width:260px;white-space:normal;line-height:1.35}
.manage-filterbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.manage-filterbar .pill{user-select:none}


.card.clickable{cursor:pointer;transition:transform .15s,border-color .15s}
.card.clickable:hover{transform:translateY(-2px);border-color:var(--blue)}
.settings-small-table td:first-child{width:70%}
.settings-small-table .input{min-width:0;width:100%}


.settings-row{
    display:grid;
    grid-template-columns:minmax(320px,420px) minmax(420px,1fr);
    gap:16px;
    margin-bottom:16px;
    align-items:start;
}
.settings-row .panel{
    margin-bottom:0;
}
@media (max-width:1200px){
    .settings-row{
        grid-template-columns:1fr;
    }
}


.volunteer-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}
.volunteer-modal{width:min(980px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.volunteer-modal-head{padding:16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.volunteer-modal-body{padding:16px}.volunteer-day{margin:16px 0 8px;font-weight:800}.volunteer-shift{border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--surface2)}
.vc-meta{margin:14px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface2);padding:2px 14px}
.vc-meta-row{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--border)}
.vc-meta-row:first-child{border-top:0}
.vc-meta-k{flex:0 0 150px;color:var(--muted);font-weight:600;font-size:13px}
.vc-meta-v{flex:1;min-width:0}
@media(max-width:600px){.vc-meta-row{flex-direction:column;gap:4px}.vc-meta-k{flex-basis:auto}}
/* Detailkaart medewerker — verzorgde opmaak (kop, icoon-tegels, team-balken, historie) */
.volunteer-modal-head{align-items:center}
.vc-head{display:flex;align-items:center;gap:14px;min-width:0}
.vc-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--surface)}
.vc-avatar-mono{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:var(--blue);background:rgba(37,99,235,.14)}
.vc-head-txt{min-width:0}
.vc-head-txt h2{margin:0;font-size:22px;line-height:1.15}
.vc-contact{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;color:var(--muted);font-size:13px}
.vc-contact span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.vc-contact i{display:inline-flex;width:15px;height:15px;color:var(--muted);flex:0 0 auto}
.vc-contact i svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vc-close{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--muted);padding:0}
.vc-close:hover{background:var(--surface2);color:var(--text)}
.vc-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.volunteer-modal .cards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;overflow:visible}
.volunteer-modal .cards .card{flex:1 1 150px;min-width:140px;display:flex;flex-direction:row;align-items:center;gap:11px;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:12px 14px;box-shadow:none}
.volunteer-modal .cards .card:hover{transform:none;background:var(--surface)}
.volunteer-modal .stat-icon{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--surface2);color:var(--blue);margin:0}
.volunteer-modal .stat-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.volunteer-modal .stat-icon.green{color:#16a34a}
.volunteer-modal .stat-icon.orange{color:var(--orange)}
.volunteer-modal .stat-icon.purple{color:#7c3aed}
.volunteer-modal .stat-icon.red{color:var(--red)}
.volunteer-modal .stat-copy{min-width:0}
.volunteer-modal .stat-copy .val{font-size:19px;font-weight:800;line-height:1.05}
.volunteer-modal .stat-copy .lbl{margin-top:2px;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.vc-midrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:2px 0 4px}
.vc-midrow .vc-meta{flex:1 1 300px;margin:0}
.vc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.vc-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);font-weight:700;font-size:13px;text-decoration:none;cursor:pointer}
.vc-btn i{display:inline-flex;width:17px;height:17px;flex:0 0 auto}
.vc-btn i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vc-btn.mail{color:var(--blue);border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.08)}
.vc-btn.wa{color:#16a34a;border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.vc-btn.disabled{color:var(--muted);opacity:.7;cursor:default}
.vc-section{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-weight:800;font-size:15px}
.vc-section svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.vc-date{margin:12px 0 6px;font-weight:700;color:var(--muted);font-size:13px}
.vshift{display:flex;align-items:stretch;border:1px solid var(--border);border-left:4px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:8px;background:var(--surface)}
.vshift-time{flex:0 0 auto;display:flex;align-items:center;padding:11px 14px;background:var(--surface2);font-weight:700;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}
.vshift-body{padding:10px 14px;min-width:0}
.vshift-desc{font-weight:600}
.vshift-note{margin-top:3px;font-size:12.5px;color:var(--muted)}
.vc-hist{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid var(--border)}
.vc-hist:first-of-type{border-top:0}
.vc-hist-ic{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface2)}
.vc-hist-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vc-hist-ic.in{color:var(--blue)}
.vc-hist-ic.uit{color:#16a34a}
.vc-hist-txt{flex:1;min-width:0}
.vc-hist-time{color:var(--muted);font-size:12px;white-space:nowrap}
@media(max-width:640px){.vshift{flex-direction:column}.vshift-time{border-bottom:1px solid var(--border)}.vc-actions{margin-left:0}}
/* ---- Accreditatiepas-templates (Instellingen → Accreditatie) ---- */
.accr-tpl-cards{display:flex;flex-wrap:wrap;gap:16px;margin:6px 0 4px}
.accr-tpl-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border:2px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.accr-tpl-card.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.accr-tpl-name{font-weight:700;font-size:13px}
.accr-tpl-check{color:var(--blue)}
.accr-tpl-preview-wrap{width:135px;height:190px;overflow:hidden;border-radius:6px;border:1px solid var(--border);background:#fff}
.accr-tpl-preview{width:105mm;height:148mm;transform:scale(.341);transform-origin:top left}
.accr-tpl-preview .print-pass{margin:0}
.accr-kleuren{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}
.accr-kleur{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted)}
.accr-kleur input[type=color]{width:58px;height:34px;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer;padding:2px}
.accr-qrbron{margin-top:20px}
.accr-qrbron label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--muted);max-width:260px}
.accr-qrbron select{max-width:260px}
.print-pass-sub{font-weight:700;opacity:.7;font-size:.82em}
/* Kerncijfer-tegels op het dashboard (verving de statistiekbalk boven het menu) */
.kpi-row{display:flex;flex-wrap:wrap;gap:10px}
.kpi-tile{flex:1 1 90px;min-width:82px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer;font:inherit;color:inherit;text-align:left}
.kpi-tile:hover{border-color:var(--blue)}
.kpi-tile.kpi-static{cursor:default}
.kpi-tile.kpi-static:hover{border-color:var(--border)}
.kpi-val{font-size:22px;font-weight:800;color:var(--blue);line-height:1.1}
.kpi-lbl{font-size:11px;color:var(--muted)}
/* Piekdag-cel in de dagelijkse verbruik-tabel (Abonnement) */
.abo-peak{background:rgba(37,99,235,.16);color:var(--blue);font-weight:800;border-radius:4px}
/* Melding bij het scannen: gekozen toegangsdatum wijkt af van de echte dag van vandaag */
.scan-datum-mismatch{margin-top:6px;padding:6px 10px;border-radius:8px;background:rgba(249,115,22,.16);color:var(--orange);font-weight:800;font-size:12.5px;line-height:1.35}
/* Telling afgedrukte polsbandjes (facturatie) */
.polsband-telling{padding:12px 16px 6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.polsband-totaal{font-size:26px;font-weight:800;color:var(--blue);line-height:1}
.polsband-totaal span{font-size:14px;font-weight:600;color:var(--muted)}
/* Actiepunten compacter: twee kolommen op breed, strakkere rijen */
.dashboard-widgets .widget-actiepunten .action-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dashboard-widgets .widget-actiepunten .action-item{padding:6px 9px;border-radius:8px}
@media(max-width:720px){.dashboard-widgets .widget-actiepunten .action-list{grid-template-columns:1fr}}
/* Dagen-checkboxes in het taakformulier (bezettingscontrole per dag) */
.dag-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px 14px;margin-top:2px}
.dag-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.dag-check input{margin:0;flex:0 0 auto}
.form-duo{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;text-transform:none;letter-spacing:normal;color:var(--text)}
.consent-check input{margin-top:2px;flex:0 0 auto}
.diet-cell{cursor:pointer;min-width:74px}
.diet-cell:hover{background:rgba(37,99,235,.06)}
.diet-cell.open{background:rgba(37,99,235,.10)}
.diet-consent-warn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:11px;margin-left:4px;vertical-align:middle}
.diet-editor-row>td{background:var(--surface2);padding:12px 16px}
.mtijd{width:110px;min-width:110px;padding:6px 8px}
.mtijd-tabel td,.mtijd-tabel th{white-space:nowrap;text-align:center}
.mtijd-tabel td:first-child,.mtijd-tabel th:first-child{text-align:left}
/* Uitgiftescherm strakker: klikbare status in de kolom, minder kleur (alleen oranje = actie) */
.uitgifte-filters{margin-bottom:12px}
.uit-status{display:inline-block;border:1px solid var(--border);background:transparent;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
button.uit-status{cursor:pointer}
button.uit-status:hover{background:var(--surface2)}
.uit-status.todo{color:var(--orange);border-color:rgba(249,115,22,.35)}
.uit-status.eigen{cursor:default;font-style:italic;border-style:dashed}
.uit-muted{color:var(--muted);font-size:12px}
.uit-act.m.has{border-color:var(--blue);color:var(--blue)}
/* Hoofdmenu: alleen iconen zodra de labelbalk niet in één rij past (geen horizontale schuifbalk) */
.tabs.icons-only{justify-content:center}
.tabs.icons-only .tab-label{display:none}
.tabs.icons-only .tabbtn{min-width:0!important;flex:0 1 auto!important;width:auto!important;padding:10px 15px!important}
/* Gekleurde teamnaam-badge in de teams-lijst (team-eigen kleur) */
.team-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:800;font-size:12.5px;color:#fff;line-height:1.35}
.team-kleur-swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);display:inline-block;vertical-align:middle}
/* Template 2 — Colorblock */
.print-pass.tpl-colorblock{padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column;background:var(--wit);color:var(--navy);font-family:Arial,Helvetica,sans-serif;border:1px solid #111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tpl-colorblock .cb-stripe{position:absolute;left:0;top:0;bottom:0;width:6mm;background:var(--lime);z-index:0}
.tpl-colorblock .cb-top{flex:0 0 33%;background:var(--navy);color:#fff;padding:9mm 9mm 0;position:relative;z-index:1}
.tpl-colorblock .cb-event{font-size:12px;font-weight:800;letter-spacing:1.2px;max-width:52mm}
.tpl-colorblock .cb-year{position:absolute;right:8mm;top:7mm;font-size:36px;font-weight:900;color:var(--lime);line-height:1}
.tpl-colorblock .cb-role{position:absolute;left:9mm;bottom:6mm;background:var(--lime);color:var(--navy);padding:2mm 4mm;font-size:9px;font-weight:900;letter-spacing:1px;border-radius:99px}
.tpl-colorblock .cb-photo{position:absolute;right:8mm;top:22%;width:32mm;height:40mm;z-index:2}
.tpl-colorblock .cb-photo-img{width:32mm;height:40mm;object-fit:cover;border-radius:5mm;border:3px solid #fff;background:#fff;box-shadow:0 4px 14px #0003;display:block}
.tpl-colorblock .cb-content{flex:1 1 auto;min-height:0;overflow:hidden;position:relative;z-index:1;padding:14mm 9mm 4mm}
.tpl-colorblock .cb-name{font-size:30px;line-height:.95;font-weight:800;color:var(--navy);max-width:56mm;margin:0}
.tpl-colorblock .cb-teams{margin-top:6mm;display:flex;gap:2mm;flex-wrap:wrap}
.tpl-colorblock .cb-pill{background:#edf1f5;padding:2.2mm 4mm;border-radius:99px;font-weight:700;font-size:11px;color:var(--navy)}
.tpl-colorblock .cb-access-title{font-size:8px;letter-spacing:1px;text-transform:uppercase;font-weight:800;color:#627080;margin-top:6mm}
.tpl-colorblock .cb-access{display:flex;gap:2mm;margin-top:3mm;flex-wrap:wrap}
.tpl-colorblock .cb-zone{background:#e7ebf0;color:#8a929b;font-weight:800;font-size:11px;padding:1.6mm 3mm;border-radius:99px}
.tpl-colorblock .cb-zone.on{background:var(--navy);color:var(--lime)}
.tpl-colorblock .cb-footer{flex:0 0 auto;position:relative;z-index:1;background:var(--lime);padding:6mm 9mm;display:grid;grid-template-columns:1fr 27mm;align-items:center;gap:5mm}
.tpl-colorblock .cb-scan{font-size:11px;color:var(--navy);font-weight:800;line-height:1.25}
.tpl-colorblock .cb-code{font-size:8px;margin-top:2mm;letter-spacing:.5px;color:var(--navy);font-family:monospace}
.tpl-colorblock .cb-qr{width:27mm;height:27mm;object-fit:contain;background:#fff;padding:1.5mm;border-radius:2mm}
/* Template 3 — Dark-tech */
.print-pass.tpl-darktech{padding:8mm;overflow:hidden;position:relative;display:block;background:#0c0f14;color:#f7f9fb;font-family:Arial,Helvetica,sans-serif;border:1px solid #111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tpl-darktech .dt-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:8mm 8mm}
.tpl-darktech .dt-corner{position:absolute;width:20mm;height:20mm;border:1px solid var(--accent);right:-11mm;top:-11mm;transform:rotate(45deg)}
.tpl-darktech .dt-header{position:relative;display:flex;justify-content:space-between;align-items:center;gap:4mm}
.tpl-darktech .dt-event{font-size:11px;font-weight:800;letter-spacing:1.2px}
.tpl-darktech .dt-status{font-size:8px;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:1.4mm 3mm;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.tpl-darktech .dt-label{font-size:8px;color:var(--accent);letter-spacing:1.2px;text-transform:uppercase}
.tpl-darktech .dt-hero{position:relative;margin-top:7mm;background:#151a22;border:1px solid #26303d;border-radius:5mm;padding:6mm;display:grid;grid-template-columns:1fr 30mm;gap:5mm;align-items:center}
.tpl-darktech .dt-name{font-size:26px;line-height:.94;margin:3mm 0 0;font-weight:800}
.tpl-darktech .dt-photo{width:30mm;height:38mm;object-fit:cover;border-radius:3mm;background:#0c0f14;display:block}
.tpl-darktech .dt-teams{position:relative;margin-top:5mm;display:grid;grid-template-columns:1fr 1fr;gap:3mm}
.tpl-darktech .dt-team{background:#151a22;border:1px solid #26303d;border-radius:3mm;padding:4mm}
.tpl-darktech .dt-team strong{display:block;font-size:14px;margin-top:2mm;color:#f7f9fb}
.tpl-darktech .dt-access{position:relative;margin-top:5mm;background:#151a22;border:1px solid #26303d;border-radius:4mm;padding:4mm}
.tpl-darktech .dt-zones{display:flex;flex-wrap:wrap;gap:2mm;margin-top:3mm}
.tpl-darktech .dt-zone{background:#242b35;color:#69727e;font-weight:800;font-size:11px;padding:1.6mm 3mm;border-radius:2mm}
.tpl-darktech .dt-zone.on{background:var(--accent);color:#071017}
.tpl-darktech .dt-scan{position:absolute;left:8mm;right:8mm;bottom:8mm;border:1px solid #26303d;background:#11161d;border-radius:5mm;padding:4mm;display:grid;grid-template-columns:26mm 1fr;gap:5mm;align-items:center}
.tpl-darktech .dt-qr{width:26mm;height:26mm;object-fit:contain;background:#fff;padding:1.5mm;border-radius:2mm}
.tpl-darktech .dt-scan-title{font-size:11px;font-weight:800}
.tpl-darktech .dt-code{font-family:monospace;font-size:8px;color:var(--accent);margin-top:2mm;word-break:break-all}
.bulk-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.example-box{display:none;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);white-space:pre-wrap;font-family:'DM Mono',monospace;font-size:11px;overflow:auto}
.filedrop:hover .example-box{display:block}


.header-title{display:flex;flex-direction:column;gap:2px}
.title-main{font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.4px}
.brand-logo{display:flex;align-items:baseline;line-height:1;font-weight:800;font-size:26px;letter-spacing:-1px;white-space:nowrap}.brand-logo .cd-crew{color:var(--cd-navy)}.brand-logo .cd-deck{color:var(--cd-orange)}
.brand-logo svg{height:34px;width:auto;display:block}
@media(max-width:900px){.brand-logo{font-size:22px}}
.title-event{font-size:14px;font-weight:600;color:var(--muted);line-height:1.2}
.capacity-table tbody tr:nth-child(even){background:rgba(15,23,42,.035)}
body.dark .capacity-table tbody tr:nth-child(even){background:rgba(255,255,255,.045)}
.capacity-table tbody tr:hover{background:rgba(37,99,235,.08)}
body.dark .capacity-table tbody tr:hover{background:rgba(37,99,235,.16)}
.capacity-table td,.capacity-table th{padding-top:10px;padding-bottom:10px}


.dashboard-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px}
/* Actiepunten als widget: twee vakjes breed (span 2 telt de tussenruimte automatisch mee).
   Bij één kolom (smal scherm) klemt grid de span vanzelf naar 1 = volle breedte. */
.dashboard-widgets .widget-actiepunten{grid-column:span 2}
/* Onder ~640px passen geen twee vakjes meer; span 2 zou dan twee te smalle kolommen forceren. */
@media(max-width:640px){.dashboard-widgets .widget-actiepunten{grid-column:auto}}
.dashboard-widgets .widget-actiepunten .action-list{margin-top:2px}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.widget h3{font-size:14px;margin-bottom:10px}.widget-sub{font-size:12px;color:var(--muted);margin-top:6px}
.gauge{--p:50;--c:var(--blue);width:142px;height:142px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%), var(--border) 0);display:grid;place-items:center;margin:8px auto;position:relative}
.gauge:before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--surface)}
.gauge span{position:relative;font-size:26px;font-weight:800}
.bar-list{display:flex;flex-direction:column;gap:8px}.bar-row{display:grid;grid-template-columns:90px 1fr 42px;gap:8px;align-items:center;font-size:12px}
.bar-track{height:9px;background:var(--border);border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:var(--blue);border-radius:999px}
.sparkline{height:110px;display:flex;align-items:flex-end;gap:5px;padding-top:10px}.sparkbar{flex:1;min-width:8px;background:var(--blue);border-radius:6px 6px 0 0;opacity:.85}.sparkbar:hover{opacity:1}
.action-list{display:flex;flex-direction:column;gap:8px}.action-item{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--surface2)}
.btn.disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;text-decoration:none}
a.btn{text-decoration:none;display:inline-block}
.comm-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}


.sparkline-wrap{display:flex;align-items:flex-end;gap:8px;height:145px;overflow-x:auto;padding-top:10px}
.spark-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:34px;height:135px}
.spark-date{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;color:var(--muted);white-space:nowrap}
.action-list{font-size:12px}.action-item{font-size:12px}.action-item .btn{font-size:11px;padding:6px 9px}
.settings-task-row{display:grid;grid-template-columns:minmax(320px,420px) minmax(420px,1fr);gap:16px;margin-bottom:16px;align-items:start}
@media(max-width:1200px){.settings-task-row{grid-template-columns:1fr}}


.day-list{display:flex;flex-direction:column;gap:8px}
.day-row{display:grid;grid-template-columns:86px 1fr 42px;gap:8px;align-items:center;font-size:12px}
.day-track{height:10px;background:var(--border);border-radius:999px;overflow:hidden}
.day-fill{height:100%;background:var(--blue);border-radius:999px}


.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:16px}
.badge-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:14px;min-height:190px;display:grid;grid-template-columns:1fr 110px;gap:12px;break-inside:avoid}
.badge-card h3{font-size:17px;margin-bottom:6px}.badge-meta{font-size:12px;color:var(--muted);line-height:1.45}.badge-qr{width:104px;height:104px;border:1px solid var(--border);border-radius:8px;background:white;padding:4px}
.badge-token{font-size:9px;word-break:break-all;color:var(--muted);grid-column:1/3;margin-top:4px}
.scan-box{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:16px;padding:16px}
.scan-result{border-radius:16px;padding:18px;border:1px solid var(--border);background:var(--surface2);min-height:160px}
.scan-result.ok{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35)}
.scan-result.bad{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
.scan-result.warn{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.35)}
.scan-big{font-size:28px;font-weight:800;margin-bottom:8px}.camera-preview{width:100%;max-width:420px;border-radius:14px;background:#111;display:none}
@media print{.topbar,.tabs,#stats,.panel-head .tools,.no-print,.form-actions{display:none!important}.main{padding:0}.panel{box-shadow:none;border:none}.badge-grid{grid-template-columns:repeat(2,1fr);gap:8mm;padding:0}.badge-card{page-break-inside:avoid;border:1px solid #999}.badge-qr{border:1px solid #ccc}}
@media(max-width:900px){.scan-box{grid-template-columns:1fr}.badge-card{grid-template-columns:1fr}.badge-token{grid-column:1}.badge-qr{margin:auto}}


.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;padding:16px}
.template-grid .form-row{height:100%}
.template-grid textarea.input{min-height:240px;height:240px;resize:vertical}
.template-grid .small{min-height:34px}


.print-layout-controls{display:flex;gap:8px;flex-wrap:wrap;padding:16px}
.badge-sheet.layout-6{display:grid;grid-template-columns:repeat(2,1fr);gap:8mm;padding:8mm}
.badge-sheet.layout-2{display:grid;grid-template-columns:1fr;gap:10mm;padding:10mm}
.badge-sheet.layout-1{display:grid;grid-template-columns:1fr;gap:0;padding:10mm}
.badge-sheet.layout-1 .badge-card{max-width:105mm;min-height:148mm;margin:0 auto}
.badge-sheet.layout-2 .badge-card{max-width:105mm;min-height:148mm;margin:0 auto}
.badge-sheet.layout-6 .badge-card{min-height:80mm}
.badge-card{break-inside:avoid;page-break-inside:avoid}
.badge-teams{margin-top:10px;font-size:13px;line-height:1.45}
.badge-event{font-weight:700;color:var(--muted);font-size:12px;margin-bottom:8px}
.badge-name{font-size:20px;font-weight:800;margin-bottom:4px}
.badge-print-only-title{display:none}
@media print{
 body.print-badges .topbar,
 body.print-badges .tabs,
 body.print-badges #stats,
 body.print-badges .panel:not(.print-panel),
 body.print-badges .panel-head,
 body.print-badges .no-print,
 body.print-badges .print-layout-controls{display:none!important}
 body.print-badges .main{padding:0!important}
 body.print-badges #content{display:block!important}
 body.print-badges .print-panel{display:block!important;border:none!important;box-shadow:none!important;margin:0!important}
 body.print-badges .badge-print-only-title{display:block;text-align:center;font-size:18px;font-weight:800;margin:0 0 6mm}
 body.print-badges .badge-sheet.layout-1{grid-template-columns:1fr;padding:10mm}
 body.print-badges .badge-sheet.layout-2{grid-template-columns:1fr;padding:10mm;gap:8mm}
 body.print-badges .badge-sheet.layout-6{grid-template-columns:repeat(2,1fr);padding:8mm;gap:6mm}
 body.print-badges .badge-sheet.layout-1 .badge-card{height:148mm;width:105mm}
 body.print-badges .badge-sheet.layout-2 .badge-card{height:135mm;width:105mm}
 body.print-badges .badge-sheet.layout-6 .badge-card{height:82mm}
 body.print-badges .badge-card{border:1px solid #999!important;background:white!important;color:#111!important;page-break-inside:avoid}
 body.print-badges .badge-qr{border:1px solid #ccc!important}
}


.accr-screen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:16px}
.accr-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 104px;gap:12px;align-items:start}
.accr-name{font-size:18px;font-weight:800;line-height:1.15;margin-bottom:4px}
.accr-event{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px}
.accr-team-pill{display:inline-block;border:1px solid var(--border);background:var(--surface2);border-radius:8px;padding:4px 9px;font-size:11px;font-weight:800;line-height:1.3;margin:0 4px 5px 0}
.accr-kenmerken{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.accr-kenmerk{display:inline-flex;align-items:center;justify-content:center;min-width:30px;font-size:22px;font-weight:900;line-height:1;border:2px solid var(--blue);color:var(--blue);border-radius:8px;padding:2px 8px}
.accr-card .badge-qr{width:96px;height:96px}
.accr-card-actions{grid-column:1/3;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.print-pass-stage{display:none}
.print-pass{width:105mm;height:148mm;border:1px solid #111;background:#fff;color:#111;box-sizing:border-box;padding:10mm;position:relative;font-family:'DM Sans',Arial,sans-serif;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:flex;flex-direction:column}
.print-pass-header{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;border-bottom:2px solid #111;padding-bottom:5mm;margin-bottom:10mm}
.print-pass-name{font-size:28px;font-weight:900;line-height:1.05;margin-bottom:8mm}
/* flex:0 0 auto = niet krimpen. Met min-height:0 kromp dit blok onder zijn inhoud, waardoor de
   geldigheidsdagen buiten de container vielen en over de kenmerken heen liepen. */
.print-pass-top{display:flex;gap:6mm;align-items:flex-start;justify-content:space-between;flex:0 0 auto}
/* Geldigheidsdagen op de deelnemerspas: de pas geldt alleen op de dagen van het deelnemende team. */
.print-pass-dagen{display:flex;flex-wrap:wrap;gap:1.5mm;margin-bottom:4mm}
.print-pass-dag{border:1.5px solid #111;border-radius:1.5mm;padding:0.5mm 1.5mm;font-size:10px;font-weight:800;white-space:nowrap;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.print-pass-dag.dag-geen{border-style:dashed;font-weight:700}
.accr-dagen{margin-top:6px;font-size:11px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.accr-dagen-lbl{width:100%;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:var(--muted);margin-bottom:1px}
.print-pass-top-main{min-width:0;flex:1 1 auto}
.print-pass-foto{flex:0 0 auto;width:24mm;height:30mm;object-fit:cover;border:1px solid #111;border-radius:2mm;background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.accr-foto{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--surface2);flex:0 0 auto}
.accr-name-row{display:flex;gap:10px;align-items:flex-start}
.foto-field{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.foto-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:var(--surface2)}
.foto-thumb.foto-empty{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);text-align:center;padding:4px}
/* Gender-neutraal silhouet als er (nog) geen foto is — voor het foto-veld, de kaarten en de passen. */
.foto-leeg{display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--muted);overflow:hidden}
.foto-leeg .foto-sil{width:66%;height:66%;fill:currentColor;display:block}
.print-pass-foto.foto-leeg,.accr-foto.foto-leeg{background:#f1f2f4;color:#9aa1ac} /* print/kaart: neutraal grijs */
.foto-actions{display:flex;gap:8px;flex-wrap:wrap}
.print-pass-label{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#555;font-weight:800;margin-bottom:2mm}
.print-pass-teams{font-size:16px;font-weight:800;line-height:1.35}
.print-pass-team{margin-bottom:2mm}
.print-pass-kenmerken{display:flex;flex-wrap:wrap;gap:3mm;margin:2mm 0 3mm}
.print-pass-kenmerk{font-size:44px;font-weight:900;line-height:1;border:2.5px solid #111;border-radius:8px;padding:1mm 4mm;min-width:14mm;text-align:center}
.print-pass-qr{position:absolute;right:10mm;bottom:10mm;width:34mm;height:34mm;border:1px solid #ccc;padding:2mm}
.print-pass-footer{position:absolute;left:10mm;bottom:10mm;font-size:9px;color:#555;width:52mm}
.print-all-sheet{display:none}
@media print{
 body.print-single-pass .topbar,
 body.print-single-pass .tabs,
 body.print-single-pass #stats,
 body.print-single-pass #content,
 body.print-all-passes .topbar,
 body.print-all-passes .tabs,
 body.print-all-passes #stats,
 body.print-all-passes #content{display:none!important}
 body.print-single-pass .print-pass-stage,
 body.print-all-passes .print-pass-stage{display:block!important}
 body.print-single-pass .main,
 body.print-all-passes .main{padding:0!important}
 body.print-single-pass .print-pass-stage{position:fixed;left:0;top:0;width:105mm;height:148mm}
 body.print-single-pass .print-pass{width:105mm;height:148mm;margin:0}
 body.print-all-passes .print-pass-stage{display:block!important}
 body.print-all-passes .print-all-sheet{display:grid!important;grid-template-columns:105mm 105mm;grid-auto-rows:148mm;gap:0;width:210mm}
 body.print-all-passes .print-pass{width:105mm;height:148mm;border:1px solid #999;break-inside:avoid;page-break-inside:avoid}
 @page{size:A4 portrait;margin:0}
}


.template-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;padding:16px}
.template-grid-4 textarea.input{min-height:230px;height:230px;resize:vertical}
.template-grid-4 .small{min-height:34px}


.comm-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:start}
.comm-action-block{display:flex;flex-direction:column;gap:3px}
.comm-last{font-size:10px;color:var(--muted);line-height:1.2}


.comm-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.comm-action-block{display:block}
.comm-action-block .comm-last{display:none}
.comm-actions .btn{white-space:nowrap}


.report-scroll{
  max-height:480px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
}
.report-scroll.compact{
  max-height:400px;
}
.report-scroll table,
.manage-scroll table,
.plan-scroll table,
.vp-scroll table{
  margin:0;
}
.report-scroll thead th,
.manage-scroll thead th,
.plan-scroll thead th,
.vp-scroll thead th{
  position:sticky;
  top:0;
  z-index:12;
  background:var(--surface2);
  box-shadow:0 1px 0 var(--border);
}
.report-scroll tbody tr:nth-child(even){
  background:rgba(15,23,42,.025);
}
body.dark .report-scroll tbody tr:nth-child(even){
  background:rgba(255,255,255,.035);
}


/* Sticky hoofdmenu */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
}
.tabs{
  position:sticky;
  top:72px;
  z-index:999;
  background:var(--bg);
  padding-top:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

/* Sticky headers voor alle interne scroll-tabellen */
.manage-scroll thead th,
.plan-scroll thead th,
.report-scroll thead th,
.vp-scroll thead th,
.table-scroll thead th,
#tblMed thead th,
#tblPlan thead th,
#tblOpen thead th,
#tblComm thead th,
#tblAanwezig thead th,
#tblUitgifte thead th,
#tblTeamsManage thead th,
#tblTaken thead th,
#tblDatumsManage thead th,
#tblMaten thead th{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--surface2);
  box-shadow:0 1px 0 var(--border);
}

/* Interne scrollblokken voor veelgebruikte tabellen */
.table-scroll{
  max-height:560px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
}
.table-scroll.compact{
  max-height:440px;
}

/* Visuele planning: header/tijdlijn vast binnen eigen scrollcontainer */
.vp-scroll{
  max-height:calc(100vh - 230px);
  overflow:auto;
}
.vp-scroll .vp-head{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--surface);
  box-shadow:0 1px 0 var(--border);
}

/* Iets meer ruimte zodat sticky tabs niet plakken aan content */
.main{
  scroll-margin-top:130px;
}


/* Correctie sticky tabelheaders */
.scroll-table{
  max-height:560px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
}
.scroll-table.compact{max-height:420px}
.scroll-table table{margin:0;width:100%}
.scroll-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  background:var(--surface2)!important;
  box-shadow:0 1px 0 var(--border),0 2px 8px rgba(0,0,0,.04);
}
.manage-scroll,
.report-scroll,
.table-scroll{
  overflow:auto;
}
.manage-scroll thead th,
.report-scroll thead th,
.table-scroll thead th{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  background:var(--surface2)!important;
}


.vp-scroll .vp-head{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  background:var(--surface)!important;
}


/* Sticky hoofdmenu blijft, maar panelkoppen/filterbalken zijn niet sticky */
.panel-head,
.manage-filterbar,
.pillbar,
.vp-toolbar{
  position:relative!important;
  top:auto!important;
  z-index:auto!important;
}

/* Correcte interne scrollcontainers */
.inner-scroll{
  max-height:560px;
  overflow:auto;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.inner-scroll.compact{max-height:430px}
.inner-scroll table{margin:0;width:100%}
.inner-scroll thead th{
  position:sticky!important;
  top:0!important;
  z-index:25!important;
  background:var(--surface2)!important;
  box-shadow:0 1px 0 var(--border),0 2px 6px rgba(15,23,42,.05);
}

/* Legacy wrappers ook corrigeren */
.manage-scroll,
.report-scroll,
.table-scroll,
.scroll-table{
  overflow:auto;
}
.manage-scroll thead th,
.report-scroll thead th,
.table-scroll thead th,
.scroll-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:25!important;
  background:var(--surface2)!important;
}

/* Visuele planning: alleen de medewerker/tijdlijn-header blijft vast in de planning-scroll */
.vp-scroll{
  max-height:calc(100vh - 300px)!important;
  overflow:auto!important;
}
.vp-scroll .vp-head{
  position:sticky!important;
  top:0!important;
  z-index:35!important;
  background:var(--surface)!important;
  box-shadow:0 1px 0 var(--border),0 2px 8px rgba(15,23,42,.05);
}
.visual-planning .vp-head{
  position:sticky!important;
  top:0!important;
}


.dashboard-action-half{
  width:min(50%,720px);
}
@media(max-width:1000px){
  .dashboard-action-half{width:100%}
}
.filter-inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.filter-inline label{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.4px;
}


.avail-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:1400;display:flex;align-items:center;justify-content:center;padding:18px}
.avail-modal{width:min(980px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.avail-modal-head{padding:16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.avail-modal-body{padding:16px}
.avail-row{display:grid;grid-template-columns:150px 130px 1fr;gap:12px;align-items:center;border-bottom:1px solid var(--border);padding:10px 0}
.avail-times{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.avail-times .input{min-width:120px;width:130px}
@media(max-width:760px){.avail-row{grid-template-columns:1fr}.avail-times .input{width:100%}}


/* Layout versie C: compacte statistiekbalk + hoofdmenu met iconen */
.topbar{
  box-shadow:none!important;
  padding:14px 28px!important;
}
.main{
  padding-top:16px!important;
}
#stats.cards{
  display:flex!important;
  align-items:center;
  gap:0!important;
  overflow-x:auto;
  white-space:nowrap;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:8px 12px;
  margin-bottom:18px;
}
#stats .card{
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  min-width:132px;
  padding:10px 18px!important;
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}
#stats .card:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:16%;
  bottom:16%;
  width:1px;
  background:var(--border);
}
#stats .card:hover{
  transform:none!important;
  background:rgba(37,99,235,.045)!important;
}
.stat-icon{
  font-size:22px;
  line-height:1;
  opacity:.95;
  flex:0 0 auto;
}
.stat-copy{
  min-width:0;
}
#stats .val{
  font-size:20px!important;
  line-height:1.05!important;
  margin:0!important;
}
#stats .lbl{
  margin-top:4px!important;
  font-size:10px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--text)!important;
  max-width:96px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tabs{
  display:flex!important;
  gap:0!important;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:16px!important;
  padding:4px!important;
  box-shadow:var(--shadow);
  overflow-x:auto;
  flex-wrap:nowrap!important;
  margin-bottom:22px!important;
}
.tabbtn{
  min-width:100px;
  border:0!important;
  border-right:1px solid var(--border)!important;
  border-radius:10px!important;
  background:transparent!important;
  padding:11px 13px!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:var(--text)!important;
}
.tabbtn:last-child{
  border-right:0!important;
}
.tabbtn .tab-ico{
  font-size:20px;
  line-height:1;
  font-weight:400;
}
.tabbtn .tab-label{
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.tabbtn.active{
  background:var(--blue)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(37,99,235,.28);
}
.tabbtn.active .tab-ico,
.tabbtn.active .tab-label{
  color:#fff!important;
}
body.compact #stats .card{
  padding:8px 14px!important;
  min-width:118px;
}
body.compact #stats .val{
  font-size:18px!important;
}
body.compact .tabbtn{
  min-width:92px;
  padding:9px 11px!important;
}
@media(max-width:900px){
  .topbar{padding:12px 16px!important}
  #stats.cards{border-radius:12px;padding:6px}
  #stats .card{min-width:120px;padding:9px 12px!important}
  .tabs{border-radius:12px}
  .tabbtn{min-width:94px}
}
/* Compacte KPI-strip: icoon NAAST getal, één regel per kaart -> ~halve hoogte. html-prefix wint van duplicaat-regels. */
html body.compact #stats .stat-icon,html body.compact #stats .stat-icon svg{width:22px!important;height:22px!important;margin-bottom:0!important}
html body.compact #stats .card{flex-direction:row!important;align-items:center!important;gap:9px!important;padding:6px 14px!important;flex:0 0 168px!important;width:168px!important;min-width:168px!important;max-width:168px!important}
html body.compact #stats.cards{padding:4px 10px!important;margin-bottom:14px!important;align-items:center!important}
html body.compact #stats .stat-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;overflow:hidden!important;min-width:0!important}
html body.compact #stats .val{font-size:17px!important;margin:0!important;line-height:1.1!important;white-space:nowrap!important}
html body.compact #stats .lbl{margin-top:1px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.1!important}


/* Fix accreditatiepas: footer mag niet achter QR/barcode vallen */
.print-pass-footer{
  position:absolute!important;
  left:10mm!important;
  right:10mm!important;
  bottom:3mm!important;
  width:auto!important;
}

.print-pass-codebox{
  position:absolute;
  right:10mm;
  bottom:28mm;
  width:40mm;
  text-align:center;
}

.print-pass-codebox .print-pass-qr{
  position:static!important;
  display:block!important;
  width:32mm!important;
  height:32mm!important;
  margin:0 auto!important;
  border:1px solid #ccc!important;
  padding:2mm!important;
}
/* Onderin splitsen: locatie/ruimte-kenmerken links, QR rechts (flex space-between). */
/* In de flow (margin-top:auto duwt het naar onderen) i.p.v. absoluut: bij veel geldigheidsdagen
   schoof de bovenkant anders ONDER dit blok door. margin-bottom houdt de oude positie aan. */
.print-pass-bottom{position:static;margin-top:auto;margin-bottom:10mm;display:grid!important;grid-template-columns:1fr auto;align-items:start;gap:4mm}
.print-pass-bottom .print-pass-codebox{position:static!important;width:auto!important;text-align:center;justify-self:end;transform:none!important;left:auto!important;right:auto!important;bottom:auto!important}
.print-pass-bottom .print-pass-kenmerkbox{position:static!important;width:auto!important;justify-self:start;min-width:0}
.print-pass-bottom .print-pass-kenmerken{display:grid!important;grid-template-columns:repeat(3,1fr);gap:1.5mm!important;margin:0!important}
.print-pass-bottom .print-pass-kenmerk{font-size:30px!important;min-width:0;padding:.5mm 1mm}
.print-pass-kenmerk.kenmerk-uit{color:#9a9a9a!important;border-color:#777!important;position:relative;overflow:hidden}
.print-pass-kenmerk.kenmerk-uit::after{content:"";position:absolute;left:50%;top:50%;width:160%;border-top:2.5px solid #222;transform:translate(-50%,-50%) rotate(-35deg)}
.accr-kenmerk.kenmerk-uit{color:var(--muted);border-color:var(--muted);position:relative;overflow:hidden}
.accr-kenmerk.kenmerk-uit::after{content:"";position:absolute;left:50%;top:50%;width:160%;border-top:2px solid var(--text);transform:translate(-50%,-50%) rotate(-35deg)}

.print-pass-token{
  margin-top:2mm!important;
  font-family:'DM Mono',monospace!important;
  font-size:5.8pt!important;
  line-height:1.1!important;
  color:#555!important;
  word-break:break-all!important;
}

.print-pass-barcode{
  position:absolute!important;
  left:10mm!important;
  right:10mm!important;
  bottom:12mm!important;
  width:auto!important;
  height:12mm!important;
  object-fit:fill!important;
}


/* Accreditatiepas zonder barcode: QR net boven begeleidende tekst */
.print-pass-codebox{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:13mm!important;
  width:42mm!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  overflow:visible!important;
}

.print-pass-codebox .print-pass-qr{
  position:static!important;
  display:block!important;
  width:34mm!important;
  height:34mm!important;
  margin:0 auto!important;
  border:1px solid #ccc!important;
  padding:2mm!important;
  background:#fff!important;
}

.print-pass-token{
  margin-top:2mm!important;
  font-family:'DM Mono',monospace!important;
  font-size:5.6pt!important;
  line-height:1.08!important;
  color:#555!important;
  word-break:break-all!important;
  max-width:42mm!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.print-pass-barcode{
  display:none!important;
}

.print-pass-footer{
  position:absolute!important;
  left:10mm!important;
  right:10mm!important;
  bottom:4mm!important;
  width:auto!important;
  font-size:8px!important;
  line-height:1.2!important;
  color:#555!important;
  text-align:left!important;
}


/* Accreditatie aanwezigheid: compacte actieknoppen */
.btn.tiny{
  padding:4px 8px!important;
  font-size:11px!important;
  line-height:1.1!important;
  border-radius:7px!important;
  white-space:nowrap!important;
}


/* Statistiekbalk - SVG stijl zoals visual */
#stats.cards{
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  overflow-x:auto!important;
  white-space:normal!important;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  box-shadow:var(--shadow)!important;
  padding:18px 20px!important;
  margin-bottom:22px!important;
}

#stats .card{
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  min-width:142px!important;
  max-width:168px!important;
  padding:10px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  position:relative!important;
  text-align:center!important;
}

#stats .card:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  top:10%!important;
  bottom:10%!important;
  width:1px!important;
  background:var(--border)!important;
}

#stats .card:hover{
  transform:none!important;
  background:rgba(37,99,235,.035)!important;
}

#stats .stat-icon{
  width:42px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-bottom:4px!important;
  color:var(--muted)!important;
  opacity:1!important;
}

#stats .stat-icon svg{
  width:42px!important;
  height:42px!important;
  display:block!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#stats .stat-icon.blue{color:var(--blue)!important}
#stats .stat-icon.green{color:var(--blue)!important}
#stats .stat-icon.purple{color:var(--blue)!important}
#stats .stat-icon.orange{color:var(--orange)!important}
#stats .stat-icon.red{color:var(--red)!important}

#stats .stat-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:5px!important;
}

#stats .val{
  font-size:29px!important;
  line-height:1!important;
  font-weight:900!important;
  margin:0!important;
  letter-spacing:-.5px!important;
}

#stats .val.blue,
#stats .val.green,
#stats .val.purple{
  color:var(--blue)!important;
}

#stats .val.orange{
  color:var(--orange)!important;
}

#stats .val.red{
  color:var(--red)!important;
}

#stats .lbl{
  margin:0!important;
  font-size:12px!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  text-transform:none!important;
  font-weight:800!important;
  color:var(--text)!important;
  max-width:116px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

body.compact #stats.cards{
  padding:14px 16px!important;
}

body.compact #stats .card{
  min-width:128px!important;
  padding:8px 14px!important;
}

body.compact #stats .stat-icon,
body.compact #stats .stat-icon svg{
  width:34px!important;
  height:34px!important;
}

body.compact #stats .val{
  font-size:25px!important;
}

body.compact #stats .lbl{
  font-size:10.5px!important;
  max-width:104px!important;
}

@media(max-width:900px){
  #stats.cards{
    padding:12px!important;
    border-radius:14px!important;
  }
  #stats .card{
    min-width:126px!important;
    padding:8px 12px!important;
  }
}


/* Hoofdmenu - consistente SVG stijl */
.tabs{
  align-items:stretch!important;
}

.tabbtn{
  min-width:106px!important;
  gap:6px!important;
  color:var(--text)!important;
}

.tabbtn .tab-ico{
  width:23px!important;
  height:23px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  filter:none!important;
  opacity:1!important;
  color:var(--muted)!important;
}

.tabbtn .tab-ico svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.tabbtn .tab-label{
  line-height:1.1!important;
}

.tabbtn.active .tab-ico,
.tabbtn.active .tab-label{
  color:#fff!important;
}

.tabbtn:hover:not(.active){
  background:rgba(37,99,235,.05)!important;
}

body.compact .tabbtn .tab-ico{
  width:21px!important;
  height:21px!important;
}

body.compact .tabbtn .tab-ico svg{
  width:20px!important;
  height:20px!important;
}


/* Planningsoverzicht filterbalk */
.plan-filterbar{
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr)) auto;
  gap:10px;
  align-items:end;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.plan-filterbar .form-row{
  gap:4px;
}
.plan-filterbar .input{
  min-width:0;
  width:100%;
}
@media(max-width:1100px){
  .plan-filterbar{
    grid-template-columns:repeat(2,minmax(180px,1fr));
  }
}
@media(max-width:680px){
  .plan-filterbar{
    grid-template-columns:1fr;
  }
}


/* Fix: kolomkoppen blijven zichtbaar binnen interne scrollblokken */
.inner-scroll{
  position:relative!important;
  overflow:auto!important;
}
.inner-scroll .table-wrap{
  overflow:visible!important;
}
.inner-scroll table thead th,
.scroll-table table thead th,
.table-scroll table thead th,
.manage-scroll table thead th,
.report-scroll table thead th{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  background:var(--surface2)!important;
  box-shadow:0 1px 0 var(--border),0 2px 8px rgba(15,23,42,.08)!important;
}

.hour-value{
  font-family:'DM Sans',sans-serif!important;
  font-variant-numeric:tabular-nums;
}
.uitgifte-overview{
  padding:14px 16px;
  margin-bottom:0!important;
  border-bottom:1px solid var(--border);
  box-shadow:none!important;
  background:var(--surface);
}
.uitgifte-overview .card{
  min-width:142px;
  max-width:168px;
  height:120px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
}
.uitgifte-overview .stat-icon{
  width:42px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-bottom:4px!important;
  opacity:1!important;
}
.uitgifte-overview .stat-icon svg{
  width:42px!important;
  height:42px!important;
  display:block!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.uitgifte-overview .stat-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:5px!important;
}
.uitgifte-overview .val{
  font-size:29px!important;
  line-height:1!important;
  font-weight:900!important;
  margin:0!important;
  letter-spacing:-.5px!important;
}
.uitgifte-overview .lbl{
  margin:0!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  min-height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:var(--text)!important;
  max-width:116px!important;
  white-space:normal!important;
}
.uitgifte-overview .active-filter-card{
  border-color:var(--blue)!important;
  background:rgba(37,99,235,.08)!important;
}
body.compact .uitgifte-overview .card{
  min-width:128px!important;
}
body.compact .uitgifte-overview .stat-icon,
body.compact .uitgifte-overview .stat-icon svg{
  width:34px!important;
  height:34px!important;
}
body.compact .uitgifte-overview .val{
  font-size:25px!important;
}
body.compact .uitgifte-overview .lbl{
  font-size:10.5px!important;
  max-width:104px!important;
}



/* UI update: submenu's, iconknoppen, uitlijning acties en consistente tijdnotatie */
.settings-subtabs{
  display:flex;gap:0;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:4px;margin-bottom:18px;box-shadow:var(--shadow);overflow-x:auto;
}
.settings-subtab{
  border:0;border-right:1px solid var(--border);background:transparent;color:var(--text);
  padding:10px 14px;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;
}
.settings-subtab:last-child{border-right:0}.settings-subtab.active{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.24)}
.settings-subtab:hover:not(.active){background:rgba(37,99,235,.06)}
.icon-btn{
  width:32px;height:32px;min-width:32px;padding:0!important;display:inline-flex!important;
  align-items:center;justify-content:center;border-radius:8px;vertical-align:middle;
}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-actions{display:flex;gap:6px;align-items:center;justify-content:flex-start;white-space:nowrap}.icon-actions .btn{margin:0!important}
/* Compacte actiekolom: icoon + kort label, vaste breedte per knop -> rijen lijnen uit en
   knoppen verspringen niet (label blijft constant; de status staat in de kleding-/accreditatie-kolom). */
.uitgifte-actions{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;justify-content:flex-end}
.uit-act{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;flex:0 0 auto}
.uit-act svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.uit-act.k{width:104px}
.uit-act.a{width:96px}
.uit-act.m{width:80px}
.uit-act.edit{width:34px;padding:0}
.uit-act.done{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.4);color:var(--green)}
.uit-act.todo{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.4);color:var(--orange)}
.uit-act.disabled{opacity:.55;cursor:default;color:var(--muted)}
.uit-act:hover:not(.disabled){filter:brightness(.97)}
#tblUitgifte td:last-child{min-width:120px;vertical-align:top!important}
#tblUitgifte thead th:last-child{text-align:right}
#tblUitgifte td:nth-child(2){white-space:nowrap}
#tblUitgifte td{vertical-align:top!important}
/* Mobiel: uitgiftetabel als gestapelde kaarten i.p.v. horizontaal scrollen. */
@media(max-width:700px){
  #tblUitgifte thead{display:none}
  #tblUitgifte,#tblUitgifte tbody{display:block;width:100%}
  #tblUitgifte tr{display:block;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--surface)}
  #tblUitgifte td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:none!important;padding:5px 0!important;min-width:0!important;white-space:normal!important}
  #tblUitgifte td::before{content:attr(data-label);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);flex:0 0 auto}
  #tblUitgifte td:last-child{min-width:0!important;align-items:flex-start}
  #tblUitgifte .uitgifte-actions{flex-wrap:wrap;justify-content:flex-end}
}
.mono,.time-range{font-family:'DM Sans',sans-serif!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;white-space:nowrap!important}
#tblPlan td:nth-child(3),#tblOpenFill td:nth-child(3),#tblAanwezig td:nth-child(3){min-width:112px;white-space:nowrap!important}
#tblPlan td:nth-child(2),#tblPlan td:nth-child(3){font-family:'DM Sans',sans-serif!important;font-variant-numeric:tabular-nums}



/* patch: neutrale iconen en rapportage-submenu */
.icon-btn.danger{
  background:var(--surface2)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
.icon-btn.danger:hover{
  border-color:var(--blue)!important;
}
.report-subtabs{
  display:flex;gap:0;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:4px;margin-bottom:18px;box-shadow:var(--shadow);overflow-x:auto;
}
.report-subtab{
  border:0;border-right:1px solid var(--border);background:transparent;color:var(--text);
  padding:10px 14px;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;
}
.report-subtab:last-child{border-right:0}
.report-subtab.active{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.24)}
.report-subtab:hover:not(.active){background:rgba(37,99,235,.06)}


/* patch: Planningsoverzicht tabel in moderne tabel-opmaak */
#tblPlan{
  border-collapse:separate!important;
  border-spacing:0!important;
}
#tblPlan thead th{
  padding:12px 16px!important;
  background:linear-gradient(180deg,var(--surface2),var(--surface))!important;
  color:var(--muted)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.45px!important;
  border-bottom:1px solid var(--border)!important;
}
#tblPlan tbody tr{
  transition:background .15s ease, box-shadow .15s ease;
}
#tblPlan tbody tr:hover{
  background:rgba(37,99,235,.045)!important;
}
#tblPlan td{
  padding:14px 16px!important;
  vertical-align:middle!important;
  line-height:1.25!important;
}
#tblPlan td:nth-child(1){
  width:86px!important;
  min-width:86px!important;
}
#tblPlan td:nth-child(2){
  min-width:128px!important;
}
#tblPlan td:nth-child(3){
  min-width:185px!important;
}
#tblPlan td:nth-child(4){
  min-width:150px!important;
}
#tblPlan td:nth-child(5){
  min-width:185px!important;
}
#tblPlan td:nth-child(6){
  min-width:230px!important;
  white-space:nowrap!important;
}
#tblPlan td:nth-child(7){
  min-width:90px!important;
  width:90px!important;
  white-space:nowrap!important;
}
#tblPlan td:nth-child(8){
  min-width:150px!important;
}
#tblPlan td:nth-child(9){
  min-width:120px!important;
}
#tblPlan td:nth-child(10){
  min-width:128px!important;
}
.plan-date-card{
  width:54px;
  min-width:54px;
  min-height:66px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border:1px solid var(--border);
  border-radius:10px;
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}
.plan-date-card .day{
  font-size:20px;
  font-weight:900;
  line-height:1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.plan-date-card .month{
  font-size:11px;
  font-weight:900;
  color:var(--text);
  text-transform:uppercase;
  line-height:1.05;
}
.plan-date-card .weekday{
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  line-height:1.05;
}
.plan-team-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:4px 9px;
  background:rgba(37,99,235,.12);
  color:var(--blue);
  border:1px solid rgba(37,99,235,.16);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.plan-location{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.plan-location svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--text);
  flex:0 0 auto;
}
.plan-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:5px 10px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.plan-status.ok{
  background:rgba(16,185,129,.16);
  color:var(--green);
}
.plan-status.warn{
  background:rgba(249,115,22,.16);
  color:var(--orange);
}
.plan-status.bad{
  background:rgba(239,68,68,.14);
  color:var(--red);
}
.plan-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}
#tblPlan .icon-actions{
  justify-content:flex-start!important;
  gap:8px!important;
}
#tblPlan .icon-btn{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
}
#tblPlan .icon-btn:hover{
  border-color:var(--blue)!important;
  color:var(--blue)!important;
  background:rgba(37,99,235,.05)!important;
}
#tblPlan .icon-btn.danger,
#tblPlan .icon-btn.delete{
  color:var(--text)!important;
  background:var(--surface)!important;
  border-color:var(--border)!important;
}
#tblPlan .icon-btn.danger:hover,
#tblPlan .icon-btn.delete:hover{
  color:var(--blue)!important;
  border-color:var(--blue)!important;
}
body.compact #tblPlan td{
  padding:9px 12px!important;
}
body.compact .plan-date-card{
  min-height:50px;
  width:46px;
  min-width:46px;
  border-radius:9px;
}
body.compact .plan-date-card .day{font-size:17px}
body.compact .plan-date-card .month{font-size:10px}
body.compact .plan-date-card .weekday{font-size:9px}



/* brede stijlupdate: titel-SVG's, moderne kaarten en invoerschermen */
.panel{
  border-radius:18px!important;
  box-shadow:0 12px 32px rgba(15,23,42,.07)!important;
}
.panel-head{
  padding:18px 20px!important;
  background:linear-gradient(180deg,var(--surface),var(--surface2))!important;
}
.panel-title-wrap{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.panel-title-icon{
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  background:rgba(37,99,235,.10);
}
.panel-title-icon svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.panel h2{
  font-size:17px!important;
  line-height:1.15!important;
  letter-spacing:-.25px!important;
}
.hint{
  margin-top:4px!important;
  line-height:1.35!important;
}
.grid,
.template-grid,
.template-grid-4{
  gap:16px!important;
}
.form-row label{
  margin-left:1px;
  font-size:11px!important;
  letter-spacing:.45px!important;
}
.input,.search,select,textarea{
  min-height:38px;
  border-radius:10px!important;
  border-color:#dbe2ea!important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:focus,.search:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;
}
.btn{
  border-radius:10px!important;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn.primary{
  box-shadow:0 9px 18px rgba(37,99,235,.20);
}
.form-actions{
  padding:0 20px 20px!important;
}
.notice{
  background:rgba(37,99,235,.07)!important;
  border-bottom:1px solid var(--border)!important;
}
.modern-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:18px 20px 8px;
}
.form-section{
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border-radius:16px;
  padding:16px;
}
.form-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.form-section-icon{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:9px;
  color:var(--blue);
  background:rgba(37,99,235,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.form-section-icon svg{
  width:19px;
  height:19px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.form-section-title{
  font-size:13px;
  font-weight:900;
  color:var(--text);
}
.form-section-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:1px;
}
.form-section-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.form-section-grid .span-12{grid-column:span 12}
.form-section-grid .span-8{grid-column:span 8}
.form-section-grid .span-6{grid-column:span 6}
.form-section-grid .span-4{grid-column:span 4}
.form-section-grid .span-3{grid-column:span 3}
.form-section-grid .span-2{grid-column:span 2}
.check-card.input{
  min-height:46px;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
  line-height:1.15;
}
.check-card.input input{
  width:16px;
  height:16px;
  accent-color:var(--blue);
  flex:0 0 auto;
}
.inline-field-icon{
  display:none;
}
@media(max-width:980px){
  .form-section-grid .span-8,
  .form-section-grid .span-6,
  .form-section-grid .span-4,
  .form-section-grid .span-3,
  .form-section-grid .span-2{grid-column:span 12}
}
body.compact .modern-form{
  padding:14px 16px 6px;
  gap:14px;
}
body.compact .form-section{
  padding:13px;
  border-radius:14px;
}
body.compact .panel-head{
  padding:14px 16px!important;
}
body.dark .input,body.dark .search,body.dark select,body.dark textarea{
  border-color:var(--border)!important;
}
body.dark .form-section{
  background:linear-gradient(180deg,var(--surface),var(--surface2));
}


/* update: compact medewerker-invoerscherm zonder uitgiftekeuzes */
.employee-compact-form{
  padding:18px 20px 8px!important;
}
.employee-compact-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  align-items:start;
}
.employee-compact-grid .diet-col{align-self:start}
.employee-compact-grid .span-4{grid-column:span 4}
.employee-compact-grid .span-3{grid-column:span 3}
.employee-compact-grid .span-9{grid-column:span 9}
.employee-compact-grid .span-6{grid-column:span 6}
.employee-compact-grid .span-12{grid-column:span 12}
.employee-compact-grid .employee-section{
  grid-column:span 12;
  align-self:start;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);
  padding-top:10px;margin-top:2px;
  border-top:1px solid var(--border);
}
.employee-compact-grid .employee-section:first-child{border-top:none;padding-top:0;margin-top:0}
/* Kaart-indeling per sectie in de formulieren (medewerker/deelnemer). */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.form-card:last-child{margin-bottom:2px}
.form-card-title{font-size:13px;font-weight:800;letter-spacing:.02em;margin:0 0 12px;color:var(--text)}
body.dark .form-card{box-shadow:none}
/* "Nieuwe gegevens beschikbaar"-balk (live verversen, als je bezig bent met bewerken). */
#mzi-vers-banner{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:12px;background:var(--blue);color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.28);font-weight:700;font-size:13px}
#mzi-vers-banner .btn{background:#fff;color:var(--blue);border-color:#fff}
#mzi-vers-banner .btn:hover{border-color:#fff;opacity:.92}
.employee-compact-note{
  grid-column:span 12;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 13px;
  border:1px solid rgba(37,99,235,.16);
  border-radius:12px;
  background:rgba(37,99,235,.055);
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.employee-compact-note svg{
  width:17px;
  height:17px;
  min-width:17px;
  margin-top:1px;
  stroke:var(--blue);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.employee-compact-form .check-card.input{
  min-height:38px!important;
  height:38px!important;
  padding:8px 11px!important;
  font-size:12px!important;
}
@media(max-width:1100px){
  .employee-compact-grid .span-6,
  .employee-compact-grid .span-4,
  .employee-compact-grid .span-3{grid-column:span 6}
  .employee-compact-grid .span-9{grid-column:span 12}
}
@media(max-width:700px){
  .employee-compact-grid .span-6,
  .employee-compact-grid .span-4,
  .employee-compact-grid .span-3,
  .employee-compact-grid .span-9{grid-column:span 12}
}
body.compact .employee-compact-form{
  padding:14px 16px 6px!important;
}



/* patch 2026-06-08: responsive hoofdmenu zonder horizontale scrollbar
   - Normale/brede schermen behouden bestaande SVG-menu stijl.
   - Alleen wanneer het menu te smal wordt, mag het menu afbreken naar meerdere regels.
   - Op zeer smalle schermen blijven de SVG-iconen zichtbaar en worden labels compact verborgen. */
@media(max-width:1180px){
  .tabs{
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    row-gap:4px!important;
  }
  .tabbtn{
    flex:1 1 96px!important;
    min-width:92px!important;
  }
}
@media(max-width:680px){
  .tabs{
    top:auto!important;
    position:relative!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(52px,1fr))!important;
    gap:4px!important;
    overflow-x:visible!important;
  }
  .tabbtn{
    min-width:0!important;
    width:auto!important;
    padding:9px 6px!important;
    border-right:0!important;
  }
  .tabbtn .tab-label{
    display:none!important;
  }
  .tabbtn .tab-ico,
  .tabbtn .tab-ico svg{
    width:23px!important;
    height:23px!important;
  }
}

/* patch 2026-06-08: dashboard-actiepunten even breed als twee widgets waar ruimte is */
@media(min-width:1180px){
  .dashboard-action-half{
    width:calc((100% - 14px) * 2 / 5)!important;
    min-width:534px!important;
    max-width:720px!important;
  }
}


/* patch: uitgifte-filterkaarten links uitlijnen en niet over volle breedte verdelen */
.cards.uitgifte-overview{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  flex-wrap:wrap!important;
  gap:12px!important;
}
.cards.uitgifte-overview .card{
  flex:0 0 auto!important;
}
@media(max-width:700px){
  .cards.uitgifte-overview .card{
    min-width:calc(50% - 6px)!important;
    max-width:calc(50% - 6px)!important;
  }
}
@media(max-width:430px){
  .cards.uitgifte-overview .card{
    min-width:100%!important;
    max-width:100%!important;
  }
}

/* Live controle in planningformulier */
.plan-live-warn{margin:0 16px 12px;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4}
.plan-live-warn.bad{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.30);color:var(--text)}
.plan-live-warn.ok{background:transparent;border:none;padding:0 16px 4px}
.plan-live-warn-title{font-weight:800;color:var(--red);margin-bottom:4px}
.plan-live-warn ul{margin:0;padding-left:18px}
.plan-live-warn li{margin:2px 0}

/* Statistiekbalk + tabbladbalk als één doorlopend blok: labels alleen op hover (title-tooltip),
   geen tussenruimte, #stats alleen boven afgerond, .tabs alleen onder afgerond, seam scherp. */
html body #stats .lbl,
html body.compact #stats .lbl{display:none !important}
html body #stats.cards,
html body.compact #stats.cards{margin-bottom:0 !important;border-radius:16px 16px 0 0 !important;border-bottom:0 !important;box-shadow:none !important}
html body .tabs{border-radius:16px !important}
/* Labels zijn verborgen: laat de stat-kaarten meekrimpen naar hun inhoud i.p.v. vaste 168px,
   zodat ze allemaal passen en de horizontale schuifbalk verdwijnt. */
html body #stats .card,
html body.compact #stats .card{flex:0 0 auto !important;width:auto !important;min-width:0 !important;max-width:none !important;padding:6px 18px !important;gap:10px !important}
/* Compacter medewerker-/deelnemer-invoerformulier: minder verticale ruimte, zodat het niet het hele scherm vult. */
html body .employee-compact-form{padding:12px 18px 6px !important}
html body .employee-compact-grid{gap:7px 12px !important}
html body .employee-compact-grid .employee-section{padding-top:6px !important;margin-top:0 !important}
html body .employee-compact-form .form-row label{margin-bottom:3px !important}
html body .employee-compact-form .input{min-height:36px !important;height:auto !important;padding:7px 11px !important}
html body .employee-compact-form .check-card.input{min-height:34px !important;height:34px !important;padding:7px 11px !important}
/* Vinkjesgroepen in het medewerkerformulier (rijbewijscategorie, allergenen, extra accreditatie-
   locaties/-ruimtes) als net raster met uitgelijnde kolommen i.p.v. rafelige flex-wrap. */
html body .employee-compact-form .rijb-cats{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;align-items:start !important;min-height:0 !important;gap:6px 16px !important;padding-top:6px !important;padding-bottom:6px !important}
html body .employee-compact-form .rijb-cats .rijb-cat{display:block !important;white-space:normal !important;line-height:1.35}
html body .employee-compact-form .rijb-cats .rijb-cat input{vertical-align:-2px;margin:0 5px 0 0}
html body .employee-compact-form .rijb-cats .rijb-cat .diet-ico{vertical-align:-3px}
html body .employee-compact-form .rijb-cats.rijb-compact{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important}
/* Dieet & catering-matrix: vinkje per dieetwens/allergeen, zodat combinaties per persoon opvallen. */
html body .cat-yes{display:inline-block;font-weight:900;line-height:1;font-size:14px}
html body .cat-yes.pref{color:var(--blue)}
html body .cat-yes.alg{color:var(--orange)}
html body .cat-yes.meal{color:var(--green,#16a34a)}
/* Maaltijdregels (Catering → Recht op maaltijden): voorwaarde-rijen met en/of. */
html body .maaltijd-blok{margin-bottom:18px}
html body .maaltijd-rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
/* Leesbare samenvatting van de samengestelde maaltijdregel. */
html body .maaltijd-uitleg{margin:8px 0 2px;padding:8px 11px;border-left:3px solid var(--blue);background:var(--surface2);border-radius:0 8px 8px 0;font-size:12.5px;line-height:1.5}
/* Simulator: uitslag per maaltijd met de gehaalde/niet-gehaalde voorwaarden. */
html body .sim-uitslagen{margin-top:14px;display:flex;flex-direction:column;gap:10px}
html body .sim-uitslag{border:1px solid var(--border);border-radius:10px;padding:10px 12px}
html body .sim-detail{margin-top:6px;display:flex;flex-direction:column;gap:2px}
html body .sim-cond{font-size:12.5px;white-space:normal}
html body .sim-cond.ok{color:var(--green,#16a34a)}
html body .sim-cond.nok{color:var(--red,#ef4444)}
/* Algemene catering-instellingen: per instelling een eigen toelichting. */
html body .cat-optie{padding:11px 0;border-top:1px solid var(--border)}
html body .cat-optie:first-child{border-top:none;padding-top:2px}
html body .cat-optie-kop{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
html body .cat-optie-label{font-weight:700;font-size:13px;min-width:250px;flex:0 0 auto}
html body .cat-optie-uitleg{margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:820px}
/* Visuele planning: shifts die met een andere shift van dezelfde persoon overlappen.
   Rode rand + witte binnenrand, zodat het op elke teamkleur leesbaar blijft. */
html body .vp-block.vp-conflict{outline:2px solid var(--red,#ef4444);outline-offset:-2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.3)}
html body .vp-conflict-tel{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(239,68,68,.12);border:1px solid var(--red,#ef4444);color:var(--red,#ef4444);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
html body .vp-conflict-tel::before{content:"⚠"}
/* Dubbele inzet: alle botsende shifts onder elkaar; het potlood staat in een eigen kolom,
   zodat het bij elke regel (en elke rij) op dezelfde plek rechts uitlijnt. */
html body .ov-shifts{display:flex;flex-direction:column;gap:5px;min-width:260px}
html body .ov-shift{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
html body .ov-shift .ov-tijd{white-space:nowrap;font-size:12.5px}
html body .ov-shift .ov-taak{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ov-shift .icon-btn{justify-self:end}
/* Polsbandjes: zoekveld met de printknop ernaast. */
html body .band-zoekbalk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 16px 12px}
html body .band-zoekbalk .input{flex:1 1 260px;min-width:200px}
html body .vp-conflict-tel:hover{background:rgba(239,68,68,.2)}
@media(max-width:700px){html body .cat-optie-label{min-width:100%}}
/* Prioriteitsvolgorde: verplaatsbare lijst i.p.v. een foutgevoelig tekstveld. */
html body .prio-lijst{display:flex;flex-direction:column;gap:4px}
html body .prio-item{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:5px 8px;background:var(--surface2);max-width:320px}
html body .prio-nr{width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
html body .prio-naam{flex:1;font-size:13px;font-weight:700}
html body .prio-item .btn.small[disabled]{opacity:.35;cursor:default}
/* Rooster "maaltijden per dag": vinkjes gecentreerd, ruime klikzone. */
html body .mdag-tabel th.mdag-col,html body .mdag-tabel td.mdag-col{text-align:center;vertical-align:middle}
html body .mdag-tabel th.mdag-col .btn.small{margin-top:4px;font-size:10px}
html body .mdag-vink{display:inline-flex;align-items:center;justify-content:center;padding:6px;cursor:pointer}
html body .mdag-vink input{width:17px;height:17px;cursor:pointer}
/* Bezetting per taak: icoon + getal i.p.v. lange kolomteksten. */
html body .bez{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted);cursor:help}
html body .bez svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
html body .bez-n{font-weight:800;font-size:13px;color:var(--text)}
html body .bez.bez-goed{color:var(--green,#16a34a)}
html body .bez.bez-matig{color:var(--orange,#f97316)}
html body .bez.bez-slecht{color:var(--red,#ef4444)}
html body .bez.bez-goed .bez-n,html body .bez.bez-matig .bez-n,html body .bez.bez-slecht .bez-n{color:inherit}
/* Evenementomschrijving op het startscherm. */
html body .event-omschrijving{padding:14px 16px;font-size:13.5px;line-height:1.6;white-space:normal}
/* Tweekoloms-dashboard: omschrijving links, widgets/actiepunten rechts. Zonder omschrijving
   bestaat deze wrapper niet, dus de oude indeling blijft dan ongewijzigd. */
html body .dashboard-split{display:grid;grid-template-columns:minmax(320px,0.85fr) minmax(0,1.15fr);gap:16px;align-items:start}
html body .dash-col-links>.panel{margin-bottom:0}
html body .dash-col-rechts>*:last-child{margin-bottom:0}
/* In de smallere rechterkolom mag het actiepunten-blok niet vastzitten aan zijn eigen minimum. */
html body .dash-col-rechts .dashboard-action-half{width:100%!important;min-width:0!important;max-width:none!important}
@media(max-width:1100px){html body .dashboard-split{grid-template-columns:1fr}}
html body .accr-team-head{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 12px;margin-top:10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;font-weight:800}
html body .accr-team-head:hover{border-color:var(--blue)}
html body .accr-team-head.open{border-bottom-left-radius:0;border-bottom-right-radius:0}
html body .accr-team-head .accr-team-caret{color:var(--muted);font-size:12px;width:12px;flex:0 0 auto}
html body .accr-team-head .accr-team-naam{flex:1 1 auto}
/* Herinneringen: samenvatting bovenaan, klikbaar naar de groep eronder. */
html body .rem-samenvatting{display:flex;gap:10px;flex-wrap:wrap;padding:14px 16px 4px}
html body .rem-sum{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--surface2);border-radius:12px;padding:9px 14px;cursor:pointer;font:inherit;color:var(--text);text-align:left}
html body .rem-sum:hover{border-color:var(--blue)}
html body .rem-sum-n{font-size:19px;font-weight:900;min-width:26px;text-align:center;color:var(--muted)}
html body .rem-sum-t{font-size:12.5px;font-weight:700}
html body .rem-sum.heeft{border-color:var(--orange,#f97316);background:rgba(249,115,22,.09)}
html body .rem-sum.heeft .rem-sum-n{color:var(--orange,#f97316)}
html body .reminder-group{scroll-margin-top:90px;border-radius:10px;transition:background .3s}
html body .reminder-group.rem-highlight{background:rgba(37,99,235,.10)}
/* Rapportage in twee kolommen: tabel links, grafiek rechts. */
html body .report-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:16px;align-items:start;padding:0 16px 14px}
html body .report-split .inner-scroll,html body .report-split .scroll-table{max-height:none}
@media(max-width:1100px){html body .report-split{grid-template-columns:1fr}}
/* Beheerscherm in twee kolommen: invoerformulier links (blijft meescrollen), overzicht rechts. */
html body .manage-split{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:16px;align-items:start}
html body .manage-split .ms-form>.panel,html body .manage-split .ms-overview>.panel{margin-bottom:0}
@media(max-width:1200px){html body .manage-split{grid-template-columns:minmax(0,1fr)}}
/* Brede variant: voor een breed formulier (medewerkerskaart). Formulier krijgt ~60%, lijst de rest;
   stapelt eerder omdat beide kolommen ruimte nodig hebben. */
html body .manage-split.ms-wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media(max-width:1300px){html body .manage-split.ms-wide{grid-template-columns:minmax(0,1fr)}}
/* Formulier ingeklapt: het paneel vouwt naar een smalle strook aan de LINKERkant, waar het ook
   vandaan komt; het overzicht krijgt de rest. Deze regels staan bewust ná .ms-wide, anders wint
   die zijn eigen kolombreedte en blijft het overzicht smal. */
html body .manage-split.ms-collapsed,
html body .manage-split.ms-wide.ms-collapsed{grid-template-columns:46px minmax(0,1fr)}
html body .manage-split.ms-collapsed .ms-form{margin-bottom:0}
html body .manage-split.ms-collapsed .manage-collapsed-bar{
 writing-mode:vertical-rl;transform:rotate(180deg);
 width:46px;min-height:190px;padding:16px 12px;margin:0;gap:12px;
 justify-content:flex-start;align-self:start}
/* In de smalle strook is de hint overbodig (en zou hij door de rotatie bovenaan eindigen);
   de knop heeft een tooltip met dezelfde tekst. */
html body .manage-split.ms-collapsed .manage-collapsed-bar .mcb-hint{display:none}
html body .manage-split.ms-collapsed .manage-collapsed-bar svg{transform:rotate(90deg)}
/* Zodra de kolommen onder elkaar staan is een zijstrook onlogisch; dan weer een gewone balk boven
   het overzicht. De brede variant stapelt al bij 1300px, de gewone pas bij 1200px — vandaar twee
   drempels die elk bij hun eigen indeling horen. */
@media(max-width:1300px){
 html body .manage-split.ms-wide.ms-collapsed{grid-template-columns:minmax(0,1fr)}
 html body .manage-split.ms-wide.ms-collapsed .manage-collapsed-bar{
  writing-mode:horizontal-tb;transform:none;width:100%;min-height:0;padding:13px 16px;margin-bottom:18px}
 html body .manage-split.ms-wide.ms-collapsed .manage-collapsed-bar .mcb-hint{margin-left:auto;margin-top:0}
 html body .manage-split.ms-wide.ms-collapsed .manage-collapsed-bar svg{transform:none}
}
@media(max-width:1200px){
 html body .manage-split.ms-collapsed{grid-template-columns:minmax(0,1fr)}
 html body .manage-split.ms-collapsed .manage-collapsed-bar{
  writing-mode:horizontal-tb;transform:none;width:100%;min-height:0;padding:13px 16px;margin-bottom:18px}
 html body .manage-split.ms-collapsed .manage-collapsed-bar .mcb-hint{margin-left:auto;margin-top:0}
 html body .manage-split.ms-collapsed .manage-collapsed-bar svg{transform:none}
}
/* Dieet-/allergeeniconen: zelf getekend, lijnstijl gelijk aan de rest. */
html body .diet-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;display:block}
html body .diet-ico-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--blue);cursor:help;margin:2px}
html body .diet-ico-wrap.alg{color:var(--orange,#f97316)}
html body .diet-ico-rij{display:inline-flex;flex-wrap:wrap;gap:2px;align-items:center}
/* Hover-tekst: eigen tooltip zodat de naam meteen leesbaar is (title is traag). */
html body .diet-ico-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--surface);font-size:11px;font-weight:700;white-space:nowrap;padding:3px 7px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:60}
html body .diet-ico-wrap:hover .diet-ico-tip,html body .diet-ico-wrap:focus-visible .diet-ico-tip{opacity:1}
/* Invulchips: icoon MET naam, want hier moet je niet hoeven raden. */
html body .diet-cats .diet-cat{display:inline-flex;align-items:center;gap:6px}
html body .diet-cats .diet-cat .diet-ico{width:16px;height:16px;color:var(--muted)}
/* Cateringmatrix: koppen en vinkjes gecentreerd in de kolom. */
html body #tblCatMatrix th.cat-col,html body #tblCatMatrix td.cat-col{text-align:center;vertical-align:middle}
html body #tblCatMatrix th.cat-col{white-space:nowrap}
html body .cat-kop-n{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-top:2px}
html body .cat-kop-tekst{font-size:11px}
html body #tblCatMatrix td.cat-col .cat-yes{display:inline-block}
html body #tblCatMatrix td,html body #tblCatMatrix th{white-space:nowrap}
/* Medewerkerformulier: kenmerken/rijbewijs/dieet links, foto ernaast rechts (vult de ruimte). */
html body .emp-inzet{display:flex;gap:26px;align-items:flex-start}
html body .emp-foto-col{flex:0 0 210px}
@media(max-width:1000px){html body .emp-inzet{flex-direction:column;gap:0}html body .emp-foto-col{flex:0 0 auto;width:100%}}
/* Help / functie-referentie (overlay achter de Help-knop). */
html body .mzi-help-ov{position:fixed;inset:0;z-index:9000;background:rgba(15,17,23,.55);display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow:auto}
html body .mzi-help-card{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:16px;width:min(860px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35)}
html body .mzi-help-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
html body .mzi-help-top h2{margin:0;font-size:19px}
html body .mzi-help-tools{display:flex;gap:10px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
html body .mzi-help-tools .input{flex:1 1 220px}
html body .mzi-help-body{padding:8px 18px 18px;overflow:auto}
html body .help-sec{border-bottom:1px solid var(--border)}
html body .help-sec-h{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--text);font:inherit;font-weight:700;font-size:15px;padding:13px 2px;cursor:pointer;text-align:left}
html body .help-sec-h .chev{transition:transform .15s;color:var(--muted);font-size:12px}
html body .help-sec.open .help-sec-h .chev{transform:rotate(90deg)}
html body .help-sec-body{display:none;padding:0 2px 12px}
html body .help-sec.open .help-sec-body{display:block}
html body .help-intro{margin:0 0 10px}
html body .help-item{padding:8px 0;border-top:1px dashed var(--border)}
html body .help-item h4{margin:0 0 3px;font-size:13.5px}
html body .help-item p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
/* Dashboardwidget "Catering per dag": per dag drie maaltijdbalkjes (ontbijt/lunch/avondeten). */
/* Scanuitslag (entree / uitgifte / catering): grote status, foto, zones en dieet in één kaart. */
html body .scan-uitslag{min-height:160px}
html body .scan-kaart{border-radius:16px;border:1px solid var(--border);background:var(--surface2);overflow:hidden}
html body .scan-kaart.ok{border-color:var(--green,#16a34a);background:rgba(16,185,129,.10)}
html body .scan-kaart.warn{border-color:var(--orange,#f97316);background:rgba(249,115,22,.10)}
html body .scan-kaart.bad{border-color:var(--red,#ef4444);background:rgba(239,68,68,.10)}
html body .scan-kaart-kop{padding:14px 18px 0}
html body .scan-kaart.ok .scan-big{color:var(--green,#16a34a)}
html body .scan-kaart.warn .scan-big{color:var(--orange,#f97316)}
html body .scan-kaart.bad .scan-big{color:var(--red,#ef4444)}
/* Re-entry: toegang blijft toegestaan, maar duidelijk anders dan een eerste scan. Blauw i.p.v.
   groen, dikkere rand en een streep aan de zijkant, zodat het bij een snelle blik opvalt.
   Staat NA de .ok-regels, want die hebben dezelfde specificiteit — volgorde beslist. */
html body .scan-kaart.re-entry{border-color:var(--blue);background:rgba(37,99,235,.12);border-width:2px;border-left-width:8px}
html body .scan-kaart.re-entry .scan-big{color:var(--blue)}
html body .scan-kaart.re-entry .scan-laatst{color:var(--blue);font-weight:800}
html body .scan-kaart-body{display:flex;gap:16px;align-items:flex-start;padding:6px 18px 18px}
html body .scan-foto{width:96px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:var(--surface);flex:0 0 auto}
html body .scan-kaart-info{flex:1;min-width:0}
html body .scan-naam{font-size:22px;font-weight:900;line-height:1.15}
html body .scan-sub{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
html body .scan-zones{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
html body .scan-laatst{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--muted)}
html body .scan-reden{margin-top:8px;font-size:13.5px;font-weight:700}
html body .scan-shifts{margin:8px 0 0;padding-left:18px;font-size:12.5px}
/* Dieet/allergenen bij een cateringscan — allergenen springen er duidelijk uit. */
html body .scan-diet{margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
html body .scan-diet.heeft-allergie{border-color:var(--orange,#f97316)}
html body .scan-diet-kop{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
html body .scan-diet-rij{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px}
html body .scan-diet-rij .diet-ico-wrap{margin:0}
html body .scan-diet-tekst{font-size:12.5px;font-weight:700;margin-right:6px}
html body .scan-diet-opm{font-size:12.5px;color:var(--muted);margin-top:4px}
html body .cat-day-legend{color:var(--muted);font-size:11px;margin-bottom:8px}
html body .day-row.cat-day-row{grid-template-columns:52px 1fr}
html body .day-row.cat-day-row.clickable{cursor:pointer;border-radius:8px;padding:3px 4px;margin:0 -4px}
html body .day-row.cat-day-row.clickable:hover{background:var(--border)}
html body .cat-day-meals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:right}
html body .cat-day-n{font-weight:800}
html body .cat-day-n.nul{color:var(--muted);font-weight:400}

/* Import & export: één strakke lijst met vaste actiekolommen. */
#tblIO td, #tblIO th{vertical-align:middle}
#tblIO .io-onderwerp{white-space:nowrap;font-weight:600}
#tblIO .io-actie{width:1%;white-space:nowrap;text-align:center}
#tblIO .io-actie .btn{width:100%}
#tblIO td .small{color:var(--muted);line-height:1.45;display:block;max-width:70ch}
@media(max-width:860px){
 #tblIO .io-onderwerp{white-space:normal}
 #tblIO .io-actie .btn{width:auto}
}

/* Grafische planning: palet links, dagagenda rechts met sleepbare blokken. */
.graf-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 4px 12px}
.graf-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 4px 14px}
.graf-uitleg{flex:1 1 260px;min-width:180px}
.graf-opslaan{display:flex;align-items:center;gap:8px;margin-left:auto}
.graf-wijzig-tag{font-size:12px;font-weight:700;color:var(--orange,#b45309);background:color-mix(in srgb,var(--orange,#e8890c) 16%,var(--surface));padding:4px 9px;border-radius:999px;white-space:nowrap}
.graf-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:820px){.graf-wrap{grid-template-columns:minmax(0,1fr)}}
.graf-palette{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto;padding:2px}
.graf-taak{border:1px solid var(--border);border-top:4px solid var(--tc,#94a3b8);border-radius:8px;padding:5px 8px 6px;background:var(--surface);cursor:grab;touch-action:none;user-select:none}
.graf-taak:hover{border-color:var(--tc,var(--blue))}
.graf-taak:active{cursor:grabbing}
.graf-taak-head{font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--tc,#64748b);text-transform:uppercase;line-height:1.3}
.graf-taak-naam{font-weight:700;font-size:13px;margin-top:1px}
.graf-taak-info{font-size:11px;color:var(--muted);margin-top:1px}
.graf-agenda-wrap{max-height:70vh;overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.graf-agenda{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr)}
.graf-gutter{position:relative}
.graf-uur{position:absolute;left:0;right:6px;text-align:right;transform:translateY(-50%);font-size:11px;color:var(--muted)}
.graf-canvas{position:relative;border-left:1px solid var(--border);touch-action:none;
 background-image:repeating-linear-gradient(to bottom,var(--border) 0,var(--border) 1px,transparent 1px,transparent 60px),
  repeating-linear-gradient(to bottom,rgba(120,120,120,.12) 0,rgba(120,120,120,.12) 1px,transparent 1px,transparent 30px)}
.graf-blok{position:absolute;box-sizing:border-box;border:1px solid var(--blue);border-radius:8px;
 background:color-mix(in srgb,var(--blue) 14%,var(--surface));padding:4px 7px;overflow:hidden;cursor:grab;touch-action:none;
 font-size:11.5px;line-height:1.3;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.graf-blok:active{cursor:grabbing}
.graf-blok.graf-open{border-style:dashed;background:color-mix(in srgb,var(--orange,#e8890c) 14%,var(--surface))}
.graf-blok.graf-st-geannuleerd{opacity:.55}
.graf-blok.graf-st-standby{border-color:var(--muted)}
.graf-blok.graf-nieuw{border-color:var(--green,#2a9d5c);background:color-mix(in srgb,var(--green,#2a9d5c) 16%,var(--surface));pointer-events:none}
/* Teamkleur als bovenrand van het blok (kleuren gelijk aan de visuele planning). */
.graf-blok{border-top:4px solid var(--tc,var(--blue))}
/* Activiteitenlaag: alleen-lezen banden achter de shifts (klikken gaat door naar de agenda). */
.graf-act{position:absolute;left:0;right:0;z-index:0;pointer-events:none;border-top:1px dashed var(--muted);
 background:repeating-linear-gradient(135deg,rgba(120,120,120,.09) 0 8px,transparent 8px 16px)}
.graf-act-label{position:absolute;left:6px;font-size:10.5px;font-weight:600;color:var(--muted);
 background:var(--surface);padding:0 5px;border-radius:4px;border:1px solid var(--border);white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}
.graf-blok-tijd{font-weight:700;white-space:nowrap}
.graf-blok-taak{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.graf-blok-wie{color:var(--muted)}
.graf-blok-omschr{color:var(--muted);margin-top:2px;line-height:1.25;overflow:hidden}
.graf-blok-del{position:absolute;top:2px;right:2px;z-index:3;width:18px;height:18px;line-height:16px;text-align:center;padding:0;
 border:none;border-radius:5px;background:rgba(0,0,0,.06);color:var(--muted);cursor:pointer;font-size:12px}
.graf-blok-del:hover{background:var(--red,#b91c1c);color:#fff}
.graf-blok-resize{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize;touch-action:none}
.graf-blok-resize-top{position:absolute;left:0;right:0;top:0;height:8px;cursor:ns-resize;touch-action:none;z-index:2}
.graf-blok{user-select:none}
.graf-blok.graf-slepen{z-index:20;opacity:.92;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.graf-agenda-wrap{overscroll-behavior:contain}