:root{
    --bg:#f5f7fb; --panel:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
    --primary:#2563eb; --primary2:#4f46e5; --danger:#dc2626; --success:#059669;
    --shadow:0 18px 45px rgba(15,23,42,.08); --radius:22px;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#dbeafe,transparent 35%),linear-gradient(135deg,#0f172a,#1e3a8a)}
.login-shell{width:min(1050px,94vw);display:grid;grid-template-columns:1.1fr .9fr;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:34px;overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.35);backdrop-filter:blur(16px)}
.login-visual{color:white;padding:56px;position:relative;min-height:520px;display:flex;flex-direction:column;justify-content:end}.login-visual h1{font-size:56px;line-height:1;margin:0 0 16px}.login-visual p{font-size:18px;max-width:520px;color:#dbeafe}.orb{position:absolute;width:230px;height:230px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#a78bfa);filter:blur(2px);top:55px;left:60px;opacity:.9}
.login-card{background:white;padding:46px;display:flex;flex-direction:column;justify-content:center}.logo,.brand-icon{width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;display:grid;place-items:center;font-weight:900}.login-card h2{font-size:34px;margin:20px 0 4px}.login-card p{color:var(--muted)} label{display:grid;gap:7px;font-weight:700;margin:14px 0} input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 12px;font:inherit;background:white}.btn{border:1px solid var(--line);background:white;border-radius:14px;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;border:0}.btn.ghost{background:#f8fafc}.btn.danger{background:var(--danger);color:white;border:0}.btn.mini{padding:7px 10px;font-size:12px}.full{width:100%}.demo-box{display:grid;gap:5px;background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:14px;margin-top:20px;color:var(--muted)}.demo-box strong{color:var(--text)}
.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{background:#0b1220;color:white;padding:24px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:13px;align-items:center}.brand span,.profile-card span{display:block;color:#94a3b8;font-size:12px;margin-top:2px}.menu{display:grid;gap:8px}.menu a{padding:13px 14px;border-radius:14px;color:#cbd5e1;text-decoration:none;font-weight:800}.menu a:hover,.menu a.active{background:#182236;color:white}.profile-card{margin-top:auto;background:#111c2f;border:1px solid #24324a;border-radius:20px;padding:15px;display:flex;gap:12px;align-items:center}.avatar{width:42px;height:42px;border-radius:50%;background:#dbeafe;color:#1d4ed8;display:grid;place-items:center;font-weight:900}.avatar.sm{width:36px;height:36px}.logout{color:#cbd5e1;text-decoration:none;padding:12px 14px}
.content{padding:30px;overflow:auto}.alert{padding:12px 14px;border-radius:16px;margin-bottom:16px}.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--primary);font-weight:900;font-size:12px}.page-head h1{font-size:34px;margin:6px 0}.page-head p{color:var(--muted);margin:0}.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.date-picker{display:flex;gap:8px}
.planner-layout{display:grid;grid-template-columns:310px 1fr;gap:20px}.toolbox,.panel,.timeline-panel,.day-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.toolbox{padding:18px;align-self:start;position:sticky;top:20px}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title h2,.panel h2,.timeline-top h2{margin:0}.panel-title a{color:var(--primary);font-weight:800;text-decoration:none}.activity-list{display:grid;gap:10px;margin-top:16px}.activity-chip,.activity-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-left:6px solid var(--chip);border-radius:17px;background:#fff;padding:12px;cursor:grab}.activity-chip:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(15,23,42,.08)}.activity-chip.dragging{opacity:.5}.chip-icon,.shift-icon{font-size:24px}.activity-chip small,.activity-row small{display:block;color:var(--muted);margin-top:2px}.hint-card{margin-top:18px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:18px;padding:14px;display:grid;gap:6px;color:var(--muted)}.hint-card strong{color:var(--text)}
.timeline-panel{overflow:hidden}.timeline-top{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.timeline-top span{color:var(--muted)}.timeline-grid{min-width:1220px;display:grid;grid-template-columns:220px 1fr}.name-head,.time-head{height:46px;background:#f8fafc;border-bottom:1px solid var(--line);font-weight:900}.name-head{padding:14px;border-right:1px solid var(--line)}.time-head{position:relative}.time-head span{position:absolute;top:15px;transform:translateX(-50%);font-size:12px;color:var(--muted)}.person-cell{height:78px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px;display:flex;gap:10px;align-items:center;background:white}.person-cell span{display:block;color:var(--muted);font-size:12px}.person-cell.on-leave{background:#fff7ed}.timeline-row{height:78px;position:relative;border-bottom:1px solid var(--line);background:white}.timeline-row:nth-child(4n){background:#fcfdff}.timeline-row i{position:absolute;top:0;bottom:0;border-left:1px solid #eef2f7}.timeline-row.hover{background:#eff6ff;outline:2px dashed var(--primary);outline-offset:-8px}.timeline-row.disabled{background:#fff7ed}.leave-band{position:absolute;inset:18px 16px;background:#fed7aa;color:#9a3412;border-radius:14px;display:grid;place-items:center;font-weight:900}.shift-card{position:absolute;top:13px;height:52px;border-radius:16px;background:color-mix(in srgb, var(--shift) 14%, white);border:1px solid color-mix(in srgb, var(--shift) 35%, white);border-left:7px solid var(--shift);display:flex;gap:8px;align-items:center;padding:8px 10px;box-shadow:0 8px 18px rgba(15,23,42,.12);cursor:grab;overflow:hidden}.shift-card.dragging{opacity:.45}.shift-card small{display:block;color:var(--muted);white-space:nowrap}.shift-card form{margin-left:auto}.shift-card form button,.icon-btn{border:0;background:#fee2e2;color:#991b1b;border-radius:10px;width:25px;height:25px;cursor:pointer;font-weight:900}
.settings-grid{display:grid;grid-template-columns:360px 1fr;gap:20px}.panel{padding:20px}.form-panel{align-self:start}.cards-list{display:grid;gap:12px;margin-top:16px}.activity-row{cursor:default}.activity-row form{margin-left:auto}.wide-panel{grid-column:auto}.table-wrap{overflow:auto}.modern-table{width:100%;border-collapse:collapse}.modern-table th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding:12px}.modern-table td{border-bottom:1px solid var(--line);padding:13px}.inline{display:inline}
.employee-cards{display:grid;grid-template-columns:repeat(7,minmax(160px,1fr));gap:14px;margin-bottom:20px}.day-card{padding:16px;min-height:190px}.day-title{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}.day-title span{color:var(--muted);font-size:12px}.free-state{height:110px;border:1px dashed #cbd5e1;border-radius:16px;display:grid;place-items:center;color:var(--muted);background:#f8fafc}.my-shift{display:flex;gap:10px;border:1px solid var(--line);border-left:6px solid var(--shift);border-radius:16px;padding:10px;margin-bottom:10px;background:#fff}.my-shift small{display:block;color:var(--muted);margin-top:2px}.inline-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}.status{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.status.pending{background:#fef3c7;color:#92400e}.status.approved{background:#dcfce7;color:#166534}.status.rejected{background:#fee2e2;color:#991b1b}.toast{position:fixed;right:24px;bottom:24px;color:white;padding:14px 18px;border-radius:16px;opacity:0;transform:translateY(10px);transition:.2s;box-shadow:var(--shadow);z-index:50}.toast.show{opacity:1;transform:translateY(0)}.toast.ok{background:var(--success)}.toast.bad{background:var(--danger)}
@media(max-width:1100px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.planner-layout,.settings-grid{grid-template-columns:1fr}.toolbox{position:relative;top:0}.employee-cards{grid-template-columns:1fr 1fr}.inline-form{grid-template-columns:1fr}.page-head{display:block}.head-actions{margin-top:12px}.login-shell{grid-template-columns:1fr}.login-visual{display:none}}@media(max-width:700px){.content{padding:16px}.employee-cards{grid-template-columns:1fr}}


/* PLUS features */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;z-index:100;padding:20px}
.modal-backdrop[hidden]{display:none}
.modal{width:min(760px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:26px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.25);position:relative}
.modal-close{position:absolute;right:18px;top:18px;width:34px;height:34px;border:0;border-radius:12px;background:#f1f5f9;font-size:22px;cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .wide{grid-column:1/-1}
.modal hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.week-board{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}
.week-grid{min-width:1180px;display:grid;grid-template-columns:220px repeat(7,1fr)}
.week-head,.week-person,.week-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px}
.week-head{background:#f8fafc;font-weight:900}
.week-head span,.week-person span,.week-shift small,.muted{display:block;color:var(--muted);font-size:12px}
.week-head a{color:var(--primary);font-size:12px;text-decoration:none}
.week-person{display:flex;gap:10px;align-items:center;background:#fff;position:sticky;left:0;z-index:2}
.week-cell{min-height:130px;background:#fcfdff}
.week-shift{display:flex;gap:8px;border-left:6px solid var(--shift);background:color-mix(in srgb, var(--shift) 13%, white);border-radius:14px;padding:9px;margin-bottom:8px}
.log-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}
.log-card small{display:block;color:var(--muted);margin-top:3px}
.log-card p{color:var(--muted);background:#f8fafc;border-radius:12px;padding:10px}
@media(max-width:800px){.form-grid{grid-template-columns:1fr}}


/* V2 rooster improvements */
.content{max-width:100vw}
.planner-layout{grid-template-columns:280px minmax(0,1fr)}
.timeline-panel{min-width:0;overflow-x:auto;position:relative}
.timeline-grid{min-width:1500px}
.shift-card{min-width:130px}
.compact-filter{margin-bottom:20px}
.roster-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.notify-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:18px}
.notify{background:#fff;border:1px solid var(--line);border-left:7px solid var(--primary);border-radius:18px;padding:14px;box-shadow:var(--shadow)}
.notify span{display:block;color:var(--muted);margin-top:4px}
.notify.break{border-left-color:#f59e0b}.notify.done{border-left-color:#64748b}.notify.active{border-left-color:#22c55e}.notify.next{border-left-color:#8b5cf6}
.day-roster-list{display:grid;gap:16px;margin-bottom:20px}
.day-roster-card{background:white;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.day-roster-head{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.day-roster-head strong{font-size:18px}.day-roster-head span,.day-roster-head em{display:block;color:var(--muted);font-style:normal}
.roster-line{display:grid;grid-template-columns:82px 34px 1fr;gap:12px;align-items:center;border:1px solid var(--line);border-left:7px solid var(--shift);border-radius:18px;padding:12px;margin-bottom:10px;background:color-mix(in srgb, var(--shift) 10%, white)}
.time-badge{background:#f8fafc;border-radius:14px;padding:8px;text-align:center;font-weight:900}
.time-badge span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.all-rosters-board{background:white;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:auto}
.all-rosters-grid{min-width:1100px;display:grid}
.all-head,.all-person,.all-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px}
.all-head{background:#f8fafc;font-weight:900;position:sticky;top:0;z-index:4}
.all-head span,.all-person span,.all-shift small{display:block;color:var(--muted);font-size:12px}
.sticky-left{position:sticky;left:0;z-index:5;background:#fff}
.all-head.sticky-left{background:#f8fafc;z-index:6}
.all-person{display:flex;gap:10px;align-items:center}
.all-cell{min-height:110px;background:#fcfdff}
.all-shift{display:flex;gap:8px;border-left:6px solid var(--shift);background:color-mix(in srgb, var(--shift) 10%, white);border-radius:14px;padding:9px;margin-bottom:8px}
.log-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}
.log-card small{display:block;color:var(--muted);margin-top:3px}
.log-card p{color:var(--muted);background:#f8fafc;border-radius:12px;padding:10px}
@media(max-width:1100px){.planner-layout{grid-template-columns:1fr}.toolbox{position:relative}.timeline-grid{min-width:1300px}}


/* V3 contracturen + beschikbaarheid */
.contract-chip{display:inline-flex!important;margin-top:5px;padding:4px 8px;border-radius:999px;background:#e0f2fe;color:#075985;font-weight:900;font-size:11px!important}
.contract-chip.over{background:#fee2e2;color:#991b1b}
.availability-band{position:absolute;top:4px;height:18px;border-radius:999px;font-size:11px;font-weight:900;padding:2px 8px;right:12px;z-index:1}
.availability-band.ok{background:#dcfce7;color:#166534}
.availability-band.no{background:#fee2e2;color:#991b1b}
.timeline-row .shift-card{z-index:2}


/* V4 strak zonder slepen */
.quick-planner{margin-bottom:20px}
.quick-planner h2{margin-top:0}
.quick-create-grid{display:grid;grid-template-columns:1.2fr 1.4fr .7fr .9fr auto;gap:12px;align-items:end}
.clean-day{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}
.day-side{align-self:start;position:sticky;top:20px}
.side-date{background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;border-radius:20px;padding:18px;margin-bottom:14px}
.side-date strong{display:block;font-size:44px;line-height:1}
.side-date span{opacity:.9}
.side-stat{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0}
.side-stat span{color:var(--muted)}
.side-stat strong{font-size:18px}
.timeline-panel.clean{overflow-x:auto}
.timeline-grid{min-width:1700px}
.shift-card.no-drag{cursor:pointer}
.shift-card.no-drag:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.18)}
.note-line{display:block!important;margin-top:2px;color:#475569!important;font-size:11px!important;font-style:normal!important;white-space:nowrap}
.muted{color:var(--muted)}
.log-card p{white-space:normal}
@media(max-width:1200px){
    .clean-day{grid-template-columns:1fr}
    .day-side{position:relative;top:0}
    .quick-create-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
    .quick-create-grid{grid-template-columns:1fr}
}


/* V5 medewerker-rooster strak */
.employee-hero{display:flex;justify-content:space-between;gap:20px;align-items:stretch;margin-bottom:22px}
.employee-hero h1{font-size:42px;line-height:1;margin:6px 0}
.employee-hero p{color:var(--muted);margin:0}
.employee-hero-card{min-width:260px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;border-radius:26px;padding:20px;box-shadow:var(--shadow)}
.employee-hero-card span,.employee-hero-card small{display:block;opacity:.86}
.employee-hero-card strong{display:block;font-size:24px;margin:8px 0 2px}
.employee-alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:18px}
.employee-alert{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px;box-shadow:var(--shadow)}
.employee-alert span{display:block;color:var(--muted);margin-top:3px}
.alert-dot{width:12px;height:12px;border-radius:50%;background:var(--primary);margin-top:4px}
.employee-alert.active .alert-dot{background:#22c55e}.employee-alert.break .alert-dot{background:#f59e0b}.employee-alert.done .alert-dot{background:#64748b}.employee-alert.next .alert-dot{background:#8b5cf6}
.employee-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.employee-summary article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.employee-summary span,.employee-summary small{display:block;color:var(--muted)}
.employee-summary strong{display:block;font-size:34px;margin:4px 0}
.employee-filter-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow);margin-bottom:20px}
.employee-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.employee-roster-board{display:grid;gap:16px;margin-bottom:20px}
.employee-day{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
.employee-day-head{display:flex;gap:15px;align-items:center;padding:18px 20px;background:#f8fafc;border-bottom:1px solid var(--line)}
.date-block{width:58px;height:58px;border-radius:18px;background:#111827;color:white;display:grid;place-items:center;line-height:1}
.date-block strong{font-size:24px}.date-block span{text-transform:uppercase;font-size:11px;color:#cbd5e1}
.employee-day-head h2{margin:0;font-size:22px}.employee-day-head p{margin:3px 0 0;color:var(--muted)}
.employee-free{margin:18px;border:1px dashed #cbd5e1;background:#f8fafc;border-radius:20px;padding:26px;display:grid;place-items:center;text-align:center;color:var(--muted)}
.employee-free span{font-size:32px}.employee-free strong{color:var(--text);margin-top:5px}
.employee-shift-list{padding:16px;display:grid;gap:12px}
.employee-shift{display:grid;grid-template-columns:94px 1fr;gap:14px;align-items:stretch;border:1px solid var(--line);border-left:8px solid var(--shift);border-radius:22px;padding:14px;background:color-mix(in srgb, var(--shift) 9%, white)}
.shift-time-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;text-align:center;display:grid;place-items:center}
.shift-time-card strong{font-size:18px}.shift-time-card span{display:block;color:var(--muted);font-size:13px}
.shift-main{display:grid;gap:7px}
.shift-title-row{display:flex;gap:9px;align-items:center;font-size:18px}
.shift-meta-row{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.shift-note{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;color:#475569}
.shift-note p{margin:0}
.employee-action-panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:var(--shadow);display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:end}
.employee-action-panel h2{margin:0 0 4px}.employee-action-panel p{margin:0;color:var(--muted)}
.employee-swap-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}
@media(max-width:1000px){
    .employee-hero,.employee-action-panel{display:block}
    .employee-hero-card{margin-top:14px}
    .employee-summary{grid-template-columns:1fr}
    .employee-swap-form{grid-template-columns:1fr;margin-top:14px}
}
@media(max-width:650px){
    .employee-hero h1{font-size:32px}
    .employee-filter{display:grid}
    .employee-shift{grid-template-columns:1fr}
    .shift-time-card{display:flex;justify-content:space-between}
}


/* V6 fullwidth planner */
.planner-head{margin-bottom:18px}
.planner-one-piece{
    background:#fff;
    border:1px solid var(--line);
    border-radius:28px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.planner-toolbar{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:end;
    padding:18px 20px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#fff,#f8fafc);
}
.planner-toolbar h2{margin:0;font-size:24px}
.planner-toolbar span{display:block;color:var(--muted);margin-top:3px}
.planner-add-form{
    display:grid;
    grid-template-columns:180px 170px 115px 130px auto;
    gap:10px;
    align-items:end;
}
.planner-scroll{overflow-x:auto;overflow-y:hidden}
.timeline-grid.fullwidth{min-width:1720px;grid-template-columns:240px 1fr}
.timeline-grid.fullwidth .name-head{position:sticky;left:0;z-index:8}
.timeline-grid.fullwidth .person-cell{position:sticky;left:0;z-index:7;background:#fff}
.timeline-grid.fullwidth .person-cell.on-leave{background:#fff7ed}
.timeline-grid.fullwidth .time-head{position:sticky;top:0;z-index:6}
.shift-card.no-drag{min-width:150px;height:54px}
.clean-day,.day-side,.toolbox{display:none!important}
@media(max-width:1200px){
    .planner-toolbar{display:block}
    .planner-add-form{grid-template-columns:1fr 1fr;margin-top:14px}
}
@media(max-width:700px){.planner-add-form{grid-template-columns:1fr}}

/* V7 fullscreen planner + drag resize */
body:has(.fullscreen-planner) .sidebar{display:flex}
body:has(.fullscreen-planner) .shell{display:grid}
body:has(.fullscreen-planner) .content{padding:30px;min-height:100vh;overflow:auto}
.fullscreen-planner{height:100vh;display:grid;grid-template-rows:auto auto 1fr;background:#f5f7fb}
.planner-topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 22px;background:white;border-bottom:1px solid var(--line)}
.planner-topbar h1{font-size:32px;line-height:1;margin:4px 0}.planner-topbar p{margin:0;color:var(--muted)}
.planner-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.planner-command{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 22px;background:#f8fafc;border-bottom:1px solid var(--line)}
.planner-add-form{display:grid;grid-template-columns:230px 190px 120px 150px auto;gap:10px;align-items:center}
.planner-help{color:var(--muted);font-size:13px}.planner-canvas{overflow:auto;background:white}
.timeline-grid.fullwidth{min-width:1900px;grid-template-columns:260px 1fr}
.timeline-grid.fullwidth .name-head{position:sticky;left:0;top:0;z-index:20}
.timeline-grid.fullwidth .time-head{position:sticky;top:0;z-index:18}
.timeline-grid.fullwidth .person-cell{position:sticky;left:0;z-index:12;background:#fff}
.timeline-row.drop-row.hover{background:#eff6ff;outline:2px dashed var(--primary);outline-offset:-8px}
.shift-card.drag-resize{cursor:grab;min-width:150px;height:56px;padding-right:18px}.shift-card.dragging{opacity:.45}
.resize-handle{position:absolute;right:0;top:0;bottom:0;width:10px;cursor:ew-resize;background:rgba(15,23,42,.08);border-radius:0 16px 16px 0}
.resize-handle:hover{background:rgba(37,99,235,.35)} body.is-resizing{cursor:ew-resize;user-select:none}
.day-checks{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.day-checks label{display:flex;gap:5px;align-items:center;margin:0;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:8px 10px}.day-checks input{width:auto}
@media(max-width:1100px){.planner-topbar,.planner-command{display:block}.planner-actions,.planner-add-form{margin-top:12px}.planner-add-form{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.planner-add-form{grid-template-columns:1fr}}


/* V8 complete dashboard */
.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:20px;
}
.dashboard-stats article{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    box-shadow:var(--shadow);
}
.dashboard-stats span,.dashboard-stats small{display:block;color:var(--muted)}
.dashboard-stats strong{display:block;font-size:34px;margin:4px 0}
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(190px,1fr));
    gap:16px;
}
.dash-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:22px;
    box-shadow:var(--shadow);
    text-decoration:none;
    color:var(--text);
    min-height:170px;
    display:flex;
    flex-direction:column;
    gap:9px;
    transition:.15s ease;
}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 22px 55px rgba(15,23,42,.12)}
.dash-card span{font-size:34px}
.dash-card strong{font-size:20px}
.dash-card small{color:var(--muted);line-height:1.45}
.dash-card.main{
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:white;
}
.dash-card.main small{color:#dbeafe}
body:has(.fullscreen-planner) .alert{display:none}
@media(max-width:1100px){
    .dashboard-stats{grid-template-columns:1fr 1fr}
    .dashboard-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
    .dashboard-stats,.dashboard-grid{grid-template-columns:1fr}
}


/* V9 refined planning with menu */
.refined-head h1{font-size:36px;margin:4px 0}
.planner-shell-v9{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
.planner-command-v9{display:flex;justify-content:space-between;gap:18px;align-items:end;padding:18px 20px;background:linear-gradient(180deg,#fff,#f8fafc);border-bottom:1px solid var(--line)}
.planner-command-v9 h2{margin:0;font-size:20px}.planner-command-v9 small{color:var(--muted)}
.planner-add-form-v9{display:grid;grid-template-columns:210px 180px 120px 140px auto;gap:10px;align-items:end}
.planner-board-v9{overflow:auto;max-height:calc(100vh - 260px);background:white}
.timeline-grid.fullwidth-v9{min-width:1750px;display:grid;grid-template-columns:250px 1fr}
.timeline-grid.fullwidth-v9 .name-head{position:sticky;left:0;top:0;z-index:20}
.timeline-grid.fullwidth-v9 .time-head{position:sticky;top:0;z-index:18}
.timeline-grid.fullwidth-v9 .person-v9{position:sticky;left:0;z-index:12;background:#fff}
.row-v9{height:68px}
.shift-v9{height:48px;top:10px;border-radius:14px;min-width:145px}
.shift-v9 .shift-icon{font-size:20px}.shift-v9 strong{font-size:13px}.shift-v9 small{font-size:11px}
.resize-handle{position:absolute;right:0;top:0;bottom:0;width:10px;cursor:ew-resize;background:rgba(15,23,42,.08);border-radius:0 14px 14px 0}
.timeline-row.drop-row.hover{background:#eff6ff;outline:2px dashed var(--primary);outline-offset:-8px}
@media(max-width:1200px){.planner-command-v9{display:block}.planner-add-form-v9{grid-template-columns:1fr 1fr;margin-top:12px}}
@media(max-width:700px){.planner-add-form-v9{grid-template-columns:1fr}.planner-board-v9{max-height:none}}


/* V10 availability strips */
.availability-layout{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.availability-left{display:grid;gap:18px}
.availability-form{padding:18px}
.availability-form h2{margin-top:0}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.week-toggle-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.week-toggle-row label{cursor:pointer}
.week-toggle-row input{display:none}
.week-toggle-row span{display:inline-flex;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:900}
.week-toggle-row input:checked + span{background:#2563eb;color:#fff;border-color:#2563eb}
.availability-board{padding:20px}
.board-title{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.board-title h2{margin:0}.board-title p{margin:3px 0 0;color:var(--muted)}
.board-title > span{background:#eef2ff;color:#3730a3;border-radius:999px;padding:7px 11px;font-weight:900}
.availability-strips{display:grid;gap:10px}
.availability-strip{display:grid;grid-template-columns:260px 180px 1fr 38px;gap:14px;align-items:center;border:1px solid var(--line);border-left:8px solid #22c55e;border-radius:18px;padding:13px;background:#fff}
.availability-strip.is-no{border-left-color:#ef4444}
.strip-user{display:flex;gap:10px;align-items:center}
.strip-user span,.strip-time span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.strip-time strong{font-size:15px}
.strip-note{color:#475569;background:#f8fafc;border-radius:12px;padding:9px 11px}
.danger-icon{background:#fee2e2!important;color:#991b1b!important}
.empty-state{padding:25px;text-align:center;color:var(--muted);border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc}

/* V10 simple employee roster */
.simple-roster-hero h1{font-size:38px}
.compact-summary{grid-template-columns:repeat(3,1fr)}
.roster-days-clean{display:grid;gap:14px;margin-bottom:20px}
.roster-day-clean{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.roster-day-title{display:flex;justify-content:space-between;padding:16px 18px;background:#f8fafc;border-bottom:1px solid var(--line)}
.roster-day-title strong{font-size:18px}.roster-day-title span{display:block;color:var(--muted);margin-top:2px}
.roster-service-row{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;margin:14px;border:1px solid var(--line);border-left:7px solid var(--shift);border-radius:18px;padding:13px;background:color-mix(in srgb, var(--shift) 8%, white)}
.service-time{background:#fff;border:1px solid var(--line);border-radius:14px;text-align:center;padding:9px}
.service-time strong{display:block;font-size:18px}.service-time span{color:var(--muted);font-size:12px}
.service-title{display:flex;gap:8px;align-items:center;font-size:17px}
.service-body small{display:block;color:var(--muted);margin-top:3px}
.service-note{margin:8px 0 0;background:#f8fafc;border-radius:12px;padding:9px;color:#475569}
.clean-free{margin:14px}
@media(max-width:1100px){.availability-layout{grid-template-columns:1fr}.availability-strip{grid-template-columns:1fr}}
@media(max-width:700px){.two-cols,.compact-summary{grid-template-columns:1fr}.roster-service-row{grid-template-columns:1fr}}


/* V11 availability + email release */
.availability-head h1{font-size:34px;margin:4px 0}
.availability-layout{grid-template-columns:360px minmax(0,1fr)}
.slim-form{padding:18px;border-radius:22px}
.form-title{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.form-title > span{width:42px;height:42px;border-radius:14px;background:#eef2ff;display:grid;place-items:center;font-size:22px}
.form-title h2{margin:0;font-size:20px}
.form-title p{margin:2px 0 0;color:var(--muted);font-size:13px}
.availability-form label{margin:10px 0}
.availability-form textarea{min-height:66px}
.week-toggle-row.labeled{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.week-toggle-row.labeled label:nth-last-child(-n+2){grid-column:auto}
.week-toggle-row.labeled span{text-align:center;justify-content:center;width:100%}
.availability-strip{grid-template-columns:250px 170px minmax(160px,1fr) 38px}
.strip-note{font-size:13px}
@media(max-width:1100px){.availability-layout{grid-template-columns:1fr}.week-toggle-row.labeled{grid-template-columns:repeat(7,1fr)}}
@media(max-width:700px){.week-toggle-row.labeled{grid-template-columns:repeat(4,1fr)}}

/* V12 weeknummer + hele dag */
.timeline-grid.fullwidth-v9{min-width:2400px}
.timeline-grid.fullwidth-v9 .time-head span{font-size:11px}
.planner-board-v9{max-height:calc(100vh - 270px)}
input[type="week"]{font-weight:800}

/* V13 planning strak + hele dag */
.planner-shell-v13{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.planner-command-v13{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;background:#fff;border-bottom:1px solid var(--line)}
.planner-title-v13 strong{display:block;font-size:18px}.planner-title-v13 span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.planner-add-form-v13{display:grid;grid-template-columns:210px 190px 120px 135px auto;gap:10px;align-items:center}
.planner-board-v13{overflow:auto;max-height:calc(100vh - 260px);background:#fbfdff}
.timeline-grid-v13{min-width:2450px;display:grid;grid-template-columns:260px 1fr}
.timeline-grid-v13 .name-head,.timeline-grid-v13 .time-head{background:#f8fafc;border-bottom:1px solid var(--line);height:42px;display:flex;align-items:center;font-weight:900;position:sticky;top:0;z-index:20}
.timeline-grid-v13 .name-head{left:0;padding-left:16px;z-index:25}
.timeline-grid-v13 .time-head{position:sticky;top:0;z-index:18}
.timeline-grid-v13 .time-head span{position:absolute;font-size:11px;color:#64748b;transform:translateX(-50%)}
.person-v13{position:sticky;left:0;z-index:12;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:72px;padding:12px 14px;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center}
.person-v13 strong{font-size:14px}.person-v13 span{display:block;color:var(--muted);font-size:12px}
.timeline-row-v13{position:relative;min-height:72px;border-bottom:1px solid var(--line);background:#fff}
.timeline-row-v13:nth-child(4n){background:#fcfdff}
.timeline-row-v13 i{position:absolute;top:0;bottom:0;border-left:1px solid #edf2f7}
.timeline-row-v13.hover{background:#eff6ff!important;outline:2px dashed #2563eb;outline-offset:-7px}
.shift-v13{position:absolute;top:12px;height:48px;border-radius:14px;min-width:145px;cursor:grab;padding-right:18px}
.shift-v13 strong{font-size:13px}.shift-v13 small{font-size:11px}
.availability-pill{position:absolute;right:10px;top:4px;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:900;z-index:2}
.availability-pill.ok{background:#dcfce7;color:#166534}.availability-pill.no{background:#fee2e2;color:#991b1b}
.resize-handle{position:absolute;right:0;top:0;bottom:0;width:10px;cursor:ew-resize;background:rgba(15,23,42,.08);border-radius:0 14px 14px 0}
.resize-handle:hover{background:rgba(37,99,235,.35)}
@media(max-width:1200px){.planner-command-v13{display:block}.planner-add-form-v13{grid-template-columns:1fr 1fr;margin-top:12px}}
@media(max-width:700px){.planner-add-form-v13{grid-template-columns:1fr}}

/* V14 mobile + hours + leave */
.mobile-menu-btn{display:none;position:fixed;top:10px;left:10px;z-index:1000;background:#2563eb;color:white;border:0;border-radius:12px;padding:10px 13px;font-weight:900}
.hours-filter{margin-bottom:18px}
.hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.hours-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.hours-head{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.hours-head strong{font-size:18px}.hours-head span,.hours-head em{display:block;color:var(--muted);font-style:normal}
.hours-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.hours-stats div{background:#f8fafc;border-radius:14px;padding:12px}
.hours-stats span,.hours-stats small{display:block;color:var(--muted);font-size:12px}
.hours-stats strong{display:block;font-size:24px}
.leave-balance{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#f8fafc;border-radius:16px;padding:12px}
.leave-balance.big{margin-bottom:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:16px}
.leave-balance div{border-radius:12px;padding:10px;background:#fff}
.leave-balance span,.leave-balance small{display:block;color:var(--muted);font-size:12px}
.leave-balance strong{font-size:20px}
.leave-balance.ok{border-left:8px solid #22c55e}
.leave-balance.bad{border-left:8px solid #ef4444}
.status.pending{background:#fef3c7;color:#92400e}
@media(max-width:900px){
    .mobile-menu-btn{display:block}
    .shell{display:block}
    .sidebar{position:fixed;left:-280px;top:0;bottom:0;width:260px;z-index:999;transition:.2s ease;box-shadow:0 20px 60px rgba(0,0,0,.25)}
    body.menu-open .sidebar{left:0}
    .content{padding:62px 14px 20px!important}
    .page-head,.employee-hero,.planner-command-v13,.head-actions{display:block!important}
    .head-actions{margin-top:12px}
    .settings-grid,.availability-layout{grid-template-columns:1fr!important}
    .dashboard-stats,.dashboard-grid,.employee-summary,.hours-stats,.leave-balance{grid-template-columns:1fr!important}
    .planner-add-form-v13,.roster-filter,.employee-filter{grid-template-columns:1fr!important;display:grid!important}
    .planner-board-v13{max-height:none}
    .table-wrap{overflow-x:auto}
    .modern-table{min-width:760px}
}

/* V16 verlof intrekken */
.status.cancelled{
    background:#e2e8f0;
    color:#475569;
}
.leave-admin-wide{
    display:block;
    width:100%;
}
.leave-panel{
    width:100%;
    max-width:none;
}
.leave-list{
    display:grid;
    gap:12px;
}
.leave-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:15px;
}
.leave-card-main{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
}
.leave-card-main strong{display:block;font-size:17px}
.leave-card-main span:not(.status){display:block;color:var(--muted);margin-top:3px}
.leave-reason,.leave-reject{
    margin:12px 0 0;
    padding:11px 12px;
    border-radius:12px;
    background:#f8fafc;
    color:#334155;
}
.leave-reject{
    background:#fef2f2;
    color:#991b1b;
}
.leave-actions{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:14px;
}
.reject-form{
    display:flex;
    gap:8px;
    align-items:center;
    flex:1;
    min-width:280px;
}
.reject-form input{
    flex:1;
    min-width:180px;
}
@media(max-width:900px){
    .leave-card-main,.leave-actions,.reject-form{display:block}
    .reject-form input{width:100%;margin:8px 0}
}

/* V17 scherpere planning + uren */
.sidebar{display:flex!important;flex-direction:column!important}
.sidebar-footer{margin-top:auto;padding:14px 14px 18px}
.sidebar-footer .logout{display:block!important;margin:0!important;text-align:center;background:rgba(255,255,255,.06)!important;border-radius:14px!important}
.planner-shell-v13{border-radius:18px!important}
.planner-command-v13{background:#f8fafc!important}
.planner-title-v13 strong{font-size:20px!important}
.timeline-grid-v13 .name-head{font-size:16px!important}
.timeline-grid-v13 .time-head{height:46px!important}
.timeline-grid-v13 .time-head span{font-size:12px!important;font-weight:800!important;color:#334155!important}
.person-v13{min-height:64px!important}
.timeline-row-v13{min-height:64px!important}
.shift-v13{top:9px!important;height:46px!important}
.hours-mail-form{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.hours-mail-form input{max-width:280px}
.plus{color:#16a34a!important;font-weight:900}
.minus{color:#dc2626!important;font-weight:900}
.hours-stats small{font-size:13px!important}
@media(max-width:900px){
    .hours-mail-form{display:grid}
    .hours-mail-form input{max-width:none;width:100%}
}

/* V18 uren startdatum + verlof filter + planner polish */
.hours-mail-card{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 280px auto;
    gap:12px;
    align-items:center;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
}
.hours-mail-card strong{display:block}
.hours-mail-card span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.calc-note{margin:10px 0 0;color:#64748b;font-size:13px}
.leave-filter{
    margin-bottom:16px;
    display:flex;
    gap:12px;
    align-items:end;
    flex-wrap:wrap;
}
.leave-filter label{min-width:260px}
.planner-board-v13{background:#fff!important}
.timeline-grid-v13{min-width:2300px}
.timeline-grid-v13 .name-head{background:#f1f5f9!important}
.timeline-grid-v13 .time-head{background:#f8fafc!important}
.person-v13{grid-template-columns:34px minmax(120px,1fr) auto!important}
.person-v13 .avatar{width:34px!important;height:34px!important}
.person-v13 strong{font-size:13px!important}
.person-v13 span{font-size:11px!important}
.contract-chip{font-size:10px!important;padding:3px 7px!important}
@media(max-width:900px){
    .hours-mail-card{grid-template-columns:1fr}
    .leave-filter{display:grid}
}


/* V19 uren per medewerker + jaarweken */
.hours-filter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:12px;
    align-items:end;
}
.year-week-overview{
    display:grid;
    gap:18px;
}
.year-card{
    padding:18px;
}
.year-weeks-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
    gap:10px;
    margin-top:14px;
}
.week-tile{
    border:1px solid var(--line);
    border-left:6px solid #22c55e;
    border-radius:14px;
    padding:10px;
    background:#fff;
}
.week-tile.bad{
    border-left-color:#ef4444;
}
.week-tile strong,
.week-tile span,
.week-tile b,
.week-tile small{
    display:block;
}
.week-tile strong{font-size:14px}
.week-tile span{font-size:11px;color:var(--muted);margin-top:2px}
.week-tile b{font-size:20px;margin-top:6px}
.week-tile small{font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:700px){
    .year-weeks-grid{grid-template-columns:1fr 1fr}
}

/* V20 planning 00:00 zichtbaar + medewerker home */
.timeline-grid-v13 .time-head-v20 span:first-child,
.time-head-v20 span[style*="left: 0"]{
    transform:translateX(0)!important;
    color:#1d4ed8!important;
    font-weight:1000!important;
}
.timeline-grid-v13 .time-head-v20::before{
    content:"00:00";
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    color:#1d4ed8;
    font-weight:1000;
    background:#f8fafc;
    padding-right:8px;
    z-index:2;
}
.timeline-row-v13.row-v20::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    border-left:3px solid #2563eb;
    z-index:1;
}
.planner-board-v13{
    scroll-behavior:smooth;
}
.employee-home-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px;
    margin-bottom:20px;
}
.employee-home-card{
    display:flex;
    gap:14px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    box-shadow:var(--shadow);
    text-decoration:none;
    color:var(--text);
    transition:.15s ease;
}
.employee-home-card:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 55px rgba(15,23,42,.12);
}
.employee-home-card span{
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:#eef2ff;
    font-size:24px;
}
.employee-home-card strong{
    display:block;
    font-size:18px;
}
.employee-home-card small{
    display:block;
    color:var(--muted);
    margin-top:3px;
}
.employee-home-card.primary-card{
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
}
.employee-home-card.primary-card small{
    color:#dbeafe;
}
.employee-home-card.primary-card span{
    background:rgba(255,255,255,.18);
}
.employee-today-panel{
    padding:18px;
}
.today-shifts{
    display:grid;
    gap:10px;
}
.today-shift{
    border:1px solid var(--line);
    border-left:7px solid var(--shift);
    border-radius:16px;
    padding:13px;
    background:color-mix(in srgb, var(--shift) 8%, white);
}
.today-shift strong,
.today-shift span{
    display:block;
}
.today-shift span{
    color:var(--muted);
    margin-top:3px;
}
@media(max-width:700px){
    .employee-home-grid{grid-template-columns:1fr}
}


/* V22 complete mail + uren */
.hours-filter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:12px;
    align-items:end;
}
.hours-mail-card{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 280px auto;
    gap:12px;
    align-items:center;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
}
.hours-mail-card strong{display:block}
.hours-mail-card span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.calc-note{margin:10px 0 0;color:#64748b;font-size:13px}
.year-week-overview{display:grid;gap:18px}
.year-card{padding:18px}
.year-weeks-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
    gap:10px;
    margin-top:14px;
}
.week-tile{
    border:1px solid var(--line);
    border-left:6px solid #22c55e;
    border-radius:14px;
    padding:10px;
    background:#fff;
}
.week-tile.bad{border-left-color:#ef4444}
.week-tile strong,.week-tile span,.week-tile b,.week-tile small{display:block}
.week-tile strong{font-size:14px}
.week-tile span{font-size:11px;color:var(--muted);margin-top:2px}
.week-tile b{font-size:20px;margin-top:6px}
.week-tile small{font-size:12px;color:var(--muted);margin-top:2px}
.plus{color:#16a34a!important;font-weight:900}
.minus{color:#dc2626!important;font-weight:900}
@media(max-width:900px){
    .hours-mail-card{grid-template-columns:1fr}
}
@media(max-width:700px){
    .year-weeks-grid{grid-template-columns:1fr 1fr}
}

/* V24 maandduidelijkheid */
.current-period-banner{
    margin-top:14px;
    border:1px solid var(--line);
    background:#f8fafc;
    border-radius:16px;
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}
.current-period-banner strong{
    font-size:18px;
}
.current-period-banner span{
    color:var(--muted);
}
@media(max-width:700px){
    .current-period-banner{
        display:block;
    }
    .current-period-banner span{
        display:block;
        margin-top:4px;
    }
}

/* v26 availability */
.week-grid .day-card{
    transition:0.2s;
}
.week-grid .day-card:hover{
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* V27 beschikbaarheid pro */
.availability-pro{padding:18px}
.availability-toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:14px}
.availability-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.availability-board-pro{display:grid;gap:0;border:1px solid var(--line);border-radius:20px;overflow:auto;background:#fff}
.availability-time-head{display:grid;grid-template-columns:180px minmax(900px,1fr) 190px;background:#f8fafc;border-bottom:1px solid var(--line);height:42px}
.availability-hours{position:relative}
.availability-hours span{position:absolute;top:13px;transform:translateX(-50%);font-size:11px;font-weight:900;color:#64748b}
.availability-hours span:first-child{transform:translateX(0);color:#2563eb}
.availability-row{display:grid;grid-template-columns:180px minmax(900px,1fr) 190px;min-height:70px;border-bottom:1px solid var(--line)}
.availability-row:last-child{border-bottom:0}
.availability-day-name{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;background:#fff;border-right:1px solid var(--line);position:sticky;left:0;z-index:2}
.availability-strip-line{position:relative;background:#fcfdff}
.availability-strip-line i{position:absolute;top:0;bottom:0;border-left:1px solid #edf2f7}
.availability-block{position:absolute;top:13px;height:44px;border-radius:14px;background:#22c55e;color:white;box-shadow:0 10px 22px rgba(34,197,94,.24);cursor:grab;min-width:34px;overflow:hidden}
.availability-block.inactive{opacity:.25;background:#94a3b8}
.availability-block b{display:block;text-align:center;font-size:13px;padding-top:13px;white-space:nowrap}
.resize-left,.resize-right{position:absolute;top:0;bottom:0;width:10px;background:rgba(0,0,0,.12);cursor:ew-resize}
.resize-left{left:0}.resize-right{right:0}
.availability-inputs{display:flex;gap:6px;align-items:center;padding:12px;background:#fff;border-left:1px solid var(--line)}
.availability-inputs input{min-width:0}
.switch input{display:none}
.switch span{display:block;width:42px;height:24px;background:#cbd5e1;border-radius:999px;position:relative}
.switch span:before{content:"";position:absolute;width:18px;height:18px;background:white;border-radius:999px;left:3px;top:3px;transition:.15s}
.switch input:checked + span{background:#22c55e}
.switch input:checked + span:before{left:21px}
.availability-save{margin-top:16px}
.mobile-availability-cards{display:none}
@media(max-width:800px){
    .availability-board-pro{display:none}
    .mobile-availability-cards{display:grid;gap:10px;margin-top:12px}
    .mobile-av-card{display:grid;grid-template-columns:1fr auto auto auto;gap:7px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff}
    .mobile-av-card strong,.mobile-av-card small{display:block}
    .mobile-av-card small{color:var(--muted);margin-top:2px}
    .availability-toolbar{display:grid}
    .availability-actions{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
    .mobile-av-card{grid-template-columns:1fr}
    .availability-actions{grid-template-columns:1fr}
}

/* V28 VoIPStarr */
.muted-small{
    color:#64748b;
    font-size:13px;
    margin-top:-4px;
    margin-bottom:12px;
}
.brand strong{
    line-height:1.15;
}


/* V29 login fix */
.login-body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 32%),
        linear-gradient(135deg,#0f172a,#1e293b);
    font-family:Arial,Helvetica,sans-serif;
}
.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:22px;
}
.login-card{
    width:100%;
    max-width:420px;
    background:#ffffff;
    border-radius:28px;
    padding:30px;
    box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.login-brand{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:24px;
}
.login-logo{
    width:54px;
    height:54px;
    border-radius:18px;
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:24px;
    font-weight:900;
}
.login-brand h1{
    margin:0;
    font-size:30px;
    line-height:1;
    color:#0f172a;
}
.login-brand p{
    margin:5px 0 0;
    color:#64748b;
    font-weight:700;
}
.login-form{
    display:grid;
    gap:15px;
}
.login-form label{
    display:grid;
    gap:7px;
    font-size:14px;
    font-weight:800;
    color:#334155;
}
.login-form input{
    width:100%;
    box-sizing:border-box;
    border:1px solid #dbe3ef;
    border-radius:14px;
    padding:13px 14px;
    font-size:16px;
    outline:none;
}
.login-form input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.login-btn{
    width:100%;
    justify-content:center;
    margin-top:4px;
    padding:13px 16px!important;
    font-size:16px;
}
.login-card .alert{
    margin:0 0 16px;
}
@media(max-width:520px){
    .login-card{
        padding:24px;
        border-radius:22px;
    }
    .login-brand h1{font-size:26px}
}

/* V30 oude login stijl + NL statussen */
.login-body-old{
    margin:0;
    min-height:100vh;
    background:#eef2f7;
    font-family:Arial,Helvetica,sans-serif;
}
.login-shell-old{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 460px;
}
.login-visual-old{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(96,165,250,.35), transparent 28%),
        radial-gradient(circle at 80% 70%, rgba(79,70,229,.35), transparent 30%),
        linear-gradient(135deg,#0f172a,#1e3a8a);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px;
}
.login-visual-old:after{
    content:"";
    position:absolute;
    inset:40px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:34px;
}
.login-visual-content{
    position:relative;
    z-index:2;
    max-width:460px;
}
.login-mark{
    width:74px;
    height:74px;
    border-radius:24px;
    background:rgba(255,255,255,.14);
    display:grid;
    place-items:center;
    font-size:34px;
    font-weight:1000;
    margin-bottom:24px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.login-visual-content h1{
    font-size:58px;
    margin:0;
    line-height:.95;
    letter-spacing:-2px;
}
.login-visual-content p{
    margin:14px 0 0;
    font-size:22px;
    color:#dbeafe;
    font-weight:800;
}
.login-lines{
    display:grid;
    gap:10px;
    margin-top:38px;
}
.login-lines span{
    display:block;
    height:10px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
}
.login-lines span:nth-child(1){width:75%}
.login-lines span:nth-child(2){width:55%}
.login-lines span:nth-child(3){width:88%}
.login-panel-old{
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:46px;
    box-shadow:-20px 0 60px rgba(15,23,42,.10);
}
.login-panel-head{
    margin-bottom:28px;
}
.login-panel-head h2{
    font-size:34px;
    margin:6px 0 6px;
    letter-spacing:-1px;
}
.login-panel-head p{
    margin:0;
    color:#64748b;
}
.login-form-old{
    display:grid;
    gap:15px;
}
.login-form-old label{
    display:grid;
    gap:7px;
    font-weight:900;
    color:#334155;
    font-size:14px;
}
.login-form-old input{
    border:1px solid #dbe3ef;
    border-radius:15px;
    padding:14px;
    font-size:16px;
    outline:none;
}
.login-form-old input:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.login-btn-old{
    margin-top:6px;
    justify-content:center;
    padding:14px 16px!important;
    font-size:16px;
}
.status.approved{background:#dcfce7;color:#166534}
.status.rejected{background:#fee2e2;color:#991b1b}
.status.pending{background:#fef3c7;color:#92400e}
.status.cancelled{background:#e2e8f0;color:#475569}
@media(max-width:900px){
    .login-shell-old{
        grid-template-columns:1fr;
    }
    .login-visual-old{
        min-height:230px;
        padding:30px;
    }
    .login-visual-content h1{
        font-size:42px;
    }
    .login-visual-old:after{
        inset:18px;
        border-radius:24px;
    }
    .login-panel-old{
        padding:28px;
        box-shadow:none;
    }
}

/* V31 publiceren + meldingen */
.publication-bar{
    margin:0 0 18px;
    border:1px solid var(--line);
    border-radius:18px;
    padding:15px 16px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    background:#fff;
    box-shadow:var(--shadow);
}
.publication-bar.concept{border-left:8px solid #94a3b8}
.publication-bar.published{border-left:8px solid #22c55e}
.publication-bar strong{display:block;font-size:18px}
.publication-bar span{display:block;color:var(--muted);margin-top:3px}
.publication-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.publication-actions form{margin:0}
.notification-list{padding:16px;margin-bottom:18px}
.notification-list h2{margin:0 0 12px;font-size:20px}
.notification-item{
    display:block;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
    text-decoration:none;
    color:var(--text);
    background:#f8fafc;
    margin-bottom:8px;
}
.notification-item strong,.notification-item span{display:block}
.notification-item span{color:var(--muted);margin-top:3px}
@media(max-width:800px){
    .publication-bar{display:block}
    .publication-actions{margin-top:12px}
}

/* V32 dienstverband */
.employment-note{
    margin-bottom:16px;
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}
.employment-note strong{font-size:17px}
.employment-note span{color:var(--muted)}
@media(max-width:700px){
    .employment-note{display:block}
    .employment-note span{display:block;margin-top:4px}
}

/* V33 publiceer volledige rooster-mail + ingelogd balk */
.logged-in-bar{
    margin:0 0 16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px 14px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.logged-in-bar strong,.logged-in-bar span{display:block}
.logged-in-bar span{color:var(--muted);font-size:13px;margin-top:2px}
.logged-in-bar a{text-decoration:none;color:#2563eb;font-weight:900}
@media(max-width:700px){
    .logged-in-bar{display:block}
    .logged-in-bar a{display:inline-block;margin-top:8px}
}

/* V34 inklokken */
.clock-panel{padding:20px}
.clock-status{
    display:flex;justify-content:space-between;gap:16px;align-items:center;
    border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px
}
.clock-status strong,.clock-status span{display:block}
.clock-status span{color:var(--muted);margin-top:4px}
.clock-status em{font-style:normal;background:#f8fafc;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#334155;font-weight:800}
.location-warning{background:#fef3c7;color:#92400e;border-radius:14px;padding:12px;margin-bottom:14px;font-weight:800}
.clock-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn.big{font-size:18px;padding:15px 22px!important}
.clock-summary{padding:18px;margin-top:16px}
.clock-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.clock-summary-grid div{background:#f8fafc;border-radius:14px;padding:12px}
.clock-summary-grid span,.clock-summary-grid strong{display:block}
.clock-summary-grid span{color:var(--muted);font-size:13px}
.clock-reason{background:#eef2ff;color:#1e3a8a;padding:12px;border-radius:14px;font-weight:800}
.clock-settings,.clock-admin-list{padding:18px;margin-bottom:16px}
.check-line{display:flex;gap:10px;align-items:center;margin-bottom:12px;font-weight:800}
.status.neutral{background:#e2e8f0;color:#475569}
@media(max-width:700px){
    .clock-status{display:block}
    .clock-status em{display:inline-block;margin-top:12px}
    .clock-actions{display:grid}
}

/* V36 ingelogd in linkermenu */
.logged-in-bar{
    display:none!important;
}
.sidebar-user-card{
    margin:0 14px 12px;
    padding:12px 13px;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
    color:#e2e8f0;
}
.sidebar-user-card span,
.sidebar-user-card strong,
.sidebar-user-card em{
    display:block;
}
.sidebar-user-card span{
    font-size:11px;
    color:#94a3b8;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.sidebar-user-card strong{
    font-size:14px;
    margin-top:4px;
    color:#fff;
}
.sidebar-user-card em{
    font-style:normal;
    font-size:12px;
    color:#bfdbfe;
    margin-top:2px;
}

/* v37 sidebar + users */
.sidebar-footer{
    margin-top:auto;
    padding:16px;
    border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-user strong{color:#fff;font-size:14px;display:block;}
.sidebar-user small{color:#94a3b8;font-size:12px;}
.logout-btn{
    display:block;margin-top:10px;padding:10px;border-radius:10px;
    background:#1e293b;color:#fff;text-align:center;font-weight:600;
}
.logout-btn:hover{background:#ef4444;}

.modern-table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}
.modern-table th, .modern-table td{
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    text-align:left;
}
.modern-table th{
    background:#f9fafb;
    font-weight:600;
}

/* V38 normale gebruikers + één afmelden */
.sidebar-footer,
.sidebar-footer-clean,
.logout,
.logout-btn,
.sidebar-user-card{
    display:none!important;
}
.sidebar{
    display:flex!important;
    flex-direction:column!important;
}
.sidebar-footer-clean{
    display:block!important;
    margin-top:auto!important;
    padding:14px!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
}
.sidebar-user-clean{
    padding:12px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    color:#fff;
    margin-bottom:10px;
}
.sidebar-user-clean span,
.sidebar-user-clean strong,
.sidebar-user-clean em{
    display:block;
}
.sidebar-user-clean span{
    color:#94a3b8;
    font-size:11px;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:.04em;
}
.sidebar-user-clean strong{
    font-size:14px;
    margin-top:3px;
}
.sidebar-user-clean em{
    font-size:12px;
    font-style:normal;
    color:#bfdbfe;
    margin-top:2px;
}
.logout-clean{
    display:block;
    text-align:center;
    text-decoration:none;
    padding:10px 12px;
    border-radius:12px;
    background:#1e293b;
    color:#fff!important;
    font-weight:900;
}
.logout-clean:hover{
    background:#ef4444;
}
.users-overview-panel{
    padding:18px;
}
.users-table{
    min-width:1200px;
}
.users-table input,
.users-table select{
    min-width:120px;
    padding:9px 10px;
    border:1px solid #dbe3ef;
    border-radius:12px;
    background:#fff;
}
.users-table td{
    vertical-align:top;
}
.user-actions{
    min-width:210px;
}
.user-actions form{
    display:inline-block;
    margin-top:6px;
}
.user-actions input{
    display:block;
    width:100%;
    margin-bottom:6px;
}
.user-create-panel{
    max-width:760px;
    padding:22px;
}
.user-create-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.user-create-form label{
    display:grid;
    gap:7px;
    font-weight:900;
}
.user-create-form input,
.user-create-form select{
    border:1px solid #dbe3ef;
    border-radius:14px;
    padding:12px;
}
.form-actions{
    grid-column:1/-1;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:8px;
}
@media(max-width:800px){
    .user-create-form{
        grid-template-columns:1fr;
    }
}

/* V39 definitieve sidebar footer fix */
.sidebar-footer,
.sidebar-footer-clean,
.sidebar-user-clean,
.logout-clean,
.logout-btn,
.logout,
.sidebar-user-card,
.logged-in-bar{
    display:none!important;
}
.sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:280px!important;
    height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#0f172a!important;
    z-index:50!important;
}
.sidebar nav,
.sidebar .nav,
.sidebar-menu{
    overflow-y:auto!important;
}
.sidebar-bottom{
    margin-top:auto!important;
    padding:14px!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    background:#0f172a!important;
}
.sidebar-user-box{
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    margin-bottom:10px;
}
.sidebar-user-box span,
.sidebar-user-box strong,
.sidebar-user-box em{
    display:block;
}
.sidebar-user-box span{
    color:#94a3b8;
    font-size:11px;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:.04em;
}
.sidebar-user-box strong{
    color:#fff;
    font-size:14px;
    margin-top:3px;
}
.sidebar-user-box em{
    color:#bfdbfe;
    font-style:normal;
    font-size:12px;
    margin-top:2px;
}
.sidebar-logout{
    display:block;
    width:100%;
    box-sizing:border-box;
    text-align:center;
    text-decoration:none;
    padding:11px 12px;
    border-radius:12px;
    background:#1e293b;
    color:#fff!important;
    font-weight:900;
}
.sidebar-logout:hover{
    background:#ef4444;
}
.content,
main.content{
    margin-left:280px!important;
    width:auto!important;
    min-height:100vh!important;
}
@media(max-width:900px){
    .sidebar{
        position:relative!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
    }
    .sidebar-bottom{
        margin-top:10px!important;
    }
    .content,
    main.content{
        margin-left:0!important;
    }
}

/* V40 definitieve sidebar layout */
.sidebar-footer,
.sidebar-footer-clean,
.sidebar-bottom,
.sidebar-user-clean,
.sidebar-user-card,
.logout-clean,
.logout-btn,
.logout,
.logged-in-bar{
    display:none!important;
}

.sidebar{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:280px!important;
    height:100vh!important;
    max-height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#0f172a!important;
    z-index:999!important;
}

.sidebar .brand{
    flex:0 0 auto!important;
}

.sidebar-nav-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:12px!important;
}

.sidebar-account-fixed{
    display:block!important;
    flex:0 0 auto!important;
    padding:14px!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    background:#0f172a!important;
}

.sidebar-account-name{
    display:block!important;
    padding:12px!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.06)!important;
    margin-bottom:10px!important;
}

.sidebar-account-name span,
.sidebar-account-name strong,
.sidebar-account-name em{
    display:block!important;
}

.sidebar-account-name span{
    color:#94a3b8!important;
    font-size:11px!important;
    text-transform:uppercase!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
}

.sidebar-account-name strong{
    color:#fff!important;
    font-size:14px!important;
    line-height:1.25!important;
    margin-top:3px!important;
}

.sidebar-account-name em{
    color:#bfdbfe!important;
    font-style:normal!important;
    font-size:12px!important;
    margin-top:2px!important;
}

.sidebar-account-logout{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important;
    text-decoration:none!important;
    padding:11px 12px!important;
    border-radius:12px!important;
    background:#1e293b!important;
    color:#fff!important;
    font-weight:900!important;
}

.sidebar-account-logout:hover{
    background:#ef4444!important;
}

.content,
main.content{
    margin-left:280px!important;
    width:calc(100% - 280px)!important;
    min-height:100vh!important;
    padding:28px!important;
    box-sizing:border-box!important;
}

@media(max-width:900px){
    .sidebar{
        position:relative!important;
        width:100%!important;
        height:auto!important;
        max-height:none!important;
    }
    .sidebar-nav-scroll{
        max-height:none!important;
        overflow:visible!important;
    }
    .content,
    main.content{
        margin-left:0!important;
        width:100%!important;
        padding:18px!important;
    }
}

/* V41 SCHONE LAYOUT - gebruikt nieuwe classnamen, geen oude sidebar hacks */
html, body{
    margin:0!important;
    min-height:100%!important;
}
.app-body-fixed{
    background:#f3f6fb!important;
    font-family:Arial, Helvetica, sans-serif!important;
    color:#0f172a!important;
}
.app-sidebar-fixed{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:280px!important;
    height:100vh!important;
    background:#0f172a!important;
    color:#fff!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:9999!important;
}
.app-sidebar-fixed .brand{
    flex:0 0 auto!important;
    display:flex!important;
    gap:12px!important;
    align-items:center!important;
    padding:24px 22px 18px!important;
}
.app-sidebar-fixed .brand-icon{
    width:50px!important;
    height:50px!important;
    border-radius:16px!important;
    background:linear-gradient(135deg,#2563eb,#4f46e5)!important;
    display:grid!important;
    place-items:center!important;
    font-weight:1000!important;
    color:#fff!important;
}
.app-sidebar-fixed .brand strong{
    display:block!important;
    color:#fff!important;
    font-size:17px!important;
    line-height:1.2!important;
}
.app-sidebar-fixed .brand span{
    display:block!important;
    color:#93c5fd!important;
    font-size:12px!important;
    margin-top:3px!important;
}
.app-menu-fixed{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:10px 16px!important;
}
.app-menu-fixed a{
    display:block!important;
    color:#e5e7eb!important;
    text-decoration:none!important;
    padding:13px 16px!important;
    border-radius:14px!important;
    font-weight:900!important;
    margin:4px 0!important;
}
.app-menu-fixed a:hover,
.app-menu-fixed a.active{
    background:#1e293b!important;
    color:#fff!important;
}
.app-sidebar-account{
    flex:0 0 auto!important;
    padding:14px!important;
    border-top:1px solid rgba(255,255,255,.09)!important;
    background:#0f172a!important;
}
.app-account-box{
    background:rgba(255,255,255,.06)!important;
    border-radius:14px!important;
    padding:12px!important;
    margin-bottom:10px!important;
}
.app-account-box span,
.app-account-box strong,
.app-account-box em{
    display:block!important;
}
.app-account-box span{
    color:#94a3b8!important;
    font-size:11px!important;
    text-transform:uppercase!important;
    font-weight:1000!important;
    letter-spacing:.04em!important;
}
.app-account-box strong{
    color:#fff!important;
    margin-top:3px!important;
    font-size:14px!important;
}
.app-account-box em{
    color:#bfdbfe!important;
    font-style:normal!important;
    margin-top:2px!important;
    font-size:12px!important;
}
.app-logout{
    display:block!important;
    text-align:center!important;
    background:#1e293b!important;
    color:#fff!important;
    text-decoration:none!important;
    padding:11px 12px!important;
    border-radius:12px!important;
    font-weight:1000!important;
}
.app-logout:hover{
    background:#ef4444!important;
}
.app-content-fixed{
    margin-left:280px!important;
    padding:30px!important;
    min-height:100vh!important;
    box-sizing:border-box!important;
    width:calc(100% - 280px)!important;
}
.alert{
    padding:12px 14px!important;
    border-radius:14px!important;
    margin-bottom:16px!important;
    font-weight:800!important;
}
.alert.success{
    background:#dcfce7!important;
    color:#166534!important;
}
.alert.error{
    background:#fee2e2!important;
    color:#991b1b!important;
}
@media(max-width:900px){
    .app-sidebar-fixed{
        position:relative!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
    }
    .app-menu-fixed{
        max-height:none!important;
    }
    .app-content-fixed{
        margin-left:0!important;
        width:100%!important;
        padding:18px!important;
    }
}

/* V42 scrollbar hidden netjes */
.app-menu-fixed {
    overflow-y: auto;
    scrollbar-width: none;
}

.app-menu-fixed::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.app-sidebar-fixed {
    scrollbar-width: none;
}

.app-sidebar-fixed::-webkit-scrollbar {
    width: 0px;
}

/* V44 fix 00:00 timeline + wachtwoordpagina */
.time-head-v20::before,
.timeline-grid-v13 .time-head-v20::before{
    content:"00:00"!important;
    position:absolute!important;
    left:14px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#2563eb!important;
    font-weight:1000!important;
    background:#f8fafc!important;
    padding:0 8px 0 0!important;
    z-index:5!important;
}

.time-head-v20 span:first-child,
.timeline-grid-v13 .time-head-v20 span:first-child,
.timeline-grid-v13 .time-head-v20 span[style*="left: 0"]{
    opacity:0!important;
    visibility:hidden!important;
}

.timeline-row-v13.row-v20::before{
    left:0!important;
    width:3px!important;
    border-left:0!important;
    background:#2563eb!important;
}

.password-head-clean{
    margin-bottom:16px!important;
}

.username-card-clean{
    border:1px solid #dbe3ef;
    background:#f8fafc;
    border-radius:16px;
    padding:14px 16px;
    margin:0 0 20px;
}

.username-card-clean span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:5px;
}

.username-card-clean strong{
    display:block;
    color:#0f172a;
    font-size:17px;
    word-break:break-word;
}

.login-panel-head.password-head-clean p{
    margin-top:6px!important;
}


/* V45 00:00 normaal en netjes */
.time-head-v20::before,
.timeline-grid-v13 .time-head-v20::before{
    content:none!important;
    display:none!important;
}

.timeline-grid-v13 .time-head-v20 span,
.time-head-v20 span{
    color:#111827!important;
    font-weight:700!important;
    opacity:1!important;
    visibility:visible!important;
}

.timeline-grid-v13 .time-head-v20 span:first-child,
.timeline-grid-v13 .time-head-v20 span[style*="left: 0"],
.time-head-v20 span:first-child{
    color:#111827!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(0)!important;
    margin-left:4px!important;
}

.timeline-row-v13.row-v20::before{
    background:#2563eb!important;
}

/* V45 verlof/uren kaarten ruimer en niet afgekapt */
.leave-balance{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;
    gap:12px!important;
    padding:14px!important;
    align-items:stretch!important;
}

.leave-balance > div{
    min-width:0!important;
    background:#f8fafc!important;
    border-radius:14px!important;
    padding:12px!important;
    text-align:left!important;
}

.leave-balance > div span{
    display:block!important;
    color:#64748b!important;
    font-size:12px!important;
    line-height:1.25!important;
    margin-bottom:5px!important;
    white-space:normal!important;
}

.leave-balance > div strong{
    display:block!important;
    color:#0f172a!important;
    font-size:20px!important;
    line-height:1.1!important;
    word-break:normal!important;
}

.hours-card{
    overflow:visible!important;
}

.hours-stats{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;
    gap:12px!important;
}

.hours-stats > div{
    min-width:0!important;
    padding:12px!important;
}

.hours-stats span,
.hours-stats small{
    white-space:normal!important;
}

@media(max-width:700px){
    .leave-balance,
    .hours-stats{
        grid-template-columns:1fr 1fr!important;
    }
}


/* V46 tijdlijn exact uitlijnen */
.timeline-grid-v13{
    grid-template-columns:260px minmax(1728px,1fr)!important;
}

.timeline-grid-v13 .time-head-v20{
    position:relative!important;
    overflow:visible!important;
    height:44px!important;
}

.timeline-grid-v13 .time-head-v20 span.hour-label{
    position:absolute!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    color:#111827!important;
    font-weight:800!important;
    font-size:13px!important;
    margin:0!important;
    white-space:nowrap!important;
    opacity:1!important;
    visibility:visible!important;
}

.timeline-grid-v13 .time-head-v20 span.hour-label.first{
    transform:translate(0,-50%)!important;
    left:0!important;
}

.timeline-grid-v13 .time-head-v20 .end-label{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#111827!important;
    font-weight:800!important;
    font-size:13px!important;
    white-space:nowrap!important;
    opacity:1!important;
    visibility:visible!important;
}

.timeline-row-v13 i{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    border-left:1px solid #e5edf7!important;
}

.timeline-row-v13 i.end-line{
    left:auto!important;
    right:0!important;
}

.timeline-row-v13.row-v20::before{
    display:none!important;
    content:none!important;
}