/* Thirty structural compositions: ten different headers times three different bodies. */ .invoice-sheet[data-invoice-layout],.invoice-design-choice{--layout-ink:#203b32;--layout-rule:#9cb4aa;--layout-paper:#fff;--layout-tint:#edf4f0} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]{border:1px solid var(--layout-rule)!important;border-top:5px solid var(--layout-ink)!important;border-radius:0!important;background:var(--layout-paper)!important;box-shadow:none!important} :is(.invoice-sheet[data-invoice-layout="classic"],.invoice-design-choice[data-layout="classic"]){--layout-ink:#203b32;--layout-rule:#9cb4aa;--layout-tint:#edf4f0} :is(.invoice-sheet[data-invoice-layout="masthead"],.invoice-design-choice[data-layout="masthead"]){--layout-ink:#15304d;--layout-rule:#9cacc0;--layout-tint:#eaf0f8} :is(.invoice-sheet[data-invoice-layout="stacked"],.invoice-design-choice[data-layout="stacked"]){--layout-ink:#6d2743;--layout-rule:#c5a0ae;--layout-tint:#f8eaf0} :is(.invoice-sheet[data-invoice-layout="split"],.invoice-design-choice[data-layout="split"]){--layout-ink:#805516;--layout-rule:#c9b489;--layout-tint:#fbf3e5} :is(.invoice-sheet[data-invoice-layout="sidebar"],.invoice-design-choice[data-layout="sidebar"]){--layout-ink:#22252d;--layout-rule:#a9adb5;--layout-tint:#f1f2f5} :is(.invoice-sheet[data-invoice-layout="receipt"],.invoice-design-choice[data-layout="receipt"]){--layout-ink:#1d1d1d;--layout-rule:#b8b8b8;--layout-tint:#f8f8f8} :is(.invoice-sheet[data-invoice-layout="editorial"],.invoice-design-choice[data-layout="editorial"]){--layout-ink:#2349a4;--layout-rule:#a9b8df;--layout-tint:#eef2ff} :is(.invoice-sheet[data-invoice-layout="ledger"],.invoice-design-choice[data-layout="ledger"]){--layout-ink:#5a2323;--layout-rule:#c8a3a3;--layout-tint:#f9eded} :is(.invoice-sheet[data-invoice-layout="passport"],.invoice-design-choice[data-layout="passport"]){--layout-ink:#0c6664;--layout-rule:#91c3bf;--layout-tint:#e9f7f4} :is(.invoice-sheet[data-invoice-layout="corner"],.invoice-design-choice[data-layout="corner"]){--layout-ink:#583c78;--layout-rule:#b9a7cf;--layout-tint:#f2edf8} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-formal-header{display:grid!important;grid-template-areas:var(--header-areas)!important;grid-template-columns:var(--header-columns)!important;grid-template-rows:auto!important;align-items:stretch!important;min-height:0!important;margin:0 0 16px!important;padding:0!important;background:#fff!important;color:var(--layout-ink)!important;border:1px solid var(--layout-rule)!important;border-radius:0!important;overflow:hidden} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-brand-block{grid-area:brand!important;min-width:0;padding:16px!important;background:transparent!important;border:0!important;align-items:center} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-title-block{grid-area:title!important;min-width:0;display:flex!important;flex-direction:column;justify-content:center;align-items:center;padding:15px!important;background:transparent!important;border:0!important;text-align:center} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-header-facts{grid-area:facts!important;min-width:0;padding:15px!important;background:transparent!important;border:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-company-copy strong, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-title-block h3{color:var(--layout-ink)!important;text-shadow:none!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .company-details span, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-title-block small, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-header-facts label{color:#40584f!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-header-facts :is(input,.print-field-value,.localized-date-value){color:var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-section-title{background:transparent!important;border:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-section-title span{background:var(--layout-ink)!important;color:#fff!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-notes-box{display:none!important} /* Each header moves the issuer, invoice title and invoice facts to different grid areas. */ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"]{--header-areas:"brand title facts";--header-columns:1.2fr .8fr 1fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"]{--header-areas:"brand brand" "title facts";--header-columns:1fr 1fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]{--header-areas:"title" "brand" "facts";--header-columns:1fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="split"]{--header-areas:"brand title" "brand facts";--header-columns:1fr 1fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"]{--header-areas:"title brand" "title facts";--header-columns:.38fr 1fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]{--header-areas:"brand" "facts" "title";--header-columns:1fr;max-width:780px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"]{--header-areas:"title title" "brand facts";--header-columns:1.25fr .75fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"]{--header-areas:"brand facts" "title title";--header-columns:1fr 1fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"]{--header-areas:"facts brand" "title brand";--header-columns:.72fr 1.28fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"]{--header-areas:"facts facts" "title brand";--header-columns:.7fr 1.3fr} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"] .invoice-title-block{border-inline:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"] .invoice-brand-block{justify-content:center;border-bottom:4px solid var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"] .invoice-title-block{background:var(--layout-tint)!important;border-inline-start:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"] .invoice-title-block{padding:23px!important;border-bottom:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"] .invoice-title-block h3{font-size:40px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"] .invoice-brand-block{justify-content:center;border-bottom:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"] .invoice-header-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="split"] .invoice-brand-block{border-inline-end:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="split"] .invoice-title-block{background:var(--layout-tint)!important;border-bottom:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-title-block{background:var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-title-block :is(h3,small,span){color:#fff!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-brand-block{border-bottom:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"] .invoice-formal-header{border:2px dashed var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"] .invoice-brand-block{justify-content:center} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"] .invoice-title-block{border-top:1px dashed var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"] .invoice-title-block{align-items:flex-start;text-align:right;background:var(--layout-tint)!important;border-bottom:3px solid var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"] .invoice-title-block h3{font-size:42px!important;font-weight:900} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"] .invoice-title-block{border-top:3px double var(--layout-ink)!important;background:var(--layout-tint)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"] .invoice-brand-block{border-inline-end:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"] .invoice-header-facts{border-inline-end:2px solid var(--layout-ink)!important;border-bottom:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"] .invoice-title-block{background:var(--layout-tint)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"] .invoice-brand-block{justify-content:center} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-header-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px;background:var(--layout-tint)!important;border-bottom:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-title-block{border-inline-start:1px solid var(--layout-rule)!important} /* The three body structures change field flow, table rules and total placement. */ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="grid"] .invoice-meta{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;border:1px solid var(--layout-rule)!important;border-radius:0!important;background:#fff!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="grid"] .invoice-party-card{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;border:1px solid var(--layout-rule)!important;border-radius:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="grid"] .invoice-table{border-collapse:collapse!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="grid"] .invoice-table :is(th,td){border:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="grid"] .invoice-totals-row{justify-content:flex-end!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="minimal"] .invoice-meta{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px 22px!important;border:0!important;border-bottom:2px solid var(--layout-ink)!important;border-radius:0!important;background:transparent!important;padding:9px 0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="minimal"] .invoice-meta .field{border:0!important;border-bottom:1px solid var(--layout-rule)!important;border-radius:0!important;background:transparent!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="minimal"] .invoice-party-card{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;border:0!important;border-bottom:2px solid var(--layout-ink)!important;border-radius:0!important;padding:12px 0!important;background:transparent!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="minimal"] .invoice-table th{background:#fff!important;color:var(--layout-ink)!important;border:0!important;border-bottom:2px solid var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="minimal"] .invoice-table td{border:0!important;border-bottom:1px solid var(--layout-rule)!important;background:#fff!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="minimal"] .invoice-totals-row{justify-content:center!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="minimal"] .invoice-summary{border:0!important;border-top:3px double var(--layout-ink)!important;border-radius:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-meta{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important;border:0!important;background:transparent!important;padding:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-meta .field{padding:10px!important;border:1px solid var(--layout-rule)!important;border-radius:12px!important;background:var(--layout-tint)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-party-card{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;padding:16px!important;border:1px solid var(--layout-rule)!important;border-radius:16px!important;background:var(--layout-tint)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-table{border-collapse:separate!important;border-spacing:0 6px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-table th{background:var(--layout-tint)!important;color:var(--layout-ink)!important;border-bottom:2px solid var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-table td{background:var(--layout-tint)!important;border-block:1px solid var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-totals-row{justify-content:flex-start!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-body="cards"] .invoice-summary{border:2px solid var(--layout-ink)!important;border-radius:14px!important;padding:8px!important} @media (max-width:620px){html:root body #content .invoice-sheet[data-invoice-layout] .invoice-formal-header{grid-template-areas:"brand" "title" "facts"!important;grid-template-columns:1fr!important}html:root body #content .invoice-sheet[data-invoice-body] :is(.invoice-meta,.invoice-party-card){grid-template-columns:1fr!important}} @media print{html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-formal-header{break-inside:avoid;page-break-inside:avoid}html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]{max-width:165mm!important}html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-lines-wrap{overflow:visible!important}html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-table :is(th,td){white-space:normal!important;overflow-wrap:anywhere!important;padding:4px 2px!important;font-size:7px!important}} /* A selectable gallery mirrors the structural combinations rather than showing color swatches. */ .invoice-design-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 12px} .invoice-design-kind-tabs{display:flex;gap:6px} .invoice-design-kind-tabs button{padding:7px 16px;border:1px solid #a9beb3;border-radius:7px;background:#fff;color:#203b32;cursor:pointer} .invoice-design-kind-tabs button[aria-pressed="true"]{background:#203b32;color:#fff} .invoice-design-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px} .invoice-design-choice{display:block;min-width:0;padding:9px;border:2px solid #d2ded7;border-radius:10px;background:#fff;color:#203b32;text-align:inherit;cursor:pointer} .invoice-design-choice:hover,.invoice-design-choice:focus-visible{border-color:#48866a;box-shadow:0 0 0 2px #d9eee1} .invoice-design-choice.is-selected{border-color:#176d56;box-shadow:0 0 0 2px #cde9d7} .invoice-design-choice-name{display:block;min-height:31px;margin-top:8px;font-size:11px;font-weight:800;line-height:1.4} .invoice-design-mini{display:block;height:145px;padding:7px;border:1px solid #a9beb3;background:#fff;overflow:hidden;direction:rtl} .invoice-design-mini-header{display:grid;height:64px;grid-template-areas:var(--mini-areas);grid-template-columns:var(--mini-columns);gap:2px;margin-bottom:5px} .invoice-design-mini-header i{display:block;min-width:0;min-height:0;background:var(--layout-tint)} .invoice-design-mini-header .mini-brand{grid-area:brand;background:var(--layout-rule)} .invoice-design-mini-header .mini-title{grid-area:title;background:var(--layout-ink)} .invoice-design-mini-header .mini-facts{grid-area:facts;background:var(--layout-tint)} .invoice-design-choice[data-layout="classic"]{--mini-areas:"brand title facts";--mini-columns:1.2fr .8fr 1fr} .invoice-design-choice[data-layout="masthead"]{--mini-areas:"brand brand" "title facts";--mini-columns:1fr 1fr} .invoice-design-choice[data-layout="stacked"]{--mini-areas:"title" "brand" "facts";--mini-columns:1fr} .invoice-design-choice[data-layout="split"]{--mini-areas:"brand title" "brand facts";--mini-columns:1fr 1fr} .invoice-design-choice[data-layout="sidebar"]{--mini-areas:"title brand" "title facts";--mini-columns:.38fr 1fr} .invoice-design-choice[data-layout="receipt"]{--mini-areas:"brand" "facts" "title";--mini-columns:1fr} .invoice-design-choice[data-layout="editorial"]{--mini-areas:"title title" "brand facts";--mini-columns:1.25fr .75fr} .invoice-design-choice[data-layout="ledger"]{--mini-areas:"brand facts" "title title";--mini-columns:1fr 1fr} .invoice-design-choice[data-layout="passport"]{--mini-areas:"facts brand" "title brand";--mini-columns:.72fr 1.28fr} .invoice-design-choice[data-layout="corner"]{--mini-areas:"facts facts" "title brand";--mini-columns:.7fr 1.3fr} .invoice-design-mini-party{display:block;height:15px;margin-bottom:5px;border:1px solid var(--layout-rule);background:var(--layout-tint)} .invoice-design-mini-table{display:grid;height:34px;gap:2px;margin-bottom:5px} .invoice-design-mini-table i{display:block;background:var(--layout-tint)} .invoice-design-mini-total{display:block;width:43%;height:11px;margin-inline-start:auto;background:var(--layout-ink)} .invoice-design-choice[data-body="grid"] .invoice-design-mini-table{grid-template-rows:repeat(3,1fr);border:1px solid var(--layout-rule)} .invoice-design-choice[data-body="grid"] .invoice-design-mini-table i{border-bottom:1px solid var(--layout-rule)} .invoice-design-choice[data-body="minimal"] .invoice-design-mini-party{border-width:0 0 1px;background:#fff} .invoice-design-choice[data-body="minimal"] .invoice-design-mini-table{grid-template-rows:repeat(3,1fr)} .invoice-design-choice[data-body="minimal"] .invoice-design-mini-table i{height:2px;align-self:end;background:var(--layout-rule)} .invoice-design-choice[data-body="minimal"] .invoice-design-mini-total{width:58%;height:2px;background:var(--layout-ink)} .invoice-design-choice[data-body="cards"] .invoice-design-mini-party{border-radius:8px;background:var(--layout-tint)} .invoice-design-choice[data-body="cards"] .invoice-design-mini-table{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr} .invoice-design-choice[data-body="cards"] .invoice-design-mini-table i{border:1px solid var(--layout-rule);border-radius:6px;background:var(--layout-tint)} .invoice-design-choice[data-body="cards"] .invoice-design-mini-total{height:16px;border-radius:7px;background:var(--layout-ink)} @media(max-width:620px){.invoice-design-gallery-head{align-items:flex-start;flex-direction:column}.invoice-design-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} /* The outer paper is part of the design, not one shared colored rectangle. */ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"]{border:5px double var(--layout-ink)!important;border-radius:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"]{border:1px solid var(--layout-rule)!important;border-top:14px solid var(--layout-ink)!important;border-bottom:6px solid var(--layout-ink)!important;border-radius:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]{border:2px solid var(--layout-ink)!important;border-radius:26px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="split"]{border:2px solid var(--layout-rule)!important;border-inline-end:12px solid var(--layout-ink)!important;border-radius:0 22px 0 22px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"]{border:1px solid var(--layout-rule)!important;border-inline-start:18px solid var(--layout-ink)!important;border-radius:0 0 28px 0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]{border:2px dashed var(--layout-ink)!important;border-radius:0!important;max-width:780px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"]{border:0!important;border-top:10px solid var(--layout-ink)!important;border-inline-end:7px solid var(--layout-ink)!important;border-radius:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"]{border:7px double var(--layout-ink)!important;border-radius:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"]{border:3px solid var(--layout-ink)!important;border-radius:20px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"]{border:3px solid var(--layout-ink)!important;border-radius:32px 2px 32px 2px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout][data-invoice-body="grid"]{outline:1px solid var(--layout-rule)!important;outline-offset:-11px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout][data-invoice-body="minimal"]{outline:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout][data-invoice-body="cards"]{outline:2px solid var(--layout-rule)!important;outline-offset:-11px!important;box-shadow:5px 5px 0 var(--layout-tint)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]::before{content:""!important;display:block!important;height:0!important;background:none!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"]::before{height:5px!important;background:var(--layout-tint)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]::before{height:12px!important;background:repeating-linear-gradient(90deg,var(--layout-tint) 0 34px,var(--layout-ink) 34px 37px)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="split"]::before{height:10px!important;background:linear-gradient(90deg,var(--layout-ink) 0 50%,var(--layout-tint) 50% 100%)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"]::before{height:8px!important;background:var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"]::before{height:13px!important;background:linear-gradient(90deg,var(--layout-paper) 0 67%,var(--layout-ink) 67% 100%)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"]::before{height:12px!important;background:repeating-linear-gradient(90deg,var(--layout-ink) 0 12px,var(--layout-paper) 12px 18px)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"]::before{height:14px!important;background:linear-gradient(135deg,var(--layout-ink) 0 22%,var(--layout-paper) 22% 78%,var(--layout-ink) 78% 100%)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout][data-invoice-body="grid"]::after{content:""!important;display:block!important;height:5px!important;background:var(--layout-rule)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout][data-invoice-body="minimal"]::after{content:""!important;display:block!important;height:1px!important;background:var(--layout-ink)!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout][data-invoice-body="cards"]::after{content:""!important;display:block!important;height:8px!important;background:repeating-linear-gradient(90deg,var(--layout-ink) 0 24px,var(--layout-paper) 24px 32px)!important} /* Gallery cards show the actual outer frame family and its body treatment. */ .invoice-design-choice[data-layout="classic"] .invoice-design-mini{border:4px double var(--layout-ink);border-radius:0} .invoice-design-choice[data-layout="masthead"] .invoice-design-mini{border:1px solid var(--layout-rule);border-top:10px solid var(--layout-ink);border-bottom:5px solid var(--layout-ink);border-radius:0} .invoice-design-choice[data-layout="stacked"] .invoice-design-mini{border:2px solid var(--layout-ink);border-radius:17px} .invoice-design-choice[data-layout="split"] .invoice-design-mini{border:1px solid var(--layout-rule);border-inline-end:8px solid var(--layout-ink);border-radius:0 13px 0 13px} .invoice-design-choice[data-layout="sidebar"] .invoice-design-mini{border:1px solid var(--layout-rule);border-inline-start:11px solid var(--layout-ink);border-radius:0 0 17px 0} .invoice-design-choice[data-layout="receipt"] .invoice-design-mini{border:2px dashed var(--layout-ink);border-radius:0;margin-inline:auto;width:84%} .invoice-design-choice[data-layout="editorial"] .invoice-design-mini{border:0;border-top:8px solid var(--layout-ink);border-inline-end:5px solid var(--layout-ink);border-radius:0} .invoice-design-choice[data-layout="ledger"] .invoice-design-mini{border:6px double var(--layout-ink);border-radius:0} .invoice-design-choice[data-layout="passport"] .invoice-design-mini{border:3px solid var(--layout-ink);border-radius:15px} .invoice-design-choice[data-layout="corner"] .invoice-design-mini{border:3px solid var(--layout-ink);border-radius:19px 2px 19px 2px} .invoice-design-choice[data-body="grid"] .invoice-design-mini{outline:1px solid var(--layout-rule);outline-offset:-7px} .invoice-design-choice[data-body="minimal"] .invoice-design-mini{outline:0} .invoice-design-choice[data-body="cards"] .invoice-design-mini{outline:2px solid var(--layout-rule);outline-offset:-7px;box-shadow:3px 3px 0 var(--layout-tint)} @media print{html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout][data-invoice-body="cards"]{box-shadow:none!important}} /* Real document composition: sections move as units, instead of only recoloring one template. */ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;align-items:start!important;gap:12px 14px!important;padding:20px!important;max-width:100%!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>*{min-width:0;max-width:100%;grid-column:1/-1;margin-top:0!important;margin-bottom:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]::before, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]::after{grid-column:1/-1!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region{min-width:0;break-inside:avoid} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region .invoice-section-title{margin:0 0 7px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region .invoice-lines-wrap{margin:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-payment .invoice-meta, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-party .invoice-party-card{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-title-block>span{display:none!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-formal-header{margin:0!important} /* Ten different page compositions, each combined with three table/body systems. */ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"] .invoice-region-payment{grid-column:1/7} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"] .invoice-region-party{grid-column:7/13} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"] .invoice-region-party{grid-column:1/9;order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"] .invoice-region-payment{grid-column:9/13;order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"] .invoice-region-lines{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"] .invoice-region-party{order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"] .invoice-region-payment{order:3;grid-column:2/12} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"] .invoice-region-lines{order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="split"] .invoice-region-payment{grid-column:1/5;order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="split"] .invoice-region-party{grid-column:5/13;order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-formal-header{grid-column:1/9} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-region-payment{grid-column:9/13;grid-row:1/3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-region-party{grid-column:1/9;grid-row:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]{max-width:165mm!important;margin-inline:auto!important;padding:10mm!important;gap:7px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"] .invoice-region-party{order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"] .invoice-region-lines{order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"] .invoice-region-payment{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"] .invoice-region-party{grid-column:1/8;order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"] .invoice-region-payment{grid-column:8/13;order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"] .invoice-region-lines{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"] .invoice-region-lines{order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"] .invoice-region-party{grid-column:1/8;order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"] .invoice-region-payment{grid-column:8/13;order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"] .invoice-formal-header{grid-column:1/7} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"] .invoice-region-party{grid-column:7/13;grid-row:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"] .invoice-region-payment{grid-column:1/-1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-region-party{grid-column:1/9;order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-region-payment{grid-column:9/13;order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-region-lines{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-totals-row{grid-column:9/13!important;order:4} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-closing-grid{grid-column:1/9!important;order:4} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"] .invoice-totals-row .invoice-summary{width:100%!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] :is(.invoice-region-payment,.invoice-region-party){align-self:stretch} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] :is(.invoice-region-payment,.invoice-region-party) :is(.invoice-meta,.invoice-party-card){min-height:100px!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] :is(.invoice-region-payment,.invoice-region-party)[style*="grid-column"] .invoice-meta{grid-template-columns:1fr!important} /* Keep paper preview and browser PDF/print geometrically consistent. */ @media print{ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]{padding:5mm!important;gap:2.5mm!important;border-width:1px!important;outline:0!important;box-shadow:none!important;break-inside:auto!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]::before, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]::after{display:none!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-formal-header{min-height:0!important;break-inside:avoid!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] :is(.invoice-region-payment,.invoice-region-party) :is(.invoice-meta,.invoice-party-card){min-height:0!important;padding:2mm!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-payment .invoice-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] :is(.invoice-region-payment,.invoice-region-party,.invoice-region-lines){overflow:visible!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-lines{grid-column:1/-1!important;order:3!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-totals-row{order:4!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-closing-grid{order:5!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .independent-invoice-qr{order:6!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] :is(.invoice-formal-header,.invoice-region,.invoice-totals-row,.invoice-closing-grid){min-width:0!important;max-width:100%!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-region-payment{grid-row:auto!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="sidebar"] .invoice-region-party{grid-row:auto!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"] .invoice-region-party{grid-row:auto!important} } /* The on-screen document preview must represent the printed sheet, including omission of editing controls and compact spacing for vertical designs. */ @media screen{ html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout] .no-print{display:none!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]{padding:5mm!important;gap:2.5mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-region-lines{grid-column:1/-1!important;order:4!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-region-payment .invoice-meta{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1.5mm!important;padding:1.5mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-region-payment .invoice-meta .field{padding:1mm!important;min-height:0!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-region-payment .invoice-meta .field :is(.print-field-value,select){min-height:0!important;padding:1px!important;line-height:1.2!important;font-size:8px!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-region-party .invoice-party-card{min-height:0!important;padding:1.5mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout] .invoice-region .invoice-section-title{margin:0 0 .5mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-region-lines .invoice-table :is(th,td){padding:2px!important;font-size:7px!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-region-lines .invoice-table :is(th,td):last-child{display:none!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-totals-row{margin-top:1mm!important;gap:1mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-totals-row .invoice-summary{padding:1.5mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-totals-row .total-row{padding:2px 0!important;font-size:9px!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-closing-grid{margin-top:1mm!important;gap:1mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-closing-grid .invoice-document-note{min-height:18mm!important;padding:1.5mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-closing-grid .invoice-document-note>strong{margin-bottom:2mm!important;padding-bottom:1mm!important;font-size:10px!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-closing-grid .invoice-approval{min-height:12mm!important;gap:4mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.invoice-closing-grid .invoice-approval>div{min-height:12mm!important;gap:1mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.independent-invoice-qr{margin-top:1mm!important;padding:1mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout]>.independent-invoice-qr img{width:30mm!important;height:30mm!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="receipt"] .invoice-formal-header, html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="stacked"] .invoice-formal-header{min-height:0!important;margin-bottom:1mm!important;gap:0!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="receipt"] .invoice-brand-block, html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="stacked"] .invoice-brand-block{padding:1.5mm 2mm!important;min-height:0!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="receipt"] .invoice-title-block, html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="stacked"] .invoice-title-block{padding:1mm 2mm!important;min-height:0!important;gap:0!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="receipt"] .invoice-title-block h3, html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="stacked"] .invoice-title-block h3{font-size:16px!important;line-height:1.1!important} html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="receipt"] .invoice-header-facts, html:root body #previewPaper.invoice-preview .invoice-sheet[data-invoice-layout="stacked"] .invoice-header-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:1.5mm 2mm!important;gap:2mm!important;min-height:0!important} } @media(max-width:720px){html:root body #content .invoice-sheet[data-invoice-layout]>*{grid-column:1/-1!important;grid-row:auto!important}html:root body #content .invoice-sheet[data-invoice-layout] .invoice-region{order:0!important}} /* Fixed reading order for optional fields and totals; layouts only move complete regions. */ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-formal-header{order:0} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-order-meta{order:1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-region-payment{order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-region-party{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-region-lines{order:4} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-shipping-entry{order:5} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-totals-row{order:6} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-closing-grid{order:7} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.management-approval-block{order:7} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-actions{order:8} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>:is(.independent-invoice-qr,.independent-qr-pending){order:9} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]::before{order:-1} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]::after{order:10} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"]>.invoice-region-party, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"]>.invoice-region-party, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"]>.invoice-region-party{order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="masthead"]>.invoice-region-payment, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="editorial"]>.invoice-region-payment, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"]>.invoice-region-payment{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]>.invoice-region-party, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]>.invoice-region-party{order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]>.invoice-region-lines, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]>.invoice-region-lines{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]>.invoice-region-payment, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]>.invoice-region-payment{order:4} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"]>.invoice-region-lines{order:2} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"]>.invoice-region-party{order:3} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"]>.invoice-region-payment{order:4} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"]>.invoice-region-party{order:0} @media print{ html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>*{grid-column:1/-1!important;grid-row:auto!important;align-self:start!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-formal-header{order:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-region-party{order:2!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-region-payment{order:3!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-region-lines{order:4!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-shipping-entry{order:5!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-totals-row{order:6!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.invoice-closing-grid{order:7!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.management-approval-block{order:7!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout]>.independent-invoice-qr{order:8!important;justify-self:end!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-payment .invoice-meta{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1.5mm!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-party .invoice-party-card{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1.5mm!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-party .invoice-party-card .field{min-width:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region-party .invoice-party-card .print-field-value{overflow-wrap:anywhere!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-closing-grid .invoice-document-note{min-height:22mm!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout] .invoice-region .invoice-section-title{margin:0 0 1mm!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"]>.invoice-region-payment{grid-column:1/7!important;order:2!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"]>.invoice-region-party{grid-column:7/13!important;order:2!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="classic"] .invoice-region-payment .invoice-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]>.invoice-region-lines, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]>.invoice-region-lines, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"]>.invoice-region-lines{order:2!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="stacked"]>.invoice-region-payment, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]>.invoice-region-payment, html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="ledger"]>.invoice-region-payment{order:4!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"]>.invoice-formal-header{grid-column:1/7!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="passport"]>.invoice-region-party{grid-column:7/13!important;order:0!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"]>.invoice-totals-row{grid-column:1/6!important;order:6!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="corner"]>.management-approval-block{grid-column:6/13!important;order:6!important} html:root body :is(#content,#previewPaper,#printSelection) .invoice-sheet[data-invoice-layout="receipt"]{width:160mm!important;max-width:160mm!important;margin-inline:auto!important} } /* Compact vertical archetypes for real A4 output. Without this their three-row headers and blank signature area push the final border onto a second page. */ @media print{ html:root body #printSelection .invoice-sheet[data-invoice-layout="receipt"] .invoice-formal-header, html:root body #printSelection .invoice-sheet[data-invoice-layout="stacked"] .invoice-formal-header{min-height:0!important;margin-bottom:1mm!important;gap:0!important} html:root body #printSelection .invoice-sheet[data-invoice-layout="receipt"] .invoice-brand-block, html:root body #printSelection .invoice-sheet[data-invoice-layout="stacked"] .invoice-brand-block{padding:1.5mm 2mm!important;min-height:0!important} html:root body #printSelection .invoice-sheet[data-invoice-layout="receipt"] .invoice-title-block, html:root body #printSelection .invoice-sheet[data-invoice-layout="stacked"] .invoice-title-block{padding:1mm 2mm!important;min-height:0!important;gap:0!important} html:root body #printSelection .invoice-sheet[data-invoice-layout="receipt"] .invoice-title-block h3, html:root body #printSelection .invoice-sheet[data-invoice-layout="stacked"] .invoice-title-block h3{font-size:16px!important;line-height:1.1!important} html:root body #printSelection .invoice-sheet[data-invoice-layout="receipt"] .invoice-header-facts, html:root body #printSelection .invoice-sheet[data-invoice-layout="stacked"] .invoice-header-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:1.5mm 2mm!important;gap:2mm!important;min-height:0!important} html:root body #printSelection .invoice-sheet[data-invoice-layout="receipt"] .invoice-header-facts .field, html:root body #printSelection .invoice-sheet[data-invoice-layout="stacked"] .invoice-header-facts .field{grid-template-columns:1fr!important;gap:0!important} html:root body #printSelection .invoice-sheet[data-invoice-layout="receipt"] .invoice-header-facts .print-field-value, html:root body #printSelection .invoice-sheet[data-invoice-layout="stacked"] .invoice-header-facts .print-field-value{padding:1px!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-closing-grid{margin-top:1mm!important;gap:1mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-closing-grid .invoice-document-note{min-height:18mm!important;padding:1.5mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-closing-grid .invoice-approval{min-height:12mm!important;gap:4mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-closing-grid .invoice-approval>div{min-height:12mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .independent-invoice-qr{margin-top:1mm!important;padding:1mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .independent-invoice-qr img{width:30mm!important;height:30mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .management-approval-block{margin-top:1mm!important;padding:1mm 2mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .management-approval-block .document-signature-frame{height:16mm!important;min-height:16mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .management-approval-block .document-signature-label{font-size:8px!important;line-height:1.2!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-region-payment .invoice-meta{padding:1.5mm!important;gap:1mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-region-payment .invoice-meta .field{padding:1mm!important;min-height:0!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-region-party .invoice-party-card{padding:1.5mm!important} html:root body #printSelection .invoice-sheet[data-invoice-layout] .invoice-region .invoice-section-title{margin:0 0 .5mm!important} } /* Keep the buyer/supplier VAT number below the party name instead of letting the two-column print grid place it at the opposite edge of the invoice. */ html:root body :is(#previewPaper,#printSelection) .invoice-sheet .invoice-party-card > .field:has(> :is(#invoicePartyTaxNumber,.print-field-value[dir="ltr"])){grid-column:1!important} html:root body :is(#previewPaper,#printSelection) .invoice-sheet .invoice-party-card :is(#invoicePartyTaxNumber,.print-field-value[dir="ltr"]){direction:ltr!important;text-align:right!important;white-space:nowrap!important}