/* How a page looks on paper. Loaded with media="print", so nothing here needs an @media wrapper and
   nothing here can affect the screen.

   This replaces a fourteen-line block that used to sit in Site.css and had three defects: it positioned
   the whole page absolutely (absolutely positioned boxes do not paginate, so everything past the first
   sheet was silently dropped), it had no break rules at all (cards, charts and table rows split wherever
   the sheet boundary fell), and it hid the header with visibility rather than display (which reserves the
   space, leaving a blank band at the top of every printout). */

@page {
    /* US Letter rather than A4: 8.5x11in. Wider and shorter than A4, so the wide grids get a little more
       room across and a little less down. Landscape stays the default - most of the application is a
       dashboard or a many-columned grid; the settings forms opt into portrait for themselves. */
    size: letter landscape;
    margin: 14mm 12mm;
}

/* ---------- The page itself ---------- */

:root {
    /* How far the whole page is zoomed out to fit the sheet. Screen layouts are built for a viewport far
       wider than Letter, so printed at 1:1 the wide rows and grids run off the edge. One knob here rather
       than a font size per component: it scales the charts and the table columns along with the text, so
       the printed page keeps the proportions of the page on screen. Lower it if content still overflows. */
    --print-zoom: 0.7;
}

/* Browsers drop every background and knock colours back to save ink unless told otherwise. This is what
   makes the printed page carry the branding, the card surfaces and the chart palette the reader sees on
   screen. */
*,
*::before,
*::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

html,
body {
    height: auto !important;
    overflow: visible !important;
}

/* zoom, not transform: scale(). A transformed box is taken out of normal pagination and printed as one
   unbreakable unit, which would bring back the very defect this stylesheet exists to fix. zoom changes
   layout, so the content still breaks across sheets. */
body {
    zoom: var(--print-zoom);
}

/* The fix for lost content. The container holds the entire page body; returning it to normal flow is
   what lets the content break across sheets instead of being clipped to the first one. */
