/*
* ems-print-controls.css — keep SCREEN WIDGETS off the paper.
* ═════════════════════════════════════════════════════════════════════════════════════════════
*
* A printed accounting report was coming out with DataTables' own furniture embedded in it: the
* "Type to filter…" box, the "Show: All" menu, "Showing 0 to 0 of 0 entries", and the pager
* arrows — none of which mean anything on paper, and all of which sit between the heading and
* the figures where a reader expects the data to start.
*
* ─────────────────────────────────────────────────────────────────────────────────────────────
* WHY THEY GOT THERE
*
* These reports print through printDiv(): it opens a blank popup, writes the innerHTML of
* #printArea into it along with the page's stylesheet s, and calls print(). The DataTables
* controls live INSIDE #printArea, so they are copied verbatim. Because the popup inherits our
* stylesheets, a print rule reaches it — which is why this is fixable in CSS at all.
*
* ems-print.css already hides exactly these, but only under `.ems-print-compact`, and that class
* is withheld from any view carrying its own print block. The accounts reports are such a view,
* so the rules never applied to them.
*
* ─────────────────────────────────────────────────────────────────────────────────────────────
* ⚠ A SEPARATE FILE, ON PURPOSE — the print ENGINE is not touched.
*
* ems-print.css, ems-print.js and print_fallback.php are deliberately left alone: they own paper
* size, orientation, margins, the compact baseline and the Print Options dialog, and the standing
* instruction is that report formatting must not shift. This file cannot shift it. Every rule
* below is `display: none` on a control that is not part of any report's content — no widths, no
* font sizes, no page rules, no table properties. Removing a filter box cannot reflow a column.
*
* Nothing here is scoped to a module, because the leak is not specific to one: any view that
* prints a region containing a DataTables grid has it.
*/
/*
* ─────────────────────────────────────────────────────────────────────────────────────────────
* THE LETTERHEAD ON A PRINTED ACCOUNTS REPORT
*
* Built by emsPrintLetterhead() in backend/accounts/script.js and written into the print popup
* ahead of the figures. Deliberately OUTSIDE @media print: the popup is a real window that is
* shown before it is printed, so these rules have to apply on screen as well or the preview
* shows an unstyled pile of text and the user cannot tell what they are about to send.
*
* Scoped to .ems-print-letterhead, which exists only in that generated document — nothing on any
* normal page carries the class, so this cannot reach the application UI.
*/
.ems-print-letterhead {
display: block;
margin: 0 0 14px;
padding: 0 0 10px;
border-bottom: 2px solid #111;
font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
color: #111;
}
.ems-print-letterhead .eph-id {
display: flex;
align-items: center;
gap: 12px;
}
/* Capped rather than sized: schools upload logos at anything from 80px to 2000px wide, and the
letterhead must not change height because one of them used a big file. */
.ems-print-letterhead .eph-logo {
max-height: 52px;
max-width: 160px;
width: auto;
object-fit: contain;
}
.ems-print-letterhead .eph-name {
font-size: 17px;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.2;
}
.ems-print-letterhead .eph-sub {
font-size: 10.5px;
color: #444;
margin-top: 2px;
}
/* Report name, period and printed-at, on one line under the identity. */
.ems-print-letterhead .eph-meta {
margin-top: 8px;
font-size: 10.5px;
color: #333;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
}
.ems-print-letterhead .eph-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.ems-print-letterhead .eph-dot { color: #999; }
@media print {
/* Full black on paper — the screen grey prints washed out on a mono laser.
(It appears on the FIRST page only. Repeating a block on every sheet needs it promoted to
a running header, which CSS can only do via position:fixed and which browsers honour
inconsistently; not worth risking the report layout for.) */
.ems-print-letterhead { border-bottom-color: #000; color: #000; }
.ems-print-letterhead .eph-sub,
.ems-print-letterhead .eph-meta { color: #222; }
/*
* DataTables' generated chrome. Every one of these is an input the reader cannot use on
* paper. Named individually rather than hiding .dataTables_wrapper, which is the element
* that CONTAINS the table — hiding that would take the report with it.
*/
.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate,
.dataTables_processing,
.dt-buttons,
.dataTables_scrollHead + .dataTables_scrollBody .dataTables_empty { display: none !important; }
/* The Print button itself, which otherwise prints as an empty grey rectangle at the top of
the first page. Targeted by the id the accounts views actually use rather than by class,
so a page with a legitimately named print SECTION is unaffected. */
#btnPrint { display: none !important; }
/*
* ─────────────────────────────────────────────────────────────────────────────────────────
* COLUMN HEADINGS ON CONTINUATION PAGES (requested).
*
* A ledger that runs past one sheet was continuing as bare numbers — no Sr., no Date, no
* Voucher No., no Amount. `display: table-header-group` is what tells the browser a
* is a running header and must be repeated at the top of every page the table spans.
*
* ⚠ THIS IS THE ONLY THING IT DOES. No sizes, widths, padding, margins, colours or page
* rules — so column layout is byte for byte what it was and no report can reflow. On a
* single-page report it changes nothing, because there is no second page to repeat onto.
*
* Scoped to .ems-print-doc, the class printDiv puts on the popup body. That document is
* built by us and the class exists nowhere else, so this cannot reach any other printing.
*/
.ems-print-doc thead { display: table-header-group; }
}