.invoice-tool-shell{padding-top:38px}.invoice-container{max-width:1280px}.invoice-workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}.invoice-paper{--invoice-ink:#0f1b2d;--invoice-line:#dfe4eb;--invoice-soft:#f4f5f7;--invoice-accent:#0f1b2d;--invoice-accent-soft:#f2f4f7;background:#fff;border:1px solid var(--bt-border);min-height:900px;padding:32px;border-radius:2px;color:var(--invoice-ink);transition:background .18s ease,border-color .18s ease}.invoice-top-grid{display:grid;grid-template-columns:1fr 310px;gap:48px;align-items:start}.invoice-logo-upload{width:200px;height:130px;border:1px solid var(--invoice-line);background:#f0f0f0;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;overflow:hidden;color:#627086;font-size:1.1rem}.invoice-logo-upload img{max-width:100%;max-height:100%;object-fit:contain}.invoice-logo-plus{font-size:1.55rem;vertical-align:-2px}.invoice-title-area{text-align:right}.invoice-title-input{width:100%;border:0;background:transparent;text-align:right;font-size:2.8rem;font-weight:800;line-height:1;color:var(--invoice-ink);outline:0}.invoice-number-row{margin-top:16px;margin-left:auto;width:170px;height:40px;border:1px solid var(--invoice-line);display:flex;align-items:center;border-radius:7px;padding:0 9px;background:#fff}.invoice-prefix{min-width:26px;text-align:left;color:#536174;outline:0}.invoice-number-input{border:0;outline:0;text-align:right;min-width:0;width:100%;background:transparent;color:inherit}.invoice-details-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:36px;margin-top:24px}.invoice-textarea,.invoice-meta-row input{border:1px solid var(--invoice-line);border-radius:6px;background:#fff;outline:0;resize:vertical;color:var(--invoice-ink)}.invoice-textarea{width:100%;padding:11px 12px;min-height:58px}.invoice-textarea:focus,.invoice-meta-row input:focus,.invoice-number-row:focus-within{border-color:#D9B765;box-shadow:0 0 0 .18rem rgba(192,138,46,.08)}.invoice-from{max-width:370px}.invoice-party-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.invoice-editable-label{margin:0 0 8px 12px;font-size:.83rem;outline:0}.invoice-meta-list{display:grid;gap:6px}.invoice-meta-row{display:grid;grid-template-columns:1fr 168px;align-items:center;gap:14px}.invoice-meta-row>span{padding-left:4px;font-size:.85rem;outline:0}.invoice-meta-row input{height:39px;padding:7px 10px;width:100%}.invoice-items-wrap{margin-top:30px}.invoice-items-table{width:100%;border-collapse:separate;border-spacing:0 5px}.invoice-items-table thead th{background:var(--invoice-ink);color:#fff;padding:10px 12px;font-size:.83rem;font-weight:700}.invoice-items-table thead th:first-child{border-radius:7px 0 0 7px}.invoice-items-table thead th:nth-last-child(2){}.invoice-items-table thead span{outline:0}.invoice-items-table .invoice-item-col{width:auto}.invoice-items-table th:nth-child(2){width:100px}.invoice-items-table th:nth-child(3){width:138px}.invoice-items-table th:nth-child(4){width:135px}.invoice-remove-col{width:30px;}.invoice-items-table td{vertical-align:middle}.invoice-item-input,.invoice-qty-input,.invoice-rate-input{width:100%;height:39px;border:1px solid var(--invoice-line);border-radius:6px;padding:7px 10px;outline:0;background:#fff;color:var(--invoice-ink)}.invoice-rate-wrap{display:flex;align-items:center;border:1px solid var(--invoice-line);border-radius:6px;height:39px;background:#fff}.invoice-rate-wrap span{padding-left:9px;font-size:.82rem}.invoice-rate-input{border:0;height:37px;min-width:0}.invoice-row-amount{text-align:right;padding-right:12px;white-space:nowrap;font-size:.84rem}.invoice-remove-item{border:0;background:transparent;color:#a2acb9;font-size:1.2rem;line-height:1}.invoice-remove-item:hover{color:#df4d5b}.invoice-add-item{width:calc(100%);height:36px;border:0;border-radius:7px;background:#f3f4f6;color:#263349;font-size:.84rem}.invoice-add-item span{font-size:1.2rem;margin-right:6px}.invoice-bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:32px;margin-top:34px}.invoice-notes-area .invoice-textarea{min-height:60px}.invoice-terms-label{margin-top:28px}.invoice-totals-area{padding-left:12px}.invoice-total-row{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.85rem}.invoice-total-row>span[contenteditable]{outline:0}.invoice-total-row strong{font-size:.88rem}.invoice-inline-control{display:grid;grid-template-columns:1fr 58px;width:148px;border:1px solid var(--invoice-line);border-radius:6px;overflow:hidden}.invoice-inline-control input,.invoice-inline-control select{height:37px;border:0;background:#fff;text-align:right;outline:0;min-width:0;color:var(--invoice-ink)}.invoice-inline-control input{padding:6px 8px}.invoice-inline-control select{border-left:1px solid var(--invoice-line);padding:0 5px;font-size:.78rem}.invoice-money-input{display:flex;align-items:center;width:148px;border:1px solid var(--invoice-line);border-radius:6px;height:39px;background:#fff}.invoice-money-input span{padding-left:9px;font-size:.82rem}.invoice-money-input input{border:0;outline:0;text-align:right;width:100%;min-width:0;padding:6px 9px;background:transparent;color:var(--invoice-ink)}.invoice-divider{border-top:1px solid #cdd3dc;margin:4px 0}.invoice-grand-total{font-weight:800}.invoice-grand-total span,.invoice-grand-total strong{font-size:1rem}.invoice-balance-row{font-weight:800;margin-top:12px}.invoice-balance-row span,.invoice-balance-row strong{font-size:1.1rem}.invoice-settings-panel{position:sticky;top:90px}.invoice-settings-card,.invoice-actions-card{background:#fff;border:1px solid var(--bt-border);box-shadow:0 8px 20px rgba(16,32,56,.05);padding:12px}.invoice-actions-card{margin-top:12px}.invoice-settings-title{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;align-items:center;padding:8px 8px 10px;font-size:.86rem;color:var(--invoice-ink)}.invoice-settings-body{border-top:1px solid #eceff3;padding:12px 0 2px}.invoice-setting-group{margin-bottom:12px}.invoice-setting-group label{display:block;font-size:.82rem;margin:0 0 6px}.invoice-setting-group .form-select{font-size:.82rem;padding:.65rem 2rem .65rem .7rem;border-radius:7px}.invoice-settings-divider{border-top:1px solid #eceff3;margin:8px 0 16px}.invoice-save-default{width:100%;border:0;background:transparent;color:#00a663;padding:6px 0;font-size:.84rem}.invoice-save-status{display:block;text-align:center;color:#8793a5;font-size:.68rem;line-height:1.3;margin-top:6px}.invoice-chevron{font-size:1.05rem}.invoice-settings-card.is-collapsed .invoice-settings-body{display:none}.invoice-settings-card.is-collapsed .invoice-chevron{transform:rotate(180deg);display:inline-block}

/*
 * Ten deliberately different invoice layouts.
 * These are original BizTooler themes informed by common patterns seen in
 * leading invoicing products: classic, minimal, modern, corporate,
 * accounting-ledger, creative, elegant, compact, bold and soft-card layouts.
 * The surrounding BizTooler page chrome is never themed.
 */

/* 1. CLASSIC — familiar invoice-generator style */
.invoice-theme-classic{--invoice-ink:#0f1b2d;--invoice-line:#dfe4eb;--invoice-accent:#0f1b2d;--invoice-accent-soft:#f4f5f7}.invoice-theme-classic .invoice-title-input{font-weight:800}.invoice-theme-classic .invoice-items-table thead th{background:#0f1b2d;color:#fff}

/* 2. MINIMAL — open layout, title left, hairline table, almost no boxes */
.invoice-theme-minimal{--invoice-ink:#20252b;--invoice-line:#d9dde2;--invoice-accent:#20252b;box-shadow:none;border-color:#eceef1;padding:42px}.invoice-theme-minimal .invoice-top-grid{grid-template-columns:190px 1fr;gap:34px;align-items:center}.invoice-theme-minimal .invoice-title-area{text-align:left}.invoice-theme-minimal .invoice-title-input{text-align:left;font-size:2.25rem;font-weight:500;letter-spacing:.14em}.invoice-theme-minimal .invoice-number-row{margin:10px 0 0;width:150px;border:0;border-bottom:1px solid #aeb4bc;border-radius:0;padding:0;background:transparent}.invoice-theme-minimal .invoice-logo-upload{width:165px;height:86px;border:0;background:transparent;justify-content:flex-start}.invoice-theme-minimal .invoice-details-grid{grid-template-columns:1fr;gap:20px;margin-top:38px}.invoice-theme-minimal .invoice-party-section{display:grid;grid-template-columns:1fr 2fr;gap:38px;align-items:start}.invoice-theme-minimal .invoice-from{max-width:none}.invoice-theme-minimal .invoice-party-grid{margin-top:0}.invoice-theme-minimal .invoice-meta-list{grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid #d9dde2;border-bottom:1px solid #d9dde2;padding:16px 0}.invoice-theme-minimal .invoice-meta-row{display:block}.invoice-theme-minimal .invoice-meta-row>span{display:block;padding:0;margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;color:#68717b}.invoice-theme-minimal .invoice-meta-row input,.invoice-theme-minimal .invoice-textarea,.invoice-theme-minimal .invoice-item-input,.invoice-theme-minimal .invoice-qty-input,.invoice-theme-minimal .invoice-rate-wrap,.invoice-theme-minimal .invoice-inline-control,.invoice-theme-minimal .invoice-money-input{border:0;border-radius:0;background:transparent}.invoice-theme-minimal .invoice-textarea{padding-left:0;padding-right:0}.invoice-theme-minimal .invoice-items-table{border-spacing:0;border-collapse:collapse}.invoice-theme-minimal .invoice-items-table thead th{background:transparent;color:#20252b;border-top:1px solid #20252b;border-bottom:1px solid #20252b;border-radius:0!important;padding:12px 8px;text-transform:uppercase;letter-spacing:.07em;font-size:.68rem}.invoice-theme-minimal .invoice-items-table tbody td{border-bottom:1px solid #eceef1;padding:5px 0}.invoice-theme-minimal .invoice-add-item{background:transparent;border:1px dashed #d9dde2}.invoice-theme-minimal .invoice-bottom-grid{grid-template-columns:1.35fr .65fr;gap:60px}.invoice-theme-minimal .invoice-editable-label{margin-left:0;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:#68717b}.invoice-theme-minimal .invoice-totals-area{padding:0}.invoice-theme-minimal .invoice-balance-row{border-top:2px solid #20252b;padding-top:10px}

/* 3. MODERN — dark accent title panel + asymmetric header */
.invoice-theme-modern{--invoice-ink:#172033;--invoice-line:#d8dfe8;--invoice-accent:#2457d6;--invoice-accent-soft:#eef3ff;padding:0 34px 34px;overflow:hidden}.invoice-theme-modern:before{content:"";display:block;height:10px;background:#2457d6;margin:0 -34px 28px}.invoice-theme-modern .invoice-top-grid{grid-template-columns:1fr 1.15fr;gap:30px;align-items:stretch}.invoice-theme-modern .invoice-logo-upload{width:185px;height:100px;background:#f7f9fc}.invoice-theme-modern .invoice-title-area{background:#172033;padding:22px 24px;border-radius:10px;text-align:left}.invoice-theme-modern .invoice-title-input{color:#fff;text-align:left;font-size:2.45rem;letter-spacing:.05em}.invoice-theme-modern .invoice-number-row{margin:14px 0 0;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}.invoice-theme-modern .invoice-prefix{color:#cdd7ea}.invoice-theme-modern .invoice-details-grid{grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}.invoice-theme-modern .invoice-party-grid{grid-template-columns:1fr 1fr}.invoice-theme-modern .invoice-meta-list{background:#eef3ff;border-radius:10px;padding:14px 16px}.invoice-theme-modern .invoice-meta-row{grid-template-columns:120px 1fr}.invoice-theme-modern .invoice-items-table{border-spacing:0}.invoice-theme-modern .invoice-items-table thead th{background:#2457d6;border-radius:0!important;padding:12px}.invoice-theme-modern .invoice-items-table thead th:first-child{border-radius:8px 0 0 8px!important}.invoice-theme-modern .invoice-items-table thead th:nth-last-child(2){}.invoice-theme-modern .invoice-items-table tbody td{padding-top:7px}.invoice-theme-modern .invoice-bottom-grid{grid-template-columns:1fr 360px}.invoice-theme-modern .invoice-grand-total{background:#eef3ff;padding:0 10px;border-radius:6px}.invoice-theme-modern .invoice-balance-row{background:#172033;color:#fff;padding:0 12px;border-radius:7px}

/* 4. EXECUTIVE — logo on right, title on left, formal ruled sections */
.invoice-theme-executive{--invoice-ink:#17232d;--invoice-line:#cdd5db;--invoice-accent:#394b59;border-top:8px solid #394b59;padding:34px}.invoice-theme-executive .invoice-top-grid{grid-template-columns:1fr 220px;gap:40px}.invoice-theme-executive .invoice-logo-area{order:2;display:flex;justify-content:flex-end}.invoice-theme-executive .invoice-title-area{order:1;text-align:left}.invoice-theme-executive .invoice-title-input{text-align:left;font-family:Georgia,"Times New Roman",serif;font-size:2.55rem;font-weight:500;letter-spacing:.03em}.invoice-theme-executive .invoice-number-row{margin:12px 0 0;border:0;border-left:3px solid #394b59;border-radius:0}.invoice-theme-executive .invoice-logo-upload{width:180px;height:95px;background:#fff}.invoice-theme-executive .invoice-details-grid{grid-template-columns:1.2fr .8fr;border-top:1px solid #aeb8c0;padding-top:24px}.invoice-theme-executive .invoice-party-grid{gap:18px}.invoice-theme-executive .invoice-editable-label,.invoice-theme-executive .invoice-meta-row>span{text-transform:uppercase;letter-spacing:.08em;font-size:.67rem;font-weight:700;color:#5d6972}.invoice-theme-executive .invoice-items-table{border-collapse:collapse;border-spacing:0}.invoice-theme-executive .invoice-items-table thead th{background:#394b59;border-radius:0!important}.invoice-theme-executive .invoice-items-table tbody td{border-bottom:1px solid #dde2e6;padding:6px 0}.invoice-theme-executive .invoice-bottom-grid{grid-template-columns:1fr 330px}.invoice-theme-executive .invoice-totals-area{border-left:1px solid #cdd5db;padding-left:28px}.invoice-theme-executive .invoice-balance-row{border-top:2px solid #394b59}

/* 5. LEDGER — dense accounting sheet; metadata across the top */
.invoice-theme-ledger{--invoice-ink:#18211b;--invoice-line:#cfd8d1;--invoice-accent:#2d5b3c;--invoice-accent-soft:#edf5ef;padding:26px}.invoice-theme-ledger .invoice-top-grid{grid-template-columns:170px 1fr;gap:24px;align-items:center}.invoice-theme-ledger .invoice-logo-upload{width:150px;height:82px;background:#fff}.invoice-theme-ledger .invoice-title-area{text-align:left}.invoice-theme-ledger .invoice-title-input{text-align:left;font-size:2rem;color:#2d5b3c}.invoice-theme-ledger .invoice-number-row{margin:7px 0 0;width:140px}.invoice-theme-ledger .invoice-details-grid{grid-template-columns:1fr;gap:18px;margin-top:20px}.invoice-theme-ledger .invoice-party-section{display:grid;grid-template-columns:1fr 2fr;gap:22px}.invoice-theme-ledger .invoice-from{max-width:none}.invoice-theme-ledger .invoice-party-grid{margin-top:0}.invoice-theme-ledger .invoice-meta-list{grid-row:1;grid-template-columns:repeat(4,1fr);gap:0;background:#edf5ef;border:1px solid #cfd8d1}.invoice-theme-ledger .invoice-meta-row{display:block;padding:9px 10px;border-right:1px solid #cfd8d1}.invoice-theme-ledger .invoice-meta-row:last-child{border-right:0}.invoice-theme-ledger .invoice-meta-row>span{display:block;padding:0;font-size:.67rem;font-weight:700;text-transform:uppercase;color:#54705c}.invoice-theme-ledger .invoice-meta-row input{height:28px;border:0;background:transparent;padding:2px 0;font-weight:600}.invoice-theme-ledger .invoice-items-wrap{margin-top:22px;border:1px solid #cfd8d1}.invoice-theme-ledger .invoice-items-table{border-collapse:collapse;border-spacing:0}.invoice-theme-ledger .invoice-items-table thead th{background:#2d5b3c;border-radius:0!important}.invoice-theme-ledger .invoice-items-table tbody td{border-bottom:1px solid #dfe6e1}.invoice-theme-ledger .invoice-item-input,.invoice-theme-ledger .invoice-qty-input,.invoice-theme-ledger .invoice-rate-wrap{border:0;border-radius:0;background:transparent}.invoice-theme-ledger .invoice-add-item{width:100%;border-radius:0;background:#edf5ef}.invoice-theme-ledger .invoice-bottom-grid{grid-template-columns:1.1fr .9fr;gap:24px}.invoice-theme-ledger .invoice-totals-area{background:#f8fbf9;border:1px solid #cfd8d1;padding:12px 14px}.invoice-theme-ledger .invoice-balance-row{background:#2d5b3c;color:#fff;padding:0 10px}

/* 6. STUDIO — creative split, centered title, cards for parties */
.invoice-theme-studio{--invoice-ink:#26222d;--invoice-line:#ddd6e3;--invoice-accent:#7157a6;--invoice-accent-soft:#f4f0fb;padding:34px}.invoice-theme-studio .invoice-top-grid{grid-template-columns:1fr;gap:18px;text-align:center}.invoice-theme-studio .invoice-logo-area{display:flex;justify-content:center}.invoice-theme-studio .invoice-logo-upload{width:170px;height:82px;border:0;background:#f4f0fb;border-radius:14px}.invoice-theme-studio .invoice-title-area{text-align:center}.invoice-theme-studio .invoice-title-input{text-align:center;font-size:2.7rem;font-weight:500;letter-spacing:.12em;color:#7157a6}.invoice-theme-studio .invoice-number-row{margin:10px auto 0;border:0;background:#f4f0fb}.invoice-theme-studio .invoice-details-grid{grid-template-columns:1fr;gap:20px}.invoice-theme-studio .invoice-party-section{display:grid;grid-template-columns:.8fr 1.4fr;gap:20px}.invoice-theme-studio .invoice-from{max-width:none;background:#fbfafe}.invoice-theme-studio .invoice-party-grid{margin:0}.invoice-theme-studio .invoice-party-grid>div{background:#fbfafe;border:1px solid #e6dfec;border-radius:14px;padding:14px}.invoice-theme-studio .invoice-party-grid .invoice-editable-label{margin-left:0;color:#7157a6;font-weight:700}.invoice-theme-studio .invoice-party-grid .invoice-textarea{border:0;background:transparent;padding-left:0}.invoice-theme-studio .invoice-meta-list{grid-template-columns:repeat(4,1fr);gap:8px}.invoice-theme-studio .invoice-meta-row{display:block;text-align:center;background:#f4f0fb;border-radius:10px;padding:8px}.invoice-theme-studio .invoice-meta-row>span{display:block;padding:0;font-size:.67rem;color:#7157a6}.invoice-theme-studio .invoice-meta-row input{height:28px;border:0;background:transparent;text-align:center;padding:2px}.invoice-theme-studio .invoice-items-table{border-spacing:0 7px}.invoice-theme-studio .invoice-items-table thead th{background:transparent;color:#7157a6;border-bottom:2px solid #7157a6;border-radius:0!important}.invoice-theme-studio .invoice-items-table tbody tr{background:#fbfafe}.invoice-theme-studio .invoice-item-input,.invoice-theme-studio .invoice-qty-input,.invoice-theme-studio .invoice-rate-wrap{background:transparent;border-color:#e6dfec}.invoice-theme-studio .invoice-add-item{background:#f4f0fb;color:#7157a6}.invoice-theme-studio .invoice-bottom-grid{grid-template-columns:1.2fr .8fr}.invoice-theme-studio .invoice-totals-area{background:#f4f0fb;border-radius:14px;padding:16px}.invoice-theme-studio .invoice-balance-row{background:#7157a6;color:#fff;border-radius:8px;padding:0 10px}

/* 7. ELEGANT — centered editorial header, serif type, understated rules */
.invoice-theme-elegant{--invoice-ink:#2a2725;--invoice-line:#d8d1c9;--invoice-accent:#7a654c;padding:46px 44px}.invoice-theme-elegant .invoice-top-grid{grid-template-columns:1fr;gap:15px}.invoice-theme-elegant .invoice-logo-area{display:flex;justify-content:center}.invoice-theme-elegant .invoice-logo-upload{width:160px;height:75px;border:0;background:transparent}.invoice-theme-elegant .invoice-title-area{text-align:center}.invoice-theme-elegant .invoice-title-input{font-family:Georgia,"Times New Roman",serif;text-align:center;font-size:2.45rem;font-weight:400;letter-spacing:.18em;color:#7a654c}.invoice-theme-elegant .invoice-number-row{margin:10px auto 0;border:0;border-top:1px solid #d8d1c9;border-bottom:1px solid #d8d1c9;border-radius:0;width:145px}.invoice-theme-elegant .invoice-details-grid{grid-template-columns:1fr 1fr;gap:50px;margin-top:36px}.invoice-theme-elegant .invoice-from{max-width:none}.invoice-theme-elegant .invoice-party-grid{grid-template-columns:1fr;margin-top:20px}.invoice-theme-elegant .invoice-editable-label,.invoice-theme-elegant .invoice-meta-row>span{font-family:Georgia,"Times New Roman",serif;color:#7a654c}.invoice-theme-elegant .invoice-textarea,.invoice-theme-elegant .invoice-meta-row input{border:0;border-bottom:1px solid #d8d1c9;border-radius:0;padding-left:0;background:transparent}.invoice-theme-elegant .invoice-meta-row{grid-template-columns:125px 1fr;border-bottom:1px solid #eee9e4}.invoice-theme-elegant .invoice-meta-row input{border:0}.invoice-theme-elegant .invoice-items-table{border-collapse:collapse;border-spacing:0}.invoice-theme-elegant .invoice-items-table thead th{font-family:Georgia,"Times New Roman",serif;background:transparent;color:#7a654c;border-top:1px solid #7a654c;border-bottom:1px solid #7a654c;border-radius:0!important;font-weight:400}.invoice-theme-elegant .invoice-items-table tbody td{border-bottom:1px solid #eee9e4}.invoice-theme-elegant .invoice-item-input,.invoice-theme-elegant .invoice-qty-input,.invoice-theme-elegant .invoice-rate-wrap{border:0;background:transparent}.invoice-theme-elegant .invoice-add-item{background:transparent;border:1px solid #d8d1c9}.invoice-theme-elegant .invoice-bottom-grid{grid-template-columns:1.25fr .75fr;gap:50px}.invoice-theme-elegant .invoice-totals-area{padding:0}.invoice-theme-elegant .invoice-grand-total,.invoice-theme-elegant .invoice-balance-row{font-family:Georgia,"Times New Roman",serif}.invoice-theme-elegant .invoice-balance-row{border-top:1px solid #7a654c;border-bottom:1px solid #7a654c}

/* 8. COMPACT — high-information density for long invoices */
.invoice-theme-compact{--invoice-ink:#18212b;--invoice-line:#cfd5dc;--invoice-accent:#18212b;padding:22px;min-height:760px;font-size:.92rem}.invoice-theme-compact .invoice-top-grid{grid-template-columns:125px 1fr;gap:18px;align-items:center}.invoice-theme-compact .invoice-logo-upload{width:115px;height:62px;font-size:.78rem}.invoice-theme-compact .invoice-title-area{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px}.invoice-theme-compact .invoice-title-input{text-align:left;font-size:1.9rem;width:auto;flex:1}.invoice-theme-compact .invoice-number-row{margin:0;width:130px;height:34px}.invoice-theme-compact .invoice-details-grid{grid-template-columns:1.4fr 1fr;gap:18px;margin-top:14px}.invoice-theme-compact .invoice-from{min-height:42px;max-width:100%}.invoice-theme-compact .invoice-party-grid{margin-top:10px;gap:10px}.invoice-theme-compact .invoice-textarea{min-height:42px;padding:7px 8px}.invoice-theme-compact .invoice-editable-label{margin:0 0 4px 5px;font-size:.72rem}.invoice-theme-compact .invoice-meta-list{gap:3px}.invoice-theme-compact .invoice-meta-row{grid-template-columns:105px 1fr;gap:7px}.invoice-theme-compact .invoice-meta-row>span{font-size:.73rem}.invoice-theme-compact .invoice-meta-row input{height:32px;padding:5px 7px}.invoice-theme-compact .invoice-items-wrap{margin-top:14px}.invoice-theme-compact .invoice-items-table{border-spacing:0 2px}.invoice-theme-compact .invoice-items-table thead th{padding:7px 8px;font-size:.72rem}.invoice-theme-compact .invoice-item-input,.invoice-theme-compact .invoice-qty-input,.invoice-theme-compact .invoice-rate-wrap{height:32px}.invoice-theme-compact .invoice-rate-input{height:30px}.invoice-theme-compact .invoice-add-item{height:30px}.invoice-theme-compact .invoice-bottom-grid{grid-template-columns:1fr 320px;gap:18px;margin-top:16px}.invoice-theme-compact .invoice-terms-label{margin-top:12px}.invoice-theme-compact .invoice-total-row{min-height:34px}.invoice-theme-compact .invoice-inline-control,.invoice-theme-compact .invoice-money-input{height:32px;width:132px}.invoice-theme-compact .invoice-inline-control input,.invoice-theme-compact .invoice-inline-control select{height:30px}

/* 9. BOLD — strong left rail and oversized title */
.invoice-theme-bold{--invoice-ink:#101820;--invoice-line:#d3d8de;--invoice-accent:#101820;padding:34px 34px 34px 54px;position:relative}.invoice-theme-bold:before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:#101820}.invoice-theme-bold .invoice-top-grid{grid-template-columns:1fr 190px;gap:32px}.invoice-theme-bold .invoice-logo-area{order:2;display:flex;justify-content:flex-end}.invoice-theme-bold .invoice-title-area{order:1;text-align:left}.invoice-theme-bold .invoice-title-input{text-align:left;font-size:3.4rem;line-height:.9;font-weight:900;letter-spacing:-.04em}.invoice-theme-bold .invoice-number-row{margin:15px 0 0;background:#101820;color:#fff;border-color:#101820}.invoice-theme-bold .invoice-prefix{color:#fff}.invoice-theme-bold .invoice-logo-upload{width:170px;height:100px;background:#fff}.invoice-theme-bold .invoice-details-grid{grid-template-columns:1fr 320px;gap:30px}.invoice-theme-bold .invoice-party-grid>div{border-left:4px solid #101820;padding-left:12px}.invoice-theme-bold .invoice-meta-list{border:2px solid #101820;padding:12px}.invoice-theme-bold .invoice-meta-row{grid-template-columns:110px 1fr}.invoice-theme-bold .invoice-items-table{border-spacing:0}.invoice-theme-bold .invoice-items-table thead th{background:#101820;border-radius:0!important;text-transform:uppercase;letter-spacing:.05em}.invoice-theme-bold .invoice-items-table tbody td{border-bottom:1px solid #d3d8de;padding:6px 0}.invoice-theme-bold .invoice-bottom-grid{grid-template-columns:1fr 350px}.invoice-theme-bold .invoice-totals-area{padding:0}.invoice-theme-bold .invoice-grand-total{border-top:3px solid #101820}.invoice-theme-bold .invoice-balance-row{background:#101820;color:#fff;padding:4px 12px;min-height:48px}.invoice-theme-bold .invoice-balance-row span,.invoice-theme-bold .invoice-balance-row strong{font-size:1.25rem}

/* 10. SOFT — rounded card sections with friendly spacing */
.invoice-theme-soft{--invoice-ink:#25313d;--invoice-line:#dbe3e9;--invoice-accent:#4a6878;--invoice-accent-soft:#f1f6f8;background:#fbfcfd;padding:32px}.invoice-theme-soft .invoice-top-grid{grid-template-columns:210px 1fr;gap:28px;align-items:center}.invoice-theme-soft .invoice-logo-upload{width:190px;height:105px;background:#fff;border-radius:14px}.invoice-theme-soft .invoice-title-area{text-align:left}.invoice-theme-soft .invoice-title-input{text-align:left;font-size:2.5rem;color:#4a6878}.invoice-theme-soft .invoice-number-row{margin:12px 0 0;border:0;background:#edf3f6}.invoice-theme-soft .invoice-details-grid{grid-template-columns:1fr 1fr;gap:20px}.invoice-theme-soft .invoice-party-section,.invoice-theme-soft .invoice-meta-list{background:#fff;border:1px solid #e3eaee;border-radius:16px;padding:18px}.invoice-theme-soft .invoice-from{max-width:100%}.invoice-theme-soft .invoice-party-grid{gap:12px;margin-top:16px}.invoice-theme-soft .invoice-textarea,.invoice-theme-soft .invoice-meta-row input{background:#f8fafb;border-color:#e5ebef}.invoice-theme-soft .invoice-meta-row{grid-template-columns:120px 1fr}.invoice-theme-soft .invoice-items-wrap{background:#fff;border:1px solid #e3eaee;border-radius:16px;padding:14px;margin-top:22px}.invoice-theme-soft .invoice-items-table{border-spacing:0 5px}.invoice-theme-soft .invoice-items-table thead th{background:#edf3f6;color:#4a6878}.invoice-theme-soft .invoice-items-table thead th:first-child{border-radius:10px 0 0 10px}.invoice-theme-soft .invoice-items-table thead th:nth-last-child(2){}.invoice-theme-soft .invoice-add-item{width:100%;background:#edf3f6;color:#4a6878}.invoice-theme-soft .invoice-bottom-grid{grid-template-columns:1fr 360px;gap:20px}.invoice-theme-soft .invoice-notes-area,.invoice-theme-soft .invoice-totals-area{background:#fff;border:1px solid #e3eaee;border-radius:16px;padding:18px}.invoice-theme-soft .invoice-terms-label{margin-top:18px}.invoice-theme-soft .invoice-balance-row{background:#edf3f6;border-radius:9px;padding:0 10px;color:#344f5e}

@media screen and (max-width:991px){.invoice-workspace{grid-template-columns:1fr}.invoice-settings-panel{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px}.invoice-actions-card{margin-top:0}.invoice-paper{padding:24px}.invoice-top-grid{grid-template-columns:1fr 260px}.invoice-details-grid{grid-template-columns:1fr}.invoice-meta-list{max-width:none;margin-left:0;width:100%}.invoice-theme-minimal .invoice-party-section,.invoice-theme-ledger .invoice-party-section,.invoice-theme-studio .invoice-party-section{grid-template-columns:1fr}.invoice-theme-minimal .invoice-meta-list,.invoice-theme-ledger .invoice-meta-list,.invoice-theme-studio .invoice-meta-list{grid-template-columns:repeat(2,1fr)}.invoice-theme-modern .invoice-details-grid,.invoice-theme-elegant .invoice-details-grid,.invoice-theme-soft .invoice-details-grid{grid-template-columns:1fr}.invoice-theme-bold .invoice-details-grid{grid-template-columns:1fr}.invoice-theme-executive .invoice-details-grid{grid-template-columns:1fr}.invoice-theme-compact .invoice-details-grid{grid-template-columns:1fr}}
@media screen and (max-width:767px){.invoice-paper,.invoice-theme-minimal,.invoice-theme-modern,.invoice-theme-executive,.invoice-theme-ledger,.invoice-theme-studio,.invoice-theme-elegant,.invoice-theme-compact,.invoice-theme-bold,.invoice-theme-soft{padding:16px}.invoice-theme-modern:before{margin:0 -16px 18px}.invoice-theme-bold{padding-left:30px}.invoice-theme-bold:before{width:10px}.invoice-top-grid,.invoice-theme-minimal .invoice-top-grid,.invoice-theme-modern .invoice-top-grid,.invoice-theme-executive .invoice-top-grid,.invoice-theme-ledger .invoice-top-grid,.invoice-theme-studio .invoice-top-grid,.invoice-theme-elegant .invoice-top-grid,.invoice-theme-compact .invoice-top-grid,.invoice-theme-bold .invoice-top-grid,.invoice-theme-soft .invoice-top-grid{grid-template-columns:1fr;gap:16px}.invoice-theme-executive .invoice-logo-area,.invoice-theme-bold .invoice-logo-area{order:1;justify-content:flex-start}.invoice-theme-executive .invoice-title-area,.invoice-theme-bold .invoice-title-area{order:2}.invoice-title-area,.invoice-theme-classic .invoice-title-area{text-align:left}.invoice-title-input,.invoice-theme-classic .invoice-title-input{text-align:left;font-size:2.1rem}.invoice-number-row{margin-left:0}.invoice-party-grid,.invoice-theme-elegant .invoice-party-grid{grid-template-columns:1fr}.invoice-meta-row{grid-template-columns:1fr}.invoice-theme-minimal .invoice-meta-list,.invoice-theme-ledger .invoice-meta-list,.invoice-theme-studio .invoice-meta-list{grid-template-columns:1fr}.invoice-theme-ledger .invoice-meta-row{border-right:0;border-bottom:1px solid #cfd8d1}.invoice-items-wrap{overflow-x:auto}.invoice-items-table{min-width:670px}.invoice-bottom-grid,.invoice-theme-minimal .invoice-bottom-grid,.invoice-theme-modern .invoice-bottom-grid,.invoice-theme-executive .invoice-bottom-grid,.invoice-theme-ledger .invoice-bottom-grid,.invoice-theme-studio .invoice-bottom-grid,.invoice-theme-elegant .invoice-bottom-grid,.invoice-theme-compact .invoice-bottom-grid,.invoice-theme-bold .invoice-bottom-grid,.invoice-theme-soft .invoice-bottom-grid{grid-template-columns:1fr;gap:18px}.invoice-settings-panel{grid-template-columns:1fr}.invoice-totals-area{padding-left:0}.invoice-theme-compact .invoice-title-area{display:block}.invoice-theme-compact .invoice-number-row{margin-top:8px}}



/* Production paper preview + PDF/print rules. Screen keeps the editable A-series canvas;
   backend Chromium uses the same theme CSS with print media and real paper sizes. */
.invoice-paper{
  width:100%;
  max-width:900px;
  margin-inline:auto;
  /* Do not use aspect-ratio here. An editable invoice can grow beyond one page.
     aspect-ratio gives the box a fixed computed height and lets long content
     visually overflow into the section below on small screens. */
  aspect-ratio:auto;
  height:auto;
  min-height:1273px; /* A4-like preview at the canonical 900px desktop width. */
  overflow:visible;
}
.invoice-paper[data-paper-size="LETTER"]{
  aspect-ratio:auto;
  min-height:1165px; /* Letter-like preview at the canonical 900px desktop width. */
}
.invoice-paper::after{content:"";display:block;clear:both}

@media screen and (min-width:1200px){
  .invoice-workspace{grid-template-columns:minmax(0,900px) 260px;gap:32px;justify-content:space-between}
  .invoice-paper{margin-inline:0}
}

@media screen and (min-width:992px) and (max-width:1199px){
  .invoice-workspace{grid-template-columns:minmax(0,1fr) 250px;gap:24px}
  .invoice-paper{margin-inline:0}
}

@media print{
  @page{margin:9mm}
  html,body{margin:0!important;padding:0!important;background:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif}
  .invoice-settings-panel,.page-hero,.tool-content,.navbar-bt,.footer,.toast-bt{display:none!important}
  .invoice-tool-shell,.invoice-pdf-host{padding:0!important;margin:0!important;background:#fff!important;width:auto!important;max-width:none!important}
  .invoice-container{max-width:none!important;width:auto!important;padding:0!important;margin:0!important}
  .invoice-workspace{display:block!important;width:auto!important;margin:0!important}
  .invoice-paper,
  .invoice-paper[data-paper-size="LETTER"]{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:auto!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    overflow:visible!important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
  .invoice-logo-upload{cursor:default!important}
  .invoice-logo-upload.invoice-logo-empty{visibility:hidden!important}
  .invoice-remove-col,.invoice-remove-item,.invoice-add-item{display:none!important}
  .invoice-items-wrap{overflow:visible!important}
  .invoice-items-table{page-break-inside:auto;break-inside:auto;width:100%!important}
  .invoice-items-table thead{display:table-header-group}
  .invoice-items-table tfoot{display:table-footer-group}
  .invoice-items-table tr{page-break-inside:avoid;break-inside:avoid;page-break-after:auto}
  .invoice-items-table td,.invoice-items-table th{break-inside:avoid}
  .invoice-top-grid,.invoice-details-grid,.invoice-party-grid,.invoice-meta-list{break-inside:avoid;page-break-inside:avoid}
  .invoice-bottom-grid,.invoice-totals-area,.invoice-notes-area{break-inside:avoid;page-break-inside:avoid}
  .invoice-total-row{break-inside:avoid;page-break-inside:avoid}
  input,textarea,select{
    -webkit-appearance:none!important;
    appearance:none!important;
    box-shadow:none!important;
    outline:none!important;
    resize:none!important;
    overflow:visible!important;
    opacity:1!important;
  }
  textarea{height:auto!important;min-height:0!important}
  select{background-image:none!important}
  [contenteditable]{outline:0!important}
  a{color:inherit!important;text-decoration:none!important}
}
.invoice-setting-help{display:block;margin-top:6px;color:#8793a5;font-size:.68rem;line-height:1.35}
.invoice-item-description{resize:none;min-height:39px;height:39px;line-height:1.35;overflow:hidden;padding-top:9px;padding-bottom:9px}
@media print{.invoice-item-description{white-space:pre-wrap!important;overflow:visible!important}}
.invoice-static-text{white-space:pre-wrap;overflow-wrap:anywhere;height:auto!important}
.invoice-pdf-host .invoice-static-text.invoice-textarea{min-height:58px}
.invoice-pdf-host .invoice-static-text.invoice-item-description{min-height:39px}


/* ============================================================
   Bootstrap responsive workspace layout
   ------------------------------------------------------------
   The page shell uses Bootstrap rows/columns. The invoice itself
   keeps a 900px canonical desktop canvas so screen/PDF layouts stay
   aligned, while the surrounding columns stack naturally on smaller
   screens.
   ============================================================ */
.invoice-container{
  max-width:1320px;
}
.invoice-workspace.row{
  display:flex;
  grid-template-columns:none;
  gap:0;
  align-items:flex-start;
}
.invoice-preview-column{
  min-width:0;
  display:flex;
  justify-content:flex-start;
}
.invoice-settings-column{
  min-width:0;
}
.invoice-preview-column .invoice-paper{
  width:100%;
  max-width:900px;
  margin-inline:0;
}
.invoice-settings-column .invoice-settings-panel{
  width:100%;
}

@media screen and (min-width:1200px){
  .invoice-settings-panel{
    position:sticky;
    top:90px;
    display:block;
  }
  .invoice-actions-card{
    margin-top:12px;
  }
}

/* Tablet / small desktop: settings first in a compact two-card row,
   invoice below at full available width. */
@media screen and (min-width:768px) and (max-width:1199.98px){
  .invoice-settings-panel{
    position:static;
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(220px,1fr);
    gap:16px;
    align-items:start;
  }
  .invoice-actions-card{
    margin-top:0;
  }
  .invoice-preview-column .invoice-paper{
    max-width:900px;
    margin-inline:auto;
  }
}

/* Phones: stack controls cleanly above the editor. */
@media screen and (max-width:767.98px){
  .invoice-tool-shell{
    padding-top:22px;
  }
  .invoice-container{
    padding-left:12px;
    padding-right:12px;
  }
  .invoice-workspace.row{
    --bs-gutter-x:16px;
    --bs-gutter-y:16px;
  }
  .invoice-settings-panel{
    position:static;
    display:block;
  }
  .invoice-actions-card{
    margin-top:10px;
  }
  .invoice-settings-card,
  .invoice-actions-card{
    border-radius:12px;
  }
  .invoice-preview-column{
    padding-left:0;
    padding-right:0;
  }
  .invoice-preview-column .invoice-paper{
    width:100%;
    max-width:none;
    margin-inline:0;
    box-shadow:0 1px 0 rgba(16,32,56,.08);
  }
  .invoice-items-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .invoice-items-table{
    min-width:620px;
  }
  .invoice-setting-group .form-select,
  .invoice-save-default,
  .invoice-actions-card .btn{
    min-height:44px;
  }
}

/* Very small phones: slightly tighter canvas without reducing tap targets. */
@media screen and (max-width:479.98px){
  .invoice-paper,
  .invoice-theme-minimal,
  .invoice-theme-modern,
  .invoice-theme-executive,
  .invoice-theme-ledger,
  .invoice-theme-studio,
  .invoice-theme-elegant,
  .invoice-theme-compact,
  .invoice-theme-bold,
  .invoice-theme-soft{
    padding:12px;
  }
  .invoice-theme-modern:before{
    margin-left:-12px;
    margin-right:-12px;
  }
  .invoice-logo-upload{
    max-width:180px;
    width:100%;
  }
  .invoice-title-input{
    font-size:1.9rem;
  }
  .invoice-number-row{
    width:150px;
  }
}

/* Print/PDF is independent of the Bootstrap screen columns. */
@media print{
  .invoice-preview-column,
  .invoice-settings-column{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    flex:0 0 100%!important;
    padding:0!important;
  }
}

/* ============================================================
   Document-flow / mobile overlap fix
   ------------------------------------------------------------
   The invoice is an editable document and may be taller than one paper page.
   Keep its height content-driven so the following article can never overlap it.
   ============================================================ */
.invoice-tool-shell{
  position:relative;
  display:block;
  overflow:visible;
}
.invoice-tool-shell .invoice-container,
.invoice-tool-shell .invoice-workspace,
.invoice-tool-shell .invoice-preview-column,
.invoice-tool-shell .invoice-settings-column{
  position:relative;
  height:auto;
  min-height:0;
}
.invoice-tool-shell + .tool-content{
  position:relative;
  clear:both;
  margin-top:48px;
}

@media screen and (max-width:767.98px){
  .invoice-tool-shell{
    padding-bottom:0;
  }

  .invoice-workspace.row{
    height:auto!important;
    min-height:0!important;
    margin-bottom:0;
    overflow:visible;
  }

  .invoice-preview-column,
  .invoice-settings-column{
    height:auto!important;
    min-height:0!important;
    float:none!important;
  }

  .invoice-preview-column .invoice-paper{
    position:relative;
    width:100%;
    height:auto!important;
    aspect-ratio:auto!important;
    /* Mobile A4/Letter preview height follows the actual available canvas width.
       This is only a minimum; invoice content is free to make the box taller. */
    min-height:calc((100vw - 24px) * 1.4142857);
    overflow:visible;
  }

  .invoice-preview-column .invoice-paper[data-paper-size="LETTER"]{
    min-height:calc((100vw - 24px) * 1.2941176);
  }

  .invoice-tool-shell + .tool-content{
    margin-top:40px;
    padding-top:0;
  }
}

@media screen and (max-width:479.98px){
  .invoice-tool-shell + .tool-content{
    margin-top:32px;
  }
}


/* =========================================================
   Live document builder toolbar
   ========================================================= */
.invoice-preview-column{
  flex-direction:column;
}
.builder-toolbar{
  width:100%;
  max-width:900px;
  min-height:74px;
  margin:0 0 14px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#fffdf9;
  border:1px solid var(--bt-border);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(16,32,56,.04);
}
.builder-toolbar-copy{
  min-width:0;
}
.builder-toolbar-copy strong{
  display:block;
  color:var(--invoice-ink,#0f1b2d);
  font-size:1rem;
  line-height:1.25;
  font-weight:750;
}
.builder-toolbar-copy small{
  margin-top:3px;
  color:#66758c;
  font-size:.82rem;
  line-height:1.35;
}
.builder-toolbar-actions{
  flex:0 0 auto;
  align-items:center;
}
.builder-toolbar .btn{
  min-height:40px;
  white-space:nowrap;
  padding:.55rem 1rem;
  font-weight:650;
}

@media screen and (min-width:768px) and (max-width:1199.98px){
  .builder-toolbar{
    max-width:900px;
    margin-inline:auto;
  }
}

@media screen and (max-width:767.98px){
  .builder-toolbar{
    max-width:none;
    min-height:0;
    margin-bottom:10px;
    padding:13px 14px;
    border-radius:12px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .builder-toolbar-copy{
    flex:1 1 180px;
  }
  .builder-toolbar-actions{
    flex:1 1 100%;
    width:100%;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
  }
  .builder-toolbar .btn{
    width:100%;
    min-height:44px;
    padding:.6rem .7rem;
  }
}

@media screen and (max-width:420px){
  .builder-toolbar-actions{
    grid-template-columns:1fr;
  }
}

@media print{
  .builder-toolbar{display:none!important}
}


/* =========================================================
   Attached builder toolbar + centered workspace columns
   ========================================================= */
.invoice-preview-column{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.invoice-document-builder{
  width:100%;
  max-width:900px;
  margin-inline:auto;
}

.invoice-document-builder .builder-toolbar{
  width:100%;
  max-width:none;
  margin:0;
  border-radius:14px 14px 0 0;
  border-bottom:0;
  box-shadow:none;
}

.invoice-document-builder .invoice-paper{
  width:100%;
  max-width:none;
  margin-inline:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
}

.invoice-settings-column{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.invoice-settings-column .invoice-settings-panel{
  width:100%;
  max-width:300px;
  margin-inline:auto;
}

@media screen and (min-width:1200px){
  .invoice-preview-column .invoice-paper,
  .invoice-document-builder{
    margin-inline:auto;
  }
  .invoice-settings-column .invoice-settings-panel{
    margin-inline:auto;
  }
}

@media screen and (min-width:768px) and (max-width:1199.98px){
  .invoice-document-builder{
    margin-inline:auto;
  }
  .invoice-settings-column .invoice-settings-panel{
    max-width:900px;
    margin-inline:auto;
  }
}

@media screen and (max-width:767.98px){
  .invoice-preview-column{
    display:block;
  }
  .invoice-document-builder{
    max-width:none;
    margin-inline:auto;
  }
  .invoice-document-builder .builder-toolbar{
    margin-bottom:0;
    border-radius:12px 12px 0 0;
  }
  .invoice-document-builder .invoice-paper{
    border-top-left-radius:0;
    border-top-right-radius:0;
  }
  .invoice-settings-column{
    display:block;
  }
  .invoice-settings-column .invoice-settings-panel{
    max-width:none;
    margin-inline:auto;
  }
}

@media print{
  .invoice-document-builder{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
  }
}


/* Line-item control height alignment */
.invoice-items-table .invoice-item-input,
.invoice-items-table .invoice-qty-input,
.invoice-items-table .invoice-rate-input,
.invoice-items-table .invoice-rate-wrap {
  box-sizing: border-box;
}

.invoice-items-table textarea.invoice-item-description {
  height: 39px;
  min-height: 39px;
  padding: 7px 10px;
  line-height: 23px;
  overflow-y: hidden;
  resize: none;
  vertical-align: middle;
}

.invoice-theme-compact .invoice-items-table textarea.invoice-item-description {
  height: 32px;
  min-height: 32px;
  line-height: 16px;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* ============================================================
   Compact numeric typography
   Keeps large invoice values (millions/billions) inside controls
   while preserving readable labels and theme styling.
   ============================================================ */

/* Line items: quantity, rate and calculated amount */
.invoice-items-table .invoice-qty-input,
.invoice-items-table .invoice-rate-input,
.invoice-items-table .invoice-rate-wrap,
.invoice-items-table .invoice-row-amount {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.invoice-items-table .invoice-rate-wrap > span {
  font-size: .74rem;
}

/* Discount / Tax fixed-or-percent controls */
.invoice-inline-control input,
.invoice-inline-control select {
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

/* Shipping / Amount Paid controls */
.invoice-money-input,
.invoice-money-input input {
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.invoice-money-input > span {
  font-size: .74rem;
}

/* Calculated totals on the right side */
.invoice-total-row strong {
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-grand-total span,
.invoice-grand-total strong {
  font-size: .90rem;
}

.invoice-balance-row span,
.invoice-balance-row strong,
.invoice-theme-bold .invoice-balance-row span,
.invoice-theme-bold .invoice-balance-row strong {
  font-size: .95rem;
}

/* The Bold theme previously enlarged Balance Due to 1.25rem.
   Keep its strong visual treatment, but use a safer number size. */
.invoice-theme-bold .invoice-balance-row {
  font-weight: 800;
}

/* Compact theme is already dense, so make its numeric controls slightly smaller. */
.invoice-theme-compact .invoice-items-table .invoice-qty-input,
.invoice-theme-compact .invoice-items-table .invoice-rate-input,
.invoice-theme-compact .invoice-items-table .invoice-rate-wrap,
.invoice-theme-compact .invoice-items-table .invoice-row-amount,
.invoice-theme-compact .invoice-inline-control input,
.invoice-theme-compact .invoice-inline-control select,
.invoice-theme-compact .invoice-money-input,
.invoice-theme-compact .invoice-money-input input {
  font-size: .72rem;
}

/* Avoid long numbers colliding with the control edges. */
.invoice-inline-control input,
.invoice-money-input input,
.invoice-rate-input,
.invoice-qty-input {
  min-width: 0;
}

/* ============================================================
   Compact general invoice typography
   Slightly reduces non-numeric input text while preserving
   comfortable readability for addresses, notes and terms.
   ============================================================ */

/* General editable invoice fields */
.invoice-textarea,
.invoice-item-input,
.invoice-meta-row input,
.invoice-number-input {
  font-size: .82rem;
}

/* Item descriptions often contain longer text */
.invoice-item-description {
  font-size: .80rem;
  line-height: 1.35;
}

/* From / Bill To / Ship To / Notes / Terms */
.invoice-party-section .invoice-textarea,
.invoice-notes-area .invoice-textarea {
  font-size: .82rem;
  line-height: 1.4;
}

/* Date / Payment Terms / Due Date / PO Number */
.invoice-meta-row input {
  font-size: .80rem;
}

/* Editable labels remain compact but clearly readable */
.invoice-editable-label,
.invoice-meta-row > span {
  font-size: .78rem;
}

/* Compact theme can go slightly denser without looking cramped */
.invoice-theme-compact .invoice-textarea,
.invoice-theme-compact .invoice-item-input,
.invoice-theme-compact .invoice-meta-row input,
.invoice-theme-compact .invoice-number-input {
  font-size: .76rem;
}

.invoice-theme-compact .invoice-editable-label,
.invoice-theme-compact .invoice-meta-row > span {
  font-size: .70rem;
}

/* ============================================================
   Editable invoice footer
   Website + email are intentionally centered so the footer does
   not compete visually with the totals column on the right.
   ============================================================ */
.invoice-footer {
  margin-top: 38px;
  padding-top: 14px;
  border-top: 1px solid var(--invoice-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #7b8797;
  font-size: .80rem;
  line-height: 1.35;
}

.invoice-footer-input {
  min-width: 0;
  width: auto;
  max-width: 240px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 2px 0;
  text-align: center;
}

.invoice-footer-input::placeholder {
  color: #a7b0bc;
  opacity: 1;
}

.invoice-footer-website {
  width: 160px;
}

.invoice-footer-email {
  width: 190px;
}

.invoice-footer-separator {
  flex: 0 0 auto;
  color: #a7b0bc;
}

/* Keep footer treatment consistent with the themes. */
.invoice-theme-minimal .invoice-footer,
.invoice-theme-elegant .invoice-footer {
  background: transparent;
}

.invoice-theme-modern .invoice-footer {
  border-top-color: #d8dfe8;
}

.invoice-theme-ledger .invoice-footer {
  border-top-color: #cfd8d1;
  color: #54705c;
}

.invoice-theme-studio .invoice-footer {
  border-top-color: #ddd6e3;
  color: #7157a6;
}

.invoice-theme-elegant .invoice-footer {
  border-top-color: #d8d1c9;
  color: #7a654c;
  font-family: Georgia, "Times New Roman", serif;
}

.invoice-theme-soft .invoice-footer {
  border-top-color: #e3eaee;
  color: #607785;
}

.invoice-theme-bold .invoice-footer {
  border-top: 2px solid #101820;
  color: #4f5963;
}

@media screen and (max-width: 575.98px) {
  .invoice-footer {
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 28px;
  }

  .invoice-footer-input {
    width: 100%;
    max-width: none;
  }

  .invoice-footer-separator {
    display: none;
  }
}

@media print {
  .invoice-footer {
    margin-top: 30px;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .invoice-footer-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
  }

  .invoice-footer-input::placeholder {
    color: transparent !important;
  }
}

/* ============================================================
   Footer pinned to the bottom of the invoice paper
   ------------------------------------------------------------
   The invoice remains content-driven for long invoices. On short
   invoices the footer is pushed to the bottom of the A4/Letter
   preview instead of sitting directly below the totals/content.
   ============================================================ */
.invoice-paper {
  display: flex;
  flex-direction: column;
}

/* Normal invoice sections keep their natural height. */
.invoice-top-grid,
.invoice-details-grid,
.invoice-items-wrap,
.invoice-bottom-grid {
  flex: 0 0 auto;
}

/* Push the editable website/email footer to the bottom. */
.invoice-footer {
  margin-top: auto;
  padding-top: 14px;
}

/* Keep some breathing room between the invoice content and footer,
   even when the invoice becomes taller than one page. */
.invoice-bottom-grid + .invoice-footer {
  padding-top: 28px;
}

/* Preserve the compact spacing on phones. */
@media screen and (max-width: 575.98px) {
  .invoice-bottom-grid + .invoice-footer {
    padding-top: 22px;
  }
}

@media print {
  .invoice-paper {
    display: flex !important;
    flex-direction: column !important;
  }

  .invoice-footer {
    margin-top: auto !important;
  }
}

/* ============================================================
   Flexible borderless logo
   ------------------------------------------------------------
   Users may upload logos with any pixel dimensions/aspect ratio.
   The logo is never cropped or stretched; it scales to fit the
   reserved header area and keeps transparency.
   ============================================================ */
.invoice-logo-upload,
.invoice-theme-minimal .invoice-logo-upload,
.invoice-theme-modern .invoice-logo-upload,
.invoice-theme-executive .invoice-logo-upload,
.invoice-theme-ledger .invoice-logo-upload,
.invoice-theme-studio .invoice-logo-upload,
.invoice-theme-elegant .invoice-logo-upload,
.invoice-theme-compact .invoice-logo-upload,
.invoice-theme-bold .invoice-logo-upload,
.invoice-theme-soft .invoice-logo-upload {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.invoice-logo-upload img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Keep an empty upload target visible in the editor only. */
.invoice-logo-upload.invoice-logo-empty {
  background: rgba(15, 27, 45, .035) !important;
  outline: 1px dashed rgba(98, 112, 134, .28);
  outline-offset: -1px;
}

.invoice-logo-upload:not(.invoice-logo-empty) {
  outline: 0;
}

@media print {
  .invoice-logo-upload,
  .invoice-logo-upload.invoice-logo-empty {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   Final-document PDF/print polish
   ------------------------------------------------------------
   Screen editing controls remain unchanged. In print/PDF we remove
   editor-like field chrome and keep only the invoice structure.
   ============================================================ */
@media print {
  .invoice-pdf-host .invoice-number-row,
  .invoice-pdf-host .invoice-meta-row input,
  .invoice-pdf-host .invoice-textarea,
  .invoice-pdf-host .invoice-static-text.invoice-textarea,
  .invoice-pdf-host .invoice-item-input,
  .invoice-pdf-host .invoice-qty-input,
  .invoice-pdf-host .invoice-rate-wrap,
  .invoice-pdf-host .invoice-inline-control,
  .invoice-pdf-host .invoice-money-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .invoice-pdf-host .invoice-number-row,
  .invoice-pdf-host .invoice-meta-row input,
  .invoice-pdf-host .invoice-textarea,
  .invoice-pdf-host .invoice-static-text.invoice-textarea {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .invoice-pdf-host .invoice-inline-control select {
    border: 0 !important;
    border-right: 1px solid var(--invoice-line) !important;
    background: transparent !important;
  }

  .invoice-footer {
    font-size: .80rem;
  }
}

/* ============================================================
   PDF label alignment + emphasis
   ------------------------------------------------------------
   After removing field borders/padding in the final PDF, labels
   such as Bill To / Ship To / Notes / Terms must start on the
   same left edge as their content.
   ============================================================ */
@media print {
  .invoice-pdf-host .invoice-editable-label {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    font-weight: 700 !important;
  }

  .invoice-pdf-host .invoice-party-grid .invoice-editable-label,
  .invoice-pdf-host .invoice-notes-area .invoice-editable-label {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .invoice-pdf-host .invoice-party-grid .invoice-static-text,
  .invoice-pdf-host .invoice-notes-area .invoice-static-text {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }
}

/* ============================================================
   PDF/print totals controls parity
   ------------------------------------------------------------
   Keep Discount / Tax / Shipping controls looking the same as
   the editor while the rest of the exported invoice stays clean
   and borderless.
   ============================================================ */
@media print {
  .invoice-pdf-host .invoice-inline-control {
    width: 148px !important;
    height: 39px !important;
    display: grid !important;
    grid-template-columns: 1fr 58px !important;
    border: 1px solid var(--invoice-line) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .invoice-pdf-host .invoice-inline-control input {
    height: 37px !important;
    border: 0 !important;
    background: #fff !important;
    padding: 6px 8px !important;
    text-align: right !important;
    min-width: 0 !important;
  }

  .invoice-pdf-host .invoice-inline-control select,
  .invoice-pdf-host .invoice-shipping-control .invoice-inline-currency {
    height: 37px !important;
    border: 0 !important;
    border-left: 1px solid var(--invoice-line) !important;
    background: #fff !important;
    color: var(--invoice-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    text-align: center !important;
    font-size: .76rem !important;
    line-height: 1 !important;
  }

  .invoice-pdf-host .invoice-shipping-control {
    grid-template-columns: 1fr 58px !important;
  }

  .invoice-theme-compact.invoice-pdf-host .invoice-inline-control,
  .invoice-pdf-host .invoice-theme-compact .invoice-inline-control {
    height: 32px !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-inline-control input,
  .invoice-pdf-host .invoice-theme-compact .invoice-inline-control select,
  .invoice-pdf-host .invoice-theme-compact .invoice-shipping-control .invoice-inline-currency {
    height: 30px !important;
    font-size: .72rem !important;
  }
}



/* ============================================================
   Shipping — exact UI match with Discount / Tax
   ============================================================ */
.invoice-shipping-control {
  grid-template-columns: 1fr 58px;
}

.invoice-shipping-control .invoice-shipping-currency {
  height: 37px;
  border: 0;
  border-left: 1px solid var(--invoice-line);
  background: #fff;
  color: var(--invoice-ink);
  text-align: center;
  outline: 0;
  min-width: 0;
  padding: 0 5px;
  font-size: .76rem;
  pointer-events: none;
  cursor: default;
}

/* Keep the same native select appearance/arrow as Discount and Tax. */
.invoice-shipping-control .invoice-shipping-currency option {
  color: var(--invoice-ink);
}

.invoice-theme-compact .invoice-shipping-control .invoice-shipping-currency {
  height: 30px;
  font-size: .72rem;
}

/* Themes that use transparent controls should keep their normal treatment. */
.invoice-theme-minimal .invoice-shipping-control .invoice-shipping-currency,
.invoice-theme-elegant .invoice-shipping-control .invoice-shipping-currency {
  background: transparent;
}

@media print {
  .invoice-pdf-host .invoice-shipping-control .invoice-shipping-currency {
    pointer-events: none !important;
  }
}

/* ============================================================
   Grouped number display for Discount / Tax / Shipping
   ============================================================ */
.invoice-inline-control input[data-discount],
.invoice-inline-control input[data-tax],
.invoice-inline-control input[data-shipping] {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   Grouped number display for Rate + Amount Paid
   ============================================================ */
.invoice-rate-input,
.invoice-money-input input[data-paid] {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   Wider totals amount controls
   Gives large grouped values more room before truncation.
   ============================================================ */
.invoice-inline-control,
.invoice-money-input {
  width: 190px;
}

.invoice-shipping-control {
  width: 190px;
}

.invoice-theme-compact .invoice-inline-control,
.invoice-theme-compact .invoice-money-input,
.invoice-theme-compact .invoice-shipping-control {
  width: 170px;
}

/* Keep labels from stealing space from the amount controls. */
.invoice-total-row {
  gap: 18px;
}

.invoice-total-row > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.invoice-inline-control,
.invoice-money-input {
  flex: 0 0 auto;
}

/* On very small screens, let the control use the available width. */
@media screen and (max-width: 479.98px) {
  .invoice-inline-control,
  .invoice-money-input,
  .invoice-shipping-control {
    width: min(190px, 58vw);
  }
}

/* Match the wider controls in PDF/print too. */
@media print {
  .invoice-pdf-host .invoice-inline-control,
  .invoice-pdf-host .invoice-money-input,
  .invoice-pdf-host .invoice-shipping-control {
    width: 190px !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-inline-control,
  .invoice-pdf-host .invoice-theme-compact .invoice-money-input,
  .invoice-pdf-host .invoice-theme-compact .invoice-shipping-control {
    width: 170px !important;
  }
}

/* ============================================================
   Cross-theme Amount column vertical alignment
   ------------------------------------------------------------
   Different themes apply different tbody cell padding. Using a
   fixed line box makes Amount align with the vertical center of
   the 39px Quantity/Rate controls in every theme.
   ============================================================ */
.invoice-items-table tbody td {
  vertical-align: top;
}

.invoice-items-table tbody .invoice-row-amount {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 39px !important;
  vertical-align: top !important;
}

/* Keep the remove button aligned to the same first-row control. */
.invoice-items-table tbody .invoice-remove-item {
  margin-top: 9px;
}

/* Compact theme uses 32px controls. */
.invoice-theme-compact .invoice-items-table tbody .invoice-row-amount {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 32px !important;
}

.invoice-theme-compact .invoice-items-table tbody .invoice-remove-item {
  margin-top: 6px;
}

@media print {
  .invoice-pdf-host .invoice-items-table tbody td {
    vertical-align: top !important;
  }

  .invoice-pdf-host .invoice-items-table tbody .invoice-row-amount {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 39px !important;
    vertical-align: top !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-items-table tbody .invoice-row-amount {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 32px !important;
  }
}

/* ============================================================
   Theme-specific Amount alignment correction
   ------------------------------------------------------------
   Minimal / Modern / Executive / Bold add vertical padding to
   their item cells. Restore that same top inset for Amount so it
   lines up with Quantity and Rate in those themes.
   ============================================================ */
.invoice-theme-minimal .invoice-items-table tbody .invoice-row-amount {
  padding-top: 5px !important;
  line-height: 39px !important;
}

.invoice-theme-modern .invoice-items-table tbody .invoice-row-amount {
  padding-top: 7px !important;
  line-height: 39px !important;
}

.invoice-theme-executive .invoice-items-table tbody .invoice-row-amount {
  padding-top: 6px !important;
  line-height: 39px !important;
}

.invoice-theme-bold .invoice-items-table tbody .invoice-row-amount {
  padding-top: 6px !important;
  line-height: 39px !important;
}

@media print {
  .invoice-pdf-host .invoice-theme-minimal .invoice-row-amount {
    padding-top: 5px !important;
  }

  .invoice-pdf-host .invoice-theme-modern .invoice-row-amount {
    padding-top: 7px !important;
  }

  .invoice-pdf-host .invoice-theme-executive .invoice-row-amount {
    padding-top: 6px !important;
  }

  .invoice-pdf-host .invoice-theme-bold .invoice-row-amount {
    padding-top: 6px !important;
  }
}

/* ============================================================
   Minimal theme — compact Amount Paid row
   ------------------------------------------------------------
   Keep "Amount Paid" on one line and keep the currency symbol
   close to the value instead of spreading across the full box.
   ============================================================ */
.invoice-theme-minimal .invoice-total-row > span:first-child {
  white-space: nowrap;
  flex: 0 0 auto;
}

.invoice-theme-minimal .invoice-money-input {
  width: 150px;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.invoice-theme-minimal .invoice-money-input > span {
  flex: 0 0 auto;
  padding-left: 0;
  margin: 0;
}

.invoice-theme-minimal .invoice-money-input input {
  flex: 0 1 auto;
  width: 122px;
  padding-left: 0;
  padding-right: 0;
  text-align: right;
}

.invoice-theme-minimal .invoice-total-row {
  gap: 8px;
}

/* PDF/print: keep the same compact layout. */
@media print {
  .invoice-pdf-host .invoice-theme-minimal .invoice-total-row > span:first-child {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  .invoice-pdf-host .invoice-theme-minimal .invoice-money-input {
    width: 150px !important;
    min-width: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
  }

  .invoice-pdf-host .invoice-theme-minimal .invoice-money-input > span {
    padding-left: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .invoice-pdf-host .invoice-theme-minimal .invoice-money-input input {
    width: 122px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
  }

  .invoice-pdf-host .invoice-theme-minimal .invoice-total-row {
    gap: 8px !important;
  }
}

/* ============================================================
   Classic theme — invoice number aligns with metadata columns
   ------------------------------------------------------------
   Make "#" line up with Date / Payment Terms / Due Date / PO
   Number labels, and make the invoice number line up with their
   values.
   ============================================================ */
.invoice-theme-classic .invoice-title-area {
  width: 100%;
}

.invoice-theme-classic .invoice-number-row {
  width: 100%;
  height: 39px;
  margin-top: 16px;
  margin-left: 0;
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 14px;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.invoice-theme-classic .invoice-prefix {
  min-width: 0;
  padding-left: 4px;
  text-align: left;
}

.invoice-theme-classic .invoice-number-input {
  width: 100%;
  height: 39px;
  padding: 7px 10px;
  text-align: left;
  border: 0;
  background: transparent;
}

/* Match PDF/print exactly. */
@media print {
  .invoice-pdf-host .invoice-theme-classic .invoice-number-row {
    width: 100% !important;
    height: 39px !important;
    margin-top: 16px !important;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 168px !important;
    gap: 14px !important;
    align-items: center !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .invoice-pdf-host .invoice-theme-classic .invoice-prefix {
    min-width: 0 !important;
    padding-left: 4px !important;
    text-align: left !important;
  }

  .invoice-pdf-host .invoice-theme-classic .invoice-number-input {
    width: 100% !important;
    height: 39px !important;
    padding: 7px 10px !important;
    text-align: left !important;
  }
}

/* ============================================================
   Classic theme — metadata label/value alignment
   ------------------------------------------------------------
   Labels stay left-aligned; values align to the right edge.
   Invoice number follows the same pattern as Date / Terms / etc.
   ============================================================ */
.invoice-theme-classic .invoice-meta-row > span,
.invoice-theme-classic .invoice-prefix {
  text-align: left !important;
}

.invoice-theme-classic .invoice-meta-row input,
.invoice-theme-classic .invoice-number-input {
  text-align: right !important;
}

/* PDF/print parity */
@media print {
  .invoice-pdf-host .invoice-theme-classic .invoice-meta-row > span,
  .invoice-pdf-host .invoice-theme-classic .invoice-prefix {
    text-align: left !important;
  }

  .invoice-pdf-host .invoice-theme-classic .invoice-meta-row input,
  .invoice-pdf-host .invoice-theme-classic .invoice-number-input {
    text-align: right !important;
  }
}

/* ============================================================
   Compact theme — invoice number alignment
   ------------------------------------------------------------
   Keep # on the left and push the invoice number fully to the
   right edge, matching the right-aligned Date / Terms / Due / PO
   values used by the Compact metadata block.
   ============================================================ */
.invoice-theme-compact .invoice-number-row {
  width: 180px;
  height: 34px;
  margin-left: auto;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 7px;
  align-items: center;
  padding-left: 7px;
  padding-right: 0;
}

.invoice-theme-compact .invoice-prefix {
  min-width: 0;
  padding-left: 0;
  text-align: left !important;
}

.invoice-theme-compact .invoice-number-input {
  width: 100% !important;
  justify-self: stretch;
  text-align: right !important;
  padding-left: 0 !important;
  padding-right: 7px !important;
}

/* Compact metadata: labels left, values fully right. */
.invoice-theme-compact .invoice-meta-row > span {
  text-align: left !important;
}

.invoice-theme-compact .invoice-meta-row input {
  text-align: right !important;
}

@media print {
  .invoice-pdf-host .invoice-theme-compact .invoice-number-row {
    width: 180px !important;
    height: 34px !important;
    margin-left: auto !important;
    display: grid !important;
    grid-template-columns: 26px 1fr !important;
    gap: 7px !important;
    align-items: center !important;
    padding-left: 7px !important;
    padding-right: 0 !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-prefix {
    min-width: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-number-input {
    width: 100% !important;
    justify-self: stretch !important;
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-meta-row > span {
    text-align: left !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-meta-row input {
    text-align: right !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   Compact theme — tighter metadata label/value spacing
   ------------------------------------------------------------
   Shorten the Date / Payment Terms / Due Date / PO value column
   and move labels toward it for a denser Compact layout.
   ============================================================ */
@media screen and (min-width: 768px) {
  .invoice-theme-compact .invoice-meta-row {
    grid-template-columns: 110px 155px;
    justify-content: end;
    gap: 8px;
  }

  .invoice-theme-compact .invoice-meta-row > span {
    padding-left: 0;
    text-align: right !important;
    white-space: nowrap;
  }

  .invoice-theme-compact .invoice-meta-row input {
    width: 155px;
    justify-self: end;
    text-align: right !important;
    padding-left: 6px;
  }
}

/* PDF / print parity */
@media print {
  .invoice-pdf-host .invoice-theme-compact .invoice-meta-row {
    grid-template-columns: 110px 155px !important;
    justify-content: end !important;
    gap: 8px !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-meta-row > span {
    padding-left: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-meta-row input {
    width: 155px !important;
    justify-self: end !important;
    text-align: right !important;
    padding-left: 6px !important;
    padding-right: 0 !important;
  }
}


/* Invoice history is deliberately outside .invoice-paper so it never prints. */
.invoice-history-card{padding:14px 12px 11px}
.invoice-history-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.invoice-history-heading h6{font-size:.86rem;font-weight:700;color:#0f1b2d;margin:0}
.invoice-history-count{white-space:nowrap;color:#69768a;background:#f2f4f7;border-radius:999px;padding:2px 8px;font-size:.68rem;font-weight:700}
.invoice-history-list{max-height:440px;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid #eceff3}
.invoice-history-empty{padding:16px 3px 10px;color:#66758a;font-size:.76rem;line-height:1.55;margin:0}
.invoice-history-entry{padding:11px 2px 12px;border-bottom:1px solid #edf0f4;min-width:0}
.invoice-history-entry-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.invoice-history-number{font-size:.83rem;color:#192a40;overflow-wrap:anywhere;line-height:1.35}
.invoice-history-date{white-space:nowrap;font-size:.66rem;color:#8a95a6}
.invoice-history-client{margin-top:4px;font-size:.75rem;color:#59677a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invoice-history-total{margin-top:4px;color:#142840;font-size:.77rem;font-weight:700;overflow-wrap:anywhere}
.invoice-history-origin{margin-top:3px;color:#687993;font-size:.69rem;font-style:italic;overflow-wrap:anywhere}
.invoice-history-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.invoice-history-buttons button{background:#f3f5f8;border:1px solid #e1e7ee;border-radius:5px;color:#30455e;padding:5px 8px;font-size:.72rem;font-weight:600;line-height:1.2;cursor:pointer}
.invoice-history-buttons button:hover{background:#e9edf3;border-color:#ccd6e3}
.invoice-history-buttons button:focus-visible{outline:2px solid #b88a2c;outline-offset:2px}
.invoice-history-buttons .invoice-history-delete{color:#ba3e4f;background:#fff8f8;border-color:#f0dadd}
.invoice-history-buttons .invoice-history-delete:hover{background:#fff0f1}
.invoice-history-privacy{margin:9px 1px 0;color:#8491a2;font-size:.67rem;line-height:1.5}

/* JSON invoice backup actions; separate from printable invoice canvas. */
.invoice-history-toolbar{display:flex;align-items:center;gap:7px;margin:1px 0 10px}
.invoice-history-toolbar button{flex:1;min-width:0;border:1px solid #d9e2eb;border-radius:6px;padding:8px 7px;font-size:.73rem;line-height:1.25;font-weight:700;cursor:pointer;color:#24415e;background:#f8fafc}
.invoice-history-toolbar button[data-history-import]{background:#edf4ff;border-color:#cbdcf6;color:#194f90}
.invoice-history-toolbar button:hover{background:#e7eef8}
.invoice-history-toolbar button:focus-visible{outline:2px solid #b88a2c;outline-offset:2px}
.invoice-history-toolbar button:disabled{opacity:.55;cursor:wait}
.invoice-history-toolbar [hidden],.invoice-import-conflict[hidden]{display:none!important}
.invoice-history-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.invoice-history-buttons button{min-width:0;padding:6px 3px;text-align:center}
.invoice-import-conflict{position:fixed;inset:0;z-index:2147483600;background:rgba(17,31,49,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.invoice-import-conflict-panel{width:min(430px,100%);background:#fff;color:#1d2b40;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.2);padding:23px;outline:0}
.invoice-import-conflict-panel h5{margin:0 0 12px;font-size:1.08rem;font-weight:750;color:#17273d}
.invoice-import-conflict-panel p{font-size:.88rem;line-height:1.6;color:#47566d;margin:0 0 18px}
.invoice-import-conflict-buttons{display:flex;flex-wrap:wrap;gap:8px}
.invoice-import-conflict-buttons button{padding:8px 10px;font-size:.81rem;font-weight:650;border:1px solid #dbe2eb;border-radius:7px;background:#f6f8fb;color:#263d56;cursor:pointer}
.invoice-import-conflict-buttons button[data-import-choice="replace"]{background:#183e6e;border-color:#183e6e;color:#fff}
.invoice-import-conflict-buttons button:focus-visible{outline:2px solid #b88a2c;outline-offset:3px}

/* ============================================================
   Bold theme: PDF invoice-number visibility fix
   ------------------------------------------------------------
   The generic final-document print rule makes .invoice-number-row
   transparent. Bold uses white text inside a dark number badge,
   so removing its background made the number white-on-white.
   Restore the badge in server-rendered PDFs/print while leaving
   the editable preview and every other theme unchanged.
   ============================================================ */
@media print {
  .invoice-pdf-host .invoice-theme-bold .invoice-number-row {
    background: #101820 !important;
    color: #fff !important;
    border-color: #101820 !important;
    padding: 0 9px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .invoice-pdf-host .invoice-theme-bold .invoice-number-row .invoice-prefix,
  .invoice-pdf-host .invoice-theme-bold .invoice-number-row .invoice-number-input {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   Invoice header: top-align uploaded logos with the document title
   ------------------------------------------------------------
   Apply the same layout in the live editor and in Chromium PDFs.
   Move only the image inside its reserved upload area, so an empty
   "Add Your Logo" control remains vertically centered.
   ============================================================ */
.invoice-paper .invoice-top-grid {
  align-items: start;
}

/* Theme-specific optical alignment: match the TOP EDGE of the visible logo
   to the TOP EDGE of the INVOICE letterforms, on screen and in printed PDFs.
   Compact, Elegant, Ledger, Executive, and Minimal require a smaller offset
   because their title styles/layouts differ from the other themes. */
/* Global optical correction for the current editor and PDF typography.
   Applied on top of each theme's existing offset; never moves the title. */
.invoice-paper {
  --invoice-logo-optical-offset: 18px;
  --invoice-logo-fine-tune: 3px;
}
.invoice-theme-minimal,
.invoice-theme-ledger { --invoice-logo-optical-offset: 8px; }
.invoice-theme-modern,
.invoice-theme-soft { --invoice-logo-optical-offset: 16px; }
.invoice-theme-compact { --invoice-logo-optical-offset: 11px; }
.invoice-theme-executive { --invoice-logo-optical-offset: 12px; }
.invoice-theme-elegant { --invoice-logo-optical-offset: 11px; }
.invoice-theme-bold { --invoice-logo-optical-offset: 20px; }

.invoice-logo-upload > img:not([hidden]) {
  align-self: flex-start;
  /* Align with the visible uppercase letters, not the input's outer box. */
  margin-top: calc(var(--invoice-logo-optical-offset) + var(--invoice-logo-fine-tune));
  /* Reserve room for the adjustment so tall logos never get clipped. */
  max-height: calc(100% - var(--invoice-logo-optical-offset) - var(--invoice-logo-fine-tune)) !important;
}

.invoice-logo-upload > img[hidden] {
  display: none !important;
}

/* Modern's title is inset inside its dark header panel.  Start the
   logo at the same vertical coordinate as the title input. */
.invoice-theme-modern .invoice-logo-area {
  padding-top: 22px;
}

/* Studio and Elegant previously placed the logo in a separate row
   above the title. Keep their theme styling while putting both at
   the same top baseline, as in the other eight themes. */
.invoice-theme-studio .invoice-top-grid {
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
}

.invoice-theme-elegant .invoice-top-grid {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
}

/* Preserve the existing stacked header on very narrow screens. */
@media screen and (max-width: 767px) {
  .invoice-theme-studio .invoice-top-grid,
  .invoice-theme-elegant .invoice-top-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* Screen-only: follow the actual painted top of the editable title text.
   The per-theme CSS values above remain the print/PDF source of truth.
   JavaScript calculates this variable from the browser's title font metrics,
   including on theme changes and after fonts load. */
@media screen and (min-width: 768px) {
  .invoice-paper .invoice-logo-upload > img:not([hidden]) {
    margin-top: calc(var(--invoice-logo-screen-offset, var(--invoice-logo-optical-offset)) + var(--invoice-logo-fine-tune));
    max-height: calc(100% - var(--invoice-logo-screen-offset, var(--invoice-logo-optical-offset)) - var(--invoice-logo-fine-tune)) !important;
  }
}

/* Additional screen-only optical offset for these three themes.
   Their pre-existing 3px correction is preserved, and the shared fine-tune
   moves every theme down a further 3px in both the editor and PDF. */
@media screen and (min-width: 768px) {
  .invoice-paper.invoice-theme-minimal .invoice-logo-upload > img:not([hidden]),
  .invoice-paper.invoice-theme-compact .invoice-logo-upload > img:not([hidden]),
  .invoice-paper.invoice-theme-soft .invoice-logo-upload > img:not([hidden]) {
    margin-top: calc(var(--invoice-logo-screen-offset, var(--invoice-logo-optical-offset)) + 3px + var(--invoice-logo-fine-tune));
    max-height: calc(100% - var(--invoice-logo-screen-offset, var(--invoice-logo-optical-offset)) - 3px - var(--invoice-logo-fine-tune)) !important;
  }
}

/* Print/PDF-only fine adjustment: Compact and Minimal logos were still
   slightly too high. Add 3px to their existing print offsets.
   Leave all screen UI and the other eight themes unchanged. */
@media print {
  .invoice-paper.invoice-theme-compact,
  .invoice-paper.invoice-theme-minimal {
    --invoice-logo-optical-offset: 14px;
  }
}

/* ============================================================
   Item table header — rounded left + right ends
   Classic / Modern / Compact / Soft
   ------------------------------------------------------------
   In the editor, invoice-remove-col is the last visible header
   cell, so it owns the right-side radius.
   In exported PDF, invoice-remove-col is hidden, therefore Amount
   (nth-last-child(2)) owns the right-side radius instead.
   ============================================================ */

/* Classic */
.invoice-theme-classic .invoice-items-table thead th.invoice-item-col {
  border-radius: 7px 0 0 7px !important;
}
.invoice-theme-classic .invoice-items-table thead th.invoice-remove-col {
  border-radius: 0 7px 7px 0 !important;
}

/* Modern */
.invoice-theme-modern .invoice-items-table thead th.invoice-item-col {
  border-radius: 8px 0 0 8px !important;
}
.invoice-theme-modern .invoice-items-table thead th.invoice-remove-col {
  border-radius: 0 8px 8px 0 !important;
}

/* Compact */
.invoice-theme-compact .invoice-items-table thead th.invoice-item-col {
  border-radius: 7px 0 0 7px !important;
}
.invoice-theme-compact .invoice-items-table thead th.invoice-remove-col {
  border-radius: 0 7px 7px 0 !important;
}

/* Soft */
.invoice-theme-soft .invoice-items-table thead th.invoice-item-col {
  border-radius: 10px 0 0 10px !important;
}
.invoice-theme-soft .invoice-items-table thead th.invoice-remove-col {
  border-radius: 0 10px 10px 0 !important;
}

/* PDF: remove column is hidden, so Amount becomes the visible right edge. */
@media print {
  .invoice-pdf-host .invoice-theme-classic .invoice-items-table thead th:nth-last-child(2) {
    border-radius: 0 7px 7px 0 !important;
  }
  .invoice-pdf-host .invoice-theme-modern .invoice-items-table thead th:nth-last-child(2) {
    border-radius: 0 8px 8px 0 !important;
  }
  .invoice-pdf-host .invoice-theme-compact .invoice-items-table thead th:nth-last-child(2) {
    border-radius: 0 7px 7px 0 !important;
  }
  .invoice-pdf-host .invoice-theme-soft .invoice-items-table thead th:nth-last-child(2) {
    border-radius: 0 10px 10px 0 !important;
  }
}

/* ============================================================
   Bold theme — exact left alignment for title + invoice number
   ------------------------------------------------------------
   Native input padding can shift the INVOICE text a few pixels
   to the right even when the input itself is correctly aligned.
   Remove that invisible inset while keeping the number badge's
   internal breathing room.
   ============================================================ */
.invoice-theme-bold .invoice-title-area {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.invoice-theme-bold .invoice-title-input {
  display: block;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-indent: 0 !important;
}

.invoice-theme-bold .invoice-number-row {
  margin-left: 0 !important;
}

/* Same geometry in exported PDF. */
@media print {
  .invoice-pdf-host .invoice-theme-bold .invoice-title-area {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .invoice-pdf-host .invoice-theme-bold .invoice-title-input {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
  }

  .invoice-pdf-host .invoice-theme-bold .invoice-number-row {
    margin-left: 0 !important;
  }
}

/* ============================================================
   Executive theme — exact left alignment for title + number row
   ------------------------------------------------------------
   Remove the input's invisible horizontal inset so INVOICE starts
   on the exact same left edge as the invoice-number row.
   ============================================================ */
.invoice-theme-executive .invoice-title-area {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.invoice-theme-executive .invoice-title-input {
  display: block;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-indent: 0 !important;
}

.invoice-theme-executive .invoice-number-row {
  margin-left: 0 !important;
}

/* Same geometry in exported PDF. */
@media print {
  .invoice-pdf-host .invoice-theme-executive .invoice-title-area {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .invoice-pdf-host .invoice-theme-executive .invoice-title-input {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
  }

  .invoice-pdf-host .invoice-theme-executive .invoice-number-row {
    margin-left: 0 !important;
  }
}

/* Final 2px optical correction for Bold + Executive title text.
   Shared by Invoice / Receipt / Quote / Estimate, UI + PDF. */
.invoice-theme-bold .invoice-title-input,
.invoice-theme-executive .invoice-title-input {
  position: relative;
  left: -2px;
}

@media print {
  .invoice-pdf-host .invoice-theme-bold .invoice-title-input,
  .invoice-pdf-host .invoice-theme-executive .invoice-title-input {
    left: -2px !important;
  }
}

/* ============================================================
   Line-item remove button — centered in the remove column
   Shared by Invoice / Receipt / Quote / Estimate.
   UI only; exported PDF already hides the remove column.
   ============================================================ */
@media screen {
  .invoice-items-table tbody td:last-child {
    width: 30px;
    min-width: 30px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  .invoice-items-table tbody .invoice-remove-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 39px;
    margin: 0 auto !important;
    padding: 0 0 1px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* Compact uses 32px-tall line-item controls. */
  .invoice-theme-compact .invoice-items-table tbody .invoice-remove-item {
    height: 32px;
    margin: 0 auto !important;
  }
}



/* ============================================================
   Fix PDF line-item numeric vertical alignment (2026-10-16)
   Uses the same row center for Quantity, Rate, and Amount.
   Applies ONLY to printed / server-generated PDF layouts.
   ============================================================ */
@media print {
  .invoice-pdf-host .invoice-items-table tbody tr > td:nth-child(2),
  .invoice-pdf-host .invoice-items-table tbody tr > td:nth-child(3),
  .invoice-pdf-host .invoice-items-table tbody tr > td.invoice-row-amount {
    vertical-align: middle !important;
  }

  /* Undo the old forced 39px Amount line-height and theme insets. */
  .invoice-pdf-host .invoice-items-table tbody tr > td.invoice-row-amount {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important;
  }

  /* The backend PDF renderer sets padding-top:10px on Rate.
     Center it inside a real 39px line-item control instead. */
  .invoice-pdf-host .invoice-items-table tbody tr > td:nth-child(3) .invoice-rate-pdf-value {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 39px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .invoice-pdf-host .invoice-theme-compact .invoice-items-table tbody tr > td:nth-child(3) .invoice-rate-pdf-value {
    height: 32px !important;
  }
}


/* Optical centering: preserve Modern and Compact theme spacing. */
@media print {
  .invoice-pdf-host .invoice-theme-modern .invoice-items-table tbody tr > td.invoice-row-amount {
    padding-top: 6px !important;
  }
  .invoice-pdf-host .invoice-theme-compact .invoice-items-table tbody tr > td.invoice-row-amount {
    padding-top: 2px !important;
  }
}