/*
* Shared print stylesheet for PSMS.UI.Shared/PrintTemplates/* and any document exported with the
* browser's "Save as PDF" (window.print()). Both host apps link it once:
*
*
* Has to be GLOBAL, not a scoped .razor.css: CSS isolation only tags markup written in one
* component, so a scoped rule can never reach the host layout it needs to hide.
*
* ── Usage ────────────────────────────────────────────────────────────────────────────────────
*
* Flowing document (content decides how many sheets; browser paginates):
*
*
…
*
*
* Fixed pages (you split content yourself; every page is exactly one A4 sheet):
*
*
* …
*
*
* Modifiers on .psms-print-area:
* --preview also show it on screen as grey-matted A4 sheets (otherwise hidden on screen)
* --landscape A4 landscape (297 × 210 mm)
*
* Helpers: .psms-print-avoid-break, .psms-print-break-before, .psms-print-break-after,
* .psms-print-table (thead/tfoot repeat on every sheet), .psms-no-print, .psms-print-only
*
* ── Why it's built this way ──────────────────────────────────────────────────────────────────
*
* 1. Named @page ("psms-a4"): the area gets `page: psms-a4`, so its sheets are A4 with margin 0
* even on a host with no @page rule (customer portal), without changing the global @page that
* PSMS.Web's reports-print.css already owns.
* 2. margin 0 + sheet padding: the sheet is exactly 210mm wide and the "margin" is our padding,
* so on-screen preview and PDF line up 1:1. Users must leave "Margins: Default/None" and
* "Scale: 100%" in the print dialog; "Headers and footers" off.
* 3. Hide the app with display:none, not visibility:hidden. The old visibility + position:absolute
* trick kept the hidden app's height in the flow (trailing blank pages) and the app shell's
* height:100vh / overflow:auto ancestors clipped everything after sheet 1. Here every ancestor
* of the area is flattened (static, auto height, overflow visible) so pagination works.
* All of it is scoped with body:has(.psms-print-area), so pages without a print area (the
* Reports viewer etc.) are untouched.
* 4. Fixed pages are 297mm minus a 0.5mm rounding allowance; a box that's exactly 297mm often
* rounds over and spills an empty sheet after it.
*/
/* ── Sizes ──────────────────────────────────────────────────────────────────────────────── */
.psms-print-area {
--psms-sheet-w: 210mm;
--psms-sheet-h: 297mm;
--psms-sheet-pad: 16mm;
}
.psms-print-area--landscape {
--psms-sheet-w: 297mm;
--psms-sheet-h: 210mm;
}
@page psms-a4 {
size: A4 portrait;
margin: 0;
}
@page psms-a4-landscape {
size: A4 landscape;
margin: 0;
}
/* ── Sheets (screen + print) ────────────────────────────────────────────────────────────── */
.psms-print-sheet,
.psms-page {
box-sizing: border-box;
width: var(--psms-sheet-w);
padding: var(--psms-sheet-pad);
background: #ffffff;
color: #1b1a19;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.psms-print-sheet *,
.psms-page * {
box-sizing: border-box;
}
/* Fixed page: exactly one sheet, header on top, footer pinned to the bottom. */
.psms-page {
display: flex;
flex-direction: column;
height: calc(var(--psms-sheet-h) - 0.5mm);
overflow: hidden;
position: relative;
}
.psms-page-body {
flex: 1 1 auto;
min-height: 0;
}
.psms-page > footer,
.psms-page-footer {
margin-top: auto;
}
/* Long words/URLs/remarks must wrap instead of pushing the sheet wider than A4. */
.psms-print-sheet,
.psms-page {
overflow-wrap: anywhere;
}
.psms-print-sheet img,
.psms-page img {
max-width: 100%;
}
.psms-print-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.psms-print-only {
display: none;
}
/* ── Screen ─────────────────────────────────────────────────────────────────────────────── */
@media screen {
.psms-print-area:not(.psms-print-area--preview) {
display: none;
}
.psms-print-area--preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
overflow-x: auto;
padding: 20px 0;
}
.psms-print-area--preview .psms-print-sheet {
min-height: var(--psms-sheet-h);
flex-shrink: 0;
box-shadow: 0 4px 18px rgb(16 24 40 / 12%);
}
.psms-print-area--preview .psms-page {
flex-shrink: 0;
box-shadow: 0 4px 18px rgb(16 24 40 / 12%);
}
}
/* ── Silent PDF download (js/pdf-export.js) ─────────────────────────────────────────────────
The JS exports a detached CLONE of the area tagged .psms-pdf-exporting (the on-screen area is
never touched). html2pdf re-clones that into its own render overlay, so this rule must only make
it visible: never move it off-screen here, or html2canvas captures an empty page. */
@media screen {
.psms-print-area.psms-pdf-exporting {
display: block !important;
position: static !important;
width: var(--psms-sheet-w) !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
overflow: visible !important;
background: #ffffff !important;
}
.psms-pdf-exporting .psms-print-sheet,
.psms-pdf-exporting .psms-page {
box-shadow: none !important;
margin: 0 !important;
}
/* Vertical padding becomes the PDF page margin instead, so every page gets it. */
.psms-pdf-exporting .psms-print-sheet {
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.psms-pdf-exporting .psms-no-print {
display: none !important;
}
.psms-pdf-exporting .psms-print-only {
display: revert !important;
}
}
/* ── Print ──────────────────────────────────────────────────────────────────────────────── */
@media print {
.psms-print-area {
page: psms-a4;
}
.psms-print-area--landscape {
page: psms-a4-landscape;
}
/* Hide everything that isn't the area, one of its ancestors, or inside it. */
body:has(.psms-print-area) *:not(.psms-print-area):not(.psms-print-area *):not(:has(.psms-print-area)) {
display: none !important;
}
/* Flatten the app shell around the area so nothing clips or offsets it. */
html:has(.psms-print-area),
body:has(.psms-print-area),
body:has(.psms-print-area) *:has(.psms-print-area) {
display: block !important;
position: static !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: visible !important;
transform: none !important;
box-shadow: none !important;
background: #ffffff !important;
}
/* PSMS.Web's reports-print.css sets `body * { visibility: hidden }` for its own viewer;
undo it for the area or the PDF comes out blank. */
.psms-print-area,
.psms-print-area * {
visibility: visible !important;
}
.psms-print-area {
display: block !important;
width: var(--psms-sheet-w) !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #ffffff !important;
}
.psms-print-sheet {
width: var(--psms-sheet-w) !important;
min-height: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Flowing sheets: the browser breaks pages, so give every continuation sheet the same top/
bottom inset as the first one (padding only applies to the first/last fragment). */
.psms-print-sheet {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.psms-page {
margin: 0 !important;
box-shadow: none !important;
break-after: page;
page-break-after: always;
}
.psms-page:last-child {
break-after: auto;
page-break-after: auto;
}
.psms-print-table thead {
display: table-header-group;
}
.psms-print-table tfoot {
display: table-footer-group;
}
.psms-print-table tr,
.psms-print-avoid-break {
break-inside: avoid;
page-break-inside: avoid;
}
h1, h2, h3, h4 {
break-after: avoid;
page-break-after: avoid;
}
.psms-print-break-before {
break-before: page;
page-break-before: always;
}
.psms-print-break-after {
break-after: page;
page-break-after: always;
}
.psms-no-print {
display: none !important;
}
.psms-print-only {
display: revert !important;
}
}