/* /integration-settings.css */
.integration-settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}.integration-navigation{display:flex;flex-direction:column;gap:5px;position:sticky;top:90px}.integration-navigation a{padding:12px 14px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:500}.integration-navigation a:hover{background:#eaf3ef}.integration-navigation a[aria-current="page"]{background:var(--green);color:#fff}.integration-content{min-width:0}.integration-content>h2{margin-top:0}.integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.integration-card{padding:22px;background:#fff;border:1px solid var(--line);border-radius:12px;min-width:0}.integration-card p{line-height:1.65;overflow-wrap:anywhere}.integration-card-heading{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.integration-card h3{margin:0;font-size:18px}.integration-status{display:inline-block;border-radius:6px;padding:5px 9px;background:#edf0f2;color:#37464d;font-size:12px;font-weight:600}.integration-status-ready{background:#e1f2e9;color:#205840}.integration-status-attention{background:#fff0cb;color:#70500a}.integration-card .actions{display:flex;flex-wrap:wrap;gap:8px}.integration-navigation a:focus-visible,.integration-card .button:focus-visible{outline:3px solid #377e68;outline-offset:3px}@media(max-width:1050px){.integration-grid{grid-template-columns:1fr}}@media(max-width:700px){.integration-settings{grid-template-columns:1fr;gap:18px}.integration-navigation{position:static;display:grid;grid-template-columns:1fr 1fr}.integration-navigation a{padding:10px;font-size:13px}.integration-card{padding:17px}}

/* /purchase-entry.css */
.purchase-source-editor{display:grid;grid-template-columns:minmax(280px,42%) minmax(0,1fr);gap:24px;align-items:start}.purchase-source-preview{position:sticky;top:16px}.purchase-source-preview iframe{width:100%;height:75vh;border:1px solid var(--border,#ddd);margin-top:16px}.purchase-source-preview img{max-width:100%;height:auto;margin-top:16px}.purchase-source-editor .fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:900px){.purchase-source-editor{grid-template-columns:1fr}.purchase-source-preview{position:static}.purchase-source-preview iframe{height:50vh}}
/* De link naar het origineel is minstens 24 px hoog (WCAG 2.5.8). */
.purchase-source-preview>a{display:inline-block;padding-block:4px}

/* Vanzelf ingevuld uit het bestand: een rustig blok bovenaan en een markering per veld tot je het zelf wijzigt. */
.inlees-blok{border-color:#cfdc9a;background:#fbfcf3}.inlees-blok h2{margin-bottom:8px}.inlees-blok.inlees-zelf{background:#fff;border-color:var(--line)}
.inlees-lijst{list-style:none;margin:14px 0;padding:0;display:grid;gap:10px}.inlees-lijst li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 14px;font-size:13px;line-height:1.5}.inlees-lijst li>span{color:var(--muted)}.inlees-lijst li small{grid-column:2;color:var(--muted);font-size:12px}.inlees-lijst li strong{overflow-wrap:anywhere}
.ingelezen-markering{display:inline-block;margin:0 0 0 8px;padding:1px 7px;border-radius:4px;background:#e6f0b8;color:#3d4a17;font-size:11px;font-weight:600;line-height:1.6;vertical-align:1px}.ingelezen-markering.twijfel{background:#fbe7df;color:#8d4a33}.ingelezen-markering.voorbeeld{margin:0 2px}
label.veld-ingelezen input,label.veld-ingelezen select{border-color:#9bb04a;background:#fcfdf5}
.ingelezen-regel{grid-column:1/-1;margin:0}.ingelezen-regel .ingelezen-markering{margin-left:0}
.inlees-sluit{background:#eef6ea;border-color:#cfe2c6;color:#35633a}.inlees-live:empty{display:none}
.inlees-lijst li.is-suggestie{border-left:3px solid #d9a441;padding-left:9px;margin-left:-12px}.inlees-lijst li.is-suggestie strong{font-weight:600}.inlees-suggestie .link{font-size:12px;font-weight:600}.inlees-foto{font-size:12px}
@media(max-width:700px){.inlees-lijst li{grid-template-columns:1fr}.inlees-lijst li small{grid-column:1}}
/* Een venster op een telefoon: een brede tabel (zoals de herkende velden bij Tekst uitlezen) schuift binnen haar eigen kader en maakt de kolom niet breder dan het scherm. */
@media(max-width:700px){#dialog-form .fields{grid-template-columns:minmax(0,1fr)}}

/* /document-editor.css */
/* Papierindeling van de documenteditor: afzender rechtsboven, klant in het adresvenster links, zoals een gewone Nederlandse zakelijke brief. Kleuren komen uit de huisstijl. */
.paper-editor{max-width:1050px;margin:0 auto}
.paper-document{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.75fr);grid-template-areas:"logo issuer" "recipient ." "title dates" "workflow workflow" "introduction introduction" "lines lines" "conclusion conclusion" "extra extra" "notes notes";column-gap:64px;row-gap:32px;background:#fff;border:1px solid var(--border,#ddd);border-radius:7px;padding:48px;box-shadow:0 2px 9px #173f3708}
.paper-issuer{grid-area:issuer;justify-self:stretch;font-size:13px;line-height:1.6}
.paper-issuer h2{font-size:15px;margin:0 0 4px}.paper-issuer p{margin:0 0 12px}
.paper-recipient{grid-area:recipient;min-height:110px}.paper-recipient p{font-size:13px;line-height:1.6;margin:8px 0}.paper-recipient .link{padding-left:0}
.paper-document-title{grid-area:title}.paper-document-title h2{font-size:26px;margin:0 0 16px;font-weight:500}.paper-document-title h2 .muted{font-weight:400}
.paper-dates{grid-area:dates;display:grid;gap:8px}.paper-dates label{display:grid;grid-template-columns:95px minmax(0,1fr);gap:10px;align-items:center;font-size:12px}
.paper-editor input,.paper-editor select,.paper-editor textarea{min-width:0;width:100%;box-sizing:border-box}.paper-editor input,.paper-editor select{min-height:36px;padding:7px 9px;font-size:13px}
.paper-lines{grid-area:lines}.paper-lines>.card-header{margin-bottom:12px;align-items:end}.paper-lines>.card-header h2{font-size:16px}.paper-lines>.card-header label{max-width:250px}
.paper-lines .line-row{display:grid;grid-template-columns:70px minmax(140px,1fr) 100px 112px;gap:10px;align-items:end;padding:15px 0;border:0;border-top:1px solid var(--border,#ddd);border-radius:0;background:transparent;margin:0}
.paper-lines .line-row label{font-size:12px;min-width:0}
.paper-lines .line-row label:has([name="quantity"]){grid-column:1;grid-row:1}
.paper-lines .line-row label:has([name="description"]){grid-column:2;grid-row:1}
.paper-lines .line-row label:has([name="unitPrice"]){grid-column:3;grid-row:1}
.paper-lines .line-row label:has([name="taxCode"]){grid-column:4;grid-row:1}
.paper-lines .line-row label:has([name="ledgerAccountId"]){grid-column:1 / 3;grid-row:2}
.paper-lines .line-row label:has([name="priceMode"]){grid-column:3;grid-row:2}
.paper-lines .line-row label:has([name="discountPercent"]){grid-column:4;grid-row:2}
.paper-lines .line-row .remove-line{grid-column:4;grid-row:3;justify-self:end;min-height:30px;font-size:12px;padding:5px 8px}
.paper-lines .totals{margin-top:18px}.paper-notes{grid-area:notes}.paper-editor-actions{padding:18px 0}.paper-editor>.inline-error:empty{display:none}
@media(max-width:1100px){.paper-document{padding:30px;column-gap:28px}.paper-lines .line-row{grid-template-columns:60px minmax(100px,1fr) 86px 100px}}
@media(max-width:760px){.paper-document{grid-template-columns:minmax(0,1fr);grid-template-areas:"issuer" "recipient" "title" "dates" "workflow" "introduction" "lines" "conclusion" "extra" "notes";padding:20px;row-gap:22px}.paper-issuer{font-size:12px}.paper-recipient{min-height:0}.paper-dates label{grid-template-columns:100px minmax(0,1fr)}.paper-lines>.card-header{display:block}.paper-lines>.card-header label{max-width:none}.paper-lines .line-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.paper-lines .line-row label:has([name="description"]){grid-column:1 / -1;grid-row:1}.paper-lines .line-row label:has([name="quantity"]){grid-column:1;grid-row:2}.paper-lines .line-row label:has([name="unitPrice"]){grid-column:2;grid-row:2}.paper-lines .line-row label:has([name="taxCode"]){grid-column:1;grid-row:3}.paper-lines .line-row label:has([name="priceMode"]){grid-column:2;grid-row:3}.paper-lines .line-row label:has([name="discountPercent"]){grid-column:1;grid-row:4}.paper-lines .line-row label:has([name="ledgerAccountId"]){grid-column:1 / -1;grid-row:5}.paper-lines .line-row .remove-line{grid-column:2;grid-row:4}.paper-editor-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}}

.paper-introduction{grid-area:introduction}.paper-conclusion{grid-area:conclusion}

.paper-lines .line-row .line-note-field{grid-column:1 / 4;grid-row:3}.paper-lines .line-note-field textarea{font-size:13px;min-height:50px}
@media(max-width:760px){.paper-lines .line-row .line-note-field{grid-column:1 / -1;grid-row:6}}

.paper-extra-fields{grid-area:extra}.paper-extra-fields label{display:block;margin-bottom:12px}.document-field-definition{padding:12px 0;border-bottom:1px solid var(--border)}

.paper-workflow{grid-area:workflow;border-block:1px solid var(--border,#ddd);padding:16px 0}.paper-workflow select{max-width:420px}.paper-workflow button{margin:8px 8px 0 0}

.paper-logo{grid-area:logo;align-self:start}.paper-logo img{display:block;max-width:min(260px,100%);max-height:90px;width:auto;height:auto;object-fit:contain}
@media(max-width:760px){.paper-document{grid-template-areas:"logo" "issuer" "recipient" "title" "dates" "workflow" "introduction" "lines" "conclusion" "extra" "notes"}.paper-logo img{max-height:64px}}

/* /wachtwoord-herstel.css */
/* Wachtwoord vergeten en een nieuw wachtwoord kiezen op het inlogscherm (public/wachtwoord-herstel.js). */
.login-box .login-hulp{width:auto;min-height:44px;margin:12px 0 0;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.login-box .herstel-bericht{margin:18px 0 0;line-height:1.6}
.login-box h2:focus{outline:none}
.login-box h2:focus-visible{outline:2px solid #65884a;outline-offset:4px}

/* /app.css */




:root{--ink:#243e36;--muted:#59665b;--green:#1e5143;--lime:#ddec9c;--paper:#f6f6f0;--line:#e3e5dc;--white:#fff;--red:#a33f37;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:14px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button,.button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);padding:11px 17px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}button:hover,.button:hover{border-color:#859e89;background:#f2f5e9}button:disabled{opacity:.5;cursor:wait}button.primary,.button.primary{background:var(--green);border-color:var(--green);color:white}button.primary:hover{background:#306451}button.danger{color:var(--red)}button.link{border:0;background:transparent;padding:4px;color:var(--green);text-align:left}input,select,textarea{width:100%;border:1px solid #78866f;background:#fff;border-radius:6px;padding:11px 12px;color:var(--ink);min-height:42px}textarea{min-height:90px;resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid #65884a;outline-offset:2px}label{display:block;font-size:12px;font-weight:600;line-height:1.6}label input,label select,label textarea{margin-top:5px;font-weight:400}a{color:var(--green)}h1,h2,h3,p{margin-top:0}h1{font-size:31px;letter-spacing:-1px;font-weight:600;margin-bottom:9px}h2{font-size:18px;letter-spacing:-.3px;font-weight:600}h3{font-size:14px}p{line-height:1.65}.muted{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:1.6px;font-size:10px;font-weight:700;color:#82917c}.layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.sidebar{background:#eceedf;border-right:1px solid var(--line);padding:35px 23px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{font-size:22px;font-weight:700;letter-spacing:-.8px;margin:0 0 32px}.brand small{display:block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:500;margin-top:5px}.company{margin-bottom:34px}.company select{font-weight:600;font-size:12px;background:#f5f6ee;border-color:#78866f}.nav-group{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#86927d;margin:20px 10px 10px}.nav a{display:block;padding:11px 13px;margin:3px 0;border-radius:6px;text-decoration:none;color:#5d6c5c;font-size:13px;font-weight:500}.nav a.active{background:#dce4c4;color:#244e36;font-weight:700}.nav a:hover{background:#e0e6d1;color:var(--green)}.sidebar-foot{margin-top:auto;padding-top:28px;font-size:11px;color:#748169;line-height:1.6}.sidebar-foot button{padding:6px 0;font-size:11px;background:transparent;border:0}.workspace{min-width:0}.topbar{height:77px;border-bottom:1px solid var(--line);padding:0 42px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}.account{display:flex;align-items:center;gap:11px}.avatar{width:31px;height:31px;display:grid;place-items:center;background:#e4e9d5;border-radius:50%;font-size:11px;color:#476244;font-weight:600}.content{max-width:1390px;padding:39px 42px 70px;margin:auto}.heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:30px}.heading p{color:var(--muted);margin:0;font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.actions select{width:auto}.hero{background:var(--green);color:white;border-radius:10px;padding:30px 32px;margin-bottom:25px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px;overflow:hidden}.hero .eyebrow{color:#c2d5b9}.hero h2{font-size:26px;font-weight:500;line-height:1.35;max-width:450px}.hero p{font-size:12px;color:#cbdacf;max-width:370px;margin-bottom:0}.hero-number{text-align:right;display:flex;flex-direction:column;justify-content:center}.hero-number strong{font-size:41px;font-weight:500;letter-spacing:-1.5px;color:var(--lime)}.hero-number span{font-size:12px;color:#d0dfce;margin-top:9px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:25px}.metric{background:white;border:1px solid var(--line);border-radius:9px;padding:23px 22px}.metric .label{font-size:11px;color:var(--muted);margin-bottom:14px}.metric strong{font-size:25px;font-weight:500;letter-spacing:-.6px;display:block}.metric small{display:block;font-size:10px;color:var(--muted);margin-top:13px}.grid-two{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(270px,1fr);gap:22px;margin-bottom:25px}.card{background:white;border:1px solid var(--line);border-radius:9px;padding:25px;min-width:0;margin-bottom:22px}.grid-two .card{margin-bottom:0}.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.card-header h2{margin:0}.chart{height:190px;display:flex;align-items:flex-end;gap:12px;padding-top:15px;border-bottom:1px solid var(--line)}.chart-month{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;position:relative;padding-bottom:22px}.bar{width:13px;min-height:2px;border-radius:3px 3px 0 0;background:var(--green)}.bar.cost{background:#cbd7a3}.chart-month span{position:absolute;bottom:2px;left:0;right:0;text-align:center;color:var(--muted);font-size:9px}.legend{display:flex;gap:20px;font-size:10px;margin-top:20px;color:var(--muted)}.legend b{display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--green);border-radius:2px}.legend b.cost{background:#cbd7a3}.quick{display:block;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}.quick:last-child{border:0;padding-bottom:0}.quick small{display:block;color:var(--muted);font-weight:400;font-size:11px;margin-top:5px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:500;padding:12px;border-bottom:1px solid var(--line);background:#fafbf7}td{padding:16px 12px;border-bottom:1px solid #edf0e7;font-size:12px}tr:last-child td{border-bottom:0}td.right,th.right{text-align:right}.badge{font-size:10px;border-radius:4px;padding:5px 8px;background:#f0f1e9;color:#7d8269;display:inline-block}.badge.paid{background:#e8f2e8;color:#457442}.badge.posted{background:#f9eed5;color:#947334}.badge.overdue{background:#fbe7df;color:#a75c42}.empty{text-align:center;padding:50px 15px;color:var(--muted);white-space:normal;line-height:1.7}.empty h3{color:var(--ink);font-size:17px}.toolbar{display:flex;gap:12px;margin-bottom:20px}.toolbar input{max-width:370px}.toolbar select{width:180px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.fields .wide{grid-column:1/-1}.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.line-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;align-items:end}.line-row input,.line-row select{padding:10px 8px;font-size:12px}.line-row button{padding:11px 5px;font-size:10px}.totals{margin-left:auto;width:290px;padding-top:25px}.total-row{display:flex;justify-content:space-between;margin-bottom:13px;font-size:13px}.total-row.grand{font-size:21px;border-top:1px solid var(--line);padding-top:15px}.form-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.notice{background:#f1f3e5;border:1px solid #dce2c6;border-radius:7px;padding:15px 18px;color:#65714c;font-size:12px;line-height:1.7;margin-bottom:20px}.error{background:#fff1ed;color:#9e4838;border-color:#ecd1c8}.detail-head{display:flex;justify-content:space-between;padding-bottom:28px;border-bottom:1px solid var(--line);gap:20px}.detail-head p{font-size:12px;color:var(--muted)}.detail-total{font-size:31px;font-weight:500}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-story{background:var(--green);padding:65px;display:flex;flex-direction:column;justify-content:space-between;color:white}.login-story h1{font-size:52px;line-height:1.15;font-weight:500;max-width:500px;letter-spacing:-2px}.login-story p{color:#ccd9c6;max-width:370px}.login-story .brand{font-size:25px}.login-form{display:flex;align-items:center;justify-content:center;padding:45px}.login-box{width:100%;max-width:350px}.login-box h2{font-size:27px;margin-bottom:10px}.login-box label{margin:22px 0}.login-box button{width:100%;margin-top:8px}.loading{padding:60px;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#214d3f;color:white;padding:13px 24px;border-radius:7px;box-shadow:0 8px 28px #153b3722;display:none;z-index:100}dialog{border:1px solid var(--line);border-radius:10px;padding:30px;max-width:650px;width:calc(100% - 30px);max-height:90vh}dialog::backdrop{background:#173a3560}dialog h2{font-size:23px}dialog .form-foot{margin-top:25px}.mobile-title{display:none}.footer-note{font-size:11px;color:var(--muted);margin-top:30px}.vat-amount{font-size:35px;font-weight:500;margin:15px 0}.pill{background:#edf0e2;border-radius:20px;padding:6px 12px;font-size:11px}.inline-error{color:var(--red);font-size:12px;margin-top:12px}.source-link{font-size:11px}.settings-card{max-width:820px}pre{white-space:pre-wrap;word-break:break-word;font-size:11px}button:focus-visible,a:focus-visible{outline:2px solid #65884a;outline-offset:3px}@media(min-width:1500px){.content{padding-top:48px}.metrics{gap:20px}.metric{padding:28px}.chart{height:230px}}@media(max-width:1100px){.layout{grid-template-columns:200px 1fr}.sidebar{padding:30px 15px}.topbar{padding:0 25px}.content{padding:30px 25px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-two{grid-template-columns:1fr}.line-row{grid-template-columns:2fr 1fr 1fr}.hero-number strong{font-size:32px}}@media(max-width:700px){.layout{display:block}.sidebar{position:static;height:auto;padding:18px;border:0}.brand{margin:0;font-size:20px}.brand small{display:none}.company{margin:14px 0 8px}.nav{display:flex;overflow-x:auto;gap:3px}.nav-group,.sidebar-note{display:none}.sidebar-foot{display:flex;justify-content:flex-end;margin-top:8px;padding-top:0}.sidebar-foot button{min-height:44px;padding:8px 12px;font-size:12px}.nav a{white-space:nowrap;padding:9px 11px;font-size:12px}.topbar{height:50px;padding:0 20px}.topbar .account span:first-child{display:none}.content{padding:25px 18px}.heading{align-items:flex-start;flex-direction:column;gap:17px;margin-bottom:23px}h1{font-size:27px}.hero{padding:24px;grid-template-columns:1fr;gap:25px}.hero h2{font-size:25px}.hero-number{text-align:left}.hero-number strong{font-size:35px}.metrics{gap:10px}.metric{padding:18px 15px}.metric strong{font-size:22px}.metric small{line-height:1.5}.card{padding:19px 15px}.fields,.fields.three{grid-template-columns:minmax(0,1fr)}.fields .wide{grid-column:auto}.line-row{grid-template-columns:1fr 1fr}.line-row label:first-child{grid-column:1/-1}.line-row{border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:17px}.toolbar{flex-direction:column}.toolbar input,.toolbar select{max-width:none;width:100%}.login-page{display:block}.login-story{padding:30px}.login-story h1{font-size:32px;margin-top:35px}.login-story p{display:none}.login-form{padding:35px 25px}.detail-head{flex-direction:column}.chart{gap:4px}.chart-month{gap:2px}.bar{width:10px}.totals{width:100%}.actions button,.actions .button{font-size:12px;padding:10px 12px}}

.line-row>label{min-width:0}.line-row>label:first-child{grid-column:1/-1}.line-row>.remove-line{order:10}.line-row select{max-width:100%}

.toolbar{flex-wrap:wrap;align-items:flex-end}.toolbar>label{min-width:140px}

/* Keep every dialog action reachable when previews add a third button. */
dialog .form-foot{flex-wrap:wrap}
@media(max-width:420px){dialog .form-foot>button{flex:1 1 100%;min-height:44px}}
@media(max-width:700px){
 .vat-history table,.vat-history tbody,.vat-history tr,.vat-history td{display:block;width:100%;min-width:0}
 .vat-history thead{display:none}
 .vat-history tr{border-bottom:1px solid var(--line);padding:10px 0}
 .vat-history td{border:0;white-space:normal;overflow-wrap:anywhere;padding:7px 0}
 .vat-history td::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:4px}
 .vat-history td a{display:inline-block;padding:10px 8px 10px 0;min-height:44px}
}
#mollie-import-result table{table-layout:fixed;width:100%;min-width:650px}#mollie-import-result td,#mollie-import-result th{white-space:normal;overflow-wrap:anywhere}#mollie-import-result th:nth-child(3){width:25%}#mollie-import-result th:last-child{width:30%}
.inbox-item{padding:18px 0;border-bottom:1px solid var(--line)}.inbox-item:last-child{border-bottom:0}.inbox-item h3{overflow-wrap:anywhere}
.grid-two > .card{min-width:0}input[type="file"]{max-width:100%;min-width:0}

@media(max-width:700px){
 .document-lines table,.document-lines tbody,.document-lines tr,.document-lines td{display:block;width:100%;min-width:0}
 .document-lines thead{display:none}
 .document-lines tr{padding:14px 0;border-bottom:1px solid var(--line)}
 .document-lines td,.document-lines td.right{padding:6px 0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .document-lines td::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:4px}
}

.purchase-booking .total-row{gap:16px;align-items:flex-start}.purchase-booking .total-row>span:last-child{white-space:nowrap}.purchase-booking h3{margin-top:22px}

.bank-import-history{padding:12px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.bank-import-history summary{cursor:pointer;line-height:1.6}.bank-import-history p{margin-top:12px}

/* Beer: readable secondary text, named native dialogs and keyboard access. */
.eyebrow,.nav-group,.sidebar-foot{color:#55644e}
.badge{color:#575e44}.badge.posted{color:#735621}
.skip-link{position:fixed;top:8px;left:8px;z-index:200;background:white;padding:12px 18px;border:2px solid var(--green);border-radius:6px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
body:has(dialog[open]){overflow:hidden}
summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:700px){.nav a,button.link,summary{min-height:44px}.nav a{display:flex;align-items:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Twelve months stay inside the dashboard card on narrow screens. */
@media(max-width:700px){.chart-month{min-width:0}.chart-month .bar{width:calc((100% - 2px)/2);max-width:10px;min-width:0}}

.signed-chart .chart-month::before{content:"";position:absolute;left:0;right:0;bottom:calc(50% + 11px);border-bottom:1px solid #9da69a}
.signed-chart .bar{position:absolute;min-height:0;bottom:calc(50% + 11px);left:calc(50% - 14px);border-radius:3px 3px 0 0}
.signed-chart .bar.cost{left:calc(50% + 1px)}
.signed-chart .bar.negative{bottom:auto;top:calc(50% - 11px);border-radius:0 0 3px 3px}
.monthly-values{margin-top:20px}.monthly-values summary{cursor:pointer;padding:12px 0;font-weight:600}.monthly-values th,.monthly-values td{padding:10px 7px}
@media(max-width:700px){.signed-chart .bar{left:0}.signed-chart .bar.cost{left:calc(50% + 1px)}}

/* Lichte ondersteunende tekst op de donkere inlogachtergrond. */
.login-story .eyebrow,.login-story .muted{color:#ddecce}

.badge.overdue{color:#8c4832}

.mail-preview-text{white-space:pre-wrap;overflow-wrap:anywhere}

@media(max-width:600px){
 .statement-comparison,.statement-comparison tbody,.statement-comparison tr,.statement-comparison td{display:block;width:100%;min-width:0;box-sizing:border-box}
 .statement-comparison thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .statement-comparison tr{padding:12px 0;border-bottom:1px solid var(--border,#ddd)}
 .statement-comparison td{padding:6px 0;border:0;white-space:normal;overflow-wrap:anywhere}
 .statement-comparison td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:inherit}
}

.bank-entry-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:300px;min-width:180px;white-space:normal;overflow-wrap:anywhere}.bank-entry-actions button{max-width:100%;white-space:normal;text-align:left}

@media(max-width:700px){.toolbar>label{width:100%;min-width:0}}
/* Houd alle navigatie en uitloggen bereikbaar op korte desktopschermen. */
@media(min-width:701px){.sidebar{overflow-y:auto;overscroll-behavior:contain}.sidebar>*{flex-shrink:0}}

input[type="checkbox"]{width:20px;min-width:20px;height:20px;min-height:20px;padding:0;flex-shrink:0;accent-color:var(--green)}
.check-label{display:flex;align-items:flex-start;gap:12px;font-size:14px}.check-label input{margin-top:2px}

/* Vertrouwde werkindeling, met de eigen groene huisstijl. */
.layout{grid-template-columns:240px minmax(0,1fr);background:var(--paper)}
.layout .sidebar{padding:16px 12px;background:var(--white)}
.layout .nav-group{margin:14px 12px 8px;font-size:11px;letter-spacing:.5px}
.layout .nav a{min-height:32px;margin:2px 0;padding:7px 12px;font-size:14px;line-height:18px;border-radius:4px;color:var(--ink)}
.layout .nav a.active{background:#e7eedc;color:var(--green);font-weight:600;box-shadow:inset 3px 0 var(--green)}
.layout .nav a:hover{background:#f0f3e9}
.layout .sidebar-foot{padding:20px 12px 0;font-size:12px}
.layout .sidebar-note{display:none}
.layout .topbar{height:64px;min-width:0;padding:0 20px;background:var(--white);gap:16px;font-size:13px}
.layout .content{max-width:none;margin:0;padding:24px 16px 64px}
.layout h1{font-size:24px;line-height:1.3;letter-spacing:-.5px;margin-bottom:6px}
.layout .heading{gap:16px;margin-bottom:22px;align-items:center}
.layout .heading p{font-size:13px;max-width:760px}
.layout button,.layout .button{min-height:36px;padding:8px 13px;border-radius:5px;font-weight:500;line-height:18px}
.layout button.link{min-height:32px;padding:4px 0}
.layout input:not([type="checkbox"]),.layout select{min-height:36px;padding:8px 10px}
.layout textarea{padding:8px 10px}
.layout .card{border-radius:5px;padding:20px;margin-bottom:20px}
.layout .card-header{margin-bottom:16px}
.layout .toolbar{gap:12px;margin-bottom:16px}
.layout th{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;padding:10px 12px;background:#f8f9f5}
.layout td{font-size:13px;padding:11px 12px;line-height:21px}
.layout tbody tr:hover{background:#fafbf7}
.layout .badge{font-size:11px;padding:3px 7px}
.layout .actions{gap:8px}
.layout .metric{border-radius:5px;padding:20px}
.layout .hero{border-radius:5px}
.layout .account{min-width:0;margin-left:auto}
.layout .account>span:not(.avatar){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}

/* De bovenbalk beslaat de volle breedte in de nieuwe shell. */
.layout>.topbar{grid-column:1/-1;position:sticky;top:0;z-index:20;display:grid;grid-template-columns:220px minmax(180px,270px) minmax(180px,420px) minmax(40px,1fr)}
/* De bovenbalk blijft staan. Safari scrolt een element dat met Tab de focus krijgt precies tot de bovenrand, en dan viel
   het onder die balk (WCAG 2.4.11). De ruimte geldt ook voor scrollIntoView en ankers. Op 701 tot 850 px is de balk hoger. */
@media(min-width:701px){html{scroll-padding-top:80px}}
@media(min-width:701px) and (max-width:850px){html{scroll-padding-top:124px}}
.layout>.topbar .topbar-brand{font-size:22px;line-height:28px;letter-spacing:-.7px;font-weight:700;color:var(--green);text-decoration:none}
.layout>.topbar .topbar-company{min-width:0;margin:0}
.layout>.topbar .topbar-company label{font-size:11px;line-height:14px;color:var(--muted)}
.layout>.topbar .topbar-company select{margin-top:0;border:0;border-radius:3px;padding:3px 24px 3px 0;min-height:27px;font-size:14px;font-weight:600;background-color:transparent}
.layout>.topbar .topbar-search{margin:0;display:flex;align-items:center;gap:6px;min-width:0}
.layout>.topbar .topbar-search input{width:100%;min-width:0;background:#f7f8f3;border-color:var(--line);font-size:13px}
.layout>.topbar .topbar-search button{white-space:nowrap}
.layout>.topbar~.sidebar{top:64px;height:calc(100vh - 64px)}
.layout>.topbar~.sidebar .brand,.layout>.topbar~.sidebar .company{display:none}
.layout>.topbar~.workspace{min-height:calc(100vh - 64px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media(min-width:701px){
 .layout{grid-template-rows:auto 1fr}
 .layout>.topbar~.sidebar{grid-column:1;grid-row:2}
 .layout>.topbar~.workspace{grid-column:2;grid-row:2}
}
@media(min-width:701px) and (max-width:1100px){
 .layout>.topbar{grid-template-columns:220px minmax(150px,1fr) minmax(180px,1.2fr) auto;gap:12px}
 .layout>.topbar .account>span:not(.avatar){display:none}
}
@media(max-width:850px) and (min-width:701px){
 .layout>.topbar{grid-template-columns:220px minmax(150px,1fr) auto}
 .layout>.topbar .topbar-search{grid-column:2;grid-row:2;margin-bottom:10px}
 .layout>.topbar .account{grid-column:3;grid-row:1}
 .layout>.topbar{height:auto;min-height:64px;padding-top:8px}
 .layout>.topbar~.sidebar{top:108px;height:calc(100vh - 108px)}
}
@media(max-width:700px){
 .layout{display:block}
 .layout>.topbar{position:static;height:auto;min-height:64px;padding:12px 16px;grid-template-columns:minmax(0,1fr) auto;gap:12px}
 .layout>.topbar .topbar-brand{font-size:21px}
 .layout>.topbar .account{grid-column:2;grid-row:1}
 .layout>.topbar .account>span:not(.avatar){display:none}
 .layout>.topbar .topbar-company{grid-column:1/-1;grid-row:2}
 /* 16 px: onder die maat zoomt Safari op een iPhone in zodra je de keuzelijst aantikt. 44 px: een tikdoel dat je niet mist. */
 .layout>.topbar .topbar-company select{min-height:44px;padding:5px 8px;border:1px solid var(--line);width:100%;font-size:16px}
 .layout>.topbar .topbar-search{grid-column:1/-1;grid-row:3}
 .layout>.topbar~.sidebar{position:static;height:auto;padding:8px 12px;border-bottom:1px solid var(--line)}
 .layout .sidebar-foot{margin:0;padding:0 4px}
 .layout .sidebar-foot button{min-height:44px}
 .layout .nav{gap:4px}
 .layout .nav a{min-height:44px;white-space:nowrap;padding:10px 12px;margin:0;font-size:13px}
 .layout .content{padding:22px 16px 48px}
 .layout .heading{align-items:flex-start;gap:14px;margin-bottom:20px}
 .layout h1{font-size:24px}
 .layout button,.layout .button,.layout button.link{min-height:44px}
 .layout input:not([type="checkbox"]),.layout select{min-height:44px}
 .layout .card{padding:16px}
 .layout .actions{width:100%}
 .layout .metric{padding:16px}
 .layout .document-lines td,.layout .vat-history td{padding:7px 0}
}

/* Accountmenu blijft rechts naast de administratie en zoekfunctie. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.layout>.topbar .account details{position:relative;min-width:0}
.layout>.topbar .account summary{cursor:pointer;list-style:none;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;border-radius:4px;color:var(--ink)}
.layout>.topbar .account summary::-webkit-details-marker{display:none}
.layout>.topbar .account summary:hover{background:#f0f3e9}
.layout>.topbar .account details[open]>button{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;box-shadow:0 4px 14px #243e361a;z-index:25;background:var(--white)}
/* Het accountmenu is zelf het details-element. De acties staan in een eigen paneel onder de naam, zodat ze niets in de kopbalk overlappen. */
.layout>.topbar details.account{position:relative}
.layout>.topbar details.account>.account-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;display:flex;flex-direction:column;gap:4px;min-width:200px;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 14px #243e361a}
.layout>.topbar details.account>.account-menu>a,.layout>.topbar details.account>.account-menu>button{display:flex;align-items:center;min-height:44px;padding:8px 12px;text-align:left;white-space:nowrap}
/* Nieuwsbrief ontvangen: een vinkje met dezelfde hoogte als de knoppen, alleen voor de eigenaar en alleen als de nieuwsbrief is ingericht. */
.layout>.topbar details.account>.account-menu>.account-nieuwsbrief{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;white-space:nowrap;cursor:pointer}
.layout>.topbar details.account>.account-menu>.account-nieuwsbrief[hidden]{display:none}
.layout>.topbar details.account>.account-menu>.account-nieuwsbrief input{width:20px;height:20px;min-height:0;margin:0}
@media(max-width:1100px){.layout>.topbar .account summary{max-width:150px;font-size:12px}}
@media(max-width:850px){.layout>.topbar .account summary{max-width:120px}}
@media(max-width:700px){.layout>.topbar .account summary{min-height:44px;padding:12px 6px;max-width:150px}}

/* Origineel en boekingsgegevens blijven naast elkaar leesbaar. */
.document-workspace{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:16px;align-items:start}
.document-workspace>*{min-width:0}
.document-workspace iframe{display:block;width:100%;height:620px;border:0;background:#f4f5ef}
.document-workspace img{display:block;max-width:100%;height:auto;margin:auto}
.document-facts{margin:0}
.document-facts>div{display:grid;grid-template-columns:minmax(120px,40%) minmax(0,1fr);gap:8px 14px;padding:9px 0;border-bottom:1px solid var(--line)}
.document-facts>div:last-child{border-bottom:0}
.document-facts dt{font-size:13px;line-height:21px;color:var(--muted);font-weight:400}
.document-facts dd{margin:0;font-size:13px;line-height:21px;overflow-wrap:anywhere}
.document-workspace .table-wrap{max-width:100%;overflow-x:auto}
@media(min-width:701px) and (max-width:850px){
 .layout>.topbar{height:108px;grid-template-rows:36px 36px;row-gap:8px;padding-top:10px;padding-bottom:10px}
 .layout>.topbar .topbar-search{margin-bottom:0}
}
@media(max-width:900px){
 .document-workspace{grid-template-columns:minmax(0,1fr)}
 .document-workspace iframe{height:500px}
}
@media(max-width:700px){
 .document-facts>div{grid-template-columns:minmax(0,1fr);gap:3px}
 .document-workspace iframe{height:420px}
}

.document-lines:focus-visible{outline:2px solid #65884a;outline-offset:3px}
.document-lines table{table-layout:fixed;width:100%}
.document-lines td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
@media(min-width:701px){
 .document-lines table{min-width:740px}
 .document-lines-sales th:nth-child(1){width:8%}
 .document-lines-sales th:nth-child(2){width:36%}
 .document-lines-sales th:nth-child(3),.document-lines-sales th:nth-child(4){width:20%}
 .document-lines-sales th:nth-child(5){width:16%}
 .document-lines-sales td:nth-child(1),.document-lines-sales td:nth-child(3),.document-lines-sales td:nth-child(4),.document-lines-purchase td:last-child{white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
 .document-lines-sales td small{white-space:normal}
 .document-lines-purchase th:nth-child(1){width:40%}
 .document-lines-purchase th:nth-child(2){width:22%}
 .document-lines-purchase th:nth-child(3){width:18%}
 .document-lines-purchase th:nth-child(4){width:20%}
}
@media(max-width:700px){.document-lines table{min-width:0}.document-lines td.right{overflow-wrap:normal}}

/* Werkvoorraad en snelle acties op de vertrouwde overzichtsposities. */
.dashboard-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}
.layout .dashboard-work .card{margin:0}
.dashboard-work h2{font-size:15px;margin-bottom:18px}
.dashboard-work-link{display:flex;justify-content:space-between;gap:14px;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
.dashboard-work-link strong{font-size:20px;white-space:nowrap;font-weight:600}
.dashboard-work-link:hover{color:var(--ink)}
.dashboard-work .muted,.dashboard-secondary{display:block;font-size:12px;margin-top:14px;line-height:1.6}
.dashboard-add{position:relative}
.dashboard-add>summary{list-style:none;min-width:112px}
.dashboard-add>summary::-webkit-details-marker{display:none}
.dashboard-add nav{position:absolute;right:0;top:calc(100% + 6px);z-index:15;width:230px;background:var(--white);border:1px solid var(--line);border-radius:5px;box-shadow:0 6px 16px #243e361a;padding:6px}
.dashboard-add nav a{display:block;padding:10px 12px;text-decoration:none;border-radius:3px;font-size:13px}
.dashboard-add nav a:hover{background:#edf2e4}
.dashboard-result-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.dashboard-result-values span{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.dashboard-result-values strong{font-size:23px;font-weight:500}
.dashboard-results .card-header select{width:105px}
.settings-navigation{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
/* Samen met de scroll-padding-top van 80 px onder de vaste bovenbalk is dat 88 px, zoals voorheen. */
.settings-card{scroll-margin-top:8px}
@media(max-width:1000px){.dashboard-work{grid-template-columns:1fr}.dashboard-work-link strong{font-size:19px}}
@media(max-width:700px){.dashboard-add{align-self:flex-end}.dashboard-result-values{grid-template-columns:1fr}.settings-card{scroll-margin-top:16px}}
.dashboard-overview{max-width:1070px;margin:0 auto}
.dashboard-recent-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.dashboard-recent-row:last-child{border-bottom:0}
.dashboard-recent-row:hover{background:#fafbf7}
.dashboard-recent-row strong{display:block;font-size:13px;font-weight:500;line-height:21px}
.dashboard-recent-row>div:first-child{min-width:0;overflow-wrap:anywhere}
.dashboard-recent-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:4px;font-size:12px;color:var(--muted)}
.dashboard-recent-amount{text-align:right;flex-shrink:0}
.dashboard-recent-amount>span{display:block;font-size:12px;color:var(--muted);margin-top:5px}
@media(max-width:420px){.dashboard-recent-row{gap:10px}.dashboard-recent-amount strong{font-size:12px}}
.report-navigation{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;border-bottom:1px solid var(--line);padding-bottom:12px}.report-navigation button{font-size:13px;padding:8px 12px}.report-navigation button.active{background:#1d5546;color:#fff;border-color:#1d5546}

#bank-filters{align-items:end}#bank-filters>p{grid-column:1/-1;margin:0}#bank-filters>button{justify-self:start}
/* Bank reconciliation keeps the source transaction beside invoice choices. */
dialog:has(.bank-match-workspace){max-width:1000px}.bank-match-workspace{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:24px}.bank-match-transaction{background:var(--bg,#f5f6ef);padding:20px;border-radius:8px;overflow-wrap:anywhere}.bank-match-transaction>strong{font-size:24px}.bank-match-choice{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:6px;margin:10px 0;cursor:pointer}.bank-match-choice:has(input:checked){border-color:var(--green,#285c4e);background:#f0f4e9}.bank-match-choice input{width:18px;min-width:18px;margin:3px 0}.bank-match-choice small{color:var(--muted)}#bank-match-candidates{max-height:35vh;overflow:auto}#bank-match-summary{margin-top:12px}@media(max-width:700px){.bank-match-workspace{grid-template-columns:1fr}#bank-match-candidates{max-height:none}}

.time-week{background:white;padding:20px;border:1px solid var(--line);border-radius:8px;margin-bottom:24px}.time-week-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.time-week-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:18px}.time-week-days button{display:flex;flex-direction:column;gap:6px;padding:12px 4px}.time-week-days button[aria-current]{background:var(--green,#285c4e);color:white}.time-week-total{text-align:right}@media(max-width:600px){.time-week{padding:12px}.time-week-days{gap:3px}.time-week-days button{font-size:11px;min-width:0}}
.settings-navigation a[aria-current="page"]{background:var(--green);border-color:var(--green);color:white}
.settings-card[hidden]{display:none}
.topbar-brand-area{display:flex;align-items:center;gap:8px;min-width:0}
.layout>.topbar .topbar-brand-area .brand{margin:0}
#sidebar-toggle{font-size:12px;padding:6px 8px;min-height:44px;flex-shrink:0}
.layout>.sidebar[hidden]{display:none}
@media(min-width:701px){.layout.sidebar-collapsed{grid-template-columns:minmax(0,1fr)}.layout.sidebar-collapsed>.topbar~.workspace{grid-column:1}}
@media(max-width:700px){.layout>.topbar .topbar-brand-area .topbar-brand{font-size:18px}.topbar-brand-area{flex-wrap:wrap}}
.dashboard-recent-description{display:block;color:var(--muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:normal;margin-top:3px}
.product-custom-period[hidden]{display:none}

/* Resultaatgrafieken houden een leesbare tabel als tekstalternatief. */
.profit-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,450px),1fr));gap:20px}.profit-charts>.card{min-width:0}.profit-chart{width:100%;min-width:480px;max-height:340px}
/* Report links stay within the existing sidebar and use native keyboard disclosure. */
.layout .report-sidebar{min-width:0;margin:2px 0;border:0;padding:0}
.layout .report-sidebar>summary{padding:7px 12px;min-height:32px;font-size:14px;line-height:18px;color:var(--ink);cursor:pointer}
.layout .report-sidebar>summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.layout .report-sidebar nav{padding-left:12px;min-width:0}
.layout .report-sidebar nav a{display:block;white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.layout .nav{flex-wrap:wrap;align-items:flex-start}.layout .report-sidebar{flex:1 0 100%;max-width:100%}.layout .report-sidebar>summary{min-height:44px;padding:12px}.layout .report-sidebar nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:0}.layout .report-sidebar nav a{white-space:normal;min-height:44px}}

/* Frisse werkruimte: kleur ondersteunt de tekst en de bestaande bediening. */
:root{--ink:#253b38;--muted:#5c6d69;--green:#21796b;--paper:#f6f8f8;--line:#dfe7e4;--lime:#e3f2eb}
.layout .sidebar{background:#fff}
.layout .nav a{border-radius:8px;color:#425652}
.layout .nav a:hover{background:#edf6f3;color:#155f53}
.layout .nav a.active{background:#21796b;color:#fff;box-shadow:0 2px 5px #155f5320}
.layout button,.layout .button{border-radius:8px;font-weight:600;min-height:40px}
.layout button.primary,.layout .button.primary{background:#21796b;border-color:#21796b;color:#fff;box-shadow:0 2px 4px #164c4015}
.layout button.primary:hover,.layout .button.primary:hover{background:#196355;border-color:#196355}
.layout button:disabled{box-shadow:none;opacity:.5}
.layout .card,.layout .metric{border-radius:12px;box-shadow:0 1px 2px #163b3010}
.layout input:not([type="checkbox"]),.layout select,.layout textarea{border-radius:7px}
.layout>.topbar .topbar-search input{background:#f3f6f5;border-color:#e8eeeb}
.layout .badge{border-radius:6px;font-weight:600;padding:4px 8px}
.layout .badge.paid{background:#21796b;color:#fff}
.layout .badge.posted{background:#fff0cf;color:#805400}
.layout .badge.overdue{background:#fde7e3;color:#9d3328}
.dashboard-overview{max-width:1200px}
.dashboard-work{gap:20px;margin-bottom:28px}
.layout .dashboard-work .card{padding:22px;display:flex;flex-direction:column;border-top:4px solid var(--card-accent)}
.dashboard-bank{--card-accent:#21796b;--card-tint:#edf7f3}
.dashboard-sales{--card-accent:#356fa8;--card-tint:#eef5fc}
.dashboard-purchase{--card-accent:#a97516;--card-tint:#fff8e9}
.dashboard-work h2{font-size:16px;font-weight:600;margin:0 0 18px;min-height:24px}
.dashboard-work-link{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--card-tint);border:1px solid transparent;border-radius:9px;color:var(--ink)}
.dashboard-work-link:hover{border-color:var(--card-accent)}
.dashboard-work-link span{font-size:14px;color:var(--muted)}
.dashboard-work-link strong{font-size:25px;line-height:1.35;font-weight:650;font-variant-numeric:tabular-nums;white-space:normal}
.dashboard-bank .dashboard-work-link strong{font-size:20px;color:#176254}
.dashboard-work .muted,.dashboard-secondary{font-size:13px;line-height:1.6;margin:16px 0 0}
.dashboard-secondary{font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--card-accent)}
.dashboard-add>summary{min-height:44px;padding:12px 22px;cursor:pointer}
.dashboard-add[open]>summary{background:#196355}
.dashboard-add nav{border-radius:10px;padding:8px;box-shadow:0 8px 28px #243e3620}
.dashboard-add nav a{border-radius:6px;font-size:14px;min-height:44px}
.dashboard-recent-row{padding:18px 10px;border-radius:6px}
.dashboard-recent-row:hover{background:#f0f7f4}
.dashboard-recent-row strong{font-size:14px;font-weight:600;line-height:22px}
.dashboard-recent-meta{gap:9px;margin-top:7px;font-size:13px}
.dashboard-recent-amount strong{font-size:16px;font-variant-numeric:tabular-nums}
.dashboard-result-values>div{background:#f0f7f4;border-radius:9px;padding:18px}
.dashboard-result-values>div:nth-child(2){background:#fff8e9}
.dashboard-result-values>div:nth-child(3){background:#eef5fc}
.layout :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid #428a78;outline-offset:3px}
@media(min-width:1001px){.layout .content{padding:32px 28px 64px}}
@media(max-width:700px){.layout button,.layout .button{min-height:44px}.dashboard-work{gap:14px}.layout .dashboard-work .card{padding:18px}.dashboard-recent-row{padding:16px 0;gap:12px}.dashboard-recent-amount strong{font-size:14px}.dashboard-overview .card-header{flex-wrap:wrap;gap:12px}.dashboard-work h2{margin-bottom:12px}}
@media(max-width:700px){.dashboard-add nav{left:0;right:auto;max-width:calc(100vw - 32px)}}
@media(min-width:701px){.layout .nav a,.layout .report-sidebar>summary{font-size:14px;min-height:40px;padding-top:10px;padding-bottom:10px}}

/* Valutaconcepten gebruiken dezelfde formulierindeling als facturen. */
#currency-draft-form fieldset{min-width:0;border:1px solid var(--line)}
#currency-draft-form h2{margin-top:24px}#currency-draft-form .table-wrap{margin:20px 0 12px}
#currency-draft-form td input{min-width:110px}#currency-draft-form td:first-child input{min-width:200px}
#currency-preview{margin:24px 0}#archive-currency-draft{padding:20px;background:var(--white);border:1px solid var(--line);border-radius:12px;max-width:600px}#archive-currency-draft button{margin-top:12px}
.subscription-banner{position:sticky;top:0;z-index:90;margin:0;border-radius:0;border-width:0 0 1px}.subscription-banner p{margin-bottom:6px}.subscription-overlay{position:fixed;inset:0;z-index:95;background:#173a35cc;display:grid;place-items:center;padding:16px;overflow:auto}.subscription-overlay .card{max-width:620px;width:100%;margin:0}.subscription-overlay .exports a,.subscription-banner .exports a{display:inline-block;margin:4px 12px 0 0}
/* Op een smal scherm of bij vergroten wordt het e-mailadres in de kopbalk afgekort; in het accountmenu staat het voluit (WCAG 1.4.4). */
.layout>.topbar details.account>.account-menu>.account-email{margin:0;padding:8px 12px 4px;font-size:13px;color:var(--muted);overflow-wrap:anywhere;max-width:280px}
/* Twee cijferkaarten naast elkaar passen ook op 320 px: een lang woord of bedrag breekt af in plaats van de pagina te verbreden (WCAG 1.4.10). */
.metrics>.metric{min-width:0}
/* Gesloten controles staan onder elkaar; zonder minimale hoogte is elke regel een te klein tikdoel (WCAG 2.5.8). */
.control-check>summary{min-height:24px;padding:3px 0;cursor:pointer}
.control-check li{padding:4px 0}
/* Relaties importeren en samenvoegen: een reden als "Staat al in Boekvonk als ..." breekt af in plaats van buiten beeld te vallen. */
.relatie-beheer td,.relatie-beheer th{white-space:normal;overflow-wrap:break-word}
.relatie-beheer .relatie-voorbeeld{margin-top:18px}
.relatie-beheer .relatie-voorbeeld ul{margin:6px 0 12px;padding-left:20px}

/* /boekvonk.css */
/* Boekvonk: alleen presentatie. De bestaande navigatie en bediening blijven intact. */
:root{--ink:#29252d;--muted:#69616d;--green:#352541;--lime:#eae3f2;--paper:#faf7f2;--bg:#faf7f2;--line:#e3dce7;--white:#fff;--red:#a22c36;--brand:#352541;--action:#c34f2f;--action-hover:#a63e23;color:var(--ink);background:var(--paper)}
body{background:var(--paper);color:var(--ink)}
h1,h2,h3{color:var(--brand)}
a{color:var(--brand)}
button,.button,input,select,textarea{color:var(--ink);border-color:#b9afbf}
button:hover,.button:hover{background:#f3edf7;border-color:#8b7899}
button.primary,.button.primary,.layout button.primary,.layout .button.primary,body.boekvonk-public button:not(.secondary){background:var(--action);border-color:var(--action);color:#fff;box-shadow:0 2px 4px #35254112}
button.primary:hover,.button.primary:hover,.layout button.primary:hover,.layout .button.primary:hover,body.boekvonk-public button:not(.secondary):hover{background:var(--action-hover);border-color:var(--action-hover)}
button.secondary,body.boekvonk-public button.secondary{color:var(--brand);background:#fff;border-color:var(--brand)}
:where(a,button,summary,input,select,textarea):focus-visible,.layout :is(a,button,summary,input,select,textarea):focus-visible,input:focus,select:focus,textarea:focus{outline:3px solid #78558d;outline-offset:3px}
/* Toegankelijkheid: in een datumveld kan de focus op de kalenderknop binnen het veld staan; dan geldt alleen :focus-within.
   Een tabel die opzij schuift, is zelf met Tab te bereiken (public/app-interaction.js) en toont dan ook een rand. */
input:focus-within,.table-wrap[tabindex]:focus-visible{outline:3px solid #78558d;outline-offset:3px}
/* Lange samengestelde woorden (kleinschaligheidsinvesteringsaftrek) breken af in plaats van uit hun vak te steken,
   ook bij 200% vergroten en op 320 px breed (WCAG 1.4.4 en 1.4.10). */
.layout,dialog{overflow-wrap:break-word}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
.boekvonk-logo{display:block;object-fit:contain;width:100%;height:auto;aspect-ratio:705/125;background:#faf7f2;border-radius:4px}
.layout>.topbar .topbar-brand{width:150px;max-width:100%;flex-shrink:1}
.layout>.topbar .topbar-brand .boekvonk-logo{width:150px;max-width:100%;height:auto}
.brand small{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5;margin-top:9px}
.login-story{background:var(--paper);color:var(--brand);border-right:1px solid var(--line)}
.login-story .brand{width:min(100%,340px)}
.login-story p,.login-story .muted{color:var(--muted)}
.login-story .eyebrow{color:#805f91}
.login-form{background:#fff}
.layout .sidebar,.layout>.topbar{background:#fff;border-color:var(--line)}
.layout .nav a{color:#51445b}
.layout .nav a:hover,.layout .report-sidebar>summary:hover{background:#f4eff7;color:var(--brand)}
.layout .nav a.active,.settings-navigation a[aria-current="page"],.report-navigation button.active{background:var(--lime);border-color:#d3c5df;color:var(--brand);box-shadow:none}
.layout>.topbar .topbar-search input{background:var(--paper);border-color:var(--line)}
.layout>.topbar .account summary:hover,.dashboard-add nav a:hover,.dashboard-recent-row:hover{background:#f4eff7}
.company select,.avatar,.pill{background:var(--lime);color:var(--brand)}
.sidebar-foot,.nav-group,.eyebrow{color:var(--muted)}
.layout .card,.layout .metric{box-shadow:0 1px 3px #3525410b;border-color:var(--line)}
th{background:#faf7fc}td,th,.quick{border-color:var(--line)}
.notice:not(.error){background:#f3eef7;border-color:#dbcee4;color:#594267}
.error{background:#fff0f1;color:#a22c36;border-color:#edc4c8}
.hero{background:var(--brand)}.hero h2{color:#fff}.hero p,.hero .eyebrow,.hero-number span{color:#eae3f2}.hero-number strong{color:#f3cebc}
.bar{background:var(--brand)}.bar.cost,.legend b.cost{background:#c9b5d8}.legend b{background:var(--brand)}
.dashboard-bank{--card-accent:#352541;--card-tint:#f0eaf5}
.dashboard-sales{--card-accent:#91432b;--card-tint:#fcf0e9}
.dashboard-purchase{--card-accent:#705287;--card-tint:#f4eff7}
.dashboard-bank .dashboard-work-link strong{color:var(--brand)}
.dashboard-add>summary,.dashboard-add[open]>summary{background:var(--action);border-color:var(--action);color:#fff}
.dashboard-add>summary:hover{background:var(--action-hover)}
.dashboard-result-values>div{background:#f0eaf5}.dashboard-result-values>div:nth-child(2){background:#fcf0e9}.dashboard-result-values>div:nth-child(3){background:#f4eff7}
.bank-match-choice:has(input:checked){border-color:var(--brand);background:#f3eef7}
#toast{background:var(--brand)}dialog::backdrop{background:#21162b70}
.document-workspace iframe{background:var(--paper)}
.boekvonk-public-brand{max-width:850px;margin:28px auto 0;padding:0 24px;color:var(--brand)}
.boekvonk-public-brand .boekvonk-logo{width:200px;max-width:100%}
.boekvonk-public-brand p{font-size:13px;margin:6px 0 0}
.boekvonk-public main{border-color:var(--line)}
.boekvonk-public .eyebrow,.boekvonk-public .line small,.boekvonk-public .note{color:var(--muted)}
.boekvonk-public .line,.boekvonk-public footer,.boekvonk-public .total{border-color:var(--line)}
@media(max-width:700px){.brand small{display:block}.login-story .brand{max-width:280px}.layout>.topbar .topbar-brand .boekvonk-logo{width:135px}.boekvonk-public-brand{padding:0 18px;margin:20px auto}.boekvonk-public main{margin-top:20px}}
/* Telefoon (18 oktober 2026): met -2px plakten de woorden van de inlogkop op 28 tot 32 px tegen elkaar ("Jehoofd vrij."). */
@media(max-width:700px){.login-story h1{letter-spacing:-.5px;line-height:1.15}}
.profit-chart [stroke="#1d5144"]{stroke:var(--brand)}.profit-chart [fill="#1d5144"]{fill:var(--brand)}
.profit-chart [stroke="#8f4e24"]{stroke:var(--action)}.profit-chart [fill="#8f4e24"]{fill:var(--action)}
.profit-chart [stroke="#cbd5d1"]{stroke:var(--line)}.profit-chart [stroke="#526c63"]{stroke:var(--muted)}
/* Grafiek op Vandaag: kosten verschillen van omzet door strepen, niet alleen door kleur (WCAG 1.4.1), en de balken
   halen minstens 3:1 tegen de witte achtergrond (1.4.11). De bedragen staan ook in de tabel Maandbedragen bekijken. */
.bar.cost,.legend b.cost{background:#7f6496 repeating-linear-gradient(135deg,transparent 0 2px,#ffffffb3 2px 4px)}

/* /mobile-app.css */
/* Shared phone ergonomics for Safari, WKWebView and Android WebView. */
@media (max-width:700px) {
 body .layout input:not([type=checkbox]):not([type=radio]),body .layout select,body .layout textarea,body #modal select,body #modal textarea,body #modal input:not([type=checkbox]):not([type=radio]),body #app .paper-editor select,body #app .paper-editor textarea,
 .layout .company select,.layout .topbar input,body .login-box input:not([type=checkbox]):not([type=radio]) {font-size:16px;min-height:44px}
 body button,body .button {min-height:44px}
 dialog {max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
 dialog input,dialog select,dialog textarea {scroll-margin-block:24px}
 .content {padding-bottom:max(32px,env(safe-area-inset-bottom))}
 .table-wrap {overscroll-behavior-x:contain}
 /* Losse vervolglinks op het overzicht waren 17 tot 21 px hoog. */
 .content .dashboard-secondary,.content .card-header>a {display:inline-flex;align-items:center;min-height:44px}
 /* De kopbalk was op een telefoon 209 px hoog: het menu viel onder het logo en het e-mailadres stond los ernaast. Logo en Menu staan nu op één regel. */
 .layout>.topbar {grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center}
 .layout>.topbar .topbar-brand-area {flex-wrap:nowrap}
 .layout>.topbar .topbar-brand,.layout>.topbar .topbar-brand .boekvonk-logo {width:118px}
 .layout>.topbar .account {max-width:46vw;min-width:0}
 /* Met het toetsenbord in beeld schuift de feedbackknop mee omhoog en ligt hij over het veld waarin je typt.
    Velden in het feedbackvenster zelf tellen niet: anders is de knop net verborgen als het venster sluit en de focus terug moet. */
 body:has(:is(input,select,textarea):not(.fb-dialog *):focus):not(:has(.fb-dialog[open])) .fb-launch {display:none}
}

/* Feedback uit de app vraagt een sessie (POST /api/feedback). Op de inlogpagina kan het dus niet en lag de knop over de knop Inloggen. */
body:has(.login-page) .fb-launch {display:none}

/* Op lage telefoons (iPhone SE, en de app met eigen werkbalk) viel de knop Inloggen onder de vouw. Het merkblok wordt daar compacter. */
@media (max-width:700px) and (max-height:760px) {
 .login-story {padding:20px 24px}
 .login-story h1 {font-size:28px;margin-top:16px}
 .login-form {padding:24px 24px 32px}
 .login-box label {margin:14px 0}
}

/* iOS WebKit geeft datumvelden een eigen minimale breedte, waardoor ze op een telefoon buiten het scherm lopen. */
@supports (-webkit-touch-callout:none) {
 input[type=date],input[type=month],input[type=time],input[type=datetime-local] {-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;box-sizing:border-box}
 input[type=date]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value {text-align:left}
}
/* iOS WebKit schaalt een PDF in een iframe niet naar de breedte; op een telefoon valt dan de rechterkant van de factuur weg. De knop Openen in dezelfde kaart toont de volledige PDF. */
@supports (-webkit-touch-callout:none) {
 @media (max-width:700px) {.document-original .document-original-frame {display:none}}
}

/* /context-help.css */
#context-help-open{position:fixed;right:20px;bottom:20px;z-index:35;width:auto;min-height:44px;padding:12px 20px;border:1px solid #685373;border-radius:28px;background:#352541;color:#fff;font:600 14px system-ui;box-shadow:0 6px 24px #35254130}
#context-help-open[hidden]{display:none}
#context-help{inset:auto 20px 20px auto;margin:0;width:min(450px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 40px);padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid #ded6df;border-radius:24px;background:#faf7f2;color:#352541;box-shadow:0 24px 80px #24152c40}
#context-help::backdrop{background:#24152c55}
#context-help .ch-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px;background:#352541;color:white;border-bottom:5px solid #b64d31}
#context-help .ch-header span,#context-help .ch-label{font:600 10px system-ui;letter-spacing:1.5px}
#context-help h2{font:normal 36px/1.15 Georgia,serif;color:white;letter-spacing:-1px;margin:16px 0 0}
#context-help-close{width:auto;min-height:44px;border:1px solid #96879c;border-radius:24px;padding:10px 14px;background:transparent;color:white;font:500 13px system-ui}
#context-help .ch-body{padding:26px}
#context-help h3{font:normal 27px/1.2 Georgia,serif;margin:12px 0;color:#352541}
#context-help p{font:normal 15px/1.7 system-ui;margin:0 0 16px}
#context-help .ch-label{margin:0}
#context-help .ch-note{font-size:12px;color:#65586e}
#ch-detail:empty{display:none}
#context-help .ch-article{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:4px 0 8px}
#ch-article{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:10px;background:#b64d31;color:#fff;font:600 14px/1.4 system-ui;text-decoration:none}
#ch-article-index{display:inline-flex;align-items:center;min-height:44px;color:#8f371f;font:500 14px system-ui;text-decoration:underline;text-underline-offset:3px}
#context-help details{border-block:1px solid #ded6df;padding:16px 0;margin-top:20px}
#context-help summary{font:600 14px/1.5 system-ui;cursor:pointer}
#context-help details p{margin-top:14px}
#context-help .ch-contact{background:#eae2f1;padding:22px;border-radius:14px;margin-top:24px}

#context-help :focus-visible,#context-help-open:focus-visible{outline:3px solid #b64d31;outline-offset:3px}
body:has(#context-help[open]){overflow:hidden}
@media(min-width:521px){body:has(#context-help-open:not([hidden])) .workspace{padding-bottom:80px}}
/* Een knop die met Tab onderaan in beeld schuift, komt boven de zwevende hulpknop uit (WCAG 2.4.11). */
@media(min-width:521px){body:has(#context-help-open:not([hidden])) .workspace :is(a,button,input,select,textarea,summary){scroll-margin-bottom:96px}}
@media(max-width:520px){#context-help{inset:auto 8px 8px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}#context-help .ch-body{padding:22px 22px calc(22px + env(safe-area-inset-bottom))}#context-help-open{position:static;display:block;margin:0 16px calc(24px + env(safe-area-inset-bottom)) auto;box-shadow:none}}
/* Op de donkere kop van het hulpvenster is de oranje focusrand te zwak (minder dan 3:1); daar een witte rand. */
#context-help .ch-header :focus-visible{outline-color:#fff}

/* /bank-import.css */
/* Dialoog bankafschrift importeren en uitleg per bank. */
.bank-import{max-width:100%}
.bank-import-drop{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:18px;border:2px dashed var(--line);border-radius:10px;background:var(--paper);cursor:pointer;margin-bottom:14px}
.bank-import-drop:hover,.bank-import-drop:focus-within,.bank-import-drop.dragging{border-color:var(--green);background:#eef3e6}
.bank-import-drop input[type=file]{max-width:100%}
.bank-import-drop-title{font-weight:600;color:var(--ink)}
.bank-import-file{font-weight:600;overflow-wrap:anywhere}
.bank-import details{margin:10px 0}
.bank-import details summary{cursor:pointer;font-weight:600}
.bank-import-format .badge{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--lime);color:var(--ink);font-weight:600}
.bank-import-result p,.bank-import-mapping p{overflow-wrap:anywhere}
.bank-import-sample{width:100%;font-size:13px}
.bank-import-sample caption{text-align:left;font-weight:600;padding:6px 0}
.bank-import-sample td,.bank-import-sample th{overflow-wrap:anywhere;vertical-align:top}
.bank-import-rows{table-layout:fixed}
.bank-import-rows th,.bank-import-rows td{white-space:normal}
.bank-import-rows th:first-child,.bank-import-rows td:first-child{width:6.5em}
.bank-import-rows th:last-child,.bank-import-rows td:last-child{width:7.5em;white-space:nowrap}
.bank-import-totals{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:12px 0}
.bank-import-totals dt{color:var(--muted)}
.bank-import-totals dd{margin:0;font-weight:600}
.bank-import-mapping label.check{display:flex;gap:8px;align-items:center}
.bank-export-guide details{border-top:1px solid var(--line);margin:0;padding:8px 0}
.bank-export-guide details:last-child{border-bottom:1px solid var(--line)}
.bank-export-guide summary{font-weight:600}
.bank-export-guide ol{margin:4px 0 8px;padding-left:22px}
.bank-export-guide li{margin:2px 0}
.bank-export-guide a{overflow-wrap:anywhere}
.bank-guide-route{font-weight:600;margin:8px 0 2px}
@media (max-width:640px){
 .bank-import-drop{padding:14px}
 .bank-import-sample{font-size:12px}
}
.bank-import-recognized{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 8px}
.bank-import-skipped{border-left:4px solid var(--line);padding:4px 0 4px 12px;margin:12px 0}
.bank-import-skipped h3{margin:0 0 6px;font-size:15px}
.bank-import-skipped ul{margin:0;padding-left:18px}
.bank-import-skipped li{margin:4px 0;overflow-wrap:anywhere}
/* Bankafschrift toevoegen en verwerken in drie stappen. */
.bank-add{margin-bottom:22px}
.bank-add-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:22px 20px;border:2px dashed #ffffff80;border-radius:12px;background:var(--action,var(--green));color:#fff;text-align:center;cursor:pointer;font-size:14px;transition:background .15s}
.bank-add-button:hover,.bank-add-button:focus-within,.bank-add-button.dragging{background:var(--action-hover,#306451);border-color:#fff}
.bank-add-button:focus-within{outline:3px solid #65884a;outline-offset:3px}
.bank-add-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.bank-add-title{font-size:20px;font-weight:700;letter-spacing:-.3px}
.bank-add-hint{font-size:12px;font-weight:400;color:#fff;max-width:460px;line-height:1.5}
.bank-add-compact .bank-add-button{min-height:84px;flex-direction:row;flex-wrap:wrap;gap:4px 14px;padding:16px 20px}
.bank-add-compact .bank-add-title{font-size:17px}
.bank-add-help{margin-top:10px}
.bank-add-help summary{cursor:pointer;font-weight:600}
dialog.bank-process-dialog{max-width:760px}
.bank-process-file{color:var(--muted);font-size:12px;overflow-wrap:anywhere;margin-bottom:8px}
.bank-process-steps{display:grid;gap:18px;margin:14px 0}
.bank-process-steps h3,.bank-process-ready h2,.bank-review h2{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bank-process-list,.bank-review-list,.bank-process-groups,.bank-process-history ul{list-style:none;margin:0;padding:0}
.bank-process-row,.bank-review-group{border-top:1px solid var(--line);padding:10px 0}
.bank-process-row.is-skipped{opacity:.55}
.bank-process-main{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bank-process-what{font-weight:600;overflow-wrap:anywhere;min-width:0}
.bank-process-what small{font-weight:400;color:var(--muted);margin-left:6px}
.bank-process-amount{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.bank-process-amount.in{color:#2f6b3e}
.bank-process-meta{color:var(--muted);font-size:12px;overflow-wrap:anywhere;margin-top:2px}
.bank-process-why{margin-top:4px;font-size:12px}
.bank-process-why summary{cursor:pointer;color:var(--green);font-weight:600}
.bank-process-why p{margin:6px 0;overflow-wrap:anywhere}
.bank-process-tools{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 16px}
.bank-process-tools .bank-process-why{flex:1 1 60%}
.bank-process-skip{display:flex;gap:6px;align-items:center;font-weight:400;font-size:12px;margin-top:4px;color:var(--muted)}
.bank-review-new[hidden]{display:none}
.bank-process-skip input{width:auto;min-height:0}
.bank-process-groups li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:6px 0;font-size:13px}
.bank-process-groups small{color:var(--muted)}
.bank-process-safe{background:#f1f3e5;border:1px solid #dce2c6;border-radius:7px;padding:12px 14px;font-size:12px;color:#4f5b3d;margin:14px 0 0}
.bank-process-summary{background:var(--lime);border-radius:10px;padding:18px 20px;margin-bottom:22px}
.bank-process-summary h2{margin-bottom:6px}
.bank-process-summary p{margin-bottom:10px}
.bank-process-learn{background:#fff;border:2px solid var(--green);border-radius:10px;padding:14px 18px;margin-bottom:22px}
/* Na een keuze schuift de vraag Voortaan automatisch? of de lijst in beeld; niet tegen de rand en, op desktop, onder de vaste bovenbalk (scroll-padding in app.css). */
.bank-process-learn,.bank-review{scroll-margin-top:12px}
.bank-process-learn p{margin-bottom:10px}
.bank-process-run{margin-top:14px;min-height:48px;font-size:15px}
.bank-review-reason{font-size:12px;margin:6px 0 8px;overflow-wrap:anywhere}
.bank-review-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.bank-review-choice .bank-review-new{grid-column:1}
.bank-review-choice button{grid-column:2;grid-row:1;min-height:42px}
.bank-process-history li{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:10px 0;font-size:13px}
@media (max-width:640px){
 .bank-add-button{min-height:96px;padding:18px 14px}
 .bank-add-title{font-size:18px}
 .bank-review-choice{grid-template-columns:1fr}
 .bank-review-choice button{grid-column:1;grid-row:auto;width:100%;min-height:48px}
 .bank-process-run,#bank-process-apply{width:100%;min-height:48px}
 .bank-process-history li{flex-direction:column;align-items:stretch}
 dialog.bank-process-dialog{width:100%;max-width:100%;max-height:100vh;height:100%;margin:0;border-radius:0;padding:20px 16px}
 dialog.bank-process-dialog .form-foot{position:sticky;bottom:-20px;background:#fff;padding:12px 0;margin-top:12px;flex-wrap:wrap}
 dialog.bank-process-dialog .form-foot button{flex:1 1 100%;min-height:48px}
}
.bank-review-vorig{margin:.2rem 0 .4rem;color:var(--green,#1d5143);font-weight:600}

/* /app-interaction.css */
/* Visual feedback only. No reordering or removal of accounting controls. */
.layout button,.layout .button,.nav a,dialog button,input,select,textarea{transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease}
.layout button:not(:disabled):hover,.layout .button:hover,dialog button:not(:disabled):hover{box-shadow:0 3px 12px #35254118}
.layout button:not(:disabled):active,.layout .button:active,dialog button:not(:disabled):active{box-shadow:inset 0 2px 4px #35254124}
button:disabled{cursor:not-allowed;opacity:.55}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px #70528716}
.nav a.active{box-shadow:inset 3px 0 0 var(--action)}
.card,.metric,.dashboard-work-card{box-shadow:0 3px 14px #35254106}
.table-wrap tbody tr:hover{background:#f6f1f8}
.badge.paid{background:#e4f2e9;color:#245e43}.badge.overdue{background:#fbe8e4;color:#963d2e}.badge.posted{background:#fcf0d9;color:#7c5719}
#content[aria-busy=true]{opacity:.65;cursor:progress;transition:opacity .18s ease}
#request-feedback{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:200;background:#352541;color:#fff;border:1px solid #746180;border-radius:24px;padding:10px 20px;box-shadow:0 4px 18px #35254125;font-size:13px;pointer-events:none}
#toast{max-width:min(560px,calc(100vw - 36px));line-height:1.55;box-shadow:0 6px 28px #35254130;border-radius:12px;animation:toast-enter .18s ease-out}
#toast[data-tone=error]{background:#8e342e;color:#fff}
dialog{box-shadow:0 25px 80px #21162b35}dialog::backdrop{backdrop-filter:blur(3px)}
@keyframes toast-enter{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}#toast{animation:none}.layout button,.layout .button,.nav a,dialog button,input,select,textarea,#content{transition:none}}
@media print{#request-feedback,#toast{display:none!important}}
/* Technische controle van de boekhouding: uitklapkoppen en losse links krijgen een klikvlak van minstens 24 px (WCAG 2.5.8). */
.control-checks>details>summary{min-height:24px;padding:3px 0}
.control-checks>details a{display:inline-block;min-height:24px;line-height:24px}
/* Eigen concepten van medewerkers: elke regel een genummerde groep, Regel verwijderen onder de velden. */
.draft-line>legend{font-weight:600;font-size:14px;padding:0 6px}
.draft-line>.remove-draft-line{margin-top:16px}
.draft-line>.remove-draft-line[hidden]{display:none}

/* /first-use.css */
/* Eerste gebruik: checklist Aan de slag, inrichtingswizard en lege lijsten met een volgende stap. */
.first-use-checklist{margin-bottom:22px;border-top:4px solid var(--action,#c34f2f)}
.first-use-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.first-use-head h2{margin:0 0 4px}
.first-use-head p{margin:0}
.first-use-head .link{white-space:nowrap}
.first-use-progress{height:6px;border-radius:3px;background:var(--line,#e3dce7);margin:16px 0 6px;overflow:hidden}
.first-use-progress span{display:block;width:0;height:100%;background:var(--brand,#352541);border-radius:3px}
/* Geen inline stijl: de Content-Security-Policy staat alleen stijlbestanden toe. */
.first-use-progress[data-done="1"] span{width:20%}
.first-use-progress[data-done="2"] span{width:40%}
.first-use-progress[data-done="3"] span{width:60%}
.first-use-progress[data-done="4"] span{width:80%}
.first-use-steps{list-style:none;margin:0;padding:0}
.first-use-steps li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line,#e3dce7)}
.first-use-steps li:last-child{border-bottom:0;padding-bottom:0}
.first-use-steps li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.first-use-steps li.is-done strong{color:var(--muted,#69616d);font-weight:500}
.first-use-steps .button,.first-use-steps button{white-space:nowrap}
.first-use-empty-action{margin-top:16px}
.first-use-wizard .eyebrow{margin:0 0 4px;color:#805f91;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.first-use-wizard h2{margin-top:0}
.first-use-dots{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 18px}
.first-use-dots li{flex:1;height:4px;border-radius:2px;background:var(--line,#e3dce7)}
.first-use-dots li.done,.first-use-dots li.current{background:var(--brand,#352541)}
.first-use-wizard .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.first-use-wizard .fields .wide{grid-column:1/-1}
.first-use-wizard .first-use-note{margin-top:14px;font-size:13px}
.first-use-numbering{margin-top:18px}
.first-use-numbering p{margin:4px 0 0}
.first-use-error-link{font-weight:600;white-space:nowrap}
@media (max-width:640px){
 .first-use-wizard .fields{grid-template-columns:1fr}
 .first-use-head{flex-direction:column;gap:6px}
 .first-use-steps li{flex-direction:column;align-items:stretch;gap:10px}
 .first-use-steps .button,.first-use-steps button{text-align:center;min-height:44px}
 .first-use-wizard .form-foot>*{flex:1 1 100%;min-height:44px;text-align:center}
}

/* /vat-route.css */
.vat-route .card-header{margin-bottom:16px}
.vat-route .card-header p{margin:4px 0 0}
.vat-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vat-step button{width:100%;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 10px;align-items:start;text-align:left;padding:12px;border-radius:8px;font-weight:400;background:#fafbf7}
.vat-step-number{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#edf0e2;color:var(--ink)}
.vat-step-text{min-width:0}
.vat-step-text strong{display:block;font-size:13px}
.vat-step-text small{display:block;color:var(--muted);font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.vat-step-state{grid-column:2;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.vat-step.done .vat-step-number{background:var(--green);color:#fff}
.vat-step.done .vat-step-state{color:var(--green)}
.vat-step.blocked .vat-step-number{background:#fbe7df;color:#9d3328}
.vat-step.blocked .vat-step-state{color:#9d3328}
.vat-step.current button{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset;background:#fff}
.vat-step button[aria-expanded="true"]{background:#f2f5e9}
.vat-step.not_applicable button,.vat-step.optional button{background:#fff}
.vat-step-panel{border-top:1px solid var(--line);padding-top:18px}
.vat-step-panel h3{font-size:16px;margin-bottom:12px}
.vat-checks{list-style:none;margin:0;padding:0}
.vat-check{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.vat-check-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.vat-check p{margin:8px 0 0}
.vat-check .table-wrap{margin-top:8px}
.vat-route-wrap{white-space:normal;min-width:180px}
.vat-route-total td{font-weight:600;background:#fafbf7}
.vat-route-drill>td{background:#fcfcf9;padding:8px 12px 16px}
.vat-route-boxes td{padding-top:11px;padding-bottom:11px}
.vat-route-form input{min-width:90px;min-height:36px;padding:7px 9px}
.vat-route-list{margin:0 0 14px;padding-left:18px;line-height:1.8}
.vat-route-kenmerk{font-variant-numeric:tabular-nums;letter-spacing:.5px;font-size:15px}
.vat-route-icp{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.vat-route-icp summary{cursor:pointer;font-weight:600}
.vat-route .check-label{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:12px 0}
.vat-route .check-label input{width:auto;min-height:0;margin-top:3px}
@media(max-width:1100px){.vat-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.vat-steps{grid-template-columns:1fr}.vat-route-wrap{min-width:140px}}
/* Elektronische suppletie en opgaaf ICP (public/vat-digipoort-filings.mjs). */
.vat-route-filing{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin:.5rem 0 1rem}
.vat-route-filing form{display:grid;gap:.6rem;max-width:44rem}
.vat-route-filing h4{margin:.5rem 0 0}

/* /website/feedback.css */
/* Feedbackknop voor testers, gedeeld door app en website. Linksonder, zodat de hulpknop rechtsonder vrij blijft. */
.fb-launch{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:34;min-height:44px;padding:10px 16px;border:1px solid #b8a6c2;border-radius:22px;background:#faf7f2;color:#352541;font:600 14px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 4px 16px #35254120;cursor:pointer;width:auto}
.fb-launch:hover{background:#f0e9f3}
.fb-launch:focus-visible,.fb-dialog :focus-visible{outline:3px solid #b64d31;outline-offset:3px}
.fb-dialog{position:fixed;inset:auto auto 16px 16px;margin:0;width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #ded6df;border-radius:20px;background:#faf7f2;color:#352541;box-shadow:0 24px 80px #24152c40;overflow:auto;overscroll-behavior:contain;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.fb-dialog::backdrop{background:#24152c55}
.fb-form{display:grid;gap:10px;padding:20px 22px 22px}
.fb-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fb-header h2{margin:0;font:600 22px/1.2 Georgia,"Times New Roman",serif;color:#352541}
.fb-dialog button{min-height:44px;border-radius:22px;font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;width:auto}
.fb-close{padding:8px 16px;border:1px solid #b8a6c2;background:#fff;color:#352541}
.fb-intro{margin:0;color:#5f5565;font-size:14px}
.fb-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;border:0}
.fb-kinds legend{padding:0;margin-bottom:6px;font-weight:600}
.fb-kinds label{display:inline-flex;font-weight:400;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid #ded6df;border-radius:22px;background:#fff;cursor:pointer}
.fb-kinds label:has(input:checked){border-color:#352541;background:#eae2f1}
.fb-kinds input{margin:0;accent-color:#352541;width:auto;min-height:0;padding:0}
.fb-dialog label{font-size:15px;line-height:1.5}
.fb-field{display:block;font-weight:600}
.fb-optional{font-weight:400;color:#5f5565}
.fb-dialog textarea,.fb-dialog input[type=email]{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border:1px solid #b8a6c2;border-radius:10px;background:#fff;color:#352541;font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}
.fb-dialog textarea{resize:vertical;min-height:120px}
.fb-hint{margin:-4px 0 0;color:#5f5565;font-size:13px}
.fb-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fb-status{margin:0;min-height:1.5em;color:#316c59;font-weight:600}
.fb-status.fb-error{color:#9a3a22}
.fb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.fb-send{padding:10px 22px;border:1px solid #352541;background:#352541;color:#fff}
/* De algemene hoverregel van de app (button:hover) maakte deze knop lichtpaars met witte tekst, contrast 1,1:1. */
.fb-send:hover,.fb-send:focus-visible{background:#4a3858;border-color:#4a3858;color:#fff}
.fb-send:disabled{opacity:.6;cursor:progress}
.fb-overview{color:#352541;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.fb-overview[hidden],.fb-email[hidden]{display:none}
.fb-link{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:34;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #b8a6c2;border-radius:22px;background:#faf7f2;color:#352541;font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;box-shadow:0 4px 16px #35254120}
@media(max-width:520px){
 .fb-launch,.fb-link{left:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:8px 14px;font-size:13px}
 .fb-dialog{inset:auto 8px 8px 8px;width:auto;max-height:calc(100dvh - 16px)}
 .fb-form{padding:16px}
 /* De laatste regels van de app schuiven onder de knop vandaan, ook op pagina's zonder hulpknop. */
 body:has(.fb-launch) .layout .content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* Zolang je met het toetsenbord door de pagina gaat, wijkt de zwevende knop, zodat hij het element met de focus niet
   bedekt (WCAG 2.4.11). Een element dat al in beeld staat, scrolt geen browser vanzelf onder de knop vandaan; op een
   iPhone, met minder hoogte, lag hij zo over knoppen als Meer opties. Krijgt de knop zelf de focus, dan is hij er weer. */
body:has(:focus-visible:not(.fb-launch,.fb-dialog *)) .fb-launch{opacity:0;pointer-events:none}
@media print{.fb-launch,.fb-link,.fb-dialog{display:none}}

/* /brand-settings.css */
/* Instellingen, onderdeel Huisstijl. --merkkleur zet brand-settings.js. */
.brand-settings{--merkkleur:#1f2937}
.brand-settings [hidden]{display:none}
.brand-settings fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}
.brand-settings legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.brand-settings-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
.brand-settings .actions{margin-top:12px}
.brand-color-inputs{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:end}
.brand-color-inputs input[type="color"]{padding:4px;height:42px;cursor:pointer}
.brand-color-check{font-size:12px;margin:10px 0 0;min-height:20px}
.brand-color-check[data-tone="error"]{color:var(--red)}
.brand-color-check[data-tone="ok"]{color:var(--green)}
.brand-logo-status{font-size:12px;margin-bottom:10px}
.brand-preview{background:#f4f5f0;border:1px solid var(--line);border-radius:8px;padding:16px}
.brand-preview-doc{background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px 18px 16px;box-shadow:0 2px 8px #243e3610;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#111827}
.brand-preview-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.brand-preview-logo{min-height:30px;max-width:60%}
.brand-preview-logo img{display:block;max-width:100%;max-height:34px;object-fit:contain;object-position:left top}
.brand-preview-logo strong{color:var(--merkkleur);font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.brand-preview-address{font-size:9px;line-height:1.5;color:#6b7280;text-align:right}
.brand-preview-rule{height:2px;background:var(--merkkleur);margin:12px 0 12px}
.brand-preview-kind{font-size:8px;letter-spacing:1.4px;color:#6b7280;margin:0}
.brand-preview-number{font-size:16px;font-weight:700;color:var(--merkkleur);margin:0 0 12px}
.brand-preview-line,.brand-preview-total{display:flex;justify-content:space-between;gap:10px;font-size:11px}
.brand-preview-line{border-bottom:1px solid #e5e7eb;padding-bottom:8px;margin-bottom:8px}
.brand-preview-total{font-size:13px;font-weight:700;color:var(--merkkleur);border-top:1.5px solid var(--merkkleur);padding-top:6px;margin-left:40%}
.brand-preview-mail{margin-top:12px}
.brand-preview-button{display:inline-block;background:var(--merkkleur);color:#fff;font-size:12px;font-weight:600;border-radius:6px;padding:8px 16px}
@media(max-width:820px){.brand-settings-grid{grid-template-columns:1fr}.brand-color-inputs{grid-template-columns:80px minmax(0,1fr)}}

/* /ib-overview.css */
.ib-overview .ib-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ib-overview .ib-inline label{flex:1 1 180px;max-width:260px}
.ib-overview .ib-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin:6px 0}
.ib-overview .ib-check input{width:auto;min-height:0;margin:0}
.ib-overview .ib-choices{display:flex;flex-wrap:wrap;gap:6px 22px}
.ib-overview tr.ib-group th,.ib-overview tr.ib-group td{background:#fafbf7;color:var(--ink);font-size:12px;text-transform:none;letter-spacing:0;font-weight:700}
.ib-overview tr.ib-total th,.ib-overview tr.ib-total td{font-weight:700;border-top:2px solid var(--line);font-size:13px;color:var(--ink);text-transform:none;letter-spacing:0;background:#fff}
.ib-overview td.ib-indent{padding-left:28px;white-space:normal}
.ib-overview td.ib-wrap{white-space:normal}
.ib-overview .ib-checks{list-style:none;padding:0;margin:0}
.ib-overview .ib-checks>li{padding:12px 0;border-bottom:1px solid var(--line);line-height:1.6}
.ib-overview .ib-checks>li:last-child{border-bottom:0}
.ib-overview .ib-checks ul{margin:6px 0 0;padding-left:20px;font-size:12px}
.ib-overview .ib-facilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ib-overview .ib-facilities article{border:1px solid var(--line);border-radius:8px;padding:18px;min-width:0}
.ib-overview details{margin-top:14px}
.ib-overview details summary{cursor:pointer;font-weight:600;color:var(--green)}
.ib-overview #ib-rubrics label{max-width:520px;margin:10px 0}
.ib-overview .ib-balances .card{margin-bottom:0}
.ib-overview .ib-balances{margin-bottom:22px}
@media(max-width:700px){.ib-overview .ib-facilities{grid-template-columns:1fr}.ib-overview .ib-inline label{max-width:none}.ib-overview .heading .actions{width:100%}}
/* Losse bronlinks zijn minstens 24 px hoog, zodat je ze op een telefoon raakt (WCAG 2.5.8). */
.ib-overview li>a,.ib-overview .source-link a{display:inline-block;padding-block:4px}

/* /overstap.css */
/* Scherm Overstappen */
.overstap-steps{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1rem;padding:0}
.overstap-steps li{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border:1px solid var(--line,#ddd);border-radius:999px;color:var(--muted,#666);font-size:.9rem;background:var(--surface,#fff)}
.overstap-steps li span{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--line,#e4e4e4);font-weight:600;font-size:.8rem}
.overstap-steps li.done{color:inherit}
.overstap-steps li.done span{background:#1d5143;color:#fff}
.overstap-steps li.current{border-color:var(--green);color:var(--green);font-weight:600}
.overstap-steps li.current span{background:var(--green);color:#fff}
.overstap-card h3{margin-top:1.2rem}
.overstap-instructions li{margin:.35rem 0}
.overstap-bar{width:100%;height:1rem;accent-color:var(--green)}
.overstap-checks{list-style:none;padding:0}
.overstap-checks li{margin:.45rem 0}
.overstap-table td,.overstap-table th{white-space:nowrap}
.overstap-table td:first-child{white-space:normal}
.overstap-report details{margin:.5rem 0}
.overstap-undo{margin-top:1rem;padding:1rem;border:1px solid #b3261e;border-radius:8px}
.overstap-confirm{display:flex;gap:.5rem;align-items:center}
.overstap .form-foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
@media (max-width:600px){.overstap-steps li{font-size:.8rem;padding:.25rem .5rem}}
.overstap-intro h2{font-size:22px}
.overstap-promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:12px 0 16px}
.overstap-promise div{background:#f6f7ef;border:1px solid var(--line,#e3e5dc);border-radius:8px;padding:14px}
.overstap-promise p{margin:6px 0 0;font-size:13px}
.overstap-complete{background:#e8f2e8;border:1px solid #bcd8bc;border-radius:8px;padding:16px 18px;margin-bottom:18px}
.overstap-complete strong{font-size:17px;color:var(--green)}
.overstap-complete p{margin:6px 0 0}
@media (max-width:700px){.overstap-promise{grid-template-columns:1fr}}
.overstap-next{margin:1rem 0;padding:14px 16px;border:1px solid var(--line,#e3e5dc);border-radius:8px;background:#f6f7ef}
.overstap-next h3{margin:0 0 .6rem}
.overstap-checks-ok{display:flex;gap:.5rem;align-items:center;margin:1rem 0 .3rem}
.overstap-table small{color:var(--muted,#666)}
@media (max-width:600px){.overstap-table{font-size:13px}.overstap-table td,.overstap-table th{padding:8px 5px}.overstap-table th{white-space:normal}.overstap-table td:first-child{hyphens:auto;overflow-wrap:break-word}.overstap-table .badge{padding-inline:6px}}
.overstap-files td{white-space:normal;overflow-wrap:anywhere}
.overstap-report details>summary,.overstap-card details>summary{min-height:28px;padding:4px 0;cursor:pointer;display:list-item}
/* Knoppen bij Nog door jou te doen: naast elkaar, op de telefoon onder elkaar met ruimte om te tikken. */
.overstap-todo-actie{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.recurring-overstap{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.recurring-overstap li{padding-bottom:12px;border-bottom:1px solid var(--line,#e5e7eb)}
.recurring-overstap li:last-child{border-bottom:0}
.recurring-overstap button{margin-top:6px}

/* /vandaag.css */
/* Eigen gezicht van Boekvonk: startscherm Vandaag, het gegroepeerde hoofdmenu, Cijfers, Nog te ontvangen en eenvoudige formulieren.
   Alleen presentatie, in de kleuren van public/boekvonk.css. Geen inline stijl: de Content-Security-Policy staat die niet toe. */

/* Hoofdmenu in groepen */
.layout .nav .menu-groep{display:flex;flex-direction:column;margin:0 0 10px;min-width:0}
.layout .nav .menu-groep-titel{display:block;margin:10px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.layout .nav .menu-meer{margin:0 0 10px}
.layout .nav .menu-meer>summary{padding:7px 12px;min-height:32px;font-size:14px;line-height:18px;color:var(--muted);cursor:pointer;border-radius:4px}
.layout .nav .menu-meer>summary:hover{background:#f4eff7;color:var(--brand)}
.layout .nav .menu-meer>a{display:block;padding-left:22px}
.layout .report-sidebar .report-sidebar-group{display:block;margin:10px 12px 2px;font-size:11px;font-weight:600;color:var(--muted)}
@media(max-width:700px){
 .layout .nav .menu-groep,.layout .nav .menu-meer{flex:1 0 100%;flex-direction:row;flex-wrap:wrap;gap:4px;margin:0 0 6px}
 .layout .nav .menu-groep-titel{flex:1 0 100%;margin:8px 4px 2px}
 .layout .nav .menu-meer>summary{flex:1 0 100%;min-height:44px;padding:12px}
 .layout .nav .menu-meer>a{padding-left:12px}
 .layout .report-sidebar .report-sidebar-group{grid-column:1/-1;margin:12px 4px 2px}
}

/* Uren: de velden van de gekozen invoerwijze, zonder eigen plek in het raster van het formulier */
.tijd-velden{display:contents}
.tijd-velden[hidden]{display:none}

/* Cijfers: de rapportkiezer op de pagina in drie groepen, ingeklapt achter de naam van het huidige rapport */
.report-keuze{margin:0 0 20px;border-bottom:1px solid var(--line);padding-bottom:12px}
.report-keuze>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:44px;cursor:pointer;list-style-position:inside;font-size:14px}
.report-keuze>summary .report-keuze-huidig{font-weight:600;color:var(--brand,inherit)}
.report-keuze>summary .report-keuze-actie{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.report-keuze[open]>summary{margin-bottom:10px}
.report-keuze .report-navigation{margin:0;border-bottom:0;padding-bottom:0}
.report-navigation .report-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 0 100%}
.report-navigation .report-group-title{flex:0 0 100%;font-size:12px;font-weight:600;color:var(--muted);margin-top:4px}

/* Startscherm Vandaag */
.vandaag-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.vandaag-winst{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:10px 14px;border-radius:8px;background:#fcf0e9;text-decoration:none;color:var(--brand)}
.vandaag-winst span{font-size:12px;color:var(--muted)}
.vandaag-winst strong{font-size:22px}
.vandaag-winst:hover{background:#f8e3d6;color:var(--brand)}
@media(max-width:700px){.vandaag-winst{align-items:flex-start;width:100%}}
.vandaag-kop h1{margin:0 0 4px;font-size:30px}
.vandaag-kop p{margin:0;color:var(--muted)}
.vandaag-kop .vandaag-datum::first-letter{text-transform:uppercase}
.vandaag-kop .vandaag-datum{font-size:13px;font-weight:600;color:#805f91;margin-bottom:2px}
.vandaag-taken{margin:0 0 22px}
.vandaag-taken>h2{font-size:18px;margin:0 0 10px}
.taken-lijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.taak{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:8px;padding:16px 18px}
.taak.taak-late{border-left-color:var(--red)}
.taak.taak-soon{border-left-color:var(--action)}
.taak-tekst{min-width:0}
.taak-tekst strong{display:block;font-size:16px;color:var(--brand);line-height:1.35}
.taak-tekst p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.taak-label{display:inline-block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--action)}
.taak-late .taak-label{color:var(--red)}
.taak .button{white-space:nowrap;flex-shrink:0}
.taken-leeg{background:#fff;border:1px dashed #cdbfd8;border-radius:8px;padding:18px}
.taken-leeg strong{display:block;color:var(--brand);font-size:16px}
.taken-leeg p{margin:4px 0 0;color:var(--muted)}
.vandaag-snel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 22px}
.snel-knop{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--lime);border:1px solid #d9cce4;border-radius:8px;text-decoration:none;color:var(--brand)}
.snel-knop:hover{background:#e0d5ec;color:var(--brand)}
.snel-knop strong{font-size:15px}
.snel-knop span{font-size:12px;color:var(--muted)}
/* Op de donkerdere hoverkleur was de grijze uitleg te licht (4,2:1); nu minstens 4,5:1 (WCAG 1.4.3). */
.snel-knop:hover span,.vandaag .snel-bank .bank-add-button:hover .bank-add-hint,.vandaag .snel-bank .bank-add-button.dragging .bank-add-hint{color:#4f4755}
/* De knop Bankafschrift toevoegen van de bankroute als tegel in dezelfde rij: bestand kiezen of erop slepen. */
.snel-bank .bank-add{margin:0;height:100%}
.vandaag .snel-bank .bank-add-button{min-height:0;height:100%;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:3px;padding:14px 16px;border:1px dashed #b9a6c8;border-radius:8px;background:var(--lime);color:var(--brand);text-align:left}
.vandaag .snel-bank .bank-add-button:hover,.vandaag .snel-bank .bank-add-button.dragging{background:#e0d5ec;border-color:var(--brand)}
.vandaag .snel-bank .bank-add-title{font-size:15px;letter-spacing:0;color:var(--brand)}
.vandaag .snel-bank .bank-add-hint{font-size:12px;color:var(--muted);opacity:1}
.vandaag-stand .card-header select{width:105px}
.stand-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.stand-tegel{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:8px;background:#f6f2f9;text-decoration:none;color:var(--ink)}
a.stand-tegel:hover{background:#efe8f5;color:var(--ink)}
.stand-tegel span{font-size:12px;color:var(--muted)}
.stand-tegel strong{font-size:24px;font-weight:600;color:var(--brand)}
.stand-tegel small{font-size:12px;color:var(--muted);line-height:1.45}
.stand-winst{background:#fcf0e9}
.stand-maanden>summary{cursor:pointer;font-weight:600;color:var(--brand);padding:6px 0}
@media(max-width:1000px){.vandaag-snel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .vandaag-kop h1{font-size:26px}
 .taak{flex-direction:column;align-items:stretch;gap:12px}
 .taak .button{text-align:center}
 .stand-tegels{grid-template-columns:1fr}
}

/* Nog te ontvangen */
.nog-ontvangen-samen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nog-ontvangen-samen>div{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:8px;background:#f6f2f9}
.nog-ontvangen-samen>div.is-te-laat{background:#fff0f1}
.nog-ontvangen-samen span,.nog-ontvangen-samen small{font-size:12px;color:var(--muted)}
.nog-ontvangen-samen strong{font-size:24px;color:var(--brand)}
.nog-ontvangen-lijst{list-style:none;margin:0;padding:0}
.nog-ontvangen-lijst li{border-top:1px solid var(--line)}
.nog-ontvangen-lijst a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;text-decoration:none;color:var(--ink)}
.nog-ontvangen-lijst a>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.nog-ontvangen-lijst small{color:var(--muted);font-size:12px}
.nog-ontvangen-status{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nog-ontvangen-klant .card-header strong{font-size:18px;color:var(--brand)}
@media(max-width:700px){.nog-ontvangen-samen{grid-template-columns:1fr}.nog-ontvangen-lijst a{flex-direction:column;align-items:flex-start}}

/* Eenvoudige formulieren: zelden gebruikte velden achter Meer opties */
#document-form:not(.meer-open) .meer-optie{display:none!important}
.meer-opties-balk{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:16px 0}
.meer-opties-balk .meer-opties-knop{font-weight:600}
.meer-opties-balk .meer-opties-uitleg{margin:0;font-size:12px}
.meer-opties-blok{margin-top:16px}
.meer-opties-blok>summary{cursor:pointer;font-weight:600;color:var(--brand);padding:8px 0}

/* Volgende stap op een documentpagina */
.volgende-stap{background:#f3eef7;border:1px solid #dbcee4;border-left:5px solid var(--action);border-radius:8px;padding:12px 16px;margin:0 0 16px;color:#594267}
.volgende-stap strong{color:var(--brand);margin-right:6px}
.fields .veld-uitleg{grid-column:1/-1;margin:-6px 0 0;font-size:12px}

/* Korte uitleg van vaktermen */
.woorden-uitleg{margin:0 0 16px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 16px}
.woorden-uitleg>summary{cursor:pointer;font-weight:600;color:var(--brand)}
.woorden-uitleg dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 16px;margin:12px 0 4px}
.woorden-uitleg dt{font-weight:600;color:var(--brand)}
.woorden-uitleg dd{margin:0;color:var(--muted)}
@media(max-width:700px){.woorden-uitleg dl{grid-template-columns:1fr}.woorden-uitleg dd{margin-bottom:6px}}

/* Logboek: de gegevens bij een regel als korte lijst */
.logboek-gegevens{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0 0 6px;white-space:normal}
.logboek-gegevens dt{color:var(--muted)}
.logboek-gegevens dd{margin:0}

/* Vaste facturen: de vijf knoppen per planning lopen door naar een volgende regel in plaats van buiten de kaart */
td.recurring-acties{white-space:normal;min-width:220px}
td.recurring-acties>*{margin:0 6px 6px 0}
/* Na een overstap: rustig groen blok boven de taken */
.vandaag-overstap{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:0 0 18px;padding:14px 18px;border:1px solid #bcd8bc;border-left:4px solid var(--green,#1d5143);border-radius:8px;background:#eef6ee}
.vandaag-overstap h2{margin:0 0 4px;font-size:17px;color:var(--green,#1d5143)}
.vandaag-overstap p{margin:0}
.vandaag-overstap .vandaag-overstap-welkom{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4a6b56}
.vandaag-overstap-bijna{border-color:#e6d3a8;border-left-color:var(--action,#b0532c);background:#fbf5e8}
.vandaag-overstap-bijna h2{color:inherit}
@media (max-width:700px){.vandaag-overstap{flex-direction:column;align-items:flex-start}}
.vandaag-overstap .button{white-space:nowrap}

/* /ritten.css */
/* Scherm Ritten. Bouwt voort op de onderdelen van Vandaag (public/vandaag.css): kop, taken, snelknoppen en tegels.
   Alleen presentatie. Geen inline stijl: de Content-Security-Policy staat die niet toe. */
.ritten .card{margin-bottom:22px}
/* Met Tab scrolt de browser een element net in beeld; houd dan ruimte vrij voor de zwevende knoppen Hulp bij deze pagina
   en Feedback onderin, zodat de focus niet verborgen raakt (WCAG 2.4.11). */
.ritten :is(a,button,input,select,summary){scroll-margin-bottom:96px}
.ritten .taak{align-items:center}
.ritten-boek-knoppen{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex-shrink:0}
.ritten-boek-knoppen button{white-space:nowrap}
.ritten-vast{margin:0 0 16px}
.ritten-vast h3{margin:0 0 2px;font-size:15px}
.ritten-vast .muted{margin:0 0 10px}
.ritten-snel{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.ritten-snel .snel-knop{text-align:left;align-items:flex-start;justify-content:flex-start;cursor:pointer;font:inherit;min-height:44px}
.ritten-snel .snel-knop span,.ritten-rit-tekst,.ritten-rit-tekst strong,.ritten-boeking span{overflow-wrap:anywhere}
.ritten-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.ritten-velden label,.ritten-velden .ritten-veld{display:flex;flex-direction:column;gap:4px;min-width:0}
.ritten-velden .ritten-breed{grid-column:1/-1}
.ritten-velden input,.ritten-velden select{width:100%;box-sizing:border-box}
.ritten-velden small{font-weight:400}
.ritten-form .ib-check,.ritten-velden .ib-check{flex-direction:row;align-items:center;gap:8px;margin:12px 0 4px}
.ritten-velden .ib-check input{width:auto;flex:0 0 auto;min-height:0}
/* De algemene knopstijl zet display op knoppen; verborgen onderdelen moeten ook echt weg zijn. */
.ritten [hidden]{display:none}
.ritten-meer{margin:8px 0}
.ritten-meer>summary{cursor:pointer;font-weight:600;color:var(--brand);padding:8px 0;min-height:24px}
.ritten-meer>.ritten-velden{margin:8px 0}
.ritten-form .form-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ritten-maand{margin:18px 0 0}
.ritten-maand h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:15px}
.ritten-maand h3 .muted{font-weight:400}
.ritten-ritlijst,.ritten-boekingen{list-style:none;margin:0;padding:0}
.ritten-rit,.ritten-boeking{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.ritten-rit-tekst,.ritten-boeking>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.ritten-rit-tekst span,.ritten-boeking span{color:var(--muted);font-size:13px}
.ritten-rit-tekst small{font-size:12px}
.ritten-rit-cijfers,.ritten-boeking-bedrag{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;flex-shrink:0}
.ritten-rit-cijfers span{color:var(--muted);font-size:13px}
.ritten-acties{display:flex;gap:6px}
.ritten-boeking.is-teruggedraaid strong{text-decoration:line-through}
.ritten-terugdraaien summary{cursor:pointer;color:var(--brand);font-size:13px;padding:4px 0}
.ritten-terugdraaien form{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:6px}
.ritten-uitleg ul{margin:0 0 10px;padding-left:20px;line-height:1.55}
@media(max-width:1000px){.ritten-snel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .ritten-boek-knoppen{justify-content:stretch}
 .ritten-boek-knoppen button{flex:1 1 100%;min-height:44px}
 .ritten-snel{grid-template-columns:1fr}
 .ritten-velden{grid-template-columns:1fr}
 .ritten-form .form-foot button{flex:1 1 100%;min-height:44px}
 .ritten-velden input:not([type=checkbox]),.ritten-velden select{min-height:44px;font-size:16px}
 .ritten-rit,.ritten-boeking{flex-direction:column;gap:6px}
 .ritten-rit-cijfers,.ritten-boeking-bedrag{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left}
 .ritten-acties button{min-height:44px}
 .ritten-terugdraaien form{align-items:stretch}
}

/* /welcome-series.css */
/* Welkomstreeks: de tip op Vandaag en de instelling bij Instellingen. Zie public/welcome-series.js. */
.welkomst-tip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--card-tint,#f0eaf5);border:1px solid var(--line,#e3dce7);border-radius:8px;padding:16px 18px;margin:0 0 22px}
.welkomst-tip-tekst{flex:1 1 320px;min-width:0;padding-right:72px}
.welkomst-tip-label{margin:0 0 2px;font-size:12px;font-weight:600;color:#805f91}
.welkomst-tip h2{margin:0 0 4px;font-size:17px}
.welkomst-tip-tekst p:last-child{margin-bottom:0}
.welkomst-tip-acties{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.welkomst-tip-acties .button,.welkomst-tip-acties button{white-space:nowrap}
.welkomst-tip .welkomst-tip-sluiten{position:absolute;top:8px;right:8px;border:0;background:transparent;padding:6px 8px;font-size:13px;font-weight:500;color:var(--muted,#69616d)}
.welkomst-tip .welkomst-tip-sluiten:hover{background:#fff;color:var(--ink,#29252d)}
.welkomst-tip-weg{margin:0 0 22px}
.welkomst-keuzes{display:grid;gap:12px;margin:8px 0 6px}
.welkomst-keuzes .check-label input{width:auto;min-height:0}
@media(max-width:700px){
 .welkomst-tip{padding:14px 14px 16px}
 .welkomst-tip-tekst{flex-basis:100%;padding-right:64px}
 .welkomst-tip-acties{width:100%}
 .welkomst-tip-acties .button{flex:1 1 auto}
}

/* /deadlines.css */
/* Deadlines: de melding op Vandaag, de knop Al gedaan bij een taak en het blok bij Instellingen. Zie public/deadlines.js. */
.deadline-meldingen{background:#fcf0e9;border:1px solid #efcdb9;border-left:5px solid var(--action,#c34f2f);border-radius:8px;padding:14px 18px;margin:0 0 22px}
.deadline-meldingen>h2{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a3a20}
.deadline-meldingen ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.deadline-melding{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.deadline-melding-tekst{flex:1 1 320px;min-width:0}
.deadline-melding-tekst strong{display:block;font-size:16px;color:var(--brand,#352541);line-height:1.35}
.deadline-melding-tekst p{margin:4px 0 0;color:#4f4755;font-size:13px;line-height:1.5}
.deadline-melding-acties{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.deadline-melding-acties .button{white-space:nowrap}
.deadline-weg{margin:0 0 22px}
.deadline-agenda{margin:-12px 0 22px;font-size:13px;color:var(--muted,#69616d)}
.deadline-agenda a{white-space:nowrap}
.taak-acties{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.taak-acties .taak-gedaan{font-size:13px;padding:6px 4px;min-height:32px}
.taak.taak-gedaan-weg{border-left-color:var(--line,#e3dce7)}
.taak.taak-gedaan-weg .deadline-weg{margin:0}
.deadline-instellingen .deadline-winst{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.deadline-instellingen .deadline-winst label{flex:0 1 280px}
.deadline-instellingen .check-label input{width:auto;min-height:0}
.deadline-instellingen h3{font-size:15px;margin:18px 0 6px}
.deadline-komend{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.deadline-komend li{display:flex;gap:12px;flex-wrap:wrap}
.deadline-komend strong{min-width:9.5em}
@media(max-width:700px){
 .deadline-meldingen{padding:12px 14px}
 .deadline-melding-acties{width:100%}
 .deadline-melding-acties .button{flex:1 1 auto}
 .taak-acties{width:100%;align-items:stretch}
 .deadline-agenda{margin-top:-8px}
}

/* /eerste-uur.css */
/* Ronde Eerste uur, 18 oktober 2026 (docs/EERSTE-UUR-20261018.md). */
/* De feedbackknop staat op een groot scherm naast het menu en niet erover: anders bedekt hij het laatste menu-item. */
@media(min-width:701px){body:has(.layout:not(.sidebar-collapsed)) .fb-launch{left:256px}}
/* Aan de slag op de telefoon: het label Klaar staat naast de stap, niet als brede groene balk eronder. */
@media(max-width:640px){.first-use-steps li.is-done{flex-direction:row;align-items:center;justify-content:space-between}.first-use-steps li.is-done .badge{flex:none}}
/* Uitgave: de omschrijving krijgt de volle breedte, ook als er een markering Ingelezen boven de regel staat.
   Verwijder staat rechts onder de regel, in leesbare tekst. */
.line-row>.ingelezen-regel+label{grid-column:1/-1}
.purchase-source-editor .line-row>.remove-line{grid-column:-2/-1;justify-self:end;font-size:12px;padding:7px 12px;min-height:32px}
/* Op de telefoon staan de documentgegevens van een uitgave onder elkaar; twee kolommen kapten de leverancier af. */
@media(max-width:700px){.purchase-source-editor .fields.three{grid-template-columns:minmax(0,1fr)}}
/* Geen weeswoorden in koppen: de browser verdeelt de woorden over de regels. */
h1,h2,h3,.first-use-steps strong{text-wrap:balance}
/* Het hulpvenster op de telefoon: de kop past op één regel naast Sluiten. */
@media(max-width:520px){#context-help .ch-header h2{font-size:26px;letter-spacing:-.5px}}
/* Paginakop: de titel en de uitleg houden hun ruimte. Zijn er veel knoppen (zoals bij een geboekte factuur),
   dan schuiven die als geheel naar een eigen regel in plaats van de uitleg in een smal kolommetje te drukken. */
@media(min-width:701px){.heading{flex-wrap:wrap;align-items:flex-start}.heading>div:first-child{flex:1 1 300px;min-width:0}.heading>.actions{flex:0 1 auto}}
/* Btw: het technische exportpakket, en bij Gebruikers de externe leessleutels: ingeklapt, maar ogend als een gewone kaart. */
details:is(.vat-candidate,.toegang-geavanceerd)>summary{cursor:pointer;list-style:none;display:grid;gap:4px}
details:is(.vat-candidate,.toegang-geavanceerd)>summary::-webkit-details-marker{display:none}
details:is(.vat-candidate,.toegang-geavanceerd)>summary h2{margin:0;display:flex;align-items:center;gap:10px}
details:is(.vat-candidate,.toegang-geavanceerd)>summary h2::before{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent currentColor;transition:transform .15s}
details:is(.vat-candidate,.toegang-geavanceerd)[open]>summary h2::before{transform:rotate(90deg)}
details:is(.vat-candidate,.toegang-geavanceerd)[open]>summary{margin-bottom:14px}
@media(prefers-reduced-motion:reduce){details:is(.vat-candidate,.toegang-geavanceerd)>summary h2::before{transition:none}}
/* Op de telefoon staan de knoppen van een paginakop in een rustig raster van gelijke breedte. */
@media(max-width:700px){.heading>.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));width:100%}.heading>.actions>:is(a,button,select,label){width:100%;min-width:0}}
/* Ronde Tweede uur, 18 oktober 2026 (docs/TWEEDE-UUR-20261018.md). */
/* Een keuzelijst in een paginakop op de telefoon krijgt de hele breedte, anders valt "Kwartaal 3 van 2026" weg. */
@media(max-width:700px){.heading>.actions>select{grid-column:1/-1}}
/* Btw-route op de telefoon: acht stappen als korte regels met nummer, naam en stand; alleen de huidige stap toont zijn uitleg. De uitleg van de andere stappen blijft voorgelezen (alleen visueel verborgen). */
@media(max-width:700px){.vat-steps{grid-template-columns:minmax(0,1fr);gap:6px}.vat-step button{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;padding:10px 12px}.vat-step-number{grid-row:auto}.vat-step:not(.current) .vat-step-text small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.vat-step-state{grid-column:3;text-align:right;white-space:nowrap}}
/* Uitnodigingen als nette lijst: wie, welke toegang en de stand, met Intrekken rechts. */
.uitnodigingen{list-style:none;margin:0;padding:0}
.uitnodigingen li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.uitnodigingen li:first-child{border-top:0}
.uitnodiging-wie{display:grid;gap:2px;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.uitnodigingen li button{flex:none}
@media(max-width:520px){.uitnodigingen li{flex-wrap:wrap}.uitnodiging-wie{flex-basis:100%}}
/* Ronde Derde uur, 18 oktober 2026 (docs/DERDE-UUR-20261018.md). */
/* Bank: staan er al regels om te verwerken, dan is het vak voor een nieuw afschrift rustig en niet meer de grote
   oranje hoofdknop. De verwerkknop van een regel wordt pas oranje als je hebt gekozen wat het is. */
#content:has(.bank-process-summary) .bank-add .bank-add-button{min-height:72px;flex-direction:row;flex-wrap:wrap;gap:4px 14px;padding:14px 20px;border:2px dashed #b9a6c8;background:#fff;color:var(--brand,#352541)}
#content:has(.bank-process-summary) .bank-add .bank-add-title{font-size:16px}
#content:has(.bank-process-summary) .bank-add .bank-add-hint{color:var(--muted)}
#content:has(.bank-process-summary) .bank-add .bank-add-button:hover,#content:has(.bank-process-summary) .bank-add .bank-add-button.dragging{background:#f3eef7;border-color:var(--brand,#352541)}
.bank-review-choice:has(select:invalid) button.primary{background:#fff;color:var(--brand,#352541);border-color:#c9bfcd}
/* Vaste factuur: de samenvatting bovenaan als rij feiten, op de telefoon twee per regel. */
.vaste-factuur-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin:0}
.vaste-factuur-feiten dt{font-size:12px;color:var(--muted);margin-bottom:2px}
.vaste-factuur-feiten dd{margin:0;font-weight:600;font-size:15px}
@media(max-width:520px){.vaste-factuur-feiten{grid-template-columns:1fr 1fr}}
/* Knoppen in een regel (Regel verwijderen, Verwijder) hadden 10 px tekst: te klein om te lezen. */
.line-row button{font-size:12px;padding:8px 12px}
/* Btw-stappen op de telefoon: een lange naam breekt tussen woorden, niet midden in een woord, en de stand mag twee regels nemen. */
@media(max-width:700px){.vat-step-text strong{overflow-wrap:normal;hyphens:auto}.vat-step-state{white-space:normal;max-width:6.5rem}}
/* Ronde browsers, 19 oktober 2026 (docs/BROWSERS-20261019.md). Safari (WebKit) tekent een keuzelijst in zijn eigen vorm:
   lager dan de andere velden, met een dubbel pijltje, en negeert de minimale hoogte. Nu in elke browser dezelfde vorm,
   even hoog als een invoerveld, met één pijltje rechts. */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23352541' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;padding-right:36px}
/* Ronde Lust voor het oog, 19 oktober 2026 (docs/TOESTANDEN-20261019.md). */
/* Lange lijst: onder de eerste honderd regels een rustige regel met de knop voor meer. */
.lange-lijst-meer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
/* Lange namen en e-mailadressen (een klantnaam van 120 tekens) breken in een tabel netjes af in plaats van de tabel
   breder te maken dan het scherm. Bedragen, datums en knoppen blijven op één regel. */
.table-wrap td:has(> a[href^="#contacts/"]),.table-wrap td.lange-tekst{white-space:normal;overflow-wrap:anywhere;min-width:12ch}
/* Laden: een schets van een pagina. Pas na 300 ms zichtbaar, zodat een snel scherm niet flitst. */
.laden{display:grid;gap:14px;max-width:1100px;opacity:0;animation:laden-in .2s ease-out .3s forwards}
.laden>div{border-radius:10px;background:linear-gradient(90deg,#eee9f1 0%,#f7f3f9 50%,#eee9f1 100%);background-size:200% 100%;animation:laden-glans 1.4s ease-in-out infinite}
.laden-kop{height:30px;width:min(260px,60%)}
.laden-regel{height:14px;width:min(520px,85%)}
.laden-kaart{height:160px;margin-top:10px}
.laden-kaart-laag{height:96px;margin-top:0}
@keyframes laden-in{to{opacity:1}}
@keyframes laden-glans{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.laden{animation:none;opacity:1}.laden>div{animation:none}}
/* Foutstaat: een kaart met een kop, uitleg en een uitweg. */
.fout-staat{max-width:640px;border-top:4px solid var(--action,#c34f2f)}
.fout-staat h1{font-size:24px;margin-bottom:8px}
.fout-staat h1:focus{outline:none}
.fout-staat .actions{margin-top:18px}
.fout-detail{font-size:13px}
/* Eén hoofdknop per scherm: is de lijst nog leeg, dan is de knop midden in de lege lijst de hoofdknop en is dezelfde
   knop in de paginakop een gewone knop. */
#content:has(.empty .first-use-empty-action .primary) .heading .actions .primary{background:#fff;color:var(--brand,#352541);border-color:#c9bfcd;box-shadow:none}
#content:has(.empty .first-use-empty-action .primary) .heading .actions .primary:hover{background:#f3eef7;border-color:var(--brand,#352541)}
/* Ronde Volle administratie, 19 oktober 2026 (docs/VOLLE-ADMINISTRATIE-20261019.md). */
/* Sorteerbare kolomkoppen in de lijsten van facturen, offertes en uitgaven: een knop die oogt als de kop. */
th .sorteer-kop{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;min-height:24px}
th .sorteer-kop:hover{color:var(--brand,#352541);text-decoration:underline}
th .sorteer-kop:focus-visible{outline:2px solid #65884a;outline-offset:2px;border-radius:3px}
th.right .sorteer-kop{justify-content:flex-end}
.sorteer-pijl{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}
th[aria-sort=ascending] .sorteer-pijl{border-bottom:5px solid currentColor}
th[aria-sort=descending] .sorteer-pijl{border-top:5px solid currentColor}