:root{--c-bg:#f4f6f8;--c-surface:#fff;--c-surface-2:#eef1f4;--c-border:#d5dbe1;--c-text:#1b2430;--c-muted:#56606b;--c-primary:#1f5f8b;--c-on-primary:#fff;--c-primary-soft:#e3eef6;--c-danger:#b42318;--c-danger-soft:#fdecea;--c-success:#1e7a46;--c-success-soft:#e4f4ea;--c-warning-bg:#fff4d6;--c-warning-text:#6b4200;--c-focus:#3b8fd6;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius:10px;--radius-lg:14px;--tap:48px;--shadow:0 1px 2px #1018280f, 0 1px 3px #10182814;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;--fs-sm:15px;--fs-base:17px;--fs-lg:20px;--fs-xl:26px;--tabbar-h:64px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--c-bg:#0f141a;--c-surface:#182029;--c-surface-2:#212b36;--c-border:#2e3a47;--c-text:#e7edf3;--c-muted:#a3afbb;--c-primary:#7cb8e6;--c-on-primary:#0f141a;--c-primary-soft:#1d3446;--c-danger:#ff8a80;--c-danger-soft:#3a1c1a;--c-success:#6fd49a;--c-success-soft:#173323;--c-warning-bg:#3a2e10;--c-warning-text:#ffd88a;--shadow:none}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(72px + env(safe-area-inset-top));scroll-padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-4))}body{font-family:var(--font);font-size:var(--fs-base);color:var(--c-text);background:var(--c-bg);margin:0;line-height:1.5}button,input,select,textarea{font:inherit;color:inherit}button{touch-action:manipulation}:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}h1,h2,h3{margin:0;line-height:1.25}.num{font-variant-numeric:tabular-nums}.muted{color:var(--c-muted)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.page{max-width:720px;padding:var(--space-4);padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-5));margin:0 auto}.page-header{z-index:10;align-items:center;gap:var(--space-2);min-height:56px;padding:calc(env(safe-area-inset-top) + var(--space-2)) var(--space-4) var(--space-2);background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;position:sticky;top:0}.page-header h1{font-size:var(--fs-lg);text-align:center;flex:1}.page-header .side{min-width:88px;display:flex}.page-header .side.end{justify-content:flex-end}.stack{gap:var(--space-4);flex-direction:column;display:flex}.row{gap:var(--space-3);align-items:flex-end;display:flex}.row>*{flex:1;min-width:0}.row>.shrink{flex:none}.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--space-4)}.card-head{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.card-head h2{font-size:var(--fs-lg)}.block{background:var(--c-surface-2);border-radius:var(--radius);padding:var(--space-3) var(--space-4)}.block strong{display:block}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius);border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;font-weight:600;transition:background-color .12s,opacity .12s;display:inline-flex}.btn:active{opacity:.75}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}.btn.danger{color:var(--c-danger);border-color:var(--c-danger);background:0 0}.btn.ghost{color:var(--c-primary);padding:0 var(--space-2);background:0 0;border-color:#0000}.btn.block-btn{width:100%}.btn-group{display:inline-flex}.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}.btn-group .btn:last-child{border-radius:0 var(--radius) var(--radius) 0}.btn-group .btn+.btn{margin-left:-1px}.icon-btn{width:var(--tap);height:var(--tap);border-radius:var(--radius);color:var(--c-muted);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;display:inline-flex}.icon-btn:active{background:var(--c-surface-2)}.segmented{border:1px solid var(--c-border);border-radius:var(--radius);align-self:flex-start;display:inline-flex;overflow:hidden}.segmented button{min-height:40px;padding:0 var(--space-3);cursor:pointer;font-size:var(--fs-sm);background:0 0;border:0}.segmented button+button{border-left:1px solid var(--c-border)}.segmented button[aria-pressed=true]{background:var(--c-primary-soft);font-weight:600}.field{gap:var(--space-1);flex-direction:column;min-width:0;display:flex}.field label,.field .label{font-size:var(--fs-sm);color:var(--c-muted);font-weight:500}.field .required{color:var(--c-danger)}.input,.select,.textarea{width:100%;min-height:var(--tap);padding:var(--space-2) var(--space-3);border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);font-size:var(--fs-base)}.textarea{resize:vertical;min-height:96px}.input.right{text-align:right}.input[readonly]{background:var(--c-surface-2)}.input-affix{display:flex}.input-affix .affix{padding:0 var(--space-3);border:1px solid var(--c-border);border-radius:var(--radius) 0 0 var(--radius);background:var(--c-surface-2);color:var(--c-muted);border-right:0;align-items:center;display:flex}.input-affix .input{border-radius:0 var(--radius) var(--radius) 0}.field.has-error .input,.field.has-error .select{border-color:var(--c-danger)}.field-error{color:var(--c-danger);font-size:var(--fs-sm)}.field-help{color:var(--c-muted);font-size:var(--fs-sm)}.check{align-items:center;gap:var(--space-3);min-height:var(--tap);cursor:pointer;display:flex}.check input{width:22px;height:22px;accent-color:var(--c-primary)}.fieldset{padding:var(--space-4) 0 0;border:0;border-top:1px solid var(--c-border);min-width:0;margin:0}.fieldset legend{margin-bottom:var(--space-3);float:left;width:100%;padding:0;font-weight:600}.notice{border-radius:var(--radius);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm)}.notice.error{background:var(--c-danger-soft);color:var(--c-danger)}.notice.warning{background:var(--c-warning-bg);color:var(--c-warning-text)}.notice.success{background:var(--c-success-soft);color:var(--c-success);margin:0}.notice ul{margin:var(--space-1) 0 0;padding-left:var(--space-5)}.list{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);margin:0;padding:0;list-style:none;overflow:hidden}.list li+li{border-top:1px solid var(--c-border)}.list-row{align-items:center;gap:var(--space-3);width:100%;min-height:64px;padding:var(--space-3) var(--space-4);text-align:left;cursor:pointer;background:0 0;border:0;display:flex}.list-row:active{background:var(--c-surface-2)}.list-row .main{flex:1;min-width:0}.list-row .title{overflow-wrap:anywhere;font-weight:600}.list-row .sub{color:var(--c-muted);font-size:var(--fs-sm);overflow-wrap:anywhere}.list-row .end{text-align:right}.empty{text-align:center;padding:var(--space-6) var(--space-4);color:var(--c-muted)}.empty p{margin:0 0 var(--space-4)}.badge{padding:2px var(--space-2);background:var(--c-surface-2);color:var(--c-muted);border-radius:999px;font-size:13px;font-weight:600;display:inline-block}.badge.definitief,.badge.verzonden{background:var(--c-primary-soft);color:var(--c-primary)}.badge.betaald{background:var(--c-success-soft);color:var(--c-success)}.badge.verlopen{background:var(--c-danger-soft);color:var(--c-danger)}.line{background:var(--c-surface-2);border-radius:var(--radius);padding:var(--space-3);gap:var(--space-3);flex-direction:column;display:flex}.line .qty{flex:0 0 84px}.line-total{text-align:right;font-size:var(--fs-sm);color:var(--c-muted)}.line-total strong{color:var(--c-text);font-size:var(--fs-base)}.line-options{gap:var(--space-2);flex-wrap:wrap;display:flex}.time-entry{border-top:1px dashed var(--c-border);padding-top:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.time-entry .pause{flex:0 0 112px}.time-entry .worked{padding-top:var(--space-5)}.line-actions{justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.totals{margin:var(--space-4) 0 0;border-top:1px solid var(--c-border);padding-top:var(--space-3)}.totals div{justify-content:space-between;gap:var(--space-3);padding:var(--space-1) 0;display:flex}.totals dt{color:var(--c-muted)}.totals dd{font-variant-numeric:tabular-nums;margin:0}.totals .grand{border-top:1px solid var(--c-border);margin-top:var(--space-2);padding-top:var(--space-3);font-weight:700;font-size:var(--fs-lg)}.totals .grand dt{color:var(--c-text)}dialog.sheet{border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--c-bg);width:100%;max-width:720px;max-height:92dvh;color:var(--c-text);border:0;margin:auto auto 0;padding:0}dialog.sheet::backdrop{background:#00000073}@media (width>=760px){dialog.sheet{border-radius:var(--radius-lg);margin:auto}}.sheet-head{z-index:1;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;position:sticky;top:0}.sheet-head h2{font-size:var(--fs-lg);flex:1}.sheet-body{padding:var(--space-4);padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom))}.tabbar{z-index:20;padding-bottom:env(safe-area-inset-bottom);background:var(--c-surface);border-top:1px solid var(--c-border);justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar a{max-width:180px;min-height:var(--tabbar-h);color:var(--c-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:12px;font-weight:500;text-decoration:none;display:flex}.tabbar a[aria-current=page]{color:var(--c-primary);font-weight:700}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.paper{color:#111;border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow-wrap:anywhere;background:#fff;padding:20px 18px;font-size:13px;line-height:1.45}.paper-top{justify-content:space-between;gap:12px;display:flex}.paper-logo{object-fit:contain;max-width:120px;max-height:60px}.paper-company{text-align:right}.paper-small{color:#444;font-size:11px}.paper-company .paper-small{margin-top:6px}.paper-customer{margin:16px 0 0 8%;font-size:14px}.paper-heading{justify-content:space-between;align-items:flex-end;gap:12px;margin:24px 0 12px;display:flex}.paper-heading strong{font-size:15px}.paper-meta{text-align:right}.paper-table{border-collapse:collapse;width:100%}.paper-table th{color:#444;text-align:left;vertical-align:bottom;border-bottom:1px solid #222;padding:4px 4px 6px;font-size:11px;font-weight:400}.paper-table td{vertical-align:top;border-bottom:1px solid #222;padding:6px 4px}.paper-table .r{text-align:right;white-space:nowrap}.paper-totals{margin:8px 0 0}.paper-totals div{justify-content:flex-end;gap:16px;padding:3px 4px;display:flex}.paper-totals dd{text-align:right;font-variant-numeric:tabular-nums;min-width:84px;margin:0}.paper-totals .strong{border-top:1px solid #222;margin-top:4px;padding-top:6px;font-weight:700}.paper-pay{margin-top:20px}.test-banner{text-align:center;padding:calc(env(safe-area-inset-top) + 6px) var(--space-4) 6px;background:var(--c-warning-bg);color:var(--c-warning-text);font-size:var(--fs-sm);font-weight:600;text-decoration:none;display:block}.test-banner+.page-header{padding-top:var(--space-2)}.login{max-width:420px;padding-top:calc(env(safe-area-inset-top) + 15vh);padding-bottom:var(--space-6)}.login-head{text-align:center}.login-head h1{font-size:var(--fs-xl);margin-bottom:var(--space-2)}
