/* Fields fit their containers; no horizontal page clipping. */
.fr-workspace,.app-main{min-width:0}
.app-main input,.app-main select,.app-main textarea{box-sizing:border-box;min-width:0;max-width:100%}
.app-main .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.app-main .form-grid>*,.app-main form label{min-width:0;max-width:100%}
.app-main form.inline{flex-wrap:wrap;gap:8px}
.app-main form.inline>input,.app-main form.inline>select{flex:1 1 130px;width:auto}
.app-main form.inline>label{flex:1 1 130px}
.app-main button{max-width:100%;white-space:normal;overflow-wrap:break-word}
.quote-editor{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.quote-editor>label{display:flex;flex-direction:column;gap:4px;flex:1 1 170px}
.quote-editor>label input,.quote-editor>label select{width:100%}
.quote-lines-table{flex:1 0 100%;width:100%;table-layout:fixed}
.quote-lines-table th,.quote-lines-table td{padding:7px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.quote-lines-table input,.quote-lines-table select{width:100%;min-width:0;padding:7px;font-size:13px}
.quote-lines-table button{padding:7px;font-size:12px;width:100%}
@media(max-width:900px){
.quote-lines-table colgroup,.quote-lines-table thead{display:none}
.quote-lines-table,.quote-lines-table tbody{display:block;width:100%}
.quote-lines-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #dce1dd;margin-bottom:10px}
.quote-lines-table td{display:block}
.quote-lines-table td:first-child{grid-column:1/-1}
.quote-lines-table td:before{display:block;font-size:12px;margin-bottom:4px;font-weight:bold}
.quote-lines-table td:nth-child(1):before{content:'Omschrijving'}
.quote-lines-table td:nth-child(2):before{content:'Aantal'}
.quote-lines-table td:nth-child(3):before{content:'Prijs excl. btw'}
.quote-lines-table td:nth-child(4):before{content:'Omzetrekening'}
.quote-lines-table td:nth-child(5):before{content:'BTW'}
}

/* Intrinsic sizing must not enlarge the workspace. */
.fr-workspace{min-width:0;max-width:100%}
.app-main{box-sizing:border-box;min-width:0;max-width:100%}
.app-main .panel,.app-main .card,.app-main fieldset,.app-main .booking-table{min-width:0;max-width:100%;box-sizing:border-box}
.app-main label input,.app-main label select,.app-main label textarea{max-width:100%;box-sizing:border-box}
.app-main .inline{flex-wrap:wrap}
.finance-table-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto}
.finance-table-scroll>table{max-width:100%}
.login-card{box-sizing:border-box;max-width:calc(100vw - 24px)}
.login-card input,.login-card select,.login-card textarea{box-sizing:border-box;min-width:0;max-width:100%}
@media print{.finance-table-scroll,.booking-table{overflow:visible!important}.booking-workspace #invoice-lines{min-width:0!important;table-layout:fixed!important}}

/* Consistent field groups across Finance. Labels stay attached to controls. */
.app-main form label,.login-card form label{display:inline-flex;flex-direction:column;vertical-align:top;gap:6px;box-sizing:border-box;margin:0 12px 14px 0;width:calc(25% - 15px);min-width:0;font-size:13px;line-height:1.45}
.app-main form label>input:not([type=checkbox]):not([type=radio]),.app-main form label>select,.app-main form label>textarea,.login-card form label>input{display:block;width:100%;min-width:0;margin:0;min-height:40px}
.app-main form label:has(input[type=checkbox]),.app-main form label:has(input[type=radio]){flex-direction:row;align-items:center;width:auto}
.app-main form label input[type=checkbox],.app-main form label input[type=radio]{width:auto;min-height:0;flex:none}
.app-main .form-grid>label,.app-main .booking-header label,.app-main td label,.login-card form label{width:100%;margin-right:0}
.app-main form.inline{gap:12px;align-items:end}
.app-main form.inline>label,.app-main .quote-editor>label{margin:0;flex:1 1 180px;width:auto}
.app-main form>button{margin:0 8px 12px 0}
.app-main form>table,.app-main form>.finance-table-scroll{margin:4px 0 14px}
.app-main details{margin-top:12px}.app-main details>summary{padding:8px 0}.app-main details>form{margin-top:12px}
.app-main button:disabled{opacity:.5;cursor:not-allowed}
.finance-field-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 16px}
.app-main .finance-field-grid>label{width:100%;margin:0}
.finance-empty{text-align:center;padding:24px!important;color:#52657a}
.app-main>.finance-print-action{float:right;margin:0 0 16px 20px}
.app-main>h1,.app-main>h2{padding-top:8px;margin-top:0}
.app-main>form{clear:both}
@media(max-width:1100px){.app-main form label{width:calc(50% - 15px)}.finance-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.app-main form label{width:100%;margin-right:0}.finance-field-grid{grid-template-columns:minmax(0,1fr)}.app-main>.finance-print-action{float:none;margin:0 0 12px}.app-main form.inline>label{flex-basis:100%}}

.app-main .form-grid>label,.app-main .booking-header label,.app-main td label,.app-main .finance-field-grid>label,.login-card form label{width:100%;margin-right:0}

/* Invoice editor: dedicated proportions instead of equal-width table columns. */
.app-main .invoice-workspace .invoice-header{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app-main .invoice-workspace .invoice-header>label{margin:0;width:100%;gap:6px}
.app-main .invoice-workspace .invoice-description{grid-column:span 2}
.app-main .invoice-workspace .panel{padding:16px}
.app-main .invoice-workspace #invoice-lines{min-width:820px;table-layout:fixed}
.app-main .invoice-workspace #invoice-lines td{padding:10px 6px}
.app-main .invoice-workspace #invoice-lines label{margin:0 0 10px;width:100%;font-size:12px}
.app-main .invoice-workspace #invoice-lines input,.app-main .invoice-workspace #invoice-lines select{min-height:36px}
.app-main .invoice-workspace .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin:20px 0 32px}
.app-main .invoice-workspace .actions button{margin:0;min-height:40px}
.app-main .invoice-workspace .remove-line{padding:6px;width:30px;min-height:36px;background:#fff;color:#9b2424;border:1px solid #d8dee5}
.app-main .invoice-workspace details{margin-top:8px}
.app-main .invoice-workspace summary{line-height:1.5}
@media(max-width:700px){.app-main .invoice-workspace .invoice-header{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.app-main .invoice-workspace .invoice-header{grid-template-columns:minmax(0,1fr)}.app-main .invoice-workspace .invoice-description{grid-column:auto}}
@media print{.app-main .invoice-workspace #invoice-lines{min-width:0}}