:root{--bg: #0f0f0f;--surface: #1a1a1a;--surface-2: #222;--border: #2a2a2a;--border-2: #333;--text: #f0f0f0;--text-muted: #aaa;--text-dim: #888;--gold: #e0c97a;--gold-dark: #cdb55f;--green: #4ade80;--red: #f87171}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.nav{background:var(--surface);border-bottom:.5px solid var(--border-2);display:flex;align-items:center;gap:4px;padding:0 16px;height:54px;position:sticky;top:0;z-index:50}.nav-logo{font-size:14px;font-weight:600;margin-right:14px;letter-spacing:.05em}.nav-logo span{color:var(--gold)}.nav-btn{padding:7px 13px;border-radius:6px;border:none;font-size:13px;cursor:pointer;background:transparent;color:var(--text-muted);transition:all .15s}.nav-btn:hover{background:var(--surface-2);color:var(--text)}.nav-btn.active{background:var(--gold);color:var(--bg);font-weight:500}.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}.nav-user{font-size:13px;color:var(--text-muted)}.nav-logout{padding:6px 11px;background:var(--surface-2);border:none;border-radius:6px;color:var(--text);font-size:12px;cursor:pointer}.nav-logout:hover{background:var(--border-2)}.main{padding:22px;max-width:1500px;margin:0 auto}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}.page-title{font-size:17px;font-weight:500}.page-title span{color:var(--gold)}.header-right{display:flex;align-items:center;gap:10px}.filter-count{font-size:12px;color:var(--text-dim)}.btn-filter{padding:6px 12px;background:var(--surface-2);border:.5px solid var(--border-2);border-radius:6px;color:var(--text);font-size:12px;cursor:pointer}.btn-filter:hover{background:var(--border-2)}.content-area{display:flex;gap:16px;align-items:flex-start}.table-section{flex:1;min-width:0}.table-wrap{background:var(--surface);border:.5px solid var(--border);border-radius:8px;overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:12.5px}.data-table th{background:var(--surface-2);color:var(--text-dim);font-weight:500;padding:10px 12px;text-align:left;border-bottom:.5px solid var(--border-2);white-space:nowrap}.data-table td{padding:9px 12px;border-bottom:.5px solid var(--border);color:#d0d0d0;vertical-align:middle;white-space:nowrap}.data-table tr:last-child td{border-bottom:none}.data-table tbody tr:hover td{background:#1e1e1e}.cell-omschrijving{max-width:240px;overflow:hidden;text-overflow:ellipsis}.badge{display:inline-block;padding:3px 9px;border-radius:4px;font-size:11px;font-weight:500}.avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#2a3a5e;color:#93c5fd;font-size:9.5px;font-weight:600}.bottom-bar{background:var(--surface);border:.5px solid var(--border);border-radius:8px;margin-top:14px;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.btn-new{padding:8px 15px;background:var(--gold);border:none;border-radius:6px;color:var(--bg);font-size:13px;font-weight:600;cursor:pointer}.btn-new:hover{background:var(--gold-dark)}.uren-summary{font-size:12px;color:var(--text-dim)}.uren-summary b{color:var(--text);font-weight:600}.filter-panel{background:var(--surface);border:.5px solid var(--border);padding:18px;width:320px;flex-shrink:0;border-radius:8px}.filter-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.filter-panel-head span{font-size:14px;font-weight:500}.filter-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:20px;line-height:1}.filter-row{margin-bottom:14px}.filter-label{font-size:11px;color:var(--text-dim);margin-bottom:5px;display:block}.filter-input,.filter-select{width:100%;padding:7px 10px;background:#111;border:.5px solid var(--border-2);border-radius:5px;color:var(--text);font-size:12px;outline:none}.filter-input:focus,.filter-select:focus{border-color:var(--gold)}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.filter-actions{display:flex;justify-content:space-between;margin-top:18px}.btn-apply{padding:7px 15px;background:var(--gold);border:none;border-radius:5px;color:var(--bg);font-size:12px;font-weight:600;cursor:pointer}.btn-clear{padding:7px 15px;background:var(--surface-2);border:.5px solid var(--border-2);border-radius:5px;color:var(--red);font-size:12px;cursor:pointer}.progress-grid{display:grid;grid-template-columns:1fr 320px;gap:16px}@media (max-width: 1000px){.progress-grid{grid-template-columns:1fr}}.section-card{background:var(--surface);border:.5px solid var(--border);border-radius:8px;padding:18px}.section-title{font-size:13px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:8px}.week-badge{font-size:11px;background:var(--surface-2);color:var(--text-dim);padding:2px 8px;border-radius:4px}.collega-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:.5px solid var(--border);font-size:12px}.collega-row:last-child{border-bottom:none}.collega-name{min-width:110px;color:#d0d0d0}.collega-bar-wrap{flex:1;background:var(--surface-2);border-radius:2px;height:6px;overflow:hidden;min-width:60px}.collega-bar{height:6px;border-radius:2px}.collega-stats{min-width:150px;text-align:right;color:var(--text-dim);font-size:11px}.pct{font-weight:600}.stat-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:.5px solid var(--border);font-size:12px;color:var(--text-dim)}.stat-row:last-child{border-bottom:none}.stat-row b{color:var(--text);font-weight:600}.toggle-row{display:flex;gap:6px}.toggle-btn{padding:6px 13px;border-radius:5px;border:.5px solid var(--border-2);background:transparent;color:var(--text-dim);font-size:12px;cursor:pointer}.toggle-btn.active{background:var(--surface-2);color:var(--text);border-color:#555}.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}.donut-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text-dim);justify-content:center}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.login-card{background:var(--surface);border:.5px solid var(--border);border-radius:12px;padding:38px;width:100%;max-width:360px}.login-logo{font-size:20px;font-weight:600;margin-bottom:5px}.login-logo span{color:var(--gold)}.login-sub{font-size:12px;color:#666;margin-bottom:28px}.login-label{font-size:12px;color:var(--text-dim);display:block;margin-bottom:6px;margin-top:16px}.login-input{width:100%;padding:10px 12px;background:#111;border:.5px solid var(--border-2);border-radius:6px;color:var(--text);font-size:13px;outline:none}.login-input:focus{border-color:var(--gold)}.login-btn{width:100%;margin-top:22px;padding:11px;background:var(--gold);border:none;border-radius:6px;color:var(--bg);font-size:14px;font-weight:600;cursor:pointer}.login-btn:hover{background:var(--gold-dark)}.login-btn:disabled{opacity:.5;cursor:default}.login-error{color:var(--red);font-size:12px;margin-top:10px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;z-index:100;overflow-y:auto}.modal{background:var(--surface);border:.5px solid var(--border-2);border-radius:10px;width:100%;max-width:520px;padding:26px}.modal-title{font-size:16px;font-weight:500;margin-bottom:22px}.form-row{margin-bottom:14px}.form-label{font-size:12px;color:var(--text-dim);display:block;margin-bottom:6px}.form-input,.form-select,.form-textarea{width:100%;padding:8px 11px;background:#111;border:.5px solid var(--border-2);border-radius:5px;color:var(--text);font-size:13px;outline:none;font-family:inherit}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.btn-cancel{padding:8px 17px;background:var(--surface-2);border:.5px solid var(--border-2);border-radius:5px;color:var(--text);font-size:13px;cursor:pointer}.btn-submit{padding:8px 17px;background:var(--gold);border:none;border-radius:5px;color:var(--bg);font-size:13px;font-weight:600;cursor:pointer}.empty-state{color:#555;padding:28px;text-align:center}.loading{color:var(--text-dim);padding:40px;text-align:center;font-size:13px}.icon-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:4px;font-size:14px}.icon-btn:hover{color:var(--text)}