:root{--bg: #0f1115;--panel: #1a1d24;--panel-2: #232730;--text: #e8eaed;--muted: #9aa0a6;--accent: #d72e2e;--accent-2: #f4a300;--ok: #2e7d32;--warn: #c97a00;--open: #2b6cb0;--border: #2b2f38}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}header.app{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--border)}header.app h1{margin:0;font-size:18px;letter-spacing:.5px}header.app h1.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600}header.app h1.brand .brand-logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}header.app h1 .accent{color:var(--accent)}.login-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}.login-brand h2{margin:0;font-size:22px;letter-spacing:.3px}.user{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--muted)}.user-skills{display:inline-flex;gap:4px}button{background:var(--accent);color:#fff;border:0;padding:8px 14px;border-radius:6px;cursor:pointer;font-weight:600}button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}button:disabled{opacity:.5;cursor:not-allowed}main{padding:22px;max-width:1400px;margin:0 auto}.legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px;font-size:13px;color:var(--muted)}.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}.day{background:var(--panel);border:1px solid var(--border);border-radius:8px;margin-bottom:14px;overflow:hidden}.day-header{padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--border);font-weight:600}.blocks{display:grid;grid-template-columns:100px 1fr;gap:0}.vehicle-section{border-top:1px solid var(--border)}.vehicle-section:first-child{border-top:0}.vehicle-header{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel-2);border:0;border-left:4px solid transparent;color:var(--text);text-align:left;padding:10px 14px;font-weight:600;font-size:15px;cursor:pointer;border-radius:0}.vehicle-header:hover{background:#2a2f3a}.vehicle-section.understaffed .vehicle-header{border-left-color:var(--warn)}.vehicle-section.empty .vehicle-header{border-left-color:var(--accent)}.vehicle-section.ok .vehicle-header{border-left-color:var(--ok)}.caret{display:inline-block;width:14px;color:var(--muted);font-size:12px}.vehicle-code{font-weight:700;font-size:16px;letter-spacing:.4px}.vehicle-summary{margin-left:auto;font-weight:400;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:10px}.open-pill{background:#2b6cb040;color:#c8e1ff;border:1px solid var(--open);padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600}.open-skills{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:4px}.open-skills .skill-badge{background:#2b6cb02e;border-color:var(--open);color:#c8e1ff}.open-skills .skill-badge.optional{background:#f4a3001f;border-color:var(--accent-2);color:var(--accent-2)}.interval-list{display:flex;flex-direction:column;padding:6px 0}.interval{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:8px 14px 8px 28px;border-left:3px solid transparent;align-items:start}.interval.understaffed{border-left-color:var(--warn);background:#c97a000d}.interval.empty{border-left-color:var(--accent);background:#d72e2e0f}.interval.ok{border-left-color:var(--ok)}.interval-time{font-variant-numeric:tabular-nums;color:var(--muted);display:flex;flex-direction:column;gap:4px;font-size:13px;padding-top:4px}.interval-time .time-text{color:var(--text);font-weight:500}.interval-time .count{display:inline-block;font-size:11px;font-weight:600;color:var(--text);background:var(--panel-2);padding:1px 6px;border-radius:8px;width:fit-content}.link-btn{background:none;border:0;color:var(--muted);padding:0;font-size:12px;text-decoration:underline;cursor:pointer;font-weight:400;width:fit-content}.link-btn:hover{color:var(--text)}.muted-small{color:var(--muted);font-size:12px;font-style:italic}.interval-people{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0}.skill-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;background:var(--bg);color:var(--text);padding:2px 6px;border-radius:4px;border:1px solid var(--border);text-transform:uppercase}.skill-badge.optional{border-color:var(--accent-2);color:var(--accent-2);background:#f4a30014}.skill-badge.sb-bv{background:#d72e2e2e;border-color:#d72e2e;color:#ffb1b1}.skill-badge.sb-ch{background:#2ea0432e;border-color:#2ea043;color:#b6f0c2}.skill-badge.sb-ms{background:#2b6cb038;border-color:#2b6cb0;color:#c8e1ff}.skill-badge.sb-asp{background:#f4a3002e;border-color:#f4a300;color:#ffd591}.open-skills .skill-badge.sb-bv{background:#d72e2e2e;border-color:#d72e2e;color:#ffb1b1}.open-skills .skill-badge.sb-ch{background:#2ea0432e;border-color:#2ea043;color:#b6f0c2}.open-skills .skill-badge.sb-ms{background:#2b6cb038;border-color:#2b6cb0;color:#c8e1ff}.open-skills .skill-badge.sb-asp{background:#f4a3002e;border-color:#f4a300;color:#ffd591}.slot{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:13px;background:var(--panel-2);border:1px solid var(--border);white-space:nowrap}.slot.open{background:#2b6cb026;border-color:var(--open);cursor:pointer;color:#c8e1ff}.slot.open:hover{background:#2b6cb04d}.slot.open.optional{background:#f4a3001a;border-color:var(--accent-2);color:var(--accent-2)}.slot.open.optional:hover{background:#f4a30033}.slot.open.disabled{background:var(--panel-2);border-color:var(--border);color:var(--muted);cursor:not-allowed;opacity:.55}.slot.open.disabled:hover{background:var(--panel-2)}.login{max-width:360px;margin:80px auto;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:24px}.login h2{margin-top:0}.login label{display:block;margin:12px 0 4px;font-size:13px;color:var(--muted)}.login input{width:100%;padding:8px 10px;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px}.login .error{color:#ff7676;margin-top:10px;font-size:13px}.banner{background:#c97a0026;border:1px solid var(--warn);padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:22px;width:min(440px,92vw)}.modal h3{margin:0 0 8px}.modal .muted{color:var(--muted);font-size:13px;margin:4px 0 14px}.modal label{display:block;margin:10px 0 4px;font-size:12px;color:var(--muted)}.modal input{width:100%;padding:8px 10px;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:14px}.modal .error{color:#ff7676;margin-top:10px;font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal textarea,.modal select{width:100%;padding:8px 10px;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit}.tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border)}.tab{background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;padding:10px 16px;border-radius:0;font-weight:600;cursor:pointer;font-size:14px}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.exchange-toolbar{display:flex;gap:8px;margin-bottom:14px}.exchange-section{margin-bottom:24px}.exchange-section h2{font-size:16px;margin:0 0 10px;color:var(--text)}.exchange-section h2 .muted{color:var(--muted);font-weight:400;font-size:13px}.exchange-section .muted{color:var(--muted);font-size:13px}.exchange-card{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:8px;padding:12px 16px;margin-bottom:10px}.exchange-card.ex-available{border-left-color:var(--open)}.exchange-card.ex-mine{border-left-color:var(--accent-2)}.exchange-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.exchange-when{font-weight:600;font-size:15px;color:var(--text)}.exchange-meta{font-size:13px;color:var(--muted);margin-top:2px}.exchange-comments{margin-top:8px;font-size:13px;color:var(--text);font-style:italic}.exchange-actions{display:flex;gap:6px;flex-shrink:0}.exchange-actions button{padding:6px 12px;font-size:13px}.modal-wide{width:min(640px,96vw);max-height:90vh;overflow-y:auto}.form-row{display:flex;gap:12px}.form-col{flex:1}.candidate-picker{margin:14px 0;border:1px solid var(--border);border-radius:8px;padding:10px 12px 12px}.candidate-picker legend{padding:0 6px;font-size:13px;color:var(--muted);line-height:1.6}.candidate-picker legend .skill-badge{vertical-align:middle}.candidate-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}.candidate-toolbar select{width:auto}.candidate-toolbar .ghost{padding:6px 12px;font-size:12px;min-height:36px}label.switch-row{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:10px 12px;margin:0 0 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);cursor:pointer;transition:background .12s ease,border-color .12s ease;font-size:14px;color:var(--text)}.switch-row:hover{background:#ffffff08}.switch-row.on{border-color:#58a6ff8c;background:#58a6ff14}.switch-row.disabled{opacity:.55;cursor:not-allowed}.switch-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.switch-track{position:relative;display:block;width:44px;height:26px;border-radius:999px;background:#3a3f47;transition:background .16s ease;flex-shrink:0}.switch-thumb{position:absolute;display:block;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0006;transition:transform .16s ease}.switch-row.on .switch-track{background:var(--accent, #58a6ff)}.switch-row.on .switch-thumb{transform:translate(18px)}.switch-input:focus-visible+.switch-track{outline:2px solid var(--accent, #58a6ff);outline-offset:2px}.switch-text{display:flex;flex-direction:column;min-width:0}.switch-title{font-size:14px;font-weight:500;color:var(--text)}.switch-desc{font-size:12px;line-height:1.4;margin-top:2px}label.switch-row.compact{margin:0;padding:6px 10px;width:fit-content}.switch-row.compact .switch-track{width:36px;height:22px}.switch-row.compact .switch-thumb{width:16px;height:16px;top:3px;left:3px}.switch-row.compact.on .switch-thumb{transform:translate(14px)}.switch-row.compact .switch-title{font-size:13px}.rooster-toolbar{display:flex;align-items:center;gap:12px;margin:0 0 10px}.my-duties .day{margin-bottom:14px}.my-duty-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.my-duty-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);font-size:14px}.my-duty-time{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.my-duty-vehicle{font-size:12px}.my-duty-hint{font-size:12px;font-style:italic}.my-duty-row .ruil-btn{margin-left:auto}.stats-view{display:flex;flex-direction:column;gap:22px}.stats-head h2{margin:0 0 4px;font-size:18px}.stats-head .small{font-size:12px}.stats-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.kpi{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--panel-2);display:flex;flex-direction:column;gap:2px}.kpi-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.kpi-value{font-size:24px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}.kpi-sub{font-size:12px}.stats-section h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px}.loading-progress{position:relative;height:6px;width:100%;background:#ffffff0f;border-radius:3px;overflow:hidden;margin:6px 0 4px}.loading-progress:before{content:"";position:absolute;top:0;left:0;height:100%;width:35%;background:linear-gradient(90deg,transparent,var(--accent, #d72e2e),transparent);border-radius:3px;animation:loading-slide 1.4s cubic-bezier(.4,0,.2,1) infinite}@keyframes loading-slide{0%{left:-40%}to{left:100%}}.loading-line{display:flex;flex-direction:column;gap:4px;margin:8px 0}.loading-line .muted{font-size:12px}.month-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.month-bar-row{display:grid;grid-template-columns:36px 1fr 60px;align-items:center;gap:10px;font-size:13px}.month-name{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.04em}.month-bar-track{position:relative;height:18px;background:#ffffff0a;border:1px solid var(--border);border-radius:999px;overflow:hidden}.month-bar-total{position:absolute;inset:0 auto 0 0;background:#58a6ff59;border-radius:999px}.month-bar-past{height:100%;background:var(--accent, #58a6ff);border-radius:999px 0 0 999px}.month-bar-stacked{position:absolute;inset:0 auto 0 0;display:flex;border-radius:999px;overflow:hidden}.month-bar-seg{height:100%;position:relative;display:flex;align-items:center;justify-content:center;min-width:1px;box-shadow:inset -1px 0 #00000073;overflow:hidden}.month-bar-seg:last-child{box-shadow:none}.month-bar-seg-label{font-size:10px;font-weight:700;line-height:1;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5);letter-spacing:.02em;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:clip}.month-bar-seg.sb-bv{background:#d72e2e}.month-bar-seg.sb-ch{background:#2ea043}.month-bar-seg.sb-ms{background:#2b6cb0}.month-bar-seg.sb-asp{background:#f4a300}.month-bar-seg.sb-default{background:#6e7681}.month-hours{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.stats-legend{margin-top:8px;gap:14px}.stats-dot-past{background:var(--accent, #58a6ff)}.stats-dot-future{background:#58a6ff59}.stats-dot-skill.sb-bv{background:#d72e2e}.stats-dot-skill.sb-ch{background:#2ea043}.stats-dot-skill.sb-ms{background:#2b6cb0}.stats-dot-skill.sb-asp{background:#f4a300}.stats-dot-skill.sb-default{background:#6e7681}.skill-stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.skill-stat-row{display:grid;grid-template-columns:minmax(58px,auto) 1fr 60px 36px;align-items:center;gap:10px;font-size:13px}.skill-stat-bar{height:10px;background:#ffffff0a;border-radius:999px;border:1px solid var(--border);overflow:hidden}.skill-stat-fill{height:100%;border-radius:999px;background:var(--accent, #58a6ff)}.skill-stat-fill.sb-bv{background:#d72e2e}.skill-stat-fill.sb-ch{background:#2ea043}.skill-stat-fill.sb-ms{background:#2b6cb0}.skill-stat-fill.sb-asp{background:#f4a300}.skill-stat-hours{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.skill-stat-count{text-align:right;font-size:12px}@media (max-width: 720px){.stats-kpis{grid-template-columns:repeat(2,1fr)}.kpi-value{font-size:20px}.skill-stat-row{grid-template-columns:minmax(54px,auto) 1fr 56px 32px}}.link-btn.ruil-btn{color:var(--accent, #58a6ff);text-decoration:none;font-weight:600;border:1px solid rgba(88,166,255,.45);border-radius:999px;padding:2px 10px;background:#58a6ff14}.link-btn.ruil-btn:hover{color:#fff;background:var(--accent, #58a6ff)}.pre-approved-hint{margin:0 0 8px}.toelichting-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:14px}.toelichting-head label{margin:0;font-size:13px;color:var(--text)}.toelichting-actions{display:flex;gap:6px;flex-wrap:wrap}.toelichting-actions .ghost{padding:6px 12px;font-size:12px;min-height:34px}.toelichting-actions .ghost[disabled]{opacity:.4;cursor:not-allowed}label.inline{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--text)}label.inline.pre-approved{display:flex;margin-top:10px}.candidate-list{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.candidate-list li{border-bottom:1px solid var(--border)}.candidate-list li:last-child{border-bottom:0}.candidate-list li.selected{background:#58a6ff1a}.candidate-list label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;row-gap:4px;margin:0;padding:10px 12px;min-height:48px;font-size:14px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.candidate-list label:hover{background:#ffffff08}.candidate-list input[type=checkbox],.candidate-list input[type=radio]{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--accent, #58a6ff)}.cand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.cand-skills{display:inline-flex;gap:4px}.cand-skills .badge{display:inline-block;padding:1px 6px;font-size:11px;border-radius:4px;background:#58a6ff2e;border:1px solid rgba(88,166,255,.5);color:#c8e1ff}.cand-flags{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}.tag{font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap;font-weight:500;line-height:1.4}.tag.good{background:#2ea04333;color:#b6f0c2}.tag.warn{background:#f4a30033;color:#ffd591}@media (max-width: 520px){.candidate-list label{grid-template-columns:auto 1fr;column-gap:12px;padding:12px}.cand-name{grid-column:2}.cand-flags{grid-column:2;justify-content:flex-start}.candidate-list input[type=checkbox],.candidate-list input[type=radio]{grid-row:1 / span 2;align-self:center}}.duty-picker{margin:14px 0;border:1px solid var(--border);border-radius:8px;padding:10px 12px 12px}.duty-picker legend{padding:0 6px;font-size:13px;color:var(--muted)}.duty-list{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.duty-item{border:1px solid var(--border);border-left-width:4px;border-radius:6px;background:var(--panel-2);transition:background .12s ease,border-color .12s ease}.duty-item label{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;margin:0;padding:8px 12px;font-size:13px;color:var(--text);cursor:pointer}.duty-item.selected{background:#58a6ff1a}.duty-when{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.duty-vehicle{font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.duty-item.sb-bv{border-left-color:#d72e2e;background:#d72e2e14}.duty-item.sb-ch{border-left-color:#2ea043;background:#2ea04314}.duty-item.sb-ms{border-left-color:#2b6cb0;background:#2b6cb01a}.duty-item.sb-asp{border-left-color:#f4a300;background:#f4a30014}.duty-item.sb-bv.selected{background:#d72e2e2e}.duty-item.sb-ch.selected{background:#2ea0432e}.duty-item.sb-ms.selected{background:#2b6cb038}.duty-item.sb-asp.selected{background:#f4a3002e}.time-edit{margin:14px 0;border:1px solid var(--border);border-radius:8px;padding:10px 12px 12px}.time-edit legend{padding:0 6px;font-size:13px;color:var(--muted)}.time-edit .small{font-size:12px;margin:0 0 8px}@media (max-width: 720px){header.app{padding:10px 12px;gap:8px;flex-wrap:wrap}header.app h1.brand{font-size:16px;gap:8px;min-width:0;flex:1 1 auto}header.app h1.brand .brand-logo{width:28px;height:28px}header.app h1.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user{gap:8px;font-size:13px;flex-shrink:0}.user-skills{display:none}.user button.ghost{padding:6px 10px;font-size:13px}main{padding:12px}.modal-backdrop{align-items:flex-start;padding:0}.modal,.modal-wide{width:100%;max-width:100%;min-height:100vh;max-height:100vh;border-radius:0;border-left:0;border-right:0;padding:16px 16px 96px;overflow-y:auto}.modal-actions{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--panel);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));margin-top:0;border-top:1px solid var(--border);box-shadow:0 -2px 12px #0006}.modal-actions button{flex:1;min-height:44px}.form-row{flex-direction:column;gap:8px}.tabs{flex-wrap:wrap}.tabs .tab{flex:1;min-width:120px}.exchange-head{flex-direction:column;align-items:stretch}.exchange-actions{justify-content:flex-end}}