.container,
.clear-container {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Chrome ---------- */

/* display, not visibility: visibility leaves the box in the layout, which is what produced the blank
   band at the top of the old output. */
/* Only what is meaningless on paper: site navigation, the loader, the toasts, and the controls that do
   something rather than show something. The filter dropdowns stay - they read as labels once printed,
   and they are the page's own record of which window and which account it is showing. */
header,
footer,
.navbar,
#global-loader,
.page-title-action,
.dashboard-filters-button,
.mvc-grid-pager,
.mvc-grid-filter,
.noty_layout,
#toast-container,
.print-hide {
    display: none !important;
}

.print-only {
    display: block !important;
}

/* ---------- Layout ---------- */

/* The grid is left exactly as the screen lays it out. Forcing the columns to stack full-width was making
   the filter row - a flex row of fixed-width controls - collapse into a column of stretched boxes that
   looked nothing like the page. The zoom above is what makes the real layout fit the sheet instead. */

/* Bootstrap's responsive tiers are keyed off the viewport, and in print the viewport is the sheet - about
   965px inside the margins on Letter landscape. That is below the lg breakpoint (992px) and well below xl
   (1200px), so every col-lg-* and col-xl-* fell back to full width and the dashboards printed as a single
   stacked column, nothing like the screen. Re-declaring the two tiers unconditionally is what puts the
   three-across card rows back on paper. xl comes second so it wins on the elements carrying both. */
.col-lg-1 { flex: 0 0 auto !important; width: 8.333333% !important; }
.col-lg-2 { flex: 0 0 auto !important; width: 16.666667% !important; }
.col-lg-3 { flex: 0 0 auto !important; width: 25.000000% !important; }
.col-lg-4 { flex: 0 0 auto !important; width: 33.333333% !important; }
.col-lg-5 { flex: 0 0 auto !important; width: 41.666667% !important; }
.col-lg-6 { flex: 0 0 auto !important; width: 50.000000% !important; }
.col-lg-7 { flex: 0 0 auto !important; width: 58.333333% !important; }
.col-lg-8 { flex: 0 0 auto !important; width: 66.666667% !important; }
.col-lg-9 { flex: 0 0 auto !important; width: 75.000000% !important; }
.col-lg-10 { flex: 0 0 auto !important; width: 83.333333% !important; }
.col-lg-11 { flex: 0 0 auto !important; width: 91.666667% !important; }
.col-lg-12 { flex: 0 0 auto !important; width: 100.000000% !important; }
.col-xl-1 { flex: 0 0 auto !important; width: 8.333333% !important; }
.col-xl-2 { flex: 0 0 auto !important; width: 16.666667% !important; }
.col-xl-3 { flex: 0 0 auto !important; width: 25.000000% !important; }
.col-xl-4 { flex: 0 0 auto !important; width: 33.333333% !important; }
.col-xl-5 { flex: 0 0 auto !important; width: 41.666667% !important; }
.col-xl-6 { flex: 0 0 auto !important; width: 50.000000% !important; }
.col-xl-7 { flex: 0 0 auto !important; width: 58.333333% !important; }
.col-xl-8 { flex: 0 0 auto !important; width: 66.666667% !important; }
.col-xl-9 { flex: 0 0 auto !important; width: 75.000000% !important; }
.col-xl-10 { flex: 0 0 auto !important; width: 83.333333% !important; }
.col-xl-11 { flex: 0 0 auto !important; width: 91.666667% !important; }
.col-xl-12 { flex: 0 0 auto !important; width: 100.000000% !important; }


/* ---------- Never cut a component in half ---------- */

/* Only boxes small enough to fit a sheet. break-inside: avoid on a box TALLER than the page does not
   shrink it - the browser gives up and pushes the whole thing to the next sheet, leaving the rest of the
   current one blank. That is exactly what the outer analytics cards did: the Scores card is taller than
   a sheet, so page one of /analytics came out empty below the heading with the card starting on page two.
   The outer cards are therefore allowed to break, and the atomic pieces inside them are protected instead:
   a chart, a KPI tile, a table row. A card's header is kept with its body by the break-after rule below. */
.kpi-card,
.chart-panel,
.chart-wrap,
.chart-wrap-sm,
.chart-wrap-md,
.chart-canvas-wrap,
.minutes-panel,
.overview-card-header,
.mini-stat-grid,
canvas,
.accordion-item,
.chunk-highlighted,
.alert,
figure,
tr,
li,
.print-keep-together {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* A heading must never be the last thing on a sheet. */
h1, h2, h3, h4, h5, h6,
.card-header,
.analytics-card-title,
.sentiment-subtitle {
    break-after: avoid !important;
    page-break-after: avoid !important;
}

p,
td,
li {
    orphans: 3;
    widows: 3;
}

/* Repeats a table's header and footer on every sheet the table runs onto. */
thead {
    display: table-header-group;
}

tfoot {
    display: table-footer-group;
}

/* Long values wrap rather than forcing a column wider than the sheet. Type size and padding are left as
   the screen has them - the page zoom is what makes the grid fit. */
table {
    word-break: break-word;
}

/* ---------- Nothing silently missing ---------- */

/* Anything the screen clips into a scroll pane has to open up, or the PDF quietly omits whatever was
   below the fold. */
.fixed-scrollable,
.table-responsive,
.docs-map-scroll,
.player-transcription .-channel h2,
.player-transcription-flow-body.is-scrollable,
[class*="overflow-"] {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* 350px of reserved space per analytics card, so the board does not jump as the eight AJAX cards land.
   On paper there is no loading to absorb - it just prints as a blank band under anything that came back
   short. */
.parent-loader {
    min-height: 0 !important;
}

.collapse:not(.show) {
    display: block !important;
    height: auto !important;
}

/* ---------- Charts ---------- */

/* Deliberately no height override. A Chart.js canvas is sized by the script to fill a wrapper with a
   fixed height (analytics.css gives them 340px and 380px), and height: auto made the canvas fall back to
   its intrinsic ratio instead - which distorted the plots. The beforeprint hook in site.js re-runs
   chart.resize() for the print layout, which is what actually keeps them sharp. */
canvas {
    max-width: 100% !important;
}

/* ---------- Appearance ---------- */

/* Deliberately almost empty. Everything the screen defines - the branded background, the card surfaces,
   the heading's icon tile, the chart palette, the link colours - is left alone, so the sheet matches the
   page. Only what is genuinely an artefact of the screen is touched. */

/* Shadows are the one screen effect that does not survive: a soft drop shadow renders as a grey smear at
   print resolution, and every card carries one. */
.card,
.analytics-card,
.page-title-row,
.chunk-highlighted {
    box-shadow: none !important;
}

/* An underline on every link is noise on paper, where nothing is clickable. Colour is kept. */
a {
    text-decoration: none !important;
}

/* ---------- The print-only header ---------- */

.print-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #999;
    font-size: 9pt;
    color: #333;
}

.print-header-name {
    font-weight: 700;
}