/*
 * R11 — the print stylesheet for the three staff portals.
 *
 * Loaded with media="print", so it costs no render-blocking request and no bytes
 * on the critical path. It is the browser path only: shared/pdf still generates
 * invoices and letters, and those are documents with a legal shape. This is for
 * the screens staff actually put on paper — an audit trail for a file, a leave
 * list for a meeting, a receivables sheet for a call.
 *
 * WHAT WAS WRONG. Nothing anywhere had a single @media print rule. Printing the
 * HR audit trail to A4 was measured before any of this existed:
 *
 *   • roughly a fifth of page 1 was app chrome — the brand band, the signed-in
 *     address, a Sign out BUTTON, and all eight navigation tabs
 *   • the filter box and the Comfortable/Compact toggle printed as empty
 *     controls, and every column header carried a sort chevron
 *   • page 2's table header was a row of bare chevrons with no column names at
 *     all, because `th` is position: sticky and sticky headers do not repeat
 *   • the grey header band and card fills printed as ink
 *
 * TWO RULES THAT LOOK WRONG AND ARE NOT.
 *
 * 1. Buttons are NOT hidden wholesale. UI.dataTable renders a sortable column
 *    label INSIDE a <button> (`th.k-sortable button`), so `button { display:none }`
 *    silently deletes every column heading — the exact defect this phase exists to
 *    fix, reintroduced by the fix. Action buttons are hidden by where they live;
 *    the header button is kept and stripped of its chevron instead.
 *
 * 2. `.k-count` is kept. It is the "showing 24 of 247" line from R04, and on paper
 *    it is provenance: the tables paginate client-side, so a printout is one page
 *    of rows, not the whole trail. Keeping the count is what makes that visible
 *    rather than silent. Printing every row needs JavaScript to expand the table
 *    first, which is a phase, not a stylesheet.
 */

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

@media print {
  /* Dark mode must not follow the page onto paper: a staff member with the OS in
     dark mode would otherwise print white text on a black card, or — with
     backgrounds off — white text on white. */
  :root {
    color-scheme: light;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  /* ── chrome: navigation, not content ─────────────────────────────────────
     Hidden by where an element lives rather than by what it is, so a new action
     button inside a panel does not have to be listed here to be excluded. */
  header,
  .topbar,
  .sidebar,
  nav,
  .tabs,
  .k-skip,
  .k-toasts,
  .k-backdrop,
  .k-modal,
  .k-table-tools input[type="search"],
  .k-table-tools .k-density,
  .k-density,
  .k-pager,
  .btn,
  .row > button,
  [role="tablist"] {
    /* !important is deliberate and is the one place this file uses it. The
       portals style their own chrome more specifically than a print sheet can
       reach — `nav.tabs { display: flex }` is 0,1,1 and beats a bare `.tabs` —
       so without it the eight navigation tabs print on every sheet, which is the
       measured defect this rule exists to remove. */
    display: none !important;
  }

  /* The row count survives the tools bar it lives in — see note 2 above. */
  .k-table-tools {
    display: block;
    margin-bottom: 4mm;
  }
  .k-count {
    margin-left: 0;
    color: #000;
  }

  /* ── give the content the whole page ─────────────────────────────────── */
  main,
  main.wrap,
  .wrap,
  #main-content,
  .layout,
  .content {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    display: block;
  }

  /* Cards are a screen device for separating surfaces. On paper the page edge
     already does that, and the fill is just ink. */
  .card,
  .kpi,
  .panel {
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 6mm;
    /* Deliberately NOT `break-inside: avoid`. A card wrapping a long table is
       asked not to fragment, and when the page forces it to anyway the repeated
       <thead> is lost — page 2 of the audit trail arrived with no column names.
       Rows carry the no-split rule instead, which is the thing that actually
       must not break. */
  }

  /* ── tables ──────────────────────────────────────────────────────────────
     display: table-header-group is what makes the column names repeat on every
     sheet. Without it page 2 of the audit trail arrived unlabelled. */
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  tr,
  .k-empty {
    break-inside: avoid;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }

  /* Sticky is a scrolling behaviour; on paper it strands the header. */
  th {
    position: static;
    background: #fff;
    color: #000;
    border-bottom: 1px solid #000;
  }
  td {
    border-bottom: 1px solid #ccc;
  }

  /* Keep the label, drop the affordance.
     `display: contents` is load-bearing, not tidying. Chromium repeats a <thead>
     onto later sheets but does NOT paint <button> content in the repeated copy,
     so page 2 of the audit trail arrived with a correctly repeated header row
     whose sortable cells were empty. Isolated in a minimal document: a table with
     one plain <th> and one <th><button>, printed to A4 — page 2 showed the plain
     headings and a blank cell where the button was. `display: contents` removes
     the button box and promotes its text into the cell, which prints. `inline`
     and `inline-flex` both still vanish, so this is the specific fix, not a
     tidier way of writing the same thing. */
  th.k-sortable button {
    color: #000;
    display: contents;
  }
  th.k-sortable button::after,
  th[aria-sort] button::after {
    content: "";
  }

  /* The card-stack breakpoint (R06) is for narrow screens. A4 is not narrow, and
     stacking here would triple the page count. */
  .k-table.k-stack table,
  .k-table.k-stack thead,
  .k-table.k-stack tbody,
  .k-table.k-stack tr,
  .k-table.k-stack td {
    display: revert;
  }
  .k-table.k-stack td::before {
    content: none;
  }
  .k-table-scroll {
    overflow-x: visible;
  }

  /* ── ink ─────────────────────────────────────────────────────────────────
     Status colour is meaning, not decoration — an "overdue" tag that prints as
     plain text has lost the thing it was there to say — so the -ink tokens stay.
     What goes is the fill and the pill. */
  .tag,
  .k-tag {
    border: 0;
    background: none;
    padding: 0;
  }
  .notice {
    background: none;
    border: 0;
    border-left: 2pt solid #000;
    padding-left: 3mm;
  }

  /* Skeletons are a loading device. If one is on screen when Print is pressed,
     printing four grey bars is worse than printing nothing. */
  .k-skeleton {
    display: none !important;
  }

  /* Type: points, because paper has no pixels. */
  body {
    font-size: 10pt;
    line-height: 1.35;
  }
  h1 {
    font-size: 15pt;
    margin: 0 0 3mm;
  }
  h2 {
    font-size: 12pt;
  }
  h3 {
    font-size: 11pt;
  }
  th,
  td {
    font-size: 9pt;
    padding: 1.5mm 2mm;
  }

  /* A heading orphaned at the foot of a sheet is the commonest print defect
     after the header not repeating. */
  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}