:root{font-family:Arial,sans-serif;color:#18263b;background:#f3f6fa;font-size:16px}*{box-sizing:border-box}body{margin:0;display:flex}aside{width:235px;background:#11243b;color:white;min-height:100vh;padding:32px 20px;position:fixed}aside strong{font-size:32px;letter-spacing:2px}aside span{display:block;font-size:12px;letter-spacing:3px;color:#7eb8da;margin:8px 0 45px}nav{display:grid;gap:10px}button{background:#176890;color:white;border:0;padding:12px 16px;border-radius:6px;font-size:14px;cursor:pointer}nav button{text-align:left;background:transparent}nav button.active{background:#214460}aside small{display:block;color:#b8c9da;margin-top:45px}main{margin-left:235px;padding:32px 40px;width:calc(100% - 235px)}header{display:flex;justify-content:space-between;align-items:center}header p{font-size:12px;letter-spacing:2px;color:#52728c}h1{font-size:30px;margin:8px 0 22px}h2{font-size:20px}.badge{font-size:13px;color:#486078}.notice{background:#e4edf5;border-left:3px solid #2678a1;padding:14px;margin-bottom:24px;font-size:14px}form{display:flex;gap:18px;align-items:end;background:white;padding:20px;border-radius:8px;flex-wrap:wrap}label{font-size:14px;display:block}input,select{display:block;padding:10px;margin-top:8px;border:1px solid #b7c4d2;border-radius:4px;font-size:16px;max-width:220px;width:100%}input[type=checkbox]{display:inline;width:auto}.metrics{display:flex;gap:18px;margin:24px 0;flex-wrap:wrap}.card{background:white;padding:20px;min-width:180px;border-radius:8px;flex:1}.card span{display:block;font-size:14px;color:#54667d}.card strong{font-size:28px;display:block;margin-top:12px}.toolbar{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.toolbar h2{margin-right:auto}.muted{font-size:14px;color:#5a6b80;line-height:1.5}.tablewrap{overflow:auto;background:white;border-radius:8px}table{border-collapse:collapse;width:100%;font-size:14px}th,td{padding:14px 16px;text-align:right;border-bottom:1px solid #e7edf3}th{color:#597087;background:#eaf0f6}th:first-child,td:first-child{text-align:left}td button{background:transparent;color:#145b82;padding:0;text-align:left;line-height:1.5}.warning{color:#b33529;font-weight:bold}#detail{background:white;padding:24px;margin-top:24px;border-radius:8px}#vendorlist article{background:white;padding:18px;margin-top:12px;border-radius:6px}[hidden]{display:none!important}@media(max-width:850px){aside{position:static;width:100%;min-height:0;padding:18px}aside span,aside small{display:none}nav{display:flex;flex-wrap:wrap;margin-top:16px}body{display:block}main{margin:0;width:100%;padding:20px}header{display:block}.badge{display:block;margin-bottom:16px}}
:focus-visible{outline:3px solid #ecad36;outline-offset:3px}fieldset{border:1px solid #cbd6e2;border-radius:6px;padding:16px;min-width:230px}fieldset label{margin-bottom:8px}legend{font-size:14px;font-weight:bold}#teamlist article{padding:20px;background:white;margin-top:18px;border-radius:8px}#teamlist small{font-weight:normal;color:#597087}
:root{--accent:#176890}#workspace{display:flex;width:100%}.full{flex-basis:100%;width:100%}.full input{max-width:none}td small{display:block;color:#66768b;margin-top:5px;font-size:12px}article{background:white;padding:18px;border-radius:8px;margin:14px 0}article h3{font-size:18px;margin:0 0 10px}.tablewrap td input{min-width:85px;max-width:120px}.tablewrap td select{max-width:300px;min-width:150px}#login,#passwordpanel{margin:10vh auto;max-width:600px;padding:30px}#shipmentlines,#dutyinputs{display:flex;gap:16px;flex-wrap:wrap}pre{white-space:pre-wrap;max-height:300px;overflow:auto}#temporarypassword{padding:20px;background:#fff2cc;overflow-wrap:anywhere}#logout{margin-top:20px}#message:not(:empty){padding:16px;background:#e5edf5;border-radius:5px;position:sticky;bottom:10px}#bankpanel{margin-top:30px}@media(max-width:850px){#workspace{display:block}}

/* Compact inventory grid: fixed columns prevent product names creating blank space. */
.inventory-table{table-layout:fixed;min-width:960px}.inventory-table th,.inventory-table td{padding:7px 8px;vertical-align:middle;white-space:normal;overflow-wrap:anywhere;line-height:1.3}.inventory-table th{font-size:12px}.inventory-table td{font-size:13px}.inventory-table td:first-child button{width:100%;line-height:1.3;overflow-wrap:anywhere}.inventory-table td small{margin-top:2px;font-size:11px}.inventory-table td select{min-width:0;max-width:none;width:100%;margin:0;padding:5px 6px;font-size:13px}.inventory-table th:nth-child(2),.inventory-table td:nth-child(2){text-align:left}
/* Keep inventory column headings visible within the scrolling product list. */
#planning > .tablewrap{max-height:70vh;overflow:auto;position:relative;isolation:isolate}
.inventory-table thead th{position:sticky;top:0;z-index:2;background:#eaf0f6;box-shadow:0 1px 0 #cbd6e2}
.inventory-table th:nth-child(6),.inventory-table td:nth-child(6){font-weight:700}

.purchase-order{background:white;border-radius:6px;padding:12px;margin:12px 0}.purchase-order summary{cursor:pointer;font-weight:bold;padding:8px}.purchase-lines{min-width:1400px}.purchase-lines th,.purchase-lines td{padding:7px;white-space:normal}.purchase-lines input{min-width:75px!important;font-size:13px;padding:6px;margin:0}.order-charges,.order-totals{display:flex;gap:12px;flex-wrap:wrap}.order-totals .card{padding:12px}.order-totals .card strong{font-size:22px}

.inventory-table th button{background:transparent;color:inherit;font-size:inherit;font-weight:700;padding:0;width:100%;text-align:inherit;line-height:1.3;white-space:normal}.inventory-table th button span{white-space:nowrap;color:#176890}

.bank-table th,.bank-table td{text-align:left;padding:8px;overflow-wrap:anywhere}.bank-table td:nth-child(2),.bank-table td:nth-child(3),.bank-table td:nth-child(5){font-family:monospace;white-space:nowrap}.bank-table{font-size:13px}
#vendorlist{display:none}

.needs-review{background:#fff4ce!important}.needs-review td{background:#fff4ce}.review-note{color:#785400;font-weight:600}.needs-review small{color:#785400}

#invoicelines td:first-child{min-width:300px;}
#invoicelines td:first-child input[data-invoice-product-search],#invoicelines td:first-child select{display:block;width:100%;min-width:280px;max-width:none;box-sizing:border-box;} 
#invoicelines td:first-child input[data-invoice-product-search]{margin:0 0 8px;}

.invoice-product-picker{position:relative;width:100%;min-width:300px}.product-picker-toggle{width:100%;text-align:left;background:white;color:#18334e;border:1px solid #afc2d7;padding:9px 12px;white-space:normal}.product-picker-panel{position:absolute;z-index:30;top:100%;left:0;width:max(100%,420px);max-width:75vw;background:white;border:1px solid #afc2d7;box-shadow:0 6px 18px #0002;padding:8px}.product-picker-results{max-height:270px;overflow:auto}.product-picker-results button{display:block;width:100%;text-align:left;background:white;color:#18334e;padding:8px;border-radius:0}.product-picker-results button:hover,.product-picker-results button:focus{background:#e8f0f7}.product-picker-panel[hidden]{display:none}

.review-note,.review-note small{color:#b42318!important;font-weight:700;}
#invoiceform table{table-layout:fixed;min-width:1100px}
#invoiceform th,#invoiceform td{text-align:left;vertical-align:top;padding:14px 12px}
#invoiceform th:first-child{width:28%}
#invoiceform th:nth-child(7){width:19%}
#invoiceform th:last-child{width:7%}
#invoiceform td input,#invoiceform td select{width:100%;min-width:0;max-width:none;margin-top:0}
#invoiceform .product-picker{min-width:0;width:100%}
#invoiceform tfoot td{font-weight:bold;background:#eaf0f6}
header{gap:24px;margin-bottom:20px}
header h1{margin-bottom:0}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-left:auto}
.header-actions button{white-space:nowrap}
#invoices>h2{margin:26px 0 14px}
#invoices>h2:first-of-type{margin-top:0}
#uploadqueue:empty,#uploadstatus:empty,#driveimportlist:empty{display:none}
#uploadform input[type=file]{max-width:none;width:360px}
#addmanualinvoice{margin-top:16px}
@media(max-width:850px){.header-actions{flex-wrap:wrap;margin-top:16px;justify-content:flex-start}#uploadform input[type=file]{width:100%}}
#uploadform{display:grid;grid-template-columns:minmax(260px,360px) auto 1fr;column-gap:18px;row-gap:12px;align-items:end;padding:20px}
#uploadform>label{grid-column:1}
#uploadform>button{align-self:end;justify-self:start;height:40px;white-space:nowrap}
#uploadform #addmanualinvoice{margin:0 0 0 36px}
#uploadform>.full{grid-column:1/-1;margin:0}
#uploadform input[type=file]{width:100%;margin-top:8px;min-height:46px}
#selectedinvoicefiles:empty{display:none}
@media(max-width:850px){#uploadform{grid-template-columns:1fr auto}#uploadform #addmanualinvoice{grid-column:1/-1;margin:0}#uploadform>label{min-width:0}}
.invoice-charges{display:flex;gap:18px;flex-wrap:wrap;align-items:end;background:#eaf0f6;padding:16px;border-radius:6px}.invoice-charges p{font-weight:bold;margin:0;width:100%}.invoice-charges>small{width:100%}
#invoiceform th:nth-child(7){width:15%}#invoiceform th:nth-child(8){width:10%}#invoiceform td[data-invoice-line-total]{white-space:nowrap;font-weight:bold;padding-top:24px}
.invoice-packing{display:grid;grid-template-columns:minmax(0,2fr) minmax(85px,1fr);gap:10px;margin-top:12px}.invoice-packing label{font-size:12px;color:#52657a}#invoiceform .invoice-packing input{margin-top:5px;font-size:13px;padding:8px}
.invoice-file-link{display:inline-block;padding:10px 12px;color:#145b82;font-size:14px}#storedinvoicefiles{background:white;padding:18px;border-radius:8px;margin-top:20px}#storedinvoicefiles>summary{font-weight:bold;cursor:pointer}
/* Compact planning workspace leaves more vertical room for inventory. */
main{padding-top:18px}
header{margin-bottom:12px;gap:16px}
header p{margin:0 0 6px;font-size:11px}
header h1{font-size:25px;margin:0}
header label{font-size:12px}
header input,header select{margin-top:4px;padding:8px}
.notice{padding:8px 12px;margin-bottom:12px;font-size:12px;line-height:1.35}
#settings{padding:12px 16px;gap:14px;border-radius:6px}
#settings label{font-size:12px}
#settings input{width:115px;max-width:115px;margin-top:5px;padding:7px 9px;font-size:14px;height:34px}
#settings button{padding:9px 14px;height:34px}
#forecastnote{font-size:12px;margin:7px 0 10px;line-height:1.3}
#metrics{margin:10px 0 14px;gap:12px}
#metrics .card{padding:10px 14px;min-width:145px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#metrics .card span{font-size:12px;line-height:1.3}
#metrics .card strong{font-size:22px;margin:0;white-space:nowrap}
#planning>.toolbar{gap:12px;align-items:end}
#planning>.toolbar h2{font-size:18px;margin-top:0;margin-bottom:6px}
#planning>.toolbar label{font-size:12px}
#planning>.toolbar input,#planning>.toolbar select{padding:7px 9px;margin-top:4px;font-size:14px;height:34px}
#planning>.toolbar input[type=checkbox]{height:auto;margin:0 6px 0 0}
#planning>.toolbar button{padding:9px 12px;height:34px;font-size:12px}
#planning>.muted{font-size:12px;margin:8px 0;line-height:1.3}
#planning>.tablewrap{max-height:calc(100vh - 300px);min-height:240px}
@media(max-width:850px){#metrics .card{flex-basis:40%}#planning>.tablewrap{max-height:65vh}header .header-actions{margin-top:10px}}
/* Planning layout follows the compact header and stacked controls. */
header{align-items:center;flex-wrap:wrap;column-gap:22px;row-gap:8px}
header>div:first-child{flex:0 0 auto}
header>.notice{flex:1 1 280px;margin:18px 0 0;padding:8px 12px;border-left:0;max-width:680px}
header>.header-actions{flex:0 0 auto;gap:18px;margin-left:auto}
#settings{justify-content:flex-start;padding:10px 8px;gap:18px;width:max-content;max-width:100%;margin-top:8px}
#settings input{width:120px;max-width:120px}
#settings label:last-of-type input{width:190px;max-width:190px}
#forecastnote{margin:3px 0 8px}
#metrics{gap:14px;margin:8px 0 12px}
#metrics .card{display:block;padding:10px 12px}
#metrics .card strong{margin-top:6px;font-size:24px}
#planning>.toolbar{margin-top:8px}
#planning>.toolbar h2{margin-bottom:8px}
#planning>.toolbar+.muted{margin:4px 0 8px}
@media(max-width:1100px){header>.notice{order:3;flex-basis:100%;max-width:none;margin:0}#settings{width:100%}}
/* Concise invoice workspace: aligned actions and less introductory space. */
#invoices>h2{font-size:18px;margin:14px 0 8px}
#drivesourceform{padding:12px 16px;gap:10px 18px;align-items:center}
#drivesourceform label{font-size:12px}
#drivesourceform input{margin-top:5px;padding:8px 10px;height:36px}
#drivesourceform button{height:36px;padding:9px 14px}
#drivestatus{font-size:12px;margin:5px 0 10px;line-height:1.3}
#invoices>h2+ .muted{font-size:12px;line-height:1.3;margin:4px 0 8px}
#uploadform{padding:12px 16px;row-gap:8px;column-gap:18px;grid-template-columns:minmax(260px,360px) auto 1fr}
#uploadform label{font-size:12px}
#uploadform input[type=file]{margin-top:5px;min-height:40px;font-size:14px;padding:8px}
#uploadform>button{height:36px;padding:9px 14px}
#uploadform #addmanualinvoice{justify-self:end;margin:0}
#uploadform>.muted{font-size:12px;line-height:1.3}
#storedinvoicefiles{padding:12px 16px;margin-top:10px;font-size:14px}
#invoices #invoicelisttitle{margin-top:16px}
@media(max-width:850px){#uploadform{grid-template-columns:1fr auto}#uploadform #addmanualinvoice{justify-self:start}}
/* Dense planning layout: metrics, one controls row, then inventory. */
#metrics{margin:6px 0 8px;gap:12px}
#metrics .card{padding:8px 12px}
#metrics .card span{font-size:12px}
#metrics .card strong{font-size:22px;margin-top:4px}
.planning-controls{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;margin:0 0 4px}
.planning-filters{flex:1;min-width:380px}
.planning-filters .toolbar{gap:10px;align-items:end;flex-wrap:nowrap}
.planning-filters label{font-size:12px;white-space:nowrap}
.planning-filters input,.planning-filters select{margin-top:4px;padding:7px 8px;height:34px;font-size:14px}
.planning-filters input[type=checkbox]{height:auto;margin:0 6px 0 0}
.planning-filters .toolbar>input{width:220px}
.planning-settings{flex:0 1 auto}
#settings{margin:0;padding:8px;gap:12px}
#settings label{font-size:12px}
#settings input{width:110px;max-width:110px;height:34px}
#settings label:last-of-type input{width:165px;max-width:165px}
#forecastnote{margin:3px 4px 0;font-size:11px;line-height:1.2}
.recommendations-heading{display:flex;align-items:baseline;gap:12px;margin:4px 0 8px}
.recommendations-heading h2{font-size:18px;margin:0;white-space:nowrap}
.recommendations-heading p{font-size:11px;line-height:1.2;margin:0}
#planning>.tablewrap{max-height:calc(100vh - 245px)}
@media(max-width:1300px){.planning-controls{flex-wrap:wrap;gap:8px}.planning-filters{min-width:0}.planning-settings{width:100%}#settings{width:100%}.recommendations-heading{flex-wrap:wrap;gap:4px}}
/* Planning controls left, search and filters right. */
.planning-settings{order:0;flex:0 0 auto}
.planning-filters{order:1;flex:0 1 auto;margin-left:auto;min-width:0}
.planning-controls{gap:14px}
.planning-filters .toolbar{justify-content:flex-end}
@media(max-width:1300px){.planning-settings{width:auto;max-width:100%}.planning-filters{margin-left:auto}.planning-controls{gap:8px}#settings{width:max-content;max-width:100%}}
@media(max-width:850px){.planning-filters{width:100%;margin-left:0}.planning-filters .toolbar{justify-content:flex-start;flex-wrap:wrap}}
/* Compact invoice editor follows the reference layout. */
#invoiceform{padding:12px 4px;gap:12px 18px;display:grid;grid-template-columns:minmax(150px,1.45fr) minmax(150px,1.45fr) minmax(135px,1.15fr) 80px minmax(110px,.85fr) minmax(115px,.9fr) minmax(110px,.85fr) minmax(140px,1fr) minmax(140px,1fr);align-items:start}
#invoiceform>label{min-width:0;font-size:12px}
#invoiceform>label input,#invoiceform>label select{width:100%;max-width:none;margin-top:6px;height:40px;padding:8px;font-size:14px}
#invoiceform>.full{grid-column:1/-1}
#invoiceform>button{justify-self:start;width:max-content}
#invoiceform table{min-width:1250px}
#invoiceform th,#invoiceform td{padding:12px;text-align:left}
#invoiceform th{font-size:12px}
#invoiceform th:first-child{width:28%}
#invoiceform th:nth-child(7){width:15%}
#invoiceform th:nth-child(8){width:10%}
#invoiceform td:first-child{position:relative}
#invoiceform .invoice-packing{margin-top:10px;gap:10px;grid-template-columns:2fr 1fr}
#invoiceform .invoice-packing input{height:33px;font-size:12px;padding:7px}
#invoiceform .invoice-line-math{position:absolute;left:calc(100% + 6px);bottom:16px;width:550px;font-size:11px;line-height:1.25;margin:0;pointer-events:none}
.invoice-charges{padding:12px;gap:14px 18px;border-radius:0}
.invoice-charges label{font-size:12px}
.invoice-charges input{height:40px;font-size:14px;margin-top:6px}
.invoice-charges p{font-size:14px}
.invoice-charges small{font-size:12px}
#invoiceform td[data-invoice-line-total]{font-size:13px;padding-top:24px}
#invoicelist article{padding:14px;margin:10px 0}
#invoicelist article>p{margin:10px 0;font-size:14px}
@media(max-width:1400px){#invoiceform{grid-template-columns:repeat(5,minmax(120px,1fr))}}
@media(max-width:850px){#invoiceform{grid-template-columns:repeat(2,minmax(0,1fr))}}
#invoiceform{column-gap:12px;row-gap:10px;grid-template-columns:minmax(145px,1.5fr) minmax(140px,1.4fr) minmax(135px,1.15fr) 80px minmax(130px,1fr) minmax(110px,.9fr) minmax(110px,.9fr) minmax(145px,1.1fr) minmax(145px,1.1fr)}
#invoiceform>.invoice-charges{display:grid;grid-template-columns:repeat(3,minmax(140px,220px)) 1fr;gap:10px 18px;align-items:end;padding:12px}
.invoice-charges #invoicetotal{grid-column:1/-1;margin:0}
.invoice-charges>small{grid-column:1/-1}
#invoiceform .invoice-line-math{position:static;width:auto;max-width:100%;margin-top:8px;font-size:11px;overflow-wrap:anywhere}
#invoiceform table{min-width:1150px}
#invoiceform th:first-child{width:29%}
#invoiceform th:nth-child(7){width:14%}
#invoiceform th:nth-child(8){width:11%}
#invoiceform th:last-child{width:6%}
#invoiceform td input,#invoiceform td select{height:36px;padding:7px 9px;font-size:14px}
@media(max-width:1550px){#invoiceform{grid-template-columns:repeat(5,minmax(130px,1fr))}}
@media(max-width:850px){#invoiceform{grid-template-columns:repeat(2,minmax(0,1fr))}#invoiceform>.invoice-charges{grid-template-columns:repeat(2,minmax(0,1fr))}}
#invoiceform{grid-template-columns:minmax(170px,1.5fr) minmax(160px,1.4fr) 90px minmax(140px,1fr) minmax(125px,1fr) minmax(125px,1fr) minmax(155px,1.1fr)}
@media(max-width:1300px){#invoiceform{grid-template-columns:repeat(4,minmax(130px,1fr))}}
@media(max-width:850px){#invoiceform{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Compact invoice charges align with the product area. */
#invoiceform>.invoice-charges{grid-template-columns:repeat(3,minmax(120px,220px)) minmax(180px,1fr);align-items:end;gap:10px 18px;padding:10px 12px}
.invoice-charges #invoicetotal{grid-column:4;grid-row:1;font-size:14px;align-self:center;line-height:1.45}
.invoice-charges #invoiceratenote{grid-column:1/4;grid-row:2;font-size:11px}
.invoice-charges>small:last-child{grid-column:1/4;grid-row:3;font-size:11px}
#invoiceform>button{grid-column:auto;padding:10px 14px;height:38px}
#invoiceform>button:last-child{grid-column:2}
#invoiceform td small{font-size:11px;line-height:1.2}
@media(max-width:1000px){#invoiceform>.invoice-charges{grid-template-columns:repeat(3,minmax(0,1fr))}.invoice-charges #invoicetotal{grid-column:1/-1;grid-row:2}.invoice-charges #invoiceratenote{grid-column:1/-1;grid-row:3}.invoice-charges>small:last-child{grid-column:1/-1;grid-row:4}}
#invoiceform,#invoiceform .tablewrap,#invoiceform table,#invoiceform td,#invoiceform>.invoice-charges{background:#fff!important}
#invoiceform>.invoice-charges{display:flex;gap:6px;padding:4px 12px;margin:0;border:0}
#invoiceform>.invoice-charges>small{width:auto;margin-right:10px}
#invoiceform td>label{font-size:12px;margin-top:12px;font-weight:normal}
#invoiceform td>label input{margin-top:5px}
#invoiceform td[data-invoice-line-total]{padding-top:12px;white-space:normal}
#invoiceform .invoice-goods-total{display:block;font-size:11px;color:#52657a;font-weight:normal}
#invoiceform #invoicetotal{margin:16px 0 0;font-size:13px;font-weight:bold;line-height:1.4;min-width:170px}
#invoiceform th:nth-child(8){width:12%}
#invoiceform>button:last-child{grid-column:2}
#invoiceform thead,#invoiceform th{background:#fff!important}
#invoiceform{grid-template-columns:minmax(180px,1.6fr) minmax(160px,1.4fr) 90px minmax(125px,1fr) minmax(115px,1fr) minmax(110px,1fr) 100px minmax(150px,1.2fr)}
#invoiceform th:first-child{width:29%}#invoiceform th:nth-child(n+2){width:auto}#invoiceform th:nth-child(6){width:7%}#invoiceform th:nth-child(10){width:10%}
#invoiceform td[data-fee-cell] label,#invoiceform td[data-tax-cell] label{margin:0;font-size:0}
#invoiceform td[data-fee-cell] input,#invoiceform td[data-tax-cell] input{margin:0}
#invoiceform td[data-invoice-line-total]{padding-top:24px}
#invoiceform .invoice-goods-total{font-size:12px;color:#18263b}
#invoiceform #invoicetotal{margin:8px 0 0;min-width:100px;font-size:12px}
#invoiceform>.invoice-charges label{font-size:12px;max-width:180px}
@media(max-width:1450px){#invoiceform{grid-template-columns:repeat(4,minmax(130px,1fr))}}
@media(max-width:850px){#invoiceform{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Approved invoice layout: keep headings and amounts aligned. */
#invoiceform{padding:12px 4px;gap:12px;grid-template-columns:minmax(180px,1.6fr) minmax(160px,1.4fr) 90px minmax(125px,1fr) minmax(115px,1fr) minmax(110px,1fr) 100px minmax(150px,1.2fr)}
#invoiceform #invoicetotal{margin:8px 0 0;font-size:12px;white-space:nowrap}
#invoiceform .invoice-goods-total{white-space:nowrap}
#invoiceform>.invoice-charges{align-items:end;padding:4px 12px;column-gap:8px}
#invoiceform>.invoice-charges>small{margin-bottom:0;font-size:11px}
@media(max-width:1250px){#invoiceform{grid-template-columns:repeat(4,minmax(130px,1fr))}}
@media(max-width:850px){#invoiceform{grid-template-columns:repeat(2,minmax(0,1fr))}}
#invoiceform .invoice-line-math{display:none}
#invoiceform>.invoice-charges{padding:0;margin:0;min-height:0}
#invoiceform [data-rate-notes]{position:absolute;left:calc(100% + 12px);bottom:17px;display:flex;align-items:center;gap:10px;width:700px;font-size:11px;white-space:nowrap}
#invoiceform td:first-child{position:relative}
#invoiceform td:nth-child(2){position:static}
#invoiceform tr{position:relative}
#invoiceform [data-rate-notes]{left:30%;bottom:17px}
#invoiceform [data-rate-notes] small{font-size:11px}
/* Invoice product dropdown must extend outside the editor. */
#invoiceform>.tablewrap{overflow:visible!important;max-height:none!important;border-radius:0;position:relative}
#invoiceform{overflow:visible}
#invoicelist article{overflow:visible}
#invoiceform .product-picker-panel{z-index:1000}
#invoiceform table{min-width:0!important;width:100%;table-layout:fixed}
#invoiceform td,#invoiceform th{padding-left:8px;padding-right:8px;min-width:0}
#invoiceform td input,#invoiceform td select{min-width:0}
#invoiceform .invoice-product-picker{min-width:0;width:100%}
/* Approved single-row packing layout and header-level invoice charges. */
#invoiceform{grid-template-columns:minmax(190px,2fr) minmax(175px,1.75fr) 90px minmax(105px,.9fr) minmax(105px,.9fr) 100px 90px 90px minmax(115px,1fr) minmax(130px,1.15fr);column-gap:12px;row-gap:16px}
#invoiceform>.invoice-total-header #invoicetotal{height:40px;margin:6px 0 0;padding:10px 8px;font-size:12px}
#invoiceform>label:has([name=invoiceFees]),#invoiceform>label:has([name=invoiceTax]){font-size:12px}
#invoiceform th:first-child{width:29%}
#invoiceform th:nth-child(2){width:11%}
#invoiceform th:nth-child(3){width:8%}
#invoiceform th:nth-child(n+4){width:auto}
#invoiceform th:nth-child(9){width:10%}
#invoiceform .invoice-packing,#invoiceform .invoice-line-math{display:none}
#invoiceform>.invoice-charges{grid-column:3/-1;grid-row:3;align-self:center;padding:0}
#invoiceform>#addline{grid-column:1;grid-row:3;margin-left:20px}
#invoiceform>button:last-child{grid-column:2;grid-row:3;margin-left:20px}
#invoiceform td input{height:36px}
@media(max-width:1250px){#invoiceform{grid-template-columns:repeat(5,minmax(100px,1fr))}#invoiceform>.invoice-charges{grid-row:auto;grid-column:1/-1}#invoiceform>#addline,#invoiceform>button:last-child{grid-row:auto;margin-left:0}}
@media(max-width:850px){#invoiceform{grid-template-columns:repeat(2,minmax(0,1fr))}}
#invoiceform th:nth-child(8){width:11%}
#invoiceform th:nth-child(9){width:7%}

/* Compact invoice header including local shipping. */
@media(min-width:1251px){#invoiceform{grid-template-columns:minmax(160px,2fr) minmax(145px,1.75fr) 80px minmax(95px,.9fr) minmax(95px,.9fr) 85px 80px 80px minmax(100px,.9fr) minmax(110px,1fr) minmax(130px,1.15fr)}}
#invoiceform>label:has([name=invoiceShipping]){font-size:12px}

#invoiceform input.missing-invoice-field{border-color:#b33529;background:#fff8f7}

#invoiceform .invoice-line-subtotal td{background:white;border-bottom:0;padding-top:8px;padding-bottom:4px}#invoicegoodssubtotal{font-weight:bold;text-align:left;white-space:nowrap}

.purchase-order form{background:white;gap:12px;padding:14px}.purchase-lines th,.purchase-lines td{padding:8px;font-size:12px}.purchase-lines input{padding:7px;margin-top:0;font-size:13px}.order-supplier-header td{background:#f3f6fa;text-align:left!important;padding:10px}.order-supplier-header label{display:inline-block;margin-right:20px;font-size:12px}.order-supplier-header input{max-width:250px;width:220px;margin-top:5px}.purchase-lines{min-width:1100px}

.order-supplier-header .supplier-invoice-source{display:inline-block;margin-left:8px;color:#597087;font-size:12px}

.orders-heading{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 8px}.orders-heading h2,.orders-heading p{margin:0}.orders-heading p{font-size:13px}.purchase-order form>.tablewrap{max-height:calc(100vh - 220px);overflow:auto;min-height:160px}.purchase-lines thead th{position:sticky;top:0;z-index:5;background:#eaf0f6;box-shadow:0 1px 0 #cbd6e2}.purchase-lines{border-collapse:separate;border-spacing:0}

.container-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 12px}.container-summary span{font-size:13px;color:#597087}.container-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.container-option{border:1px solid #dce5ec;border-radius:5px;padding:12px;background:white}.container-option.recommended{border-color:#176890}.container-option-heading,.container-space{display:flex;justify-content:space-between;gap:10px;font-size:13px}.container-option-heading span{color:#597087}.container-capacity{height:10px;border-radius:5px;background:#edf1f5;margin:12px 0;overflow:hidden}.container-capacity>span{display:block;height:100%;background:#176890;border-radius:5px}.container-space{font-size:12px}.container-note{display:block;color:#597087;margin-top:10px;font-size:12px}@media(max-width:850px){.container-options{grid-template-columns:1fr}}

/* Dense supplier and product rows. */
.purchase-lines th,.purchase-lines td{padding:6px 8px}.purchase-lines td input{height:30px;padding:5px 7px;min-width:60px!important;max-width:100px}.purchase-lines td small{font-size:11px;margin-top:3px;line-height:1.15}.order-supplier-header td{padding:7px 10px!important}.order-supplier-header label{display:inline-flex;align-items:center;gap:4px;margin:0 12px 0 0;font-size:13px;font-weight:bold}.order-supplier-header input{display:inline-block;background:transparent;border:1px solid transparent;margin:0;padding:4px;height:28px;font-size:14px;font-weight:bold}.order-supplier-header input:hover,.order-supplier-header input:focus{background:white;border-color:#b7c4d2}.order-supplier-header .supplier-name-label input{width:210px;max-width:260px}.order-supplier-header .supplier-cbm-label input{width:75px;max-width:75px}.order-supplier-header .supplier-weight-label input{width:85px;max-width:85px}

/* Align compact supplier values and order entry boxes. */
.order-supplier-header label{height:30px;vertical-align:middle;margin-right:14px;gap:8px}.order-supplier-header .supplier-name-label input{width:150px;max-width:150px}.order-supplier-header .supplier-cbm-label input,.order-supplier-header .supplier-weight-label input{width:80px;min-width:80px!important;max-width:80px;height:30px}.purchase-lines td input[name=quantity],.purchase-lines td input[name=unitPriceTwd],.purchase-lines td input[name=sellingPriceOverrideUsd]{width:96px;min-width:96px!important;max-width:96px;height:30px;margin:0}.purchase-lines td:has(input[name=quantity]),.purchase-lines td:has(input[name=unitPriceTwd]){vertical-align:top;padding-top:8px}.purchase-lines td small[data-result=cases]{width:96px;text-align:center;white-space:nowrap;font-size:10px;margin-top:3px}

/* Keep order rows compact and aligned. */
.purchase-lines thead th{padding:5px 7px;line-height:1.15;font-size:12px;vertical-align:middle}.purchase-lines tbody td{padding:4px 7px;line-height:1.15;vertical-align:middle}.purchase-lines tbody td input{height:27px;padding:4px 6px;font-size:12px}.purchase-lines td input[name=quantity],.purchase-lines td input[name=unitPriceTwd],.purchase-lines td input[name=sellingPriceOverrideUsd]{height:27px;width:90px;min-width:90px!important;max-width:90px}.purchase-lines td:has(input[name=quantity]),.purchase-lines td:has(input[name=unitPriceTwd]){vertical-align:middle;padding-top:4px}.purchase-lines td small[data-result=cases]{width:90px;margin-top:2px;line-height:1.1}.purchase-lines td[data-result=suggested],.purchase-lines th:nth-child(13){text-align:right}.purchase-lines td:has(input[name=sellingPriceOverrideUsd]),.purchase-lines th:nth-child(14){text-align:center}.order-supplier-header td{padding:4px 8px!important}.order-supplier-header label,.order-supplier-header input,.order-supplier-header .supplier-cbm-label input,.order-supplier-header .supplier-weight-label input{height:25px}

.purchase-lines tbody td input[name=quantity],.purchase-lines tbody td input[name=unitPriceTwd],.purchase-lines tbody td input[name=sellingPriceOverrideUsd]{border:0;background:transparent;box-shadow:none;border-radius:0;height:23px;padding:2px 3px;text-align:right;appearance:textfield;-moz-appearance:textfield}.purchase-lines input::-webkit-inner-spin-button,.purchase-lines input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.purchase-lines tbody td input:focus{outline:1px solid #176890;background:white}.purchase-lines tbody td{padding-top:3px;padding-bottom:3px}

/* Consistent alignment for all order columns. */
.purchase-lines{table-layout:fixed;width:100%;min-width:1200px}.purchase-lines thead th,.purchase-lines tbody tr[data-order-line]>td{ text-align:center!important;vertical-align:middle;}.purchase-lines thead th:first-child,.purchase-lines tbody tr[data-order-line]>td:first-child{text-align:left!important;width:23%}.purchase-lines thead th{line-height:1.2;height:38px}.purchase-lines tbody tr[data-order-line]>td{padding:4px 6px}.purchase-lines tbody tr[data-order-line]>td input[name=quantity],.purchase-lines tbody tr[data-order-line]>td input[name=unitPriceTwd],.purchase-lines tbody tr[data-order-line]>td input[name=sellingPriceOverrideUsd]{text-align:center!important;width:100%;min-width:0!important;max-width:100%;display:block;margin:0 auto;height:23px;padding:2px;font-size:12px}.purchase-lines tbody tr[data-order-line]>td small[data-result=cases]{display:block;text-align:center;width:100%;white-space:normal;line-height:1.1;margin:2px 0 0;font-size:10px}.purchase-lines tbody tr[data-order-line]>td[data-previous-price] small{text-align:center;margin-top:2px}.purchase-lines thead th:nth-child(5){width:10%}.purchase-lines thead th:nth-child(13),.purchase-lines thead th:nth-child(14){width:9%}.purchase-lines tbody tr[data-order-line]>td button{display:inline-block;text-align:center;font-size:12px}.order-supplier-header td{text-align:left!important}

/* Fixed supplier summary columns. */
.order-supplier-header td{padding:4px 10px!important}.order-supplier-header label{margin:0!important;gap:0!important;vertical-align:middle;font-variant-numeric:tabular-nums}.order-supplier-header .supplier-name-label{display:inline-flex;width:160px}.order-supplier-header .supplier-name-label input{width:150px!important;max-width:150px!important;text-align:left!important;padding-left:0}.order-supplier-header .supplier-cbm-label,.order-supplier-header .supplier-weight-label{display:inline-grid;grid-template-columns:42px 78px;width:120px;align-items:center;text-align:left}.order-supplier-header .supplier-cbm-label input,.order-supplier-header .supplier-weight-label input{width:78px!important;min-width:78px!important;max-width:78px!important;padding:2px 4px;text-align:left!important;font-variant-numeric:tabular-nums}

/* Single compact order settings row. */
.purchase-order form{display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(135px,.9fr) repeat(4,minmax(120px,1fr)) minmax(150px,1.1fr);gap:10px 12px;padding:10px 0}.purchase-order form>.full{grid-column:1/-1;width:100%}.purchase-order form>label{min-width:0;font-size:13px}.purchase-order form>label>input{width:100%;max-width:none;height:38px;margin-top:6px;padding:8px;font-size:14px}.purchase-order form>.order-charges:has(>label[hidden]):not(:has(>label:not([hidden]))){display:none}.purchase-order form>button{justify-self:start}.purchase-order form>.tablewrap{margin-top:2px}.purchase-order summary{padding:6px 0 12px}.purchase-order{padding:10px 12px}@media(max-width:1100px){.purchase-order form{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){.purchase-order form{grid-template-columns:repeat(2,minmax(0,1fr))}}

#orders>#newpurchaseorder{display:inline-block;vertical-align:bottom;margin-right:20px}#orders>label:has(#region){display:inline-block;vertical-align:bottom;font-size:12px;margin:0}#orders>label #region{width:128px;height:38px;margin-top:4px;padding:7px 10px}#orders>.orders-heading{margin-bottom:8px}

.order-cycle{display:inline-flex;gap:7px;align-items:center;margin-left:14px;vertical-align:middle;font-size:12px;font-weight:normal;color:#788796}.order-cycle>.current{color:#176890;font-weight:bold;background:#e7f1f6;border-radius:4px;padding:3px 7px}.order-cycle .cycle-arrow{color:#a1adba}

.shipment-received{display:inline-flex;align-items:center;gap:6px;margin-left:16px;font-size:13px;font-weight:normal}.shipment-received input{width:15px;height:15px;margin:0}

.invoice-shipment{background:#fff;border-radius:8px;margin:10px 0;padding:12px 14px}.invoice-shipment>summary{font-weight:600;cursor:pointer;font-size:14px}.invoice-shipment-count{font-weight:normal;color:#58718d;font-size:12px}.invoice-shipment[open]>summary{padding-bottom:10px;border-bottom:1px solid #e3eaf2}#invoicelist .invoice-shipment>article{padding:12px 0;margin:0;border-bottom:1px solid #e3eaf2;border-radius:0}#invoicelist .invoice-shipment>article:last-child{border-bottom:0}
.purchase-lines input[name=lineMargin]{text-align:center;width:100%;min-width:0!important;max-width:100%;height:23px;padding:2px;font-size:12px;}

.purchase-lines th:nth-child(13){width:64px!important}.purchase-lines input[name=lineMargin]{width:48px!important;min-width:0!important;max-width:48px!important;margin:0 auto;display:block;text-align:center;}

/* Keep authentication screens centered and separate from the app layout. */
body:has(#workspace[hidden]){display:block}
#login,#passwordpanel,#invitepanel{width:calc(100% - 32px);max-width:520px;margin:8vh auto;padding:24px}
#login form,#passwordpanel form,#invitepanel form{display:grid;align-items:stretch}
#login input,#passwordpanel input,#invitepanel input{max-width:none}
#authmessage:empty{display:none}
#authmessage:not(:empty){max-width:472px;margin:24px auto 0;padding:12px 16px;background:#e4edf5;border-radius:6px}

.order-price-actions{min-width:0;align-self:center}.order-price-actions button{width:100%;margin:0}.order-price-actions p{text-align:center;font-size:12px;margin:5px 0 0;overflow-wrap:anywhere}

.order-placed{color:#167338;font-weight:600}

/* Align inventory headings and values on the same column center. */
.inventory-table{min-width:1400px}
.inventory-table th,.inventory-table td{text-align:center;padding:10px 8px;overflow-wrap:normal;font-variant-numeric:tabular-nums}
.inventory-table th:first-child,.inventory-table td:first-child,.inventory-table th:nth-child(2),.inventory-table td:nth-child(2){text-align:left}
.inventory-table th button{text-align:inherit;line-height:1.4;margin:0}
.inventory-table td:first-child button{overflow-wrap:normal;word-break:normal}
.inventory-table td:last-child>span{display:inline-block;white-space:nowrap}
.inventory-table td:nth-child(n+3):nth-child(-n+9){white-space:nowrap}
.inventory-table td select{min-width:0;width:100%}

.inventory-table{min-width:1100px}
.inventory-table thead th{height:58px;padding:8px 6px;vertical-align:middle}
.inventory-table th button{position:relative;padding-right:10px;white-space:normal;line-height:1.35;overflow-wrap:normal}
.inventory-table th button span{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.inventory-table td:last-child>span{white-space:normal}

.inventory-table tbody td:nth-child(9):nth-child(n){white-space:normal;overflow-wrap:break-word}


.inventory-table thead th:nth-child(6),.inventory-table tbody td:nth-child(6){background:#e8f5e9}.inventory-table thead th:nth-child(7),.inventory-table tbody td:nth-child(7){background:#fdecec}