/* ========================================================== ACCEL AIR / A·TEMP — QUOTE BUILDER PRINT What reaches paper. The page box, what is hidden, and how each template breaks across pages. Last, so it wins over everything above. Part 9 of 9. Loaded by index.html in numbered order and CASCADES IN THAT ORDER — a rule here can be overridden by any later part, so keep the tags in sequence and add new parts at the position they belong, not at the end. ========================================================== */ @media print { .hdr,.wrap,.mobile-bar,#docModal,.toast-wrap { display:none !important; } #printArea { display:block !important; } /* Browsers drop background colours when printing unless asked not to. Without this the doc header and the TOTAL inc GST row print white on white. */ #printArea, #printArea * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } #printArea .brand-logo { height:calc(8mm * var(--logo-scale,1)) !important; } #printArea .doc-footer { color:#555 !important; } #printArea .doc-credit { color:#333 !important; } #printArea .doc-meta dt { color:#555 !important; } /* Chrome lays the printed page out at the paper width (about 700px), which trips the 768px breakpoint below and collapses the details into a single tall column — Sales Rep ends up hard left and the block runs down the page. Restore the two-pair layout for print: it puts the contact and rep details back in the right-hand column and halves the block's height. */ #printArea .doc-meta { grid-template-columns:minmax(74px,auto) minmax(0,1fr) minmax(74px,auto) minmax(0,1fr) !important; gap:3px 18px !important; } /* The paper width Chrome computes depends on the sheet size and the margins chosen in the print dialog, and it lands close enough to the breakpoints that the header would sometimes keep the date top-right and sometimes wrap it under the ABN line. Pin the row for print so the printed quote is the same document whatever those settings are. */ #printArea .doc-hdr { flex-wrap:nowrap !important; align-items:flex-start !important; gap:14px !important; } #printArea .doc-hdr > div { min-width:0 !important; } #printArea .doc-hdr .dh-right { flex-shrink:0 !important; text-align:right !important; } #printArea .dh-close, #printArea .dh-status, #printArea .dh-x, #printArea .dh-tplpick, #printArea .doc-actionbar { display:none !important; } #printArea .table-scroll { overflow:visible !important; margin-bottom:16px } #printArea .doc-table { min-width:0 !important } #printArea .modal-inner { box-shadow:none !important; border-radius:0 !important; max-width:none !important } body { background:#fff !important; margin:0; font-size:12px } .doc-table tr { page-break-inside:avoid } /* Photo appendix starts on a clean page, two to a row, and neither a section nor an individual photo is allowed to straddle a page break. */ #printArea .doc-photos { break-before:page; page-break-before:always; margin-top:0; padding-top:0; border-top:none } #printArea .doc-photos .dp-title { font-size:13px } #printArea .doc-photos .dp-grid { grid-template-columns:1fr 1fr; gap:8px } #printArea .doc-photos .dp-fig img, #printArea .doc-photos .dp-file { height:auto; max-height:78mm; object-fit:contain } #printArea .doc-photos .dp-fig img { padding:2px } #printArea .doc-photos .dp-file { min-height:40mm } #printArea .doc-photos .dp-sec, #printArea .doc-photos .dp-fig { break-inside:avoid; page-break-inside:avoid } #printArea .doc-photos .dp-head { break-after:avoid; page-break-after:avoid } /* A declared page box, so the printed quote is the same document on every machine instead of inheriting whatever default margin the browser picked. A full-bleed cover is not reachable from a browser print dialog: @page margins cannot be scoped to one page (named pages are not honoured by the print pipeline), and a document-wide margin:0 would strip the margins from every later page of a multi-page quote. The cover is therefore fitted inside the page box instead of bled off it. */ @page { size:A4; margin:11mm 10mm } /* ── The normal template in print ── Each .tpl-page becomes one real page. The cover is full-bleed, which needs its own @page with no margin — a named page, so the VEU layout keeps the browser's default margins. */ #printArea.pa-tpl .tpl-doc{background:#fff !important;padding:0 !important;gap:0 !important; display:block !important} /* A4 less the 11mm page margins is 275mm of content; 268mm leaves slack so rounding cannot tip a full page into a blank one. The height is what lets margin-top:auto push the footer and its wave to the foot of the page, where the supplied documents put them, instead of leaving them floating directly under the last paragraph. */ #printArea.pa-tpl .tpl-page{box-shadow:none !important;max-width:none !important; width:auto !important;margin:0 !important;padding:0 !important; break-after:page;page-break-after:always;break-inside:avoid; min-height:268mm;display:flex;flex-direction:column} #printArea.pa-tpl .tpl-page:last-of-type{break-after:auto;page-break-after:auto} #printArea.pa-tpl .tpl-cover{break-after:page;page-break-after:always} /* contain, not cover: the whole artwork has to be there, and cropping a cover page to fill is how you lose a logo off the left edge. */ #printArea.pa-tpl .tpl-cover{min-height:0;display:block} #printArea.pa-tpl .tpl-cover img{display:block;margin:0 auto; width:auto;max-width:100%;height:auto;max-height:275mm;object-fit:contain} /* The quote can legitimately run past one page when there are many lines; the notices page must still start on a fresh sheet. */ #printArea.pa-tpl .tpl-quote{break-inside:auto} #printArea.pa-tpl .tpl-table tr, #printArea.pa-tpl .tpl-pair tr{break-inside:avoid;page-break-inside:avoid} #printArea.pa-tpl .tpl-sec,#printArea.pa-tpl .tpl-flag{break-inside:avoid} /* ...except the details panel, which is long enough that keeping it whole throws it onto a page of its own and leaves the quote page half empty. */ #printArea.pa-tpl .tpl-detwrap{break-inside:auto} #printArea.pa-tpl .tpl-d{break-inside:avoid} #printArea.pa-tpl .tpl-ft{margin-top:auto;padding-top:12px;break-inside:avoid} #printArea.pa-tpl .tpl-hd .tpl-lockup{width:62mm;max-width:none} #printArea.pa-tpl .tpl-top{flex-direction:row !important} /* Three columns on paper. The values here are mostly a word or two, and the panel is the last thing on the quote page — at two columns a long quote pushes its final rows onto a page of their own. */ #printArea.pa-tpl .tpl-details{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 14px !important} #printArea.pa-tpl .tpl-d{grid-template-columns:minmax(0,1fr);gap:0} #printArea.pa-tpl .tpl-d dt{font-size:.62rem} #printArea.pa-tpl .tpl-d dd{font-size:.68rem} #printArea.pa-tpl .tn-tc a{color:#0563c1 !important;text-decoration:underline} /* The photo appendix follows the notices page. */ #printArea.pa-tpl #docPhotosN .doc-photos{break-before:page;page-break-before:always} /* VEU prose pages: let the long terms page flow, keep each bullet whole. */ #printArea.pa-tpl .tpl-prose{break-inside:auto} #printArea.pa-tpl .vn-ul > li,#printArea.pa-tpl .vn-sub > li{break-inside:avoid} #printArea.pa-tpl .vn-h2{break-after:avoid} #printArea.pa-tpl .veu-ft{display:block;margin-top:auto;padding-top:14px;break-inside:avoid} #printArea.pa-tpl .veu-wave{width:100%;margin-top:8px} #printArea.pa-tpl .vn-ul a{color:#0563c1 !important;text-decoration:underline} }