/* The printed page setup for pages that render the query-side dashboard shell (BittingQueryDashboardBase). Loaded after bitting.css. Bitting's paper mode owns the printed page there; these rules turn off the three older print rules that fight it. The older sheets are left alone: every rule here matches nothing unless the page contains the shell's root class. Every rule sits inside @media print, the same media the older rules sit in, so nothing here applies on screen and none depends on the package having entered paper mode first. Every selector requires the shell's root class, named once in C# as DashboardPrintRules.ShellScopeClass. The :root and the class lift each selector above the older rules' specificity, so the older !important minimum widths lose to the !important here. A test holds the scope and each override (DashboardShellPrintSheetTests). */ @media print { /* unlocked.css gives body a 992px minimum width, and print.css gives it 10mm side margins on top of the margins Bitting's page rule sets. Together they push the layout past the printable width. */ :root:has(.query-dashboard-shell) body { min-width: 0 !important; margin-left: 0; margin-right: 0; } /* unlocked.css gives every .container the same 992px minimum. The shell's root is one, and a page may put another inside it. */ :root:has(.query-dashboard-shell) .container { min-width: 0 !important; } /* Bootstrap's responsive container max-width can shrink the report to 720px at the paper viewport even though Bitting has a wider paper box. Details then forces four KPI tiles and two chart panels into that narrow column. Give the shell the same width as Bitting's printable area. */ :root:has(.query-dashboard-shell) .query-dashboard-shell.container { max-width: var(--bitting-paper-box-width) !important; min-height: 0 !important; } /* print.css fixes every footer to the page bottom, which lays it over the content of each printed page. */ :root:has(.query-dashboard-shell) footer { position: static; } /* A native Ctrl+P prints the selected section. The slide is a layout composition, not a page-sized object: let its rows paginate after the context while Bitting keeps individual tiles intact. */ :root:has(.query-dashboard-shell) #quarter-query-dashboard .bitting-slide, :root:has(.query-dashboard-shell) #essentials-query-dashboard .bitting-slide { width: 100% !important; break-before: auto !important; page-break-before: auto !important; break-inside: auto !important; page-break-inside: auto !important; } /* The expense-view pills are recorded in the context above. Do not leave an otherwise empty slide top row on paper. */ :root:has(.query-dashboard-shell) #quarter-query-dashboard .bitting-slide__top, :root:has(.query-dashboard-shell) #essentials-query-dashboard .bitting-slide__top { display: none !important; } /* Keep the screen's two visual columns, but bring the KPI row and table across the full printable width. display: contents lets the BittingSlide panels contribute their children to one page grid without cloning any chart or KPI. */ :root:has(.query-dashboard-shell) #quarter-query-dashboard .bitting-slide__panels, :root:has(.query-dashboard-shell) #essentials-query-dashboard .bitting-slide:has(#overview-explorer) .bitting-slide__panels { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bitting-sm); break-inside: auto !important; page-break-inside: auto !important; } /* The fixed-size ten-column waffle needs slightly more of the paper row than the bar chart. This ratio is print-only; the web slide is intact. */ :root:has(.query-dashboard-shell) #quarter-query-dashboard .bitting-slide__panels { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important; } :root:has(.query-dashboard-shell) #quarter-query-dashboard .bitting-slide__panel, :root:has(.query-dashboard-shell) #essentials-query-dashboard .bitting-slide:has(#overview-explorer) .bitting-slide__panel { display: contents !important; break-inside: auto !important; page-break-inside: auto !important; } :root:has(.query-dashboard-shell) #quarter-query-dashboard .details-kpi-row, :root:has(.query-dashboard-shell) #essentials-query-dashboard #overview-explorer, :root:has(.query-dashboard-shell) #essentials-query-dashboard #overview-table { grid-column: 1 / -1; } /* The full-width Essentials table is the grid's final item. Let it size to its five visible rows instead of stretching a mostly empty tile to fill the remaining paper track. */ :root:has(.query-dashboard-shell) #essentials-query-dashboard #overview-table { align-self: start; } :root:has(.query-dashboard-shell) #essentials-query-dashboard #overview-table > .bitting-tile { height: fit-content !important; min-height: 0 !important; aspect-ratio: auto !important; } /* The legacy Essentials cover consumes two almost empty pages. Printing should show the selected dashboard, including its on-screen waffle or map, rather than a separate print-only map. */ :root:has(.query-dashboard-shell) .print-page, :root:has(.query-dashboard-shell) .print-page-break, :root:has(.query-dashboard-shell) #essentials-query-dashboard .bitting-slide:has(#overview-explorer) .bitting-slide__panel--left > .print-only { display: none !important; } :root:has(.query-dashboard-shell) #essentials-query-dashboard .bitting-slide:has(#overview-explorer) .bitting-slide__panel--left > .no-print { display: flex !important; } /* Paper has less vertical room than the slide viewport. Preserve the four-across KPI composition, but remove its screen-height slack; the waffle stage only needs enough room for its 100 cells and legend. This lets the KPI row and paired charts stay together on the first sheet. */ :root:has(.query-dashboard-shell) #essentials-query-dashboard #overview-explorer .bitting-tile { height: calc(var(--bitting-paper-md) * 11) !important; min-height: 0 !important; aspect-ratio: auto !important; } :root:has(.query-dashboard-shell) #quarter-query-dashboard .details-kpi-row .bitting-tile { height: calc(var(--bitting-paper-md) * 11) !important; min-height: 0 !important; aspect-ratio: auto !important; } :root:has(.query-dashboard-shell) #essentials-query-dashboard #essentials-query-waffle > .flex-centered, :root:has(.query-dashboard-shell) #essentials-query-dashboard #essentials-query-sources-waffle > .flex-centered { height: calc(var(--bitting-paper-md) * 19) !important; } /* Details' waffle has a fixed cell height. Its tile must include the entire ten-row grid, not stop at the neighbouring legend's height. */ :root:has(.query-dashboard-shell) #quarter-query-dashboard .details-waffle-group .bitting-tile { min-height: calc(var(--bitting-paper-md) * 24) !important; aspect-ratio: auto !important; } /* The waffle's screen padding leaves its fixed ten-column grid a few pixels wider than the half-page tile. Reclaim that space on paper. */ :root:has(.query-dashboard-shell) #quarter-query-dashboard .details-waffle-group > div:first-child .bitting-tile .flex-centered { padding-left: 0 !important; padding-right: 0 !important; } /* The live Bitting chart frame measures its SVG viewBox before Chrome applies paper layout. Its tenth column can then sit just beyond that stale viewport, although it remains inside the printed tile. */ :root:has(.query-dashboard-shell) #quarter-query-dashboard .details-waffle-group svg[aria-label="Waffle chart"] { overflow: visible !important; } :root:has(.query-dashboard-shell) #quarter-query-dashboard .bitting-slide:has(.details-waffle-group) .bitting-slide__panel--right .bitting-tile { min-height: calc(var(--bitting-paper-md) * 25) !important; aspect-ratio: auto !important; } :root:has(.query-dashboard-shell) #quarter-query-dashboard .bitting-slide:has(.details-waffle-group) .query-categorical-stage { height: calc(var(--bitting-paper-md) * 16 + var(--bitting-paper-md) + var(--bitting-paper-min-text)) !important; } /* A static PDF cannot use the chart's ordering and paging controls. They also add a trailing row that can escape a tile at a page boundary. */ :root:has(.query-dashboard-shell) .bitting-paging-arrows { display: none !important; } /* The dated source strip belongs with the dashboard; the screen's large separation would otherwise orphan it on a mostly empty final sheet. */ :root:has(.query-dashboard-shell) .query-dashboard-shell > div:last-child { margin-top: var(--bitting-sm) !important; } /* Keep a high-cardinality grouped table inside its authored viewport so Bitting's generic paper unclipping cannot turn one dashboard into thousands of pages. */ :root:has(.query-dashboard-shell) .bitting-bounded-print-table .bitting-summary-table { max-height: calc(var(--bitting-paper-md) * 18) !important; overflow: hidden !important; } :root:has(.query-dashboard-shell) .bitting-print-table-note { margin: var(--bitting-xs) 0 0; color: var(--bitting-secondary); } }