*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f5f7fa;color:#111;line-height:1.55}
:root{--bg:#f5f7fa;--card:#fff;--muted:#6b7280;--ink:#111;--brand:#0f766e;--brand-2:#14b8a6;--ring:#a7f3d0;--border:#e5e7eb;--shadow:0 8px 20px rgba(2,6,23,.06);--tap:44px;--gap:12px}
.dark{--bg:#0b1020;--card:#0f162e;--muted:#9aa3b2;--ink:#e6e9ef;--brand:#22d3ee;--brand-2:#67e8f9;--ring:#155e75;--border:#1f2a44;--shadow:0 8px 20px rgba(0,0,0,.35)}
body{background:var(--bg);color:var(--ink);min-height:100vh;min-height:-webkit-fill-available;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}
a{color:inherit;text-decoration:none}.muted{color:var(--muted)}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--border)}
.dark .site-header{background:linear-gradient(180deg,rgba(15,22,46,.7),rgba(15,22,46,0))}
.site-header .wrap{display:flex;align-items:center;gap:16px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}.logo{width:28px;height:28px;fill:var(--brand)}
.nav{display:flex;gap:14px;align-items:center}.nav a{padding:8px 10px;border-radius:10px}.nav a:hover{background:rgba(20,184,166,.12)}
.pill{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;padding:8px 12px;border-radius:999px}
.actions{margin-left:auto;display:flex;gap:8px}.icon-btn{border:none;background:transparent;font-size:18px;cursor:pointer;padding:8px;border-radius:10px}.icon-btn:hover{background:rgba(148,163,184,.18)}
.burger{display:none}
.container{max-width:1100px;margin:22px auto;padding:0 16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
.flash{background:linear-gradient(180deg,#ecfdf5,#d1fae5);border:1px solid var(--ring);padding:10px 12px;border-radius:12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px}.grid.auto{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card.link{display:block;padding:18px;transition:transform .12s ease,box-shadow .12s ease}.card.link:hover{transform:translateY(-2px)}.card h3{margin:0 0 6px 0;font-size:16px}
.kpi{display:flex;align-items:baseline;gap:8px}.kpi .big{font-size:28px;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer}.btn:hover{box-shadow:var(--shadow)}.btn.primary{border:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.table thead th{font-size:12px;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;background:rgba(2,6,23,.02)}.table tbody tr:hover{background:rgba(2,6,23,.03)}
.form{display:block}.form label{display:block;margin:8px 0 6px 0;font-weight:600}
.input,.select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--ink);outline:none;-webkit-tap-highlight-color:transparent}
.input:focus,.select:focus{box-shadow:0 0 0 4px rgba(20,184,166,.18)}
.two{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,rgba(20,184,166,.12),rgba(0,0,0,0))}.hero h1{margin:0;font-size:22px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(20,184,166,.18);border:1px solid var(--border);font-size:12px}
.site-footer{border-top:1px solid var(--border);color:var(--muted);margin-top:28px}.site-footer .wrap{padding:16px}
@media(max-width:820px){.nav{position:fixed;inset:56px 12px auto 12px;flex-direction:column;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow);display:none}.nav.open{display:flex}.burger{display:inline-block}}
/* ===== Mobile & PWA base form tuning ===== */
input,select,textarea,button{font-size:16px}
textarea{min-height:96px;resize:vertical}
.input[type=date],.input[type=time],.input[type=datetime-local]{line-height:1.2}
.input::-webkit-calendar-picker-indicator{cursor:pointer}
.btn{min-height:var(--tap);padding:12px 16px;border-radius:12px}
button,.btn{touch-action:manipulation}
input[type=checkbox],input[type=radio]{width:20px;height:20px;vertical-align:middle}
input::placeholder,textarea::placeholder{color:var(--muted)}
.is-error{border-color:#ef4444!important;box-shadow:0 0 0 4px rgba(239,68,68,.15)!important}
.is-ok{border-color:#10b981!important;box-shadow:0 0 0 4px rgba(16,185,129,.15)!important}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}.form-actions .btn{flex:0 0 auto}
.table-wrap{overflow:auto;border-radius:14px}.table{min-width:640px}
.sticky-cta{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:flex-end;padding:8px}
@supports(padding:env(safe-area-inset-top)){.site-header .wrap{padding-top:calc(10px + env(safe-area-inset-top))}}
.dark .input,.dark .select,.dark textarea{background:var(--card);color:var(--ink);border-color:var(--border)}
.dark input::placeholder,.dark textarea::placeholder{color:#7b8496}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.nav a,.btn,.card.link{min-height:var(--tap);display:inline-flex;align-items:center}.table .btn{padding:8px 12px}
@media(max-width:480px){.card{padding:14px}}
/* ===== Compacte inputs voor mobiel/PWA ===== */
.form.compact{gap:10px}
.form.compact label{font-size:13px;font-weight:500;margin-bottom:4px;display:block}
.form.compact .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:500px){.form.compact .two{grid-template-columns:1fr}}
.form.compact .input,.form.compact .select,.form.compact textarea{min-height:38px;padding:8px 10px;font-size:15px;border-radius:10px;border:1px solid var(--border);background:#fff;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.input[type=date],.input[type=time],.input[type=datetime-local]{height:40px}
.form.compact .input[type=date],.form.compact .input[type=time],.form.compact .input[type=datetime-local]{height:38px;line-height:1.1;padding:4px 8px;vertical-align:middle}
.input::-webkit-calendar-picker-indicator{transform:scale(.85);margin-right:-4px;opacity:.9}
.form.compact .input::-webkit-calendar-picker-indicator{transform:scale(.8);margin-right:-6px}
.input::-webkit-datetime-edit{padding:0 .2em}
.input::-webkit-datetime-edit-fields-wrapper{letter-spacing:.02em}
@-moz-document url-prefix(){.input[type=date],.input[type=time],.input[type=datetime-local]{padding-block:6px}}
.ios .form.compact .input,.ios .form.compact .select{font-size:16px}
@media(max-width:420px){.form .input,.form .select,.form textarea{min-height:42px;padding:9px 12px}.form .btn{min-height:42px;padding:9px 14px}}
.form.compact .btn{min-height:40px;padding:8px 14px;font-size:15px;border-radius:10px}
.form.compact small.muted{font-size:12px;color:var(--muted)}
/* ===== Kalender (mobile/PWA) ===== */
.cal{overflow:auto} /* horizontale scroll mogelijk op smalle schermen */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;min-width:720px}
@media(min-width:900px){.cal-grid{gap:10px;min-width:unset}}
/* kopregel (Ma..Zo) zijn de eerste 7 items in de grid */
.cal-grid>div:nth-child(-n+7){text-align:center;font-weight:700;color:var(--muted);padding:6px 0}
.cal-cell{padding:10px;min-height:110px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
@media(max-width:480px){.cal-cell{min-height:96px;padding:8px}}
.cal-day{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cal-daynum{font-weight:700}
.cal-empty{color:var(--muted);font-size:12px}
/* items in cell */
.cal-item{border-left:4px solid rgba(0,0,0,.15);padding:6px 8px;margin:6px 0;border-radius:8px;background:rgba(2,6,23,.03);font-size:12px}
.cal-item .t{font-weight:700;display:block;margin-bottom:2px}
.cal-item .n{color:var(--muted)}
/* optionele types (als je classes toevoegt) */
.cal-item.shift{background:rgba(16,185,129,.08)}
.cal-item.event{background:rgba(59,130,246,.08)}
/* vandaag highlight */
.cal-cell.is-today{outline:2px solid var(--brand-2);box-shadow:0 0 0 4px rgba(20,184,166,.15)}
/* navigatiebalk */
.cal-nav{position:sticky;top:56px;z-index:5;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0));backdrop-filter:saturate(140%) blur(8px);border:1px solid var(--border);margin-top:8px}
.dark .cal-nav{background:linear-gradient(180deg,rgba(15,22,46,.7),rgba(15,22,46,0))}
.cal-nav .bar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cal-nav .bar h1{margin:6px 0;font-size:18px}
.cal-nav .actions{display:flex;gap:6px}
@media(max-width:520px){.cal-nav .bar h1{font-size:16px}}
/* dark mode tweaks */
.dark .cal-item{background:rgba(255,255,255,.04)}
.dark .cal-item.shift{background:rgba(16,185,129,.14)}
.dark .cal-item.event{background:rgba(59,130,246,.14)}
/* ===== Kalender (mobile/PWA) views ===== */
.cal{overflow:auto}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;min-width:720px}
@media(min-width:900px){.cal-grid{gap:10px;min-width:unset}}
.cal-grid>div:nth-child(-n+7){text-align:center;font-weight:700;color:var(--muted);padding:6px 0}
.cal-cell{padding:10px;min-height:110px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
@media(max-width:480px){.cal-cell{min-height:96px;padding:8px}}
.cal-day{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cal-daynum{font-weight:700}
.cal-empty{color:var(--muted);font-size:12px}
.cal-item{border-left:4px solid rgba(0,0,0,.15);padding:6px 8px;margin:6px 0;border-radius:8px;background:rgba(2,6,23,.03);font-size:12px}
.cal-item .t{font-weight:700;display:block;margin-bottom:2px}
.cal-item .n{color:var(--muted)}
.cal-item.shift{background:rgba(16,185,129,.08)}.cal-item.event{background:rgba(59,130,246,.08)}
.cal-cell.is-today{outline:2px solid var(--brand-2);box-shadow:0 0 0 4px rgba(20,184,166,.15)}
.cal-nav{position:sticky;top:56px;z-index:5;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0));backdrop-filter:saturate(140%) blur(8px);border:1px solid var(--border);margin-top:8px}
.dark .cal-nav{background:linear-gradient(180deg,rgba(15,22,46,.7),rgba(15,22,46,0))}
.cal-nav .bar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cal-nav .bar h1{margin:6px 0;font-size:18px}
.cal-nav .actions{display:flex;gap:6px}
/* Week */
.cal-week .cal-h{text-align:center;font-weight:700;color:var(--muted);padding:6px 0}
.cal-week .cal-cell{min-height:120px}
/* Dag (agenda) */
.cal-day .cal-agenda{list-style:none;margin:8px 0 0;padding:0}
.cal-day .cal-row{display:flex;gap:10px;align-items:flex-start;border-left:4px solid #9ca3af;padding-left:10px;margin:10px 0}
.cal-day .cal-row .t{min-width:58px;color:var(--muted);font-size:12px}
.cal-day .cal-row .ttl{font-weight:700}
.cal-day .cal-row .n{color:var(--muted);font-size:13px}
/* Jaar */
.cal-year .cal-year-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cal-year .cal-ycell{border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:var(--shadow);padding:10px}
.cal-year .cal-yhead{font-weight:700;margin-bottom:6px}
.cal-year .cal-ylist{list-style:none;margin:0;padding:0}
.cal-year .cal-ylist li{margin:6px 0;border-left:4px solid #9ca3af;padding-left:8px;font-size:13px}
.cal-year .cal-ylist .t{font-weight:700;margin-right:4px}
.cal-year .cal-ylist .n{color:var(--muted)}
.cal-year .more{color:var(--muted)}