:root{--yellow:#e2e600;--ink:#181d1c;--muted:#77807c;--border:#e4e9e6;--bg:#f4f6f4;--green:#2c735c}*{box-sizing:border-box}body{margin:0;font:14px/1.5 Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,textarea,select{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #899000;outline-offset:2px}h1,h2,h3,p{margin-top:0}h1{font-size:27px;letter-spacing:-.6px;margin-bottom:5px}h2{font-size:19px}h3{font-size:15px}small{font-size:11px}.muted{color:var(--muted)}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:white;border:1px solid #dce2dd;color:var(--ink);border-radius:8px;padding:9px 14px;line-height:1.3;font-size:13px;white-space:nowrap}.button:hover{background:#f1f4ed}.button.primary{background:var(--yellow);border-color:var(--yellow);font-weight:600}.button.dark{background:#202724;color:white;border-color:#202724}.button.small{padding:6px 9px;font-size:12px}.button.danger{color:#b44343}.icon-button{background:none;border:0;border-radius:6px;font-size:23px;line-height:1;padding:8px}.app-shell{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#18201c;color:#cbd3ce;overflow-y:auto;display:flex;flex-direction:column;padding:27px 17px;z-index:15}.brand{background:white;border-radius:8px;padding:13px 12px;margin-bottom:25px}.brand img{width:174px;max-width:100%;display:block}.sidebar .label{font-size:9px;letter-spacing:2px;color:#9aa79d;margin:16px 12px 7px}.sidebar a{display:flex;gap:13px;padding:11px 13px;border-radius:8px;font-size:13px;margin-bottom:3px;align-items:center}.sidebar a.active{background:var(--yellow);color:#171b19;font-weight:600}.sidebar a:hover:not(.active){background:#ffffff0b;color:white}.sidebar a.sub{margin-left:22px;font-size:12px;padding:8px 12px}.sidebar a svg{width:17px;height:17px}.sidebar-foot{margin-top:auto;padding:25px 10px 0;font-size:11px;color:#a1b0a4}.workspace{min-width:0}.topbar{height:72px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:20px}.topbar-right{display:flex;align-items:center;gap:12px;font-size:12px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8eddf;font-weight:700;font-size:12px}.breadcrumb{font-size:12px;color:var(--muted)}.demo-banner{padding:9px 32px;background:#eff2d2;color:#4d5525;display:flex;gap:15px;align-items:center;justify-content:space-between;font-size:12px}.demo-banner select{padding:4px 8px;border:1px solid #cad09a;background:#fbfdea;border-radius:6px;font-size:12px}.main{padding:30px 32px 55px;max-width:1800px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.page-heading p{margin:0;color:var(--muted);font-size:13px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.card{background:white;border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:20px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.card-head h2,.card-head h3{margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:25px}.stat{padding:20px 22px;background:white;border:1px solid var(--border);border-radius:12px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:30px;line-height:1.3;margin-top:9px;letter-spacing:-1px}.stat small{color:#738076}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:20px}.welcome{border-radius:12px;background:#25352b;color:white;padding:28px;position:relative;margin-bottom:23px}.welcome h2{font-size:23px;font-weight:500;margin-bottom:8px}.welcome p{color:#c4d0c7;max-width:660px;margin:0}.welcome .eyebrow{color:#dce38d;font-size:10px;letter-spacing:1.5px;margin-bottom:12px}.table-scroll{overflow:auto;max-width:100%;-webkit-overflow-scrolling:touch}.data-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}.data-table th{text-align:left;color:#7a847c;font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:#f8faf7;padding:12px;border-bottom:1px solid var(--border)}.data-table td{padding:15px 12px;border-bottom:1px solid #eef1ed}.data-table td small{display:block;color:var(--muted)}.data-table tr:last-child td{border-bottom:0}.data-table td strong{font-size:13px}.badge{display:inline-flex;font-size:10px;padding:4px 8px;border-radius:5px;background:#edf2ee;white-space:nowrap}.badge.blue{background:#e8f0fc;color:#426da3}.badge.amber{background:#fff3d5;color:#917023}.badge.green{background:#e5f4ea;color:#357255}.badge.red{background:#fbe7e7;color:#ae4c4c}.empty{text-align:center;padding:35px!important;color:var(--muted);white-space:normal}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;margin-bottom:5px}.field>span{font-weight:600;color:#57645c}.field input,.field textarea,.field select,.toolbar input,.toolbar select{border:1px solid #dce2dd;border-radius:7px;padding:10px 12px;background:white;width:100%;min-width:0;color:var(--ink);line-height:1.4}.field input:focus,.field textarea:focus{border-color:#8d972e}.field small{color:#79847c;font-weight:400}.field.check{flex-direction:row;align-items:center;gap:10px}.field.check input{width:18px;height:18px;order:-1}.field.wide{grid-column:1/-1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px}.form-error{color:#ac3535;margin-top:15px;white-space:pre-line}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}.toolbar input,.toolbar select{width:auto;padding:8px 11px;font-size:12px}.toolbar .spacer{flex:1}.tabs{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:white}.tabs button{border:0;background:white;padding:8px 14px;font-size:12px}.tabs button.active{background:#243d2c;color:white}.roster-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:17px}.roster-card{padding:0;overflow:hidden}.roster-scroll{overflow:auto;max-height:65vh}.roster{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed}.roster th{background:#f8faf7;height:57px;position:sticky;top:0;z-index:3;font-weight:500;font-size:11px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-width:103px}.roster th small{display:block;color:#7d867f}.roster th:first-child{left:0;z-index:5;width:160px}.roster td{height:108px;padding:5px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:top;position:relative}.roster td.person{position:sticky;left:0;background:white;z-index:2;padding:18px 12px;font-size:12px}.roster td.person small{display:block;color:var(--muted);margin-top:5px}.roster td.weekend{background:#f8faf7}.roster td.today{background:#ffffed}.shift{display:block;width:100%;border:0;border-left:3px solid #638dc2;border-radius:5px;padding:7px 6px;text-align:left;background:#edf3fc;color:#31547e;font-size:10px;margin-bottom:4px;overflow:hidden}.shift strong{display:block;font-size:10px;white-space:nowrap}.shift span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shift.status-Ziek{background:#fce9e9;border-color:#d97878;color:#a34e4e}.shift.status-Verlof{background:#fff3d7;border-color:#d5b655;color:#836824}.shift.status-Vrij{background:#eef0ed;border-color:#abb4a8;color:#5a685d}.shift.status-Tijdvak{border:1px dashed #a6ae51;background:#fafbdc;color:#69732c}.shift.status-Gewerkt{background:#e5f3e9;border-color:#639d79;color:#386c4d}.cell-add{border:0;background:transparent;color:#b0bab1;width:100%;font-size:19px;opacity:.5}.roster td:hover .cell-add{opacity:1}.roster-summary{padding:18px}.summary-item{padding:10px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px;font-size:12px}.summary-item strong{font-weight:600}.legend{display:flex;gap:15px;flex-wrap:wrap;padding:14px 17px;font-size:10px;color:#667168}.legend i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#638dc2;margin-right:4px}.notice{border:1px solid #e6debc;background:#fffbed;border-radius:8px;padding:12px 15px;font-size:12px;margin-bottom:17px;color:#776a38}.notice.good{background:#edf7ee;border-color:#d2e7d4;color:#416646}.notice p:last-child{margin:0}.roster-only .sidebar,.roster-only .topbar,.roster-only .demo-banner{display:none}.roster-only .app-shell{display:block}.roster-only .main{max-width:none;padding:18px}.roster-only .roster-scroll{max-height:78vh}.roster-only .roster-layout{grid-template-columns:minmax(0,1fr) 210px}.compact .roster td{height:68px}.compact .shift{padding:4px;font-size:9px}.compact .roster td.person{padding:9px}.compact .roster th:first-child{width:130px}.compact .roster th{height:42px}.photo-library{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.photo-tile{border:1px solid var(--border);border-radius:10px;overflow:hidden}.photo-tile img{width:100%;height:130px;object-fit:cover}.photo-tile>div{padding:12px;font-size:12px}.photo-tile .actions{margin-top:10px}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:22px}.editor-preview{position:sticky;top:20px;height:76vh;border:1px solid var(--border);background:white;border-radius:12px;overflow:hidden}.editor-preview iframe{width:100%;height:100%;border:0}.content-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.editor-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}.editor-tabs .active{background:var(--ink);color:white}.upload-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.upload-row img{width:120px;height:80px;object-fit:cover;border-radius:7px;border:1px solid var(--border)}.upload-row input{max-width:230px;font-size:12px}.report-preview{background:#eaeeea;padding:25px;overflow:auto}.a4{width:210mm;min-height:297mm;padding:16mm;background:white;margin:auto;color:#17231d;font:11px/1.5 Arial,sans-serif;box-shadow:0 4px 20px #0001}.report-head{display:flex;justify-content:space-between;border-bottom:3px solid #dde200;padding-bottom:20px;margin-bottom:24px}.report-head img{width:165px;object-fit:contain}.report-head div{text-align:right;font-size:10px}.a4 h1{font-size:25px;letter-spacing:-.5px}.report-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e0e6de}.report-grid>div{padding:9px 11px;border-bottom:1px solid #e0e6de}.report-grid strong{display:block;color:#788477;font-size:9px;text-transform:uppercase}.report-block{margin-top:20px;break-inside:avoid}.report-block h3{font-size:12px;border-bottom:1px solid #dce4d9;padding-bottom:6px}.report-block p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}.report-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}.report-photos img{width:100%;height:140px;object-fit:contain;background:#f4f6f2}.report-foot{border-top:1px solid #dce3d9;padding-top:15px;margin-top:35px;display:flex;justify-content:space-between;font-size:9px;color:#677363}.email-preview{padding:25px;background:#f5f7f3;border:1px solid #e1e6de;border-radius:10px;white-space:pre-wrap}.steps-list{counter-reset:steps;padding:0;list-style:none}.steps-list li{display:flex;gap:13px;margin:17px 0}.steps-list li:before{counter-increment:steps;content:counter(steps);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef0ca;flex-shrink:0;font-size:12px}.test-card{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--border)}.test-card:last-child{border:0}.menu-toggle{display:none}.mobile-overlay{display:none}dialog{padding:0;border:0;border-radius:14px;max-width:calc(100% - 26px);width:570px;box-shadow:0 30px 100px #0003;color:var(--ink)}dialog.large{width:900px}dialog::backdrop{background:#15231988;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:white;z-index:2}.dialog-head h2{margin:0;font-size:19px}.dialog-body{padding:24px;max-height:78vh;overflow:auto}.wizard-steps{display:flex;gap:8px;margin-bottom:26px}.wizard-steps span{flex:1;font-size:11px;color:#929990;border-bottom:3px solid #e6eae3;padding-bottom:9px}.wizard-steps .active{border-color:#b5bd28;color:#414b2c}.wizard-steps .done{border-color:#386e4d;color:#386e4d}.wizard-actions{margin-top:25px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:20px}.wizard-actions span{font-size:11px;color:var(--muted)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#263d2d;color:white;padding:14px 24px;border-radius:10px;z-index:100;max-width:90%;box-shadow:0 10px 30px #0002;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#8f3434}.login-page{min-height:100vh;display:grid;place-items:center;background:#edf1e9;padding:25px}.login-card{width:420px;max-width:100%;background:white;padding:38px;border-radius:18px;box-shadow:0 12px 40px #17301c0d}.login-card img{width:200px;display:block;margin:0 auto 30px}.login-card h1{font-size:24px}.login-card .field{margin-bottom:17px}.login-card .button{width:100%}.login-card .muted{font-size:12px}.busy{padding:80px;text-align:center}.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-links button{min-height:65px}.section-divider{border:0;border-top:1px solid var(--border);margin:24px 0}.chips{display:flex;gap:5px;flex-wrap:wrap}.help-list{font-size:12px;color:#65725f}.help-list li{margin-bottom:8px}#print-root{display:none}
@media(max-width:1200px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.sidebar{padding:25px 12px}.main{padding:25px}.roster-layout{grid-template-columns:1fr}.roster-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.roster-summary h3{grid-column:1/-1}.summary-item{display:block}.summary-item strong{display:block}.photo-library{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-250px;width:235px;transition:left .2s}.menu-open .sidebar{left:0}.menu-open .mobile-overlay{display:block;position:fixed;inset:0;background:#0007;z-index:14}.menu-toggle{display:inline-flex}.topbar{padding:0 20px}.main{padding:22px 18px}.stats{gap:10px}.stat{padding:17px}.dashboard-grid{grid-template-columns:1fr}.editor-grid{grid-template-columns:1fr}.editor-preview{position:static;height:500px}.demo-banner{padding:9px 20px;flex-wrap:wrap;gap:6px}.page-heading{align-items:start}.page-heading .actions{justify-content:end}.roster-only .roster-layout{grid-template-columns:1fr}}@media(max-width:580px){h1{font-size:24px}.topbar{height:60px;padding:0 14px}.topbar-right .username,.breadcrumb{display:none}.main{padding:20px 12px}.card{padding:17px 13px}.page-heading{display:block}.page-heading .actions{justify-content:start;margin-top:15px}.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:27px}.photo-library{grid-template-columns:1fr 1fr}.form-grid,.content-fields{grid-template-columns:1fr}.wizard-steps{gap:5px}.wizard-steps span{font-size:9px}.dialog-head{padding:17px}.dialog-body{padding:18px;max-height:78dvh}.toolbar{gap:7px}.toolbar .spacer{display:none}.roster th:first-child{width:116px}.roster td.person{padding:14px 8px;font-size:11px}.roster-summary{grid-template-columns:1fr 1fr}.roster-only .main{padding:10px}.report-preview{padding:10px}.demo-banner{font-size:10px;padding:8px 13px}.welcome{padding:22px}.topbar-right{gap:7px}.photo-tile img{height:100px}.photo-tile>div{padding:10px}.button{padding:9px 11px;font-size:12px}.roster-card{padding:0}.quick-links{grid-template-columns:1fr 1fr}.wizard-actions span{display:none}.upload-row input{max-width:190px}}@media print{@page{size:A4 portrait;margin:0}body{background:white}body>*{display:none!important}#print-root{display:block!important}.a4{box-shadow:none;margin:0;min-height:297mm;width:210mm;padding:15mm}.report-block{break-inside:avoid}.report-head{break-inside:avoid}.report-photos{break-inside:avoid}a{color:inherit}.report-foot{break-inside:avoid}}

.compact .shift strong{white-space:normal;font-size:9px}.compact .shift span{font-size:8px}.roster-only.compact .roster-layout{grid-template-columns:minmax(0,1fr)}.roster-only.compact .roster-summary{display:none}