:root{color-scheme:light;--page: #f9f9f7;--surface: #fcfcfb;--ink: #0b0b0b;--ink-2: #52514e;--muted: #898781;--grid: #e1e0d9;--baseline: #c3c2b7;--border: rgba(11, 11, 11, .1);--accent: #2a78d6;--accent-soft: #e3eefb;--series-1: #2a78d6;--series-2: #eb6834;--good: #006300;--danger: #d03b3b;--holiday: #fdf3e0;--holiday-ink: #8a5a00;--weekend: #f3f2ee}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--page: #0d0d0d;--surface: #1a1a19;--ink: #ffffff;--ink-2: #c3c2b7;--muted: #898781;--grid: #2c2c2a;--baseline: #383835;--border: rgba(255, 255, 255, .1);--accent: #3987e5;--accent-soft: #10233a;--series-1: #3987e5;--series-2: #d95926;--good: #0ca30c;--danger: #e66767;--holiday: #2e2413;--holiday-ink: #e0b25e;--weekend: #222220}}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--page);color:var(--ink);font-size:14px}.app{max-width:1180px;margin:0 auto;padding:0 20px 60px}.topbar{display:flex;align-items:center;gap:24px;padding:14px 0;margin-bottom:20px;border-bottom:1px solid var(--grid)}.topbar .logo{font-weight:700;font-size:17px;letter-spacing:-.2px}.env-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.6px;vertical-align:middle}.env-badge.env-test{background:#fdf3e0;color:#8a5a00}.env-badge.env-development{background:var(--weekend);color:var(--muted)}@media(prefers-color-scheme:dark){.env-badge.env-test{background:#2e2413;color:#e0b25e}}.topbar .logout{margin-left:auto;font-size:17px}.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{display:flex;flex-direction:column;gap:14px;width:320px;padding:28px}.topbar .logo span{color:var(--accent)}.topbar nav{display:flex;gap:4px}.topbar nav button{border:0;background:none;color:var(--ink-2);font:inherit;padding:7px 13px;border-radius:8px;cursor:pointer}.topbar nav button:hover{background:var(--weekend);color:var(--ink)}.topbar nav button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}h1{font-size:20px;margin:0 0 4px}h2{font-size:15px;margin:24px 0 10px}.sub{color:var(--muted);margin:0 0 18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spacer{flex:1}button.primary{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 16px;font:inherit;font-weight:600;cursor:pointer}button.primary:hover{filter:brightness(1.08)}button.ghost{background:none;border:1px solid var(--baseline);color:var(--ink-2);border-radius:8px;padding:7px 13px;font:inherit;cursor:pointer}button.ghost:hover{background:var(--weekend);color:var(--ink)}button.icon{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:4px 6px;border-radius:6px}button.icon:hover{color:var(--danger);background:var(--weekend)}input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--baseline);border-radius:8px;padding:7px 10px}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}input[type=number]{text-align:right}label.field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}.error{color:var(--danger);font-size:13px}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--grid)}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}tr.clickable{cursor:pointer}tr.clickable:hover td{background:var(--weekend)}tfoot td{font-weight:600;border-top:2px solid var(--baseline);border-bottom:0}.week-nav{display:flex;align-items:center;gap:10px;margin-bottom:16px}.week-nav .title{font-size:16px;font-weight:700;min-width:240px;text-align:center}.day{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:10px}.day.weekend{background:var(--weekend)}.day-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}.day-head .name{font-weight:700;min-width:105px;text-transform:capitalize}.day-head .total{margin-left:auto;color:var(--ink-2);font-variant-numeric:tabular-nums}.badge{background:var(--holiday);color:var(--holiday-ink);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}.entry-row{display:grid;grid-template-columns:minmax(190px,1.4fr) 76px 76px 2fr 90px 32px;gap:8px;align-items:center;padding:4px 0}.entry-row .cell{display:contents}.entry-row .cell-label{display:none}.entry-row .cell input{width:100%}.entry-row .money{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:13px}.add-entry{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:4px 0;font-weight:600}.add-entry:hover{text-decoration:underline}.week-total{display:flex;gap:28px;justify-content:flex-end;padding:12px 16px;font-variant-numeric:tabular-nums}.week-total b{font-size:15px}.col-labels{display:grid;grid-template-columns:minmax(190px,1.4fr) 76px 76px 2fr 90px 32px;gap:8px;padding:0 15px;margin-bottom:6px}.col-labels span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.col-labels span.num{text-align:right}.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}.kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}.kpi .value{font-size:26px;font-weight:700;margin-top:4px}.kpi .hint{color:var(--ink-2);font-size:12.5px;margin-top:2px}.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:860px){.charts{grid-template-columns:1fr}}.chart-title{font-weight:600;margin-bottom:8px}.legend{display:flex;gap:16px;margin-bottom:6px;font-size:12.5px;color:var(--ink-2)}.legend .swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}.tooltip{position:fixed;pointer-events:none;z-index:10;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12.5px;box-shadow:0 4px 14px #00000026}.tooltip b{font-variant-numeric:tabular-nums}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.netto-preview{background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:10px 14px;font-weight:600}.tabs{display:flex;gap:4px;margin-bottom:16px}.tabs button{border:1px solid var(--baseline);background:var(--surface);color:var(--ink-2);font:inherit;padding:7px 14px;border-radius:20px;cursor:pointer}.tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}dialog{border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);padding:22px;max-width:720px;width:calc(100vw - 48px)}dialog::backdrop{background:#0006}@media(max-width:640px){body{font-size:15px}.app{padding:0 12px calc(84px + env(safe-area-inset-bottom))}input,select,textarea{font-size:16px;padding:10px 12px}button.primary,button.ghost{padding:10px 16px}.topbar{padding:12px 0;margin-bottom:14px}.topbar .logo{font-size:18px}.topbar nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border-top:1px solid var(--grid);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}.topbar nav button{padding:12px 4px;border-radius:10px;font-size:13px}.week-nav{flex-wrap:wrap;justify-content:center}.week-nav .title{min-width:0;width:100%;order:-1}.col-labels{display:none}.entry-row{grid-template-columns:1fr 1fr 1fr auto;grid-template-areas:"project project project project" "oms oms oms oms" "uren gepland geld del";gap:8px;padding:10px 0;border-top:1px solid var(--grid);margin-top:6px}.entry-row select{grid-area:project}.entry-row .cell{display:flex;flex-direction:column;gap:3px}.entry-row .cell-label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.entry-row .cell-uren{grid-area:uren}.entry-row .cell-gepland{grid-area:gepland}.entry-row input[placeholder=omschrijving]{grid-area:oms}.entry-row .money{grid-area:geld;align-self:end;padding-bottom:10px}.entry-row button.icon{grid-area:del;align-self:end;font-size:18px;padding:8px 10px}.week-total{flex-wrap:wrap;gap:10px 20px;justify-content:space-between}.kpis{grid-template-columns:1fr 1fr}.kpi .value{font-size:22px}.card:has(table){overflow-x:auto}th,td{padding:8px;white-space:nowrap}dialog{width:100vw;max-width:none;margin:0;height:100dvh;max-height:none;border-radius:0;border:0}.form-grid{grid-template-columns:1fr 1fr}}