:root {
  --rail:clamp(195px,16vw,228px);
  --gutter:clamp(16px,2.6vw,48px);
  --radius:7px;
  --shadow:none;
  --muted:#adb9ca;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme=light] {
  --bg:#f5f6f8; --surface:#fff; --ink:#202d40; --muted:#536275;
  --raised:#f6f7f9; --input:#fff; --border:#d8dee6; --soft:#eaf1fb;
  --accent:#245697; --primary:#255fa8; --shadow:none;
}
.shell>.sidebar {width:var(--rail);padding:18px 12px;overflow-y:auto}
.shell>main {margin-left:var(--rail)}
.brand {gap:10px;padding:0 6px;min-height:55px;flex-shrink:0;font-size:16px;letter-spacing:-.4px}
.brand .appbadge {width:42px;height:42px}
.workspace {letter-spacing:.07em;margin:24px 12px 8px;font-size:11px;text-transform:uppercase}
.nav,.accountbar summary {display:flex;align-items:center;min-height:44px;padding:8px 12px;margin:2px 0;border-radius:6px;gap:10px;font-size:14px;font-weight:550}
.accountbar {margin:0;min-width:0;color:var(--ink)}
.accountbar summary {cursor:pointer;color:var(--muted)}
.accountbar summary::before {content:"⌄";width:19px;text-align:center;font-size:19px}
.accountbar summary::-webkit-details-marker {display:none}
.accountbar details[open]>summary,.accountbar summary:hover {background:var(--soft);color:var(--accent)}
.accountbar details>p,.accountbar details>label {margin:12px 4px;overflow-wrap:anywhere}
.accountbar input {display:block;margin:6px 0}
.accountbar button {width:100%;margin:4px 0}
.side-bottom {margin-top:24px}
.topbar {height:56px;padding-inline:var(--gutter);font-size:13px}
.content {margin:0;max-width:none;padding:24px var(--gutter) 36px}
.heading {margin-bottom:16px}
.heading h1 {font-size:clamp(25px,2.2vw,34px);line-height:1.15;margin:0 0 5px}
.heading p,.sectiontitle p,.note,.settingsintro p {font-size:13px}
.eyebrow {letter-spacing:.06em;color:var(--muted);font-size:11px;margin-bottom:4px}
.dashbadge {width:42px;height:42px;margin:4px 12px 0 0}
.v2notice {border:0;border-top:1px solid var(--border);background:transparent;border-radius:0;padding:10px 0;margin:0 0 8px}
.card,.summary,.formsteps,.stats>div,.loginbox,.settingssave {border-radius:var(--radius);box-shadow:none}
.card {padding:clamp(16px,1.6vw,26px)}
.sectiontitle {margin-bottom:18px}.sectiontitle>span {padding:7px 9px;border-radius:5px}
.stats,.extra-stats {gap:10px;margin-bottom:12px}
.stats>div {padding:14px 16px}
.stats small {font-size:12px;letter-spacing:.02em}
.stats strong {font-variant-numeric:tabular-nums;font-size:26px;margin-top:5px}
.extra-stats strong {font-size:20px}
button,input,textarea,select,.recordlink,.exportlink {border-radius:6px}
button,.exportlink {font-size:13px}.primary {box-shadow:none}
label {font-size:13px;font-weight:600}
label input,label select,label textarea {margin-top:6px}
input:not([type=file]):not([type=checkbox]),select {min-height:44px;padding:9px 11px}
textarea {padding:10px 11px}
.filters {grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:10px}
.pill {color:var(--muted);background:var(--raised);border:1px solid var(--border);border-radius:5px;font-size:11px;letter-spacing:0}
.tablewrap table {width:100%}
.tablewrap td,.tablewrap th {padding:12px 9px;font-size:13px}
.docno,.tablewrap td[data-label="Bedrag"] {white-space:nowrap;font-variant-numeric:tabular-nums}
.formlayout {gap:16px}.formmain,.settingsform fieldset {gap:16px}
.formsteps {gap:4px}.formsteps a {font-size:13px;min-height:44px;padding:6px}
.formsteps span {font-size:11px}
.settingsform {max-width:none}
.settingsnav {display:flex;flex-wrap:wrap;gap:4px 16px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.settingsnav a {display:inline-flex;align-items:center;color:var(--accent);min-height:44px;font-size:14px}
.settingsnav a:hover {text-decoration:underline}
.logopreview {width:152px;height:82px}
.settingssave {position:static;margin:16px 0 0}
:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
#mobile-account {background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:9px;width:min(380px,calc(100% - 28px));max-height:80dvh;margin:auto;padding:18px;overflow:auto}
#mobile-account::backdrop {background:#111b2db3}
.close-account {display:block;margin-left:auto}
@media(min-width:901px){.summary {position:sticky;top:16px}.formlayout {grid-template-columns:minmax(0,1fr) minmax(245px,26%)}}
@media(max-width:760px){
  .shell>main {margin:0}.content {padding:16px 14px calc(150px + env(safe-area-inset-bottom));overflow-wrap:break-word}
  .phone-tabs button {flex:1;min-width:0;border:0;border-radius:5px;min-height:50px;font-size:11px;padding:4px;background:transparent}
  .phone-tabs button.active {background:var(--soft);color:var(--accent)}
  .fields,.lineitem {grid-template-columns:minmax(0,1fr)}
  .lineitem label:nth-child(2){grid-area:auto}
  .formsteps {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}
  .formsteps a {justify-content:flex-start;padding:6px;font-size:13px}
  .formsteps a span {display:inline-grid;place-items:center}
  .heading {flex-wrap:wrap}.settingssave {flex-wrap:wrap}
  .filters {grid-template-columns:repeat(2,minmax(0,1fr))}
  .extra-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats small {font-size:11px}.stats>div {padding:12px}
  .summary {margin:0}.topbar {height:auto;min-height:54px}
  .mobile-save {bottom:calc(59px + env(safe-area-inset-bottom))!important}
  .loginbox {margin:8vh auto;width:min(430px,calc(100% - 28px))}
}
@media (min-width:701px) and (max-width:1000px){
  .tablewrap {max-width:100%;overflow-x:auto}
}
@media(max-width:700px){
  .tablewrap td {white-space:normal}
  .tablewrap td,.tablewrap td b {overflow-wrap:break-word}
  .lineitem label,.fields label {width:100%}
}
@media(max-height:600px){
  .summary {position:static}
}
@font-face{font-family:Inter;src:url('/fonts/Inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root,body,button,input,textarea,select{font-family:Inter,system-ui,sans-serif}
.detailactions{flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:4px;padding:3px 0 6px}
.detailactions button{flex:none}
.stats>div,.detailhead>*{min-width:0}
.stats strong,.detailhead strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:760px){
.heading h1{font-size:23px}.heading .dashbadge{display:none}
.stats strong{font-size:clamp(16px,4.6vw,21px)}.stats>div{padding:9px 10px}
.detailhead{gap:8px;flex-wrap:wrap}.detailhead h2{font-size:18px;overflow-wrap:anywhere}
.formsteps a{min-height:36px}.content input,.content textarea,.content select{font-size:16px}
html{scroll-padding-bottom:calc(155px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){
.tablewrap tr:has(td[data-label="Document"]){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px}
.tablewrap td[data-label]{min-width:0;padding:2px 0;overflow-wrap:anywhere}
.tablewrap td[data-label]::before{display:none}
.tablewrap td[data-label="Document"]{grid-area:1/1}.tablewrap td[data-label="Bedrag"]{grid-area:1/2;font-weight:650}
.tablewrap td[data-label="Verkoper"]{grid-area:2/1}.tablewrap td[data-label="Datum"]{grid-area:2/2}
.tablewrap td[data-label="Ingevoerd door"],.tablewrap td[data-label="Betaling"],.tablewrap td[data-label="Verkoper"] small{display:none}
}

.document-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;min-width:0}
.document-tools>button{order:0}
.document-tools>:not(button){order:1;min-width:0;flex-basis:100%}
.document-tools .mailnotice>div{width:100%;min-width:0}
@media(min-width:761px){
 .document-tools+.document,.document-tools iframe[title="Voorbeeld aankoopdocument"]{display:block;box-sizing:border-box;width:min(100%,880px);max-width:100%;margin-inline:auto;aspect-ratio:210/297}
 .document-tools iframe[title="Voorbeeld aankoopdocument"]{height:auto!important}
 .document-tools+.document{font-size:13px;height:auto;overflow-wrap:anywhere}
}
@media(max-width:760px){
 .document-tools>button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 14px;max-width:100%}
 .phone-tabs{box-sizing:border-box;height:calc(59px + env(safe-area-inset-bottom,0px))}
 .phone-tabs button{min-height:44px}
 .mobile-save{max-width:100%;box-sizing:border-box}
 .content{padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}
}

.pdf-ready{--pr-bg:#182435;--pr-border:#39495d;--pr-text:#f3f6fb;--pr-muted:#b6c4d6;--pr-control:#243347;--pr-check:#8dd9b4;background:var(--pr-bg);color:var(--pr-text);border:1px solid var(--pr-border);border-radius:10px;padding:14px;margin-block:12px;box-sizing:border-box;min-width:0}
:root[data-theme=light] .pdf-ready{--pr-bg:#f7f9fc;--pr-border:#ccd6e2;--pr-text:#182537;--pr-muted:#4f6175;--pr-control:#fff;--pr-check:#24724b}
.pdf-ready>div{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.pdf-ready strong{display:flex;align-items:center;gap:7px;font-size:15px}.pdf-ready strong span{color:var(--pr-check)}
.pdf-ready small{color:var(--pr-muted);overflow-wrap:anywhere}.pdf-ready-name{font-size:12px}
.pdf-ready .pdf-ready-share,.pdf-ready-actions>button,.pdf-ready-actions>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:auto;margin:0;padding:6px 12px;box-sizing:border-box;border-radius:7px;white-space:nowrap;font:inherit;font-size:13px;font-weight:600;text-decoration:none}
.pdf-ready .pdf-ready-share{background:#245dc3;color:white;border:1px solid transparent;width:100%;max-width:320px}
.pdf-ready .pdf-ready-actions{display:flex;gap:8px;flex-wrap:wrap}.pdf-ready-actions>button,.pdf-ready-actions>a{background:var(--pr-control);border:1px solid var(--pr-border);color:var(--pr-text)}
.pdf-ready iframe{box-sizing:border-box;min-width:0}

/* Shared screen styling for the purchase workspace. */
:root{--bg:#151b24;--surface:#202833;--raised:#293340;--input:#1c242f;--ink:#eff3f8;--muted:#b2bfce;--border:#3b4757;--soft:#303f53;--primary:#385e90;--accent:#a9c7ef;--radius:11px}
:root[data-theme=light]{--bg:#f7f8fa;--surface:white;--raised:#f6f8fa;--input:white;--ink:#202b38;--muted:#536171;--border:#d8dfe7;--soft:#e9eef4;--primary:#334155;--accent:#345575;--radius:11px}
.shell>main{margin:0;width:100%;min-width:0}
.topbar{gap:10px;height:60px;padding-inline:clamp(16px,3.8vw,76px)}
.app-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:720;font-size:15px;white-space:nowrap}
.app-brand img{object-fit:contain}
.desktop-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.desktop-nav .nav,.topbar .themebutton{background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:8px;width:auto;min-height:38px;margin:0;padding:7px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.desktop-nav .nav svg,.desktop-nav .count,.topactions .private{display:none}
.desktop-nav .nav.active{background:var(--primary);border-color:var(--primary);color:white}
.desktop-nav .nav:not(.active):hover,.topbar .themebutton:hover{background:var(--soft)}
.content{box-sizing:border-box;width:100%;max-width:1160px;margin-inline:auto;padding:32px clamp(16px,2.2vw,32px) 36px}
.content:has(.formlayout){max-width:1360px}.content:has(.settingsform){max-width:1000px}
.heading{margin:0 0 18px}.heading .dashbadge,.heading .eyebrow,.heading p,.v2notice{display:none}
.heading h1{font-weight:720;font-size:clamp(24px,2.5vw,34px);letter-spacing:-.04em;margin:0}
.card,.summary,.stats>div,.formsteps,.settingssave{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 2px #00000008}
.card{padding:clamp(15px,1.6vw,22px)}.sectiontitle{margin-bottom:14px}.sectiontitle h2,.card>h2{font-size:17px;letter-spacing:-.025em}.sectiontitle p{margin-top:3px}
input:not([type=checkbox]),textarea,select,button,.exportlink{border-radius:8px}
.fields,.lineitem{column-gap:12px}.fields input,.fields select,.lineitem input,.lineitem select{width:100%;min-width:0;box-sizing:border-box}
.formsteps{padding:4px}.formsteps a[aria-current=step]{background:var(--soft);color:var(--ink);font-weight:650}
.step-picker{display:none}.summaryhead,.summarybody{padding:16px}.summary hr{margin:14px 0}
.register-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:16px}
.register-metrics .stats{display:contents}.register-metrics .stats>div{grid-column:auto;display:grid;align-content:center;align-items:start;gap:4px;padding:13px 14px;min-width:0}
.register-metrics .stats:first-child>div:first-child{background:var(--soft)}
.register-metrics .stats small{font-size:12px;letter-spacing:0;font-weight:550;text-transform:none}
.register-metrics .stats strong{font-size:clamp(17px,1.8vw,23px);line-height:1.22;margin:0;white-space:normal;overflow-wrap:anywhere}
.tablewrap th{color:var(--muted);font-weight:600}.tablewrap td[data-label=Bedrag]{text-align:right}.tablewrap td[data-label=Datum]{font-variant-numeric:tabular-nums}
.detailhead h2{letter-spacing:-.03em}.document-tools .primary{background:#245dc3;color:white;border-color:#245dc3}
.settingsnav a{font-weight:550}.settingsform fieldset{min-width:0}.settingssave{padding:14px}
@media(min-width:901px){.formlayout{grid-template-columns:minmax(0,7fr) minmax(248px,3fr)}}
@media(max-width:900px) and (min-width:761px){.topbar{padding-inline:14px;gap:6px}.desktop-nav .nav{padding-inline:9px}.formlayout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 .desktop-nav{display:none}.topbar{height:auto;min-height:54px;padding-inline:14px}.app-brand{font-size:16px}
 .content{padding:16px 14px calc(82px + env(safe-area-inset-bottom,0px))}.content:has(.mobile-save){padding-bottom:calc(165px + env(safe-area-inset-bottom,0px))}
 .heading{margin-bottom:12px}.heading h1{font-size:24px}.formlayout{grid-template-columns:minmax(0,1fr);gap:12px}.formmain{gap:12px}
 .formsteps{display:block;padding:8px 12px}.formsteps>a{display:none}.step-picker{display:grid;gap:2px}
 .step-picker select{width:100%;min-height:44px;background-color:var(--surface);border:0;padding:4px 0;color:var(--ink);font-weight:600}
 .step-picker progress{width:100%;height:4px;border:0;border-radius:4px;background:var(--soft);color:var(--accent);overflow:hidden}
 .step-picker progress::-webkit-progress-bar{background:var(--soft)}.step-picker progress::-webkit-progress-value{background:var(--accent)}.step-picker progress::-moz-progress-bar{background:var(--accent)}
 .register-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.register-metrics .stats>div{padding:11px}
 .register-metrics .stats strong{font-size:clamp(16px,4.7vw,21px)}
 .phone-tabs button,.phone-tabs button.active{background:transparent;color:var(--muted);font-weight:600;font-size:11px}
 .phone-tabs button.active{color:var(--ink)}.phone-tabs button svg{width:28px;height:26px;padding:3px;border-radius:6px}.phone-tabs button.active svg{background:var(--soft);color:var(--accent)}
 .mobile-save{padding:9px 14px;gap:8px}.mobile-save button{min-height:44px}.mobile-save>div{min-width:0}
 .mobile-save strong{overflow-wrap:anywhere}.filters select,.filters input{min-width:0}
}

@media (max-width: 760px) {
  .filters > label:has(> input[type="date"]) {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
  }
  .filters > label > input[type="date"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
  }
}