:root{--teal-50:#edf3f2;--teal-100:#d8e7e5;--teal-200:#b6d0ce;--teal-300:#93b8b5;--teal-400:#6e9c99;--teal-500:#4e7e7c;--teal-600:#426b69;--teal-700:#365755;--teal-800:#294241;--teal-900:#1d2e2d;--accent-50:#e3f6f3;--accent-100:#bfeae4;--accent-200:#8fd9d1;--accent-300:#5ac4ba;--accent-400:#2faea3;--accent-500:#1b9c90;--accent-600:#158176;--accent-700:#116860;--accent-800:#0d4f49;--accent-900:#083733;--grey-50:#f5f6f6;--grey-100:#eaebeb;--grey-200:#d6d8d8;--grey-300:#b9bcbc;--grey-400:#909494;--grey-500:#6b6f6f;--grey-600:#4f5353;--grey-700:#3a3e3e;--grey-800:#282b2b;--grey-900:#191b1b;--red-tint:#fbeae8;--red-border:#e5b4ae;--red-500:#c0554b;--red-700:#8f3a32;--blue-tint:#e6edfb;--blue-700:#2c4d85;--surface-app:var(--grey-50);--surface:#fff;--surface-muted:var(--grey-100);--overlay:#191b1b80;--border:var(--grey-200);--border-strong:var(--grey-300);--text:var(--grey-900);--text-secondary:var(--grey-500);--text-muted:var(--grey-400);--text-disabled:var(--grey-300);--text-inverse:var(--teal-50);--primary:var(--teal-500);--primary-hover:var(--teal-600);--primary-active:var(--teal-700);--primary-tint:var(--teal-100);--primary-on-tint:var(--teal-800);--on-primary:var(--teal-50);--accent:var(--accent-500);--accent-hover:var(--accent-600);--accent-active:var(--accent-700);--accent-tint:var(--accent-100);--accent-on-tint:var(--accent-800);--on-accent:var(--accent-50);--danger:var(--red-500);--danger-hover:var(--red-700);--danger-tint:var(--red-tint);--danger-border:var(--red-border);--danger-on-tint:var(--red-700);--on-danger:var(--red-tint);--paid-tint:var(--blue-tint);--paid-on-tint:var(--blue-700);--focus-ring:#4e7e7c59;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--radius:8px;--radius-lg:14px;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text-secondary);background:var(--surface-app);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--surface-app:var(--grey-900);--surface:var(--grey-800);--surface-muted:var(--grey-700);--overlay:#0009;--border:var(--grey-700);--border-strong:var(--grey-600);--text:var(--grey-50);--text-secondary:var(--grey-300);--text-muted:var(--grey-400);--text-disabled:var(--grey-600);--text-inverse:var(--teal-900);--primary:var(--teal-400);--primary-hover:var(--teal-300);--primary-active:var(--teal-200);--primary-tint:var(--teal-800);--primary-on-tint:var(--teal-100);--on-primary:var(--teal-900);--accent:var(--accent-400);--accent-hover:var(--accent-300);--accent-active:var(--accent-200);--accent-tint:var(--accent-800);--accent-on-tint:var(--accent-100);--on-accent:var(--accent-900);--danger:#d9695d;--danger-hover:var(--red-500);--danger-tint:#2e1d1b;--danger-border:#5c332f;--danger-on-tint:#f3b9b2;--on-danger:var(--red-tint);--paid-tint:#1c2c42;--paid-on-tint:#a9c6f2;--focus-ring:#6e9c9973;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9bcbc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--surface-app:var(--grey-900);--surface:var(--grey-800);--surface-muted:var(--grey-700);--overlay:#0009;--border:var(--grey-700);--border-strong:var(--grey-600);--text:var(--grey-50);--text-secondary:var(--grey-300);--text-muted:var(--grey-400);--text-disabled:var(--grey-600);--text-inverse:var(--teal-900);--primary:var(--teal-400);--primary-hover:var(--teal-300);--primary-active:var(--teal-200);--primary-tint:var(--teal-800);--primary-on-tint:var(--teal-100);--on-primary:var(--teal-900);--accent:var(--accent-400);--accent-hover:var(--accent-300);--accent-active:var(--accent-200);--accent-tint:var(--accent-800);--accent-on-tint:var(--accent-100);--on-accent:var(--accent-900);--danger:#d9695d;--danger-hover:var(--red-500);--danger-tint:#2e1d1b;--danger-border:#5c332f;--danger-on-tint:#f3b9b2;--on-danger:var(--red-tint);--paid-tint:#1c2c42;--paid-on-tint:#a9c6f2;--focus-ring:#6e9c9973;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px;--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9bcbc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text);font-weight:500}h1{letter-spacing:-1.2px;margin:24px 0;font-size:40px}@media (width<=1024px){h1{margin:16px 0;font-size:28px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text);border-radius:4px;display:inline-flex}code{background:var(--surface-muted);padding:4px 8px;font-size:15px;line-height:135%}.page{text-align:left;flex-direction:column;gap:24px;padding:32px;display:flex}@media (width<=640px){.page{padding:16px 16px calc(76px + env(safe-area-inset-bottom))}}table{border-collapse:collapse;text-align:left;width:100%;margin-top:16px}th,td{border-bottom:1px solid var(--border);padding:8px 4px}.table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.table-scroll table{min-width:640px}.table-scroll th,.table-scroll td{white-space:nowrap}.cell-truncate{text-overflow:ellipsis;max-width:340px;overflow:hidden}.icon-action{border-radius:var(--radius);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.icon-action:hover{background:var(--surface-muted);color:var(--text)}.icon-action:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.navbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 32px;display:flex}.navbar-brand{color:var(--text);white-space:nowrap;font-size:18px;font-weight:700;text-decoration:none}.navbar-links{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.navbar-link{border-radius:var(--radius);color:var(--text-secondary);font:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:8px 12px;font-size:14px;font-weight:600;text-decoration:none;display:flex}.navbar-link:hover{background:var(--surface-muted);color:var(--text)}.navbar-link:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.navbar-link-active,.navbar-link-active:hover{background:var(--primary-tint);color:var(--primary-on-tint)}@media (width<=1024px){.navbar-link-label{display:none}}@media (width<=640px){.navbar{justify-content:center;padding:12px 16px}.navbar-links{z-index:20;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);flex-wrap:nowrap;justify-content:space-around;gap:0;position:fixed;bottom:0;left:0;right:0;overflow-x:auto}.navbar-link{border-radius:var(--radius);flex-direction:column;flex:none;gap:2px;min-width:60px;padding:6px 10px}.navbar-link-label{white-space:nowrap;font-size:11px;display:block}}.btn{font:inherit;border-radius:var(--radius);cursor:pointer;border:2px solid #0000;align-items:center;gap:6px;padding:9px 18px;font-size:15px;font-weight:600;transition:border-color .2s,opacity .2s;display:inline-flex}.btn:disabled{cursor:not-allowed;opacity:.6}.btn:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.btn-primary{color:var(--on-primary);background:var(--primary)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.btn-secondary{color:var(--text);border-color:var(--border);background:0 0}.btn-secondary:hover:not(:disabled){background:var(--surface-muted)}.card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);padding:24px}@media (width<=640px){.card{padding:16px}}.auth-page{box-sizing:border-box;flex:1;justify-content:center;align-items:center;padding:24px 16px;display:flex}.auth-card,.auth-card-wide{box-sizing:border-box;width:100%}.auth-card{max-width:300px}.auth-card-wide{max-width:480px;margin:60px auto}@media (width<=640px){.auth-card-wide{max-width:calc(100% - 32px);margin:32px auto}}.auth-form{flex-direction:column;gap:14px;margin-top:16px;padding:2px;display:flex}.auth-form label{color:var(--text-secondary);text-align:left;flex-direction:column;gap:6px;font-size:14px;display:flex}.auth-form input,.auth-form select,.auth-form textarea{box-sizing:border-box;width:100%;font:inherit;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted);color:var(--text);padding:8px 10px}.auth-form textarea{resize:vertical}.auth-form select{appearance:none;background-image:var(--select-arrow);background-position:right 10px center;background-repeat:no-repeat;background-size:16px 16px;padding-right:34px}.auth-form input:focus-visible,.auth-form select:focus-visible,.auth-form textarea:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.auth-error{color:var(--danger);margin:0;font-size:14px}.auth-success{color:var(--text-secondary);font-size:14px}.auth-link{color:var(--accent);cursor:pointer;font:inherit;background:0 0;border:none;margin-top:16px;padding:0;font-size:14px;text-decoration:none;display:block}.password-requirements{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.password-requirements li{color:var(--text-secondary);align-items:center;gap:6px;font-size:13px;display:flex}.password-requirements li svg{color:var(--danger);flex-shrink:0}.password-requirements li.password-requirement-met{color:var(--text)}.password-requirements li.password-requirement-met svg{color:var(--primary)}.password-input-wrap{position:relative}.password-input-wrap input{box-sizing:border-box;width:100%}.password-input-toggle{border-radius:var(--radius);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.password-input-toggle:hover{background:var(--surface-muted);color:var(--text)}.password-input-toggle:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.select-filter{width:fit-content;min-width:90px;position:relative}.select-filter-trigger{box-sizing:border-box;width:100%;font:inherit;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;font-size:14px;display:flex}.select-filter-trigger span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-filter-trigger:disabled{opacity:.6;cursor:not-allowed}.select-filter-trigger:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.select-filter-panel{z-index:1000;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:max-content;max-height:calc(100vh - 16px);box-shadow:var(--shadow);padding:6px;position:fixed;overflow-y:auto}.select-filter-option{border-radius:var(--radius);color:var(--text);cursor:pointer;white-space:nowrap;align-items:center;gap:10px;padding:8px;font-size:14px;font-weight:400;display:flex}.select-filter-option:hover{background:var(--surface-muted)}.select-filter-option input[type=radio],.select-filter-option input[type=checkbox]{accent-color:var(--primary)}.select-filter-divider{background:var(--border);height:1px;margin:4px 0}.country-select-option{align-items:center;gap:8px;display:inline-flex}.country-flag{border-radius:2px;flex-shrink:0}.datetime-input-wrap{position:relative}.datetime-input-wrap input{box-sizing:border-box;appearance:none;width:100%}.datetime-input-icon{color:var(--text-secondary);pointer-events:none;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.datetime-input-wrap input::-webkit-calendar-picker-indicator{opacity:0}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:28px;height:28px;margin:40px auto;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.badge{border-radius:999px;align-items:center;padding:3px 10px;font-size:13px;font-weight:600;display:inline-flex}.badge-ingediend{background:var(--surface-muted);color:var(--text-secondary)}.badge-goedgekeurd{background:var(--primary-tint);color:var(--primary-on-tint)}.badge-afgekeurd{background:var(--danger-tint);color:var(--danger-on-tint)}.badge-uitbetaald{background:var(--paid-tint);color:var(--paid-on-tint)}.modal-overlay{background:var(--overlay);box-sizing:border-box;z-index:100;justify-content:center;align-items:center;padding:40px 24px;display:flex;position:fixed;inset:0}.modal-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:480px;max-height:100%;box-shadow:var(--shadow);text-align:left;flex-direction:column;padding:24px;display:flex;overflow:hidden}.modal-header{flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.modal-body{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:auto;min-height:0;margin-right:-16px;padding-right:12px;overflow-y:auto}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:0 0}.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.modal-header h2{text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;overflow:hidden}.modal-close{border-radius:var(--radius);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.modal-close:hover{background:var(--surface-muted);color:var(--text)}.modal-close:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.hours-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.hours-header h1{margin:0}.paid-hours summary{cursor:pointer;font-family:var(--heading);color:var(--text);align-items:center;gap:8px;font-size:24px;font-weight:500;list-style:none;display:flex}.paid-hours summary::-webkit-details-marker{display:none}.paid-hours summary:hover{color:var(--primary)}.paid-hours summary:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);border-radius:var(--radius);outline:none}.paid-hours-chevron{color:var(--text-secondary);flex-shrink:0;transition:transform .15s}.paid-hours[open] .paid-hours-chevron{transform:rotate(90deg)}.paid-hours[open] summary{margin-bottom:8px}.newsletter-link{color:var(--accent);font-weight:500;text-decoration:none}.newsletter-link:hover{text-decoration:underline}.newsletter-back{color:var(--text-secondary);align-items:center;gap:6px;margin-bottom:8px;font-size:14px;text-decoration:none;display:inline-flex}.newsletter-back:hover{color:var(--text)}.newsletter-date{color:var(--text-secondary);margin-bottom:16px;font-size:14px}.newsletter-body{border:1px solid var(--border);border-radius:var(--radius);background:#fff;width:100%;max-width:600px;height:70vh;margin-inline:auto;display:block}.newsletter-link-unread{color:var(--text);font-weight:600}.newsletter-new{background:var(--accent-tint);color:var(--accent-on-tint);vertical-align:1px;border-radius:999px;margin-right:8px;padding:2px 8px;font-size:12px;font-weight:600}.account-page{flex-direction:column;gap:20px;display:flex}.account-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.account-header h1{margin:0}.account-cards{flex-direction:column;gap:20px;display:flex}.card.auth-form{padding:24px}@media (width<=640px){.card.auth-form{padding:16px}}.account-details{grid-template-columns:max-content 1fr;gap:10px 24px;margin:12px 0 0;display:grid}.account-details dt{color:var(--text-secondary);font-size:14px}.account-details dd{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text);margin:0;overflow:hidden}.account-form-actions{gap:12px;display:flex}.theme-toggle{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted);gap:4px;width:fit-content;padding:4px;display:inline-flex}.theme-toggle-option{font:inherit;border-radius:calc(var(--radius) - 2px);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:7px 14px;font-size:14px;font-weight:600;display:flex}.theme-toggle-option:hover{color:var(--text)}.theme-toggle-option-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.theme-toggle-option:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.notification-toggle{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.notification-toggle-row{align-items:center;gap:12px;display:flex}.notification-toggle-label{color:var(--text-secondary);font-size:14px}.switch{border:1px solid var(--border-strong);background:var(--surface-muted);cursor:pointer;border-radius:999px;flex-shrink:0;width:78px;height:32px;padding:0;transition:background .18s,border-color .18s;position:relative}.switch-on{background:var(--accent);border-color:var(--accent)}.switch:disabled{opacity:.6;cursor:not-allowed}.switch:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.switch-text{letter-spacing:.6px;color:var(--text-secondary);font-size:12px;font-weight:700;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.switch-on .switch-text{color:var(--on-accent);left:12px;right:auto}.switch-knob{background:var(--surface);border-radius:50%;width:24px;height:24px;transition:left .18s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0000004d}.switch-on .switch-knob{left:calc(100% - 27px)}.notification-status{color:var(--text-secondary);margin:0;font-size:14px;line-height:145%}.notification-status-error{color:var(--danger)}.status-select-trigger{cursor:pointer;border:none;justify-content:space-between;align-items:center;gap:4px;font-family:inherit;display:inline-flex}.status-select-trigger:hover:not(:disabled){filter:brightness(.95)}.status-select-trigger:disabled{cursor:not-allowed;opacity:.6}.status-select-trigger:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.status-select-chevron{flex-shrink:0}.hours-filters{flex-wrap:wrap;align-items:flex-start;gap:20px;margin:16px 0 24px;display:flex}.hours-filter-field{color:var(--text-secondary);flex-direction:column;gap:6px;font-size:14px;display:flex}.confirm-dialog-actions{justify-content:flex-end;gap:12px;margin-top:16px;display:flex}.payroll-controls{flex-wrap:wrap;align-items:flex-end;gap:20px;margin:16px 0 24px;display:flex}.payroll-controls label{color:var(--text-secondary);flex-direction:column;gap:6px;font-size:14px;display:flex}.payroll-period{color:var(--text-secondary);font-size:14px}.payroll-user-cell{align-items:center;gap:6px;display:inline-flex}.payroll-rejected-icon{color:var(--danger);flex-shrink:0}.payroll-mark-paid-button{margin-top:16px}.user-details-sections{flex-direction:column;gap:20px;margin-top:8px;display:flex}.user-details-section h3{margin:0;font-size:15px}.user-details{grid-template-columns:150px 1fr;gap:10px 24px;margin:10px 0 0;display:grid}@media (width<=480px){.user-details{grid-template-columns:120px 1fr;column-gap:12px}}.user-details dt{color:var(--text-secondary);font-size:14px}.user-details dd{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text);margin:0;overflow:hidden}.invite-form{flex-direction:column;align-items:flex-start;gap:12px;margin-top:16px;display:flex}.invite-form label{color:var(--text-secondary);flex-direction:column;gap:6px;width:100%;max-width:320px;font-size:14px;display:flex}.invite-form input{font:inherit;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted);color:var(--text);padding:8px 10px}.invite-form input:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}.user-name-cell{align-items:center;gap:8px;display:flex}.profile-load-error{justify-content:center;align-items:center;min-height:100svh;display:flex}.profile-load-error-card{text-align:center;max-width:380px}