*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0;background:#f4f8ec;color:#111;-webkit-font-smoothing:antialiased}.app{position:relative;padding:12px 16px 24px;max-width:1040px;margin:0 auto}.last-update-badge{position:absolute;top:12px;right:16px;font-size:11px;color:#3b6d11;background:#e8f2d9;padding:4px 10px;border-radius:6px;white-space:nowrap}@media(min-width:900px){.app{margin:0;margin-left:clamp(24px,4vw,64px)}}.tabs{display:flex;gap:2px;margin:-12px -16px 16px;background:#2d6a30;padding:8px 14px;flex-wrap:wrap;border-radius:0}.tab{padding:6px 14px;border-radius:4px;border:1px solid transparent;background:transparent;color:#e6f0dc;cursor:pointer;font-weight:500;font-size:14px;white-space:nowrap}.tab.active{background:transparent;color:#fff;border-color:#fff;font-weight:700}.settings-subtab{color:#2d6a30}.settings-subtab.active{background:#2d6a30;color:#fff;border-color:#2d6a30}.settings-subtab:hover{color:#245526}.tab:hover{color:#fff}.panel{display:none}.panel.active{display:block}.date-bar{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}.date-bar input[type=date]{padding:6px 10px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:14px}.date-bar .badge{background:#e8f2d9;padding:4px 10px;border-radius:6px;font-size:13px;color:#3b6d11}#undoBtn:disabled{opacity:.4;cursor:not-allowed}.date-bar .saved-dates{font-size:11px;color:#aaa}.filebar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;padding:8px 12px;border-radius:10px;background:#f7f7f7;border:1px solid #e5e5e5;font-size:12px}.filebar #fileStatusText{flex:1;min-width:180px;color:#444;font-weight:500}.filebar.connected{background:#f0fdf4;border-color:#bbf7d0}.filebar.connected #fileStatusText{color:#166534}.filebar.warn{background:#fffbeb;border-color:#fde68a}.filebar.warn #fileStatusText{color:#92400e}.filebar button{padding:6px 12px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}.filebar button:hover{background:#e8f2d9}.filebar button.primary{background:#2d6a30;color:#fff;border-color:#2d6a30}.filebar button.primary:hover{background:#245526}.stats-bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.stat{background:#e8f2d9;padding:10px 12px;border-radius:10px;flex:1;min-width:80px}.stat-value{font-size:20px;font-weight:600;color:#2d6a30;font-variant-numeric:tabular-nums}.stat-label{font-size:11px;color:#5a7a4a;margin-top:2px;text-align:center}.stat-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;background:#e8f2d9;border-radius:12px;padding:12px 10px;flex:1;min-width:90px}.stat-ring{position:relative;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center}.stat-ring svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.stat-ring-hole{position:relative;width:50px;height:50px;border-radius:50%;background:#e8f2d9;display:flex;align-items:center;justify-content:center}.stat-ring .stat-value{font-size:16px;font-weight:700;color:#2d6a30;font-variant-numeric:tabular-nums}.dept-block{margin-bottom:12px}.dept-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;background:#cde3a3;padding:6px 10px;border-radius:5px}.dept-title{font-size:13px;font-weight:700;color:#2d6a30;text-transform:uppercase;letter-spacing:.3px}.person-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:8px;border:1px solid #d9e8c4;margin-bottom:3px;background:#fff;border-left:3px solid transparent}.person-row:nth-child(2n){background:#f2f8e9}.person-row:hover{background:#fafafa}.person-row.grouped{border-left-color:var(--gc)}.person-row.role-row{border-left-color:#111}.dept-title .role-icon{color:#111;margin-right:4px}.week-nav-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}.week-nav-btn{width:32px;height:32px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;cursor:pointer;font-size:14px;font-weight:600}.week-nav-btn:hover{background:#e8f2d9}.week-planning-label{font-size:14px;font-weight:700;color:#111;min-width:160px;text-align:center}.week-today-btn{padding:7px 14px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:12px;font-weight:600;cursor:pointer}.week-today-btn:hover{background:#e8f2d9}.week-jump-date{padding:6px 9px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:12px}.week-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:#888;margin-bottom:14px}.week-legend-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}.week-dept-header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;background:#cde3a3;cursor:pointer;margin-bottom:6px}.week-dept-header .chevron{display:inline-block;transition:transform .15s;margin-right:6px;font-size:11px}.week-dept-header.collapsed .chevron{transform:rotate(-90deg)}.week-dept-title{font-size:13px;font-weight:700;color:#2d6a30;text-transform:uppercase;letter-spacing:.3px}.week-dept-count{font-size:12px;color:#3b6d11}.week-table-wrap{overflow-x:auto;margin-bottom:16px}.week-table{border-collapse:collapse;width:100%;min-width:940px;table-layout:fixed}.week-table th.week-th-name,.week-table td.week-name-cell{width:280px}.week-table th{text-align:center;padding:6px 4px;font-size:10px;color:#7a9268;font-weight:600;text-transform:uppercase}.week-table th.week-th-name{text-align:left;padding-left:8px}.week-table th.today-col{color:#2d6a30}.week-table td{padding:3px;border-bottom:1px solid #f0f0f0}.week-table td.week-name-cell{padding:5px 8px;font-size:13px;color:#111;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.week-cell-input{width:100%;height:28px;font-size:11px;text-align:center;border:1px solid #e5e5e5;border-radius:6px;padding:0 2px;box-sizing:border-box;color:#111;background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.week-cell-input:focus{outline:none;border-color:#111}.week-cell-input.off{color:#ccc}.week-cell-input.ziek{background:#fee2e2;color:#991b1b;font-weight:700;border-color:#fee2e2}.week-cell-input.extra{background:#dbeafe;color:#1e40af;font-weight:700;border-color:#dbeafe}.week-cell-vac{height:28px;border-radius:6px;background:#ffe4b5;color:#92400e;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}.person-left{display:grid;grid-template-columns:minmax(120px,1fr) auto auto auto;align-items:center;gap:8px;flex:1}.person-name{font-size:14px;color:#111;border:none;background:transparent;width:auto}.group-tag{justify-self:center}.person-name:focus{outline:none;border-bottom:1px solid #a8c98a}.person-time-input{font-size:13px;color:#111;width:55px;text-align:right;border:1px solid transparent;background:transparent;border-radius:4px;padding:2px 6px;font-variant-numeric:tabular-nums}.person-time-input.wide{width:88px}.person-time-input:hover,.person-time-input:focus{border-color:#ddd;background:#fff;outline:none}.person-time-input.off{color:#bbb}.person-time-input.on{color:#22c55e;font-weight:600}.group-tag{font-size:11px;padding:2px 10px;border-radius:12px;font-weight:700;background:var(--gcb);color:#000;border:1px solid rgba(0,0,0,.15)}.group-tag.ungrouped{background:#f5f5f5;color:#bbb;border:1px solid #e5e5e5;font-weight:400}.vacation-tag{font-size:11px;padding:2px 10px;border-radius:12px;font-weight:700;background:#ffe4b5;color:#92400e;border:1px solid rgba(0,0,0,.15);white-space:nowrap}.extra-tag{font-size:11px;padding:2px 10px;border-radius:12px;font-weight:700;background:#dbeafe;color:#1e40af;border:1px solid rgba(0,0,0,.15);white-space:nowrap}.person-time-input:disabled{background:#fff7ed;color:#92400e;border-color:#ffe4b5;cursor:not-allowed;font-weight:700}.vac-table-header{display:grid;grid-template-columns:200px 110px 110px 1fr;gap:10px;padding:4px 10px;font-size:11px;color:#7a9268;text-transform:uppercase;font-weight:600;letter-spacing:.3px}.vac-row{display:grid;grid-template-columns:200px 110px 110px 1fr;gap:10px;align-items:center;padding:7px 10px;border-radius:8px;border:1px solid #e5e5e5;margin-bottom:3px;background:#fff}.vac-row .vac-emp{font-weight:600;font-size:13px;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vac-row .vac-date{font-size:12px;color:#666;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.vac-row .vac-range{font-size:12px;color:#666;flex:1}.total-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.total-actions button{padding:8px 16px;border-radius:10px;border:none;background:#2d6a30;color:#fff;cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap}.total-actions button.secondary{background:#fff;color:#111;border:1px solid #a8c98a}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-overlay.hidden,.hidden{display:none}.modal-card{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000059}@media(min-width:900px){.modal-overlay{justify-content:flex-end;background:#00000040;padding:0;align-items:stretch}.modal-card{max-width:440px;width:440px;height:100vh;max-height:100vh;border-radius:0;box-shadow:-12px 0 40px #0000002e;animation:slideInPanel .22s ease-out}@keyframes slideInPanel{0%{transform:translate(100%)}to{transform:translate(0)}}}.modal-card h3{margin:0 0 4px;font-size:17px;font-weight:700;color:#111}.modal-card .modal-subtitle{font-size:12px;color:#999;margin-bottom:16px}.modal-field{margin-bottom:12px}.modal-field label{display:block;font-size:12px;font-weight:600;color:#666;margin-bottom:4px}.modal-field input{width:100%;padding:9px 11px;border-radius:8px;border:1px solid #a8c98a;font-size:14px;box-sizing:border-box;background:#fff;color:#111}.modal-field input:focus{outline:none;border-color:#111}.roster-section-label{font-size:12px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.4px;margin:18px 0 8px}.roster-hint{font-size:11px;color:#999;margin:-4px 0 10px;line-height:1.4}.roster-grid{display:grid;grid-template-columns:92px 1fr;gap:6px 8px;align-items:center}.roster-grid .day-label{font-size:13px;font-weight:600;color:#444}.roster-grid input{padding:6px 9px;border-radius:7px;border:1px solid #a8c98a;font-size:13px;box-sizing:border-box;width:100%;color:#111}.roster-grid input:focus{outline:none;border-color:#111}.modal-actions{display:flex;gap:8px;margin-top:20px}.modal-actions button{flex:1;padding:10px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer}.modal-actions .btn-save{background:#2d6a30;color:#fff}.modal-actions .btn-save:hover{background:#245526}.modal-actions .btn-cancel{background:#f0f0f0;color:#111}.modal-actions .btn-cancel:hover{background:#e5e5e5}.person-group-select{font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid #a8c98a;background:#fff;color:#111;cursor:pointer}.person-actions{display:flex;align-items:center;gap:4px}.btn-icon-sm{width:24px;height:24px;border-radius:6px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#ccc}.btn-icon-sm:hover{background:#fee2e2;color:#ef4444}.btn-icon-sm svg{width:14px;height:14px}.btn-edit-sm{padding:4px 10px;border-radius:6px;border:1px solid #a8c98a;background:#fff;color:#444;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap}.btn-edit-sm:hover{background:#2d6a30;color:#fff;border-color:#2d6a30}.roster-status-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.roster-status-dot svg{width:13px;height:13px}.roster-status-dot.filled{background:#dcfce7;color:#16a34a}.roster-status-dot.empty{background:#f5f5f5;color:#bbb}.new-group-row{display:flex;gap:8px;margin-bottom:14px}.new-group-row input{flex:1;padding:8px 12px;border-radius:10px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:14px}.new-group-row button{padding:8px 16px;border-radius:10px;border:none;background:#2d6a30;color:#fff;cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap}.group-card{border:1px solid #e5e5e5;border-radius:10px;margin-bottom:10px;overflow:hidden}.group-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer;border-left:4px solid var(--gc);background:#00000005}.group-header-left{display:flex;align-items:center;gap:10px}.group-name{font-weight:700;font-size:15px;color:#111}.group-count{font-size:12px;color:#999;background:#fff;padding:2px 8px;border-radius:12px}.group-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s}.group-card:hover .group-actions{opacity:1}.group-body{padding:0 12px 12px;display:none}.group-body.open{display:block}.group-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.member-chip{display:flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:13px;background:#0000000a;color:#111;border:1px solid rgba(0,0,0,.08);font-weight:500}.member-chip .rm{cursor:pointer;font-weight:700;font-size:15px;line-height:1;opacity:.6}.member-chip .rm:hover{opacity:1}.add-member-row{display:flex;gap:8px;margin-top:10px;align-items:center}.add-member-row select{flex:1;padding:6px 8px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:13px}.add-member-row button{padding:6px 14px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;cursor:pointer;font-size:13px;font-weight:500}.add-member-row button:hover{background:#e8f2d9}.btn-icon{width:28px;height:28px;border-radius:8px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#999}.btn-icon:hover{background:#e8f2d9;color:#2d6a30}.btn-icon.danger:hover{color:#ef4444;background:#fee2e2}.btn-icon svg{width:16px;height:16px}.wa-group-card{border:1px solid #e5e5e5;border-radius:10px;margin-bottom:10px;overflow:hidden}.wa-group-header{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;border-left:4px solid var(--gc);background:#00000005}.wa-group-header .name{font-weight:700;font-size:15px;color:#111}.wa-group-header .count{font-size:12px;color:#999}.wa-body{padding:12px}.wa-preview{background:#fafafa;border-radius:8px;padding:12px;font-size:13px;line-height:1.6;color:#111;white-space:pre-wrap;margin-bottom:10px;border:1px solid #e5e5e5}.wa-actions{display:flex;gap:8px;justify-content:flex-end}.wa-actions button{padding:5px 12px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;cursor:pointer;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:4px;width:auto}.wa-actions button:hover{background:#e8f2d9}.wa-actions button svg{width:14px;height:14px}.tg-chatid-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.tg-chatid-row label{font-size:12px;color:#666;font-weight:600;white-space:nowrap}.tg-chatid-row input{flex:1;padding:6px 9px;border-radius:7px;border:1px solid #a8c98a;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#111;box-sizing:border-box}.tg-status{font-size:12px;font-weight:600;margin-right:auto;align-self:center}.tg-status.ok{color:#22c55e}.tg-status.err{color:#ef4444}.tg-status.pending{color:#999}.staff-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}.staff-search-row{margin-bottom:12px}.staff-search-row input{width:100%;padding:9px 12px;border-radius:10px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:14px;box-sizing:border-box}.staff-search-row input:focus{outline:none;border-color:#111}.staff-toolbar input,.staff-toolbar select{padding:8px 10px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:13px}.staff-toolbar button{padding:8px 14px;border-radius:8px;border:none;background:#2d6a30;color:#fff;cursor:pointer;font-size:13px;font-weight:600}.toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:#111;color:#fff;padding:8px 18px;border-radius:8px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:100}.toast.show{opacity:1}.empty-state{text-align:center;padding:32px;color:#bbb;font-size:14px}.dept-card{border:1px solid #e5e5e5;border-radius:10px;margin-bottom:10px;overflow:hidden}.dept-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#cde3a3;border-radius:5px}.dept-header-row .name{font-weight:700;font-size:15px;color:#2d6a30}.dept-header-row .count{font-size:12px;color:#3b6d11;background:#fff;padding:2px 8px;border-radius:12px}.dept-actions{display:flex;gap:4px}.dept-body{padding:8px 12px;background:#fafafa;border-top:1px solid #e5e5e5}.dept-rename-row{display:flex;gap:8px;margin-bottom:8px}.dept-rename-row input{flex:1;padding:6px 10px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;font-size:13px}.dept-rename-row button{padding:6px 14px;border-radius:8px;border:1px solid #a8c98a;background:#fff;color:#111;cursor:pointer;font-size:13px;font-weight:500}.dept-rename-row button:hover{background:#e8f2d9}.dept-rename-row button.primary{background:#2d6a30;color:#fff;border:none}@media(max-width:480px){.app{padding:8px 10px 20px}.stats-bar{gap:6px}.stat{padding:8px 10px;min-width:70px}.stat-value{font-size:18px}.stat-ring-wrap{padding:8px 6px;min-width:70px}.stat-ring{width:56px;height:56px}.stat-ring-hole{width:38px;height:38px}.stat-ring .stat-value{font-size:13px}.person-name{width:auto;font-size:13px}.person-left{grid-template-columns:1fr auto auto auto}.person-time-input{width:48px}.person-time-input.wide{width:78px}.group-tag{font-size:10px;padding:2px 6px}.person-group-select{font-size:11px;padding:3px 5px}.dept-title{font-size:12px}.new-group-row{flex-direction:column}.new-group-row button{width:100%}.staff-toolbar{flex-direction:column;align-items:stretch}.staff-toolbar input,.staff-toolbar select,.staff-toolbar button{width:100%}.dept-rename-row{flex-direction:column}.dept-rename-row button{width:100%}}.logo-bar{display:flex;align-items:center;justify-content:center;margin-bottom:14px;padding:8px 0}.logo-bar img{max-height:48px;width:auto;object-fit:contain}.print-area{display:none}@media print{body *{visibility:hidden}.print-area,.print-area *{visibility:visible}.print-area{display:block;position:absolute;top:0;left:0;width:100%}}#lockScreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:#2d6a30;display:flex;align-items:center;justify-content:center;padding:20px}#lockScreen[hidden]{display:none!important}html.sp-locked,html.sp-locked body{overflow:hidden}html.sp-locked #app{display:none!important}.lock-card{background:#fff;border-radius:16px;padding:28px 26px;width:100%;max-width:360px;box-shadow:0 24px 70px #0006;text-align:center}.lock-card h2{margin:0 0 4px;font-size:19px;color:#2d6a30}.lock-card p{margin:0 0 16px;font-size:13px;color:#777;line-height:1.5}.lock-card input[type=password]{width:100%;padding:11px 13px;border-radius:9px;border:1px solid #a8c98a;font-size:15px;box-sizing:border-box;margin-bottom:10px;color:#111;background:#fff}.lock-card input[type=password]:focus{outline:none;border-color:#2d6a30}.lock-card input[type=password][hidden]{display:none}.lock-card button.lock-go{width:100%;padding:11px;border-radius:9px;border:none;background:#2d6a30;color:#fff;font-size:15px;font-weight:600;cursor:pointer}.lock-card button.lock-go:hover{background:#245526}.lock-card button.lock-go:disabled{opacity:.5;cursor:not-allowed}.lock-err{color:#c0392b;font-size:12px;min-height:16px;margin-bottom:8px;font-weight:600}.lock-row{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;color:#666;margin-bottom:14px}.lock-toggle{margin-top:14px;font-size:12px;color:#2d6a30;background:none;border:none;cursor:pointer;text-decoration:underline}.lock-shake{animation:lockShake .4s}@keyframes lockShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}