:root{--bg:#f4f6f8;--surface:#fff;--surface-soft:#f8fafc;--text:#1f2937;--muted:#667085;--border:#dfe3e8;--border-strong:#c9d0d8;--accent:#174b8c;--accent-dark:#123b70;--dark:#222;--success-bg:#edf8f0;--success:#22663a;--warning-bg:#fff7df;--warning:#7a5a00;--danger-bg:#fff0f0;--danger:#9d2929;--shadow:0 1px 2px rgba(16,24,40,.04),0 5px 18px rgba(16,24,40,.05)}
*{box-sizing:border-box}
html{min-height:100%}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);margin:0;line-height:1.45}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin-top:0;color:#171d26}
h1{font-size:2rem;margin-bottom:8px}
h2{font-size:1.35rem}
p{margin:8px 0 14px}
.container{max-width:1220px;margin:0 auto;padding:28px 28px 48px}
.narrow{max-width:500px}
.narrow-wide{max-width:860px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:48px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.topbar strong{font-size:.95rem}
.page-heading,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}
.page-heading{margin:6px 0 20px}
.page-heading p{margin-bottom:0}
.section-heading{margin-bottom:12px}
.section-heading h2{margin-bottom:0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;margin:18px 0;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px;margin:20px 0 26px}
.module-card{position:relative;display:flex;flex-direction:column;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 22px 20px;text-decoration:none;color:var(--text);min-height:126px;box-shadow:var(--shadow);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.module-card:after{content:'→';position:absolute;right:20px;bottom:17px;color:#8a94a3;font-size:1.15rem}
.module-card:hover{border-color:#aeb8c4;box-shadow:0 8px 22px rgba(16,24,40,.08);transform:translateY(-1px);text-decoration:none}
.module-card strong{font-size:1.16rem;color:#19212b;padding-right:28px}
.module-card span{color:var(--muted);font-size:.95rem;max-width:90%}
.module-card.disabled{opacity:.55;cursor:default;box-shadow:none}
.module-card.disabled:hover{transform:none;border-color:var(--border)}
.module-card.disabled:after{content:'Binnenkort';font-size:.78rem;background:#eceff3;padding:4px 7px;border-radius:999px;color:#606975}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin:18px 0 22px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:5px;box-shadow:var(--shadow);min-height:98px}
.stat-card span{color:var(--muted);font-size:.9rem}
.stat-card strong{font-size:1.85rem;line-height:1.1;color:#111827}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px}
.full-width{grid-column:1/-1}
.form-actions{display:flex;align-items:end}
.employment-row{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr)) auto minmax(150px,auto);gap:12px;align-items:end;border-top:1px solid #e5e7eb;padding:16px 0}
.employment-row:first-of-type{border-top:0}
label{display:block;margin:10px 0;font-weight:600;color:#303846}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:10px 11px;margin-top:6px;border:1px solid var(--border-strong);border-radius:7px;background:#fff;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:#6e91bb;box-shadow:0 0 0 3px rgba(23,75,140,.10)}
textarea{resize:vertical}
button,.button{background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:7px;border:0;cursor:pointer;width:auto;font-weight:600;line-height:1.2}
button:hover,.button:hover{background:#111;text-decoration:none}
.button.secondary{background:#5b6470}
.button.secondary:hover{background:#48505a}
.small-button{padding:7px 10px;font-size:.92rem}
.alert,.notice{padding:14px 16px;border-radius:8px;margin:14px 0}
.alert{background:var(--danger-bg);border:1px solid #e8aaaa;color:#6e2424}
.notice{background:#eef6ff;border:1px solid #a8c7e7;color:#24496f}
.muted{color:var(--muted)}
.action-row,.table-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline-form{display:inline;margin:0}
.check-row{display:flex;align-items:center;gap:10px;font-weight:400}
.check-row input{width:auto;margin:0}
.inline-check{margin:0 0 8px}
.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;background:#eceff3;font-size:.88rem;white-space:nowrap;font-weight:600}
.status-ok{background:var(--success-bg);color:var(--success)}
.status-warning{background:var(--warning-bg);color:var(--warning)}
.status-closed{background:#eceff3;color:#59616c}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:.88rem;color:#566070;background:#f8fafc;font-weight:700}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fbfcfd}
code{background:#f1f3f5;border-radius:4px;padding:2px 5px}
.details{display:grid;grid-template-columns:minmax(130px,220px) 1fr;gap:9px 18px}
.details dt{font-weight:700}
.details dd{margin:0}
.wrap-cell{max-width:420px;white-space:pre-wrap;overflow-wrap:anywhere}
small{color:var(--muted)}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}.employment-row{grid-template-columns:1fr 1fr}.employment-row>*:last-child{grid-column:1/-1}}
@media(max-width:680px){.container{padding:20px 14px 36px}.page-heading,.section-heading,.topbar{align-items:flex-start;flex-direction:column}.stats-grid,.dashboard-grid{grid-template-columns:1fr}.employment-row{grid-template-columns:1fr}.form-actions button{width:100%}table{display:block;overflow-x:auto;white-space:nowrap}.module-card{min-height:auto}.status-pill{white-space:normal}}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:14px;margin:10px 0 18px}.choice-card{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--border);border-radius:10px;padding:15px 16px;margin:0;background:var(--surface-soft);cursor:pointer}.choice-card:hover{border-color:#aeb8c4}.choice-card input{width:auto;margin:3px 0 0}.choice-card span{display:flex;flex-direction:column;gap:3px}.choice-card strong{color:#1d2733}.choice-card small{font-weight:400}.period-preview{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:18px 0}.preview-item{background:var(--surface-soft);border:1px solid var(--border);border-radius:9px;padding:13px 14px;display:flex;flex-direction:column;gap:4px}.preview-item span{font-size:.82rem;color:var(--muted);font-weight:600}.preview-item strong{font-size:1rem;color:#18212c}.field-help{display:block;font-size:.82rem;color:var(--muted);font-weight:400;margin-top:5px}.is-hidden{display:none!important}@media(max-width:760px){.choice-grid,.period-preview{grid-template-columns:1fr}}
.employment-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;grid-column:1/-1}.wizard-step{position:relative;padding-left:72px}.step-badge{position:absolute;left:24px;top:24px;width:32px;height:32px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.summary-box{background:var(--surface-soft);border:1px solid var(--border);border-radius:9px;padding:16px;line-height:1.75}.schedule-table-wrap{width:100%;overflow-x:auto}.schedule-table,.schedule-input-table{min-width:720px}.schedule-table th,.schedule-table td{text-align:center}.schedule-input-table th,.schedule-input-table td{text-align:center;vertical-align:middle}.schedule-input-table input{min-width:72px;margin:0;text-align:right}.schedule-input-table .button{white-space:nowrap}.dynamic-field.is-hidden{display:none}.wizard-step .choice-grid{margin-bottom:6px}@media(max-width:760px){.wizard-step{padding-left:24px;padding-top:68px}.step-badge{left:24px;top:22px}.employment-actions{flex-direction:column;align-items:stretch}.employment-actions .button,.employment-actions button{width:100%}}
.table-scroll{width:100%;overflow-x:auto}.sort-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}.sort-link:hover{text-decoration:none;color:var(--accent)}.sort-link span{color:#8a94a3;font-weight:400}.wide-container{max-width:1500px}.num{text-align:right}.input-cell{min-width:105px}.input-cell input{margin:0;text-align:right;min-width:85px}.hours-table{min-width:980px}.hours-table tfoot th{background:#eef2f6;color:#253140;border-top:2px solid var(--border-strong)}.subtotal-row td{background:#f7f9fb;font-weight:600}.code-list{display:flex;gap:5px;flex-wrap:wrap}.code-pill{display:inline-flex;padding:3px 6px;border-radius:999px;background:#eef2f6;color:#46515f;font-size:.8rem;font-weight:700}.positive{color:#23723f!important}.negative{color:#a33030!important}.form-footer{margin-top:18px;gap:14px}.time-stats{grid-template-columns:repeat(4,minmax(160px,1fr))}.year-grid-scroll{width:100%;overflow:auto}.year-grid{min-width:1760px;font-size:.82rem}.year-grid th,.year-grid td{padding:5px 6px;text-align:center;min-width:42px;height:32px}.year-grid .month-col{position:sticky;left:0;z-index:2;min-width:115px;text-align:left;background:#f8fafc}.year-grid tbody .month-col{background:#fff}.year-grid .invalid-day{background:#e7e9ec}.year-grid .has-entry{font-weight:700;background:#f8fbff}.year-grid .month-total{min-width:70px;font-weight:700}.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 14px}.type-editor-list{display:flex;flex-direction:column;gap:12px}.type-editor-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(180px,2fr) 90px 130px 90px minmax(260px,2fr) auto;gap:10px;align-items:end;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--surface-soft)}.type-editor-row label{margin:0}.type-editor-row input{margin-top:4px}.type-checks{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;padding-bottom:7px}.type-checks .check-row{margin:0;font-size:.86rem}@media(max-width:1050px){.type-editor-row{grid-template-columns:repeat(2,minmax(180px,1fr))}.type-checks{grid-column:1/-1}.time-stats{grid-template-columns:repeat(2,minmax(150px,1fr))}}@media(max-width:680px){.time-stats{grid-template-columns:1fr}.type-editor-row{grid-template-columns:1fr}}

/* v0.2.6.1 - werknemersoverzicht */
.employee-stats{grid-template-columns:repeat(3,minmax(180px,1fr));margin-top:0}
.table-help{margin:4px 0 0}
.employees-table .sortable-th{padding:0}
.employees-table .sort-link{display:flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;color:#566070;text-decoration:none;cursor:pointer}
.employees-table .sort-link:hover{background:#eef4fb;color:var(--accent);text-decoration:none}
.employees-table .sort-link.is-active{color:var(--accent);background:#f1f6fc}
.employees-table .sort-icon{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:5px;background:#edf1f5;color:#687586;font-size:.9rem;font-weight:700}
.employees-table .sort-link.is-active .sort-icon{background:#dce9f7;color:var(--accent)}
@media(max-width:680px){.employee-stats{grid-template-columns:1fr}}


/* v0.2.6.2 - werknemersfilter en tellingen */
.employee-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin:0 0 22px}
.employee-filter-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.employee-filter-card:hover{border-color:#aeb8c4;box-shadow:0 8px 22px rgba(16,24,40,.08);transform:translateY(-1px);text-decoration:none}
.employee-filter-card.is-selected{border-color:#7b9fc6;box-shadow:0 0 0 2px rgba(23,75,140,.10)}
.employee-filter-card.is-selected:after{content:'✓';position:absolute;right:14px;top:14px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e6f0fb;color:var(--accent);font-weight:800}
.employee-filter-card span{font-size:.9rem;color:var(--muted);font-weight:700}
.employee-filter-card strong{font-size:1.9rem;line-height:1.05;color:#111827}
.employee-filter-card small{font-size:.82rem;color:var(--muted)}
.employee-result-count{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eef2f6;color:#4b5563;font-size:.88rem;font-weight:700;white-space:nowrap}
@media(max-width:680px){.employee-filter-grid{grid-template-columns:1fr}}

/* v0.2.7 - periodieke loonaanlevering */
.period-banner{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-top:18px}.period-banner.compact{grid-template-columns:repeat(3,minmax(150px,1fr));margin:0 0 18px}.period-banner>div{display:flex;flex-direction:column;gap:3px;padding:13px 14px;background:var(--surface-soft);border:1px solid var(--border);border-radius:9px}.period-banner span{font-size:.82rem;color:var(--muted);font-weight:700}.period-banner strong{font-size:1rem;color:#18212c}.payroll-stats{grid-template-columns:repeat(4,minmax(150px,1fr))}.payroll-submit-card{border-left:4px solid #8aa8c8}.payroll-employee-table td{vertical-align:middle}.status-neutral{background:#f1f3f5;color:#5b6470}.wizard-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:18px 0}.wizard-nav-item{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);text-decoration:none;min-height:58px}.wizard-nav-item:hover{text-decoration:none;border-color:#aeb8c4}.wizard-nav-item>span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;background:#eef1f4;color:#667085;font-weight:800}.wizard-nav-item strong{font-size:.88rem;line-height:1.25}.wizard-nav-item.is-current{border-color:#7b9fc6;background:#f5f9fd;box-shadow:0 0 0 2px rgba(23,75,140,.08)}.wizard-nav-item.is-current>span{background:var(--accent);color:#fff}.wizard-nav-item.is-done>span{background:var(--success-bg);color:var(--success)}.wizard-panel{margin-top:12px}.wizard-confirm,.final-confirm{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}.fixed-review-grid,.review-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.compact-details{grid-template-columns:minmax(130px,1fr) 1fr}.subcard{margin:18px 0;padding:18px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}.subcard h3{margin-bottom:10px}.step-checklist{margin-top:18px}.checklist-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}.checklist-row:last-child{border-bottom:0}.checklist-row>span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--warning-bg);color:var(--warning);font-weight:800}.checklist-row.is-done>span{background:var(--success-bg);color:var(--success)}.checklist-row em{font-style:normal;color:var(--muted);font-size:.88rem}.clean-list{margin:0;padding-left:20px}.component-editor-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(180px,1.5fr) minmax(130px,1fr) 100px minmax(280px,2fr) auto;gap:10px;align-items:end;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--surface-soft)}.component-editor-row label{margin:0}.component-editor-row input,.component-editor-row select{margin-top:4px}
@media(max-width:1050px){.component-editor-row{grid-template-columns:repeat(2,minmax(180px,1fr))}.component-editor-row .type-checks{grid-column:1/-1}.payroll-stats{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:760px){.period-banner,.period-banner.compact,.payroll-stats{grid-template-columns:1fr}.wizard-nav{grid-template-columns:1fr}.component-editor-row{grid-template-columns:1fr}.checklist-row{grid-template-columns:34px 1fr}.checklist-row em{grid-column:2}.fixed-review-grid,.review-summary-grid{grid-template-columns:1fr}}

/* v0.2.8 - loonstroken */
.payslip-period-form{align-items:end}.payslip-period-form label{min-width:min(620px,100%)}.payslip-table{min-width:1050px}.payslip-table td{vertical-align:middle}.payslip-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.payslip-actions form{margin:0}.table-subtext{margin-top:4px;color:var(--muted);font-size:.82rem}.button-disabled,button.button-disabled:disabled{background:#c5cbd2!important;color:#727b86!important;cursor:not-allowed!important;opacity:1}.button-disabled:hover,button.button-disabled:disabled:hover{background:#c5cbd2!important}.payslip-table .status-pill{white-space:normal}.payslip-security-note{padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface-soft)}
@media(max-width:760px){.payslip-actions{align-items:stretch;flex-direction:column}.payslip-actions .button,.payslip-actions button,.payslip-actions form{width:100%}.payslip-actions form button{width:100%}}

/* v0.2.8.3 - dynamische werking registratiesoorten */
.effect-help-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin:12px 0 8px}.effect-help-grid>div{display:flex;flex-direction:column;gap:4px;padding:14px 15px;border:1px solid var(--border);border-radius:9px;background:var(--surface-soft)}.effect-help-grid span{font-size:.86rem;color:var(--muted)}.registration-type-block{border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);overflow:hidden}.registration-type-block .type-editor-row{border:0;border-radius:0;background:transparent}.type-editor-row.v0283{grid-template-columns:minmax(125px,1fr) minmax(170px,1.4fr) 80px 120px minmax(180px,1.3fr) 85px minmax(250px,1.8fr) auto}.registration-type-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 12px 12px}.registration-type-actions form{margin:0}.compact-pill{margin-top:7px;padding:4px 7px;font-size:.76rem}.effect-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.8rem;font-weight:700;background:#eef2f6;color:#4b5563}.effect-1{background:#e7f5ec;color:#23723f}.effect--1{background:#fdecec;color:#a33030}.effect-0{background:#eef2f6;color:#59616c}
@media(max-width:1180px){.type-editor-row.v0283{grid-template-columns:repeat(2,minmax(180px,1fr))}.type-editor-row.v0283 .type-checks{grid-column:1/-1}.effect-help-grid{grid-template-columns:1fr}}
@media(max-width:680px){.type-editor-row.v0283{grid-template-columns:1fr}.registration-type-actions{align-items:stretch;flex-direction:column}.registration-type-actions form,.registration-type-actions .button,.registration-type-actions button,.effect-badge{width:100%}}
.time-stats{grid-template-columns:repeat(5,minmax(145px,1fr))}
@media(max-width:1180px){.time-stats{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:760px){.time-stats{grid-template-columns:1fr}}

/* v0.2.8.5 - werknemersgegevenscontrole */
.employee-control-card{margin-top:0}.employee-completeness-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin:8px 0 16px}.employee-completeness-item{display:flex;flex-direction:column;gap:4px;padding:14px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}.employee-completeness-item span{font-size:.86rem;color:var(--muted);font-weight:700}.employee-completeness-item strong{font-size:1.15rem;color:#18212c}.employee-completeness-item small{font-size:.84rem}.control-missing,.missing-text,.data-missing{color:#a33030!important}.employee-check-filter{max-width:460px}.employee-check-filter label{margin-bottom:0}.employee-data-table{min-width:1780px}.employee-data-table td{vertical-align:top}.employee-data-table .overview-cell{min-width:170px}.employee-data-table th:nth-child(3){min-width:290px}.employee-data-table th:nth-child(4){min-width:180px}.employee-data-table th:nth-child(5){min-width:190px}.mini-data-list{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:.8rem;line-height:1.35}.mini-data-list span{display:block;color:#4b5563}.mini-data-list b{color:#303846;font-weight:700}.primary-data{margin-top:8px;font-weight:700;color:#1f2937}.overview-cell small{display:block;margin-top:5px}.overview-cell.num strong{display:block;font-size:1rem}.overview-cell.num small{text-align:right}.employee-data-table .status-pill{padding:5px 8px;font-size:.78rem}@media(max-width:900px){.employee-completeness-grid{grid-template-columns:1fr}.employee-check-filter{max-width:none}}
/* v0.2.8.6 - compacte werknemerslijst + apart gegevensoverzicht */
.page-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.employee-manage-table{width:100%;min-width:0;table-layout:auto}
.employee-manage-table th,.employee-manage-table td{padding:9px 10px;vertical-align:middle}
.employee-manage-table th:nth-child(1){width:82px}
.employee-manage-table th:nth-child(2){width:150px}
.employee-manage-table th:nth-child(3),.employee-manage-table th:nth-child(4){width:112px}
.employee-manage-table th:nth-child(5){width:88px}
.employee-manage-table th:nth-child(6){width:190px}
.employee-manage-table th:nth-child(7){width:250px}
.compact-checks{display:flex;gap:5px;flex-wrap:wrap}
.mini-check{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:999px;font-size:.76rem;font-weight:800;line-height:1;white-space:nowrap}
.mini-check.is-ok{background:var(--success-bg);color:var(--success)}
.mini-check.is-missing{background:var(--warning-bg);color:var(--warning)}
.employee-compact-actions{display:grid;grid-template-columns:repeat(2,minmax(92px,1fr));gap:6px;min-width:205px}
.employee-compact-actions .button{margin:0;text-align:center;justify-content:center;white-space:nowrap}
.compact-employee-scroll{overflow-x:visible}
.employee-overview-table{width:100%;min-width:1220px;table-layout:fixed;font-size:.86rem}
.employee-overview-table th,.employee-overview-table td{padding:8px 8px;vertical-align:top}
.employee-overview-table th:nth-child(1){width:72px}
.employee-overview-table th:nth-child(2){width:120px}
.employee-overview-table th:nth-child(3){width:235px}
.employee-overview-table th:nth-child(4){width:145px}
.employee-overview-table th:nth-child(5){width:145px}
.employee-overview-table th:nth-child(6){width:82px}
.employee-overview-table th:nth-child(7){width:92px}
.employee-overview-table th:nth-child(8),.employee-overview-table th:nth-child(9){width:96px}
.employee-overview-table th:nth-child(10){width:82px}
.employee-overview-table .mini-data-list{font-size:.76rem;line-height:1.25;margin-top:6px;gap:2px}
.employee-overview-table .primary-data{margin-top:6px}
.employee-overview-table .overview-cell{min-width:0}
.employee-overview-table .sortable-th{min-width:0!important}
.employee-overview-table th{min-width:0!important}
.detailed-employee-scroll{overflow-x:auto}
@media(max-width:1180px){.compact-employee-scroll{overflow-x:auto}.employee-manage-table{min-width:980px}}
@media(max-width:760px){.page-heading-actions{width:100%}.page-heading-actions .button{width:100%}.employee-compact-actions{grid-template-columns:1fr;min-width:120px}}
/* v0.2.8.7 - uren- en verlofoverzichten */
.overview-period-form{max-width:760px}
.period-overview-banner{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:16px 0}
.period-overview-banner>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.period-overview-banner span{font-size:.82rem;color:var(--muted);font-weight:700}
.period-overview-banner strong{font-size:1rem;color:#18212c}
.period-hours-table{min-width:980px}
.period-hours-table tfoot th{background:#eef2f6;color:#253140;border-top:2px solid var(--border-strong)}
.period-hours-table td,.period-hours-table th{vertical-align:middle}
.leave-overview-filter{grid-template-columns:repeat(3,minmax(220px,1fr));align-items:end}
.leave-summary-stats{grid-template-columns:repeat(4,minmax(150px,1fr))}
.leave-matrix-table{min-width:920px}
.leave-matrix-table th small{display:block;margin-top:3px;font-size:.72rem;font-weight:600;color:var(--muted)}
.leave-matrix-table td,.leave-matrix-table th{vertical-align:middle}
.leave-detail-table{min-width:1100px}
.leave-detail-table td,.leave-detail-table th{vertical-align:middle}
@media(max-width:900px){.period-overview-banner,.leave-summary-stats{grid-template-columns:repeat(2,minmax(140px,1fr))}.leave-overview-filter{grid-template-columns:1fr}}
@media(max-width:680px){.period-overview-banner,.leave-summary-stats{grid-template-columns:1fr}}

/* v0.2.8.9.8 - consistente ruimte tussen actieknoppen */
:root{--button-group-gap:12px;--button-grid-gap:10px}
.page-heading-actions,.action-row,.table-actions,.employment-actions,.payslip-actions,.form-footer{gap:var(--button-group-gap)!important}
.employee-compact-actions{gap:var(--button-grid-gap)!important}
/* Ook losse naast elkaar geplaatste knoppen krijgen visuele ruimte. */
.button+.button,button+button,.button+button,button+.button{margin-left:10px}
/* Flex/grid-groepen regelen de ruimte via gap en krijgen daarom geen dubbele marge. */
.page-heading-actions>.button+.button,.page-heading-actions>button+button,.action-row>.button+.button,.action-row>button+button,.table-actions>.button+.button,.table-actions>button+button,.employment-actions>.button+.button,.employment-actions>button+button,.payslip-actions>.button+.button,.payslip-actions>button+button,.form-footer>.button+.button,.form-footer>button+button,.employee-compact-actions>.button+.button,.employee-compact-actions>button+button{margin-left:0!important}
/* Inline formulieren binnen actiegroepen blijven netjes van elkaar gescheiden. */
.action-row>.inline-form,.table-actions>.inline-form,.payslip-actions>form{margin:0}
@media(max-width:680px){.page-heading-actions,.action-row,.table-actions,.employment-actions,.payslip-actions,.form-footer{gap:10px!important}}

/* v0.2.8.9.10 - globale knopafstand, met harde cache-bust via alle pagina's */
:root{--button-group-gap:14px;--button-row-gap:10px}
.page-heading-actions,.action-row,.table-actions,.employment-actions,.payslip-actions,.form-footer,.registration-type-actions{display:flex;column-gap:var(--button-group-gap)!important;row-gap:var(--button-row-gap)!important;flex-wrap:wrap}
.employee-compact-actions{column-gap:12px!important;row-gap:10px!important}
.page-heading-actions>*,.action-row>*,.table-actions>*,.employment-actions>*,.payslip-actions>*,.form-footer>*,.registration-type-actions>*,.employee-compact-actions>*{margin-left:0!important;margin-right:0!important}
/* Voor eenvoudige inline reeksen die geen eigen groep-class hebben. */
.button+.button,button+button,.button+button,button+.button{margin-left:12px!important}
/* Binnen bekende flex/grid groepen voorkomt gap dubbele afstand. */
.page-heading-actions>.button+.button,.action-row>.button+.button,.table-actions>.button+.button,.employment-actions>.button+.button,.payslip-actions>.button+.button,.form-footer>.button+.button,.registration-type-actions>.button+.button,.employee-compact-actions>.button+.button{margin-left:0!important}

/* v0.2.8.9.12 - loonwizard uitlijning */
.payroll-review-hours{grid-template-columns:minmax(170px,1fr) minmax(95px,auto)!important}
.payroll-review-hours dd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* v0.2.8.9.13 - duidelijke navigatieknoppen in de bovenbalk */
.topbar a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 14px;
    border:1px solid #8fb3df;
    border-radius:8px;
    background:#eaf3ff;
    color:#174b8c;
    font-weight:700;
    line-height:1.15;
    text-decoration:none;
    box-shadow:0 1px 2px rgba(16,24,40,.06);
    transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease
}
.topbar a:hover{
    background:#dcecff;
    border-color:#6f9fd5;
    text-decoration:none;
    transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(23,75,140,.12)
}
.topbar>div:first-child>a{
    background:#174b8c;
    border-color:#174b8c;
    color:#fff
}
.topbar>div:first-child>a:hover{
    background:#123b70;
    border-color:#123b70
}
.topbar a[href$="logout.php"],
.topbar a[href*="/logout.php"]{
    background:#b42318;
    border-color:#b42318;
    color:#fff
}
.topbar a[href$="logout.php"]:hover,
.topbar a[href*="/logout.php"]:hover{
    background:#8f1d14;
    border-color:#8f1d14
}
@media(max-width:680px){
    .topbar{width:100%;gap:10px}
    .topbar>div{width:100%}
    .topbar a{width:100%}
}

/* v0.2.8.9.24 - verwerking loonaanlevering en aftelklok */
.payroll-submit-actions{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap}
.payroll-submit-actions form{margin:0;display:flex;align-items:center}
.payroll-last-ready{min-width:240px;padding:10px 14px;border:1px solid #d0d5dd;border-radius:10px;background:#f8fafc;display:flex;flex-direction:column;justify-content:center;gap:4px}
.payroll-last-ready span,.payroll-delivery-grid span{font-size:.86rem;color:#667085}
.payroll-last-ready strong,.payroll-delivery-grid strong{font-variant-numeric:tabular-nums}
.payroll-delivery-notice{margin-top:16px;padding:14px 16px;border:1px solid #f4c66d;border-radius:10px;background:#fff8e6;color:#6b4e00;line-height:1.5}
.payroll-delivery-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-top:16px}
.payroll-delivery-grid>div{padding:14px;border:1px solid #d0d5dd;border-radius:10px;background:#f8fafc;display:flex;flex-direction:column;gap:5px}
.payroll-countdown-wrap{margin-top:16px;padding:16px;border:1px solid #b8d3f3;border-radius:12px;background:#eef6ff}
.payroll-countdown-title{font-weight:700;margin-bottom:10px;color:#174b8c}
.payroll-countdown{display:flex;gap:12px;flex-wrap:wrap}
.payroll-countdown>div{min-width:110px;padding:12px 16px;border-radius:10px;background:#fff;border:1px solid #c9d8ea;text-align:center}
.payroll-countdown strong{display:block;font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.payroll-countdown span{display:block;margin-top:4px;color:#667085;font-size:.85rem}
.payroll-countdown-status{margin-top:10px;color:#475467}
.settings-weekdays{border:1px solid #d0d5dd;border-radius:10px;padding:14px}
.settings-weekdays legend{font-weight:700;padding:0 6px}
.checkbox-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px}
.checkbox-line{display:flex;align-items:center;gap:8px}
@media(max-width:900px){.payroll-delivery-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.checkbox-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}}
@media(max-width:620px){.payroll-delivery-grid{grid-template-columns:1fr}.payroll-submit-actions{flex-direction:column}.payroll-last-ready{min-width:0}.payroll-countdown>div{flex:1;min-width:90px}.checkbox-grid{grid-template-columns:1fr}}