/*
 * print.css — the paper version of a report.
 *
 * Loaded by Screen A only, and it does nothing at all on screen: everything
 * here is inside @media print except the one rule that hides the print-only
 * header while you are looking at the page.
 *
 * Two things this file exists to prevent:
 *   1. Printing the CHROME. A report on paper must not carry a sidebar, a
 *      language toggle, a filter row or a "Save" button — they are navigation,
 *      and paper has none.
 *   2. Printing the DARK THEME. tokens.css follows prefers-color-scheme, so a
 *      developer on a dark laptop was one Ctrl+P away from white text on white
 *      paper. Every surface token is forced back to its light value below;
 *      that is why this is a stylesheet and not a print button that hides divs.
 *
 * PAGE NUMBERS: Chrome does not implement @page margin boxes (@bottom-center),
 * so numbering comes from the browser's own "Headers and footers" checkbox in
 * the print dialog. Faking it in CSS would need a fixed element repeated per
 * page, which no engine here supports reliably. The report carries its own
 * printed-at stamp instead, so a loose page can still be dated.
 */

/* The paper-only header block is hidden while reading on screen. */
.print-only { display: none; }

/*
 * ...except for the instant html2canvas is photographing the page for a PDF
 * (decision ق٢). That capture is not a print, so no @media print rule applies
 * to it — the class is added by exportFile.pdfFromElement and removed in a
 * `finally`, so an exception cannot leave the header showing on screen.
 * The light palette is handled separately, by data-theme="light".
 */
.pdf-capture .print-only { display: block; }
.pdf-capture .print-head { display: flex; }
.pdf-capture .no-print { display: none; }

/*
 * The paper header's APPEARANCE lives out here, not inside @media print.
 *
 * It used to sit inside the media block, which is right for printing and wrong
 * for the PDF: html2canvas photographs the page in SCREEN media, so none of
 * those rules applied and the header rendered unstyled — the logo took the full
 * width of the page as a giant teal slab. These rules are inert on screen
 * anyway, because .print-only keeps the block hidden until something reveals
 * it; only the display toggles need to know which medium they are in.
 */
/* NOTE: no `display` here. `.print-only` hides the block, and both rules have
   the same specificity — declaring `display:flex` in this shared rule wins on
   source order and puts the paper header on the live screen. Only the two
   reveal contexts (@media print, .pdf-capture) may set display. */
.print-head {
  align-items: center; gap: 10px;
  border-bottom: 2px solid var(--brand-700);
  padding-bottom: 8px; margin-bottom: 12px;
}
.print-head img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; }
.print-head .ph-name { font-size: 1.15rem; font-weight: 800; margin: 0; }
.print-head .ph-sub { font-size: .8rem; color: var(--text-2); margin: 2px 0 0; }
.print-head .ph-stamp { margin-inline-start: auto; text-align: end; font-size: .75rem; color: var(--text-2); }
.print-foot {
  margin-top: 14px; padding-top: 6px;
  border-top: 1px solid var(--border); font-size: .7rem; color: var(--text-2); text-align: center;
}

@media print {
  /* --- 1. force the light palette onto paper -------------------------- */
  /*
   * Every value carries !important, and that is not defensive habit.
   * tokens.css sets the dark palette from `:root:not([data-theme="light"])`
   * inside a prefers-color-scheme query — specificity (0,2,0) against the
   * (0,1,0) of a plain `:root`. Without !important this whole block loses the
   * cascade on any machine set to dark, and the report prints dark cards on
   * white paper: `body` obeyed (it had !important of its own) while every
   * surface, border and label kept its night colours. That is precisely the
   * failure this file exists to prevent, and it was invisible until the page
   * was actually rendered — the computed body colour said black all along.
   */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #ffffff !important;
    --surface: #ffffff !important;
    --surface-2: #f4f6f8 !important;
    --border: #c9d2dd !important;
    --text: #000000 !important;
    --text-2: #333333 !important;
    --text-3: #666666 !important;
    --brand-50: #eef7f8 !important;
    --brand-100: #e3eff1 !important;
    --brand-700: #106370 !important;
    --shadow-1: none !important; --shadow-2: none !important; --shadow-3: none !important;
  }

  @page { size: A4; margin: 14mm 12mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
  }

  /* --- 2. drop everything that is navigation, not content ------------- */
  /* Screen A is the only page that links this file, so these are its class
     names. When Screen B needs a printable page it adds its own rules here. */
  .sidebar, .topbar, .toast-root, .modal-overlay, .scrim,
  .lang-toggle, .icon-btn2, .btn, .no-print,
  .nav, .nav-item, .count-badge {
    display: none !important;
  }

  /* The shell is a two-column grid on screen; on paper there is one column. */
  .shell { display: block !important; }
  .main { display: block !important; }
  .content { padding: 0 !important; }

  /* --- 3. the paper header ------------------------------------------- */
  /* Only the reveal and the point sizes belong here; the layout itself is
     defined above so the PDF capture gets it too. */
  .print-only { display: block; }
  .print-head { display: flex; }
  .print-head .ph-name { font-size: 15pt; }
  .print-head .ph-sub { font-size: 9pt; }
  .print-head .ph-stamp { font-size: 8.5pt; }
  .print-foot { display: block; font-size: 8pt; }

  /* --- 4. keep blocks whole across page breaks ------------------------ */
  .card, .stat {
    break-inside: avoid; page-break-inside: avoid;
    box-shadow: none !important; border-color: #c9d2dd !important;
  }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  /* A table that runs onto a second page repeats its own column headers. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  .scroll-x { overflow: visible !important; }
  .table { font-size: 9pt; }
  .table th { background: #f0f3f6 !important; }

  /* --- 5. keep the colours that carry meaning ------------------------- */
  /* A status pill is not decoration: on a grey print the six statuses become
     indistinguishable, which is the one thing the report is read for. */
  .status-pill, .stat .n, .rep-chart, .rep-bar, .badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .status-pill { border: 1px solid rgba(0,0,0,.15); }

  /* --- 6. report-specific layout on paper ----------------------------- */
  /* The screen collapses these to one column on a narrow window; A4 is not a
     narrow window, so the tiles keep their grid on paper. */
  .grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .rep-controls { display: none !important; }
  /* The first card of a long report starts the page it is already on; every
     section after a page break gets a little air. */
  .rep-section + .rep-section { margin-top: 10px; }
}