/* ============================================================================
   print.css — loaded with media="print". Forces a light, chrome-free page.
   Canonical spec: 02-design-system.md §9.2 (DS-8). The UPN slip and the list
   views are the only screens meant for paper.
   Forced-light on purpose: this file must keep working the day a dark theme ships.
   ============================================================================ */

@page { size: A4; margin: 15mm; }

body, body.app, body.auth {
  background: #fff !important;
  color: #000 !important;
  display: block !important;
  font-size: 11pt;
  line-height: 1.4;
}

/* Chrome that never prints. Anything that only exists to be clicked is ink wasted:
   navigation, filters, menus, buttons, the dropzone and its queue. */
.sidebar,
.nav-backdrop,
.toast-stack,
.menu,
.kebab,
.skip-link,
.btn,
.topbar-menu,
.topbar-actions,
.usermenu,
.filter-bar,
.filters,
/* The fold AROUND the filter bar, not just the bar: hiding only .filters left an empty
   band and a collapsed summary above the table on paper (QA round 8). */
.filters-fold,
.chips,
.bulkbar,
.dropzone,
.dz-list,
.copy-btn,
.pagination,
dialog,
.no-print { display: none !important; }

/* App-level nags (the install/-folder warning) sit OUTSIDE .content as a direct child
   of the column — they are chrome, not the document. Callouts inside .content (export
   warnings, month-lock notices) are content and do print. */
.main-col > .callout { display: none !important; }

/* The topbar stays — as the sheet's masthead. A printed page with no title is an
   anonymous page; with its actions and user menu hidden above, what is left is the
   breadcrumb and the <h1>. */
.topbar {
  position: static !important;
  height: auto !important;
  padding: 0 0 6pt !important;
  margin-bottom: 10pt;
  background: none !important;
  border-bottom: 1pt solid #000;
}
.page-title { font-size: 16pt; color: #000 !important; }
.crumbs, .crumbs a, .crumbs [aria-current="page"] { color: #000 !important; font-size: 9pt; }

.main-col, .content, .auth-main {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cards flatten to plain blocks — ink-saver browsers strip backgrounds anyway,
   so no meaning may live in a background color (DS-9). .table-card deliberately
   keeps NO break-inside guard: a month of invoices is taller than a sheet and must
   be allowed to flow across pages (the guard stays on the individual rows). */
.card, .table-card, .stat-card, .form-section {
  border: 1pt solid #999 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.card, .stat-card, .form-section { break-inside: avoid; }

/* …with two exceptions, and they are the two pages that ARE a document. The monthly
   report and the export instructions set `border: 0; padding: 0` in their own print
   blocks, which the rule above overrode with !important — so both printed as a 1pt
   frame drawn tight against the text, with no padding inside it. A page-sized box
   around prose is not a card, it is a mistake (QA round 10, F3). The page-level rule
   wins here because these surfaces have no siblings to be told apart from. */
.card.report-body,
.card.instructions { border: 0 !important; }

/* Tables: repeat headers across pages, keep rows intact, drop the interactive
   columns. `min-width` and the sticky offsets are scroll-container artefacts of the
   screen (components.css) — on paper the table is simply as wide as the sheet. */
.tbl-scroll { overflow: visible !important; }
.tbl { min-width: 0 !important; width: 100%; font-size: 9.5pt; }
table { border-collapse: collapse; }
thead { display: table-header-group; }
tr { break-inside: avoid; }
/* Sticky lives on thead (not on th) and on the first column below 1400px — both must
   become ordinary cells before they leave a stray divider or a floating header. */
.tbl thead,
.tbl th,
.tbl td,
.tbl th:first-child,
.tbl td:first-child { position: static !important; }
.tbl th:first-child, .tbl td:first-child { border-right: 0 !important; min-width: 0 !important; }
.tbl th {
  height: auto;
  padding: 4pt 6pt !important;
  background: none !important;
  color: #000 !important;
  border-bottom: 1pt solid #000 !important;
}
.tbl td {
  height: auto;
  padding: 4pt 6pt !important;
  color: #000 !important;
  border-bottom: .5pt solid #bbb !important;
}
.tbl .cell-check, .tbl .cell-actions { display: none !important; }
/* Sort arrows are an invitation to click — meaningless on paper, and they steal space
   from the header labels. The column titles stay. */
.tbl th a.sort .ico { display: none !important; }
/* Row tints and the red due date carry no meaning on paper (the pill does) and are the
   first things an ink-saver driver throws away; the strike-through on a void row and
   the bold due date survive any printer. */
.tbl tr.is-overdue td, .tbl tbody tr:hover td { background: none !important; }
.tbl tr.is-void td { color: #000 !important; }
.due-overdue { color: #000 !important; }

/* Status pills print as outlined text — never as color blocks; the dot is a
   ::before pseudo-element on .pill, so that is what has to go. */
.pill {
  background: none !important;
  border: 1pt solid #666 !important;
  color: #000 !important;
}
.pill::before { display: none !important; }

/* The UPN slip: the one component designed for paper. Always black on white, two
   columns even on a narrow sheet, QR at the size of the official ZBS form. */
.upn-slip {
  border: 1pt solid #000 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 8mm;
  break-inside: avoid;
  grid-template-columns: auto 1fr !important;
  justify-items: start !important;
  max-width: none;
}
.upn-qr, .upn-qr--blocked {
  width: 48mm !important;
  height: 48mm !important;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;   /* QR modules must never be "ink-saved" */
}
.upn-qr img, .upn-qr svg { filter: none !important; }
.upn-value, .upn-field dt, .upn-slip { color: #000 !important; }

/* Charts (Phase 2): a <canvas> is unreliable in print — show the table fallback. */
.chart-canvas { display: none !important; }
.chart-fallback { display: block !important; }

a { color: #000 !important; text-decoration: none !important; }
a[href^="/"]::after { content: ""; }   /* no URL expansion for internal links */

/* The element ships with [hidden] so it never appears on screen; print overrides that. */
.print-footer {
  display: block !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 2pt;
  border-top: .5pt solid #bbb;
  font-size: 8pt;
  color: #555;
}