/* * Print styles for the payslip detail view. * * Strategy: set everything invisible, then make `.print-area` (and its * descendants) visible again and pin it to the top-left of the page so the * receipt prints cleanly without navigation, buttons, or page chrome. * * The `.no-print` class is an opt-out: any element with it is removed * entirely from the print layout (display:none !important). */ @media print { /* Hide everything by default, then re-show the receipt area. */ body * { visibility: hidden; } .print-area, .print-area * { visibility: visible; } .print-area { position: absolute; left: 0; top: 0; width: 100%; } /* Neutralize the portal shell's gradient body background (`layout.ejs`) * for print — bugfix, post-visual-verification against the reference * PDFs. `body * { visibility: hidden }` above only hides body's * DESCENDANTS; the `` element's own box (and the background it * paints) is unaffected by that rule. Without this override the receipt * printed on a light-blue sheet instead of white paper. `receipt.css` * separately gives the receipt's own surface an explicit white * background so it does not depend on whatever sits behind it either. */ body { background: white; } /* Elements flagged `.no-print` vanish entirely from the print layout. */ .no-print { display: none !important; } /* A4 portrait, sensible margins. */ @page { size: A4 portrait; margin: 15mm; } /* Ensure logo and signatures print at a reasonable size. */ img { max-width: 100%; } /* Avoid breaking a concept row across pages. */ tr { page-break-inside: avoid; } }