/* print.css — the Roster printout (js/pages/rosterPrint.js), per Big 2026-08-06.
   Loaded LAST so its @media print block can override anything above it.

   Two jobs:
     1. ON SCREEN — draw the preview overlay: dark backdrop, white A4-ish
        sheets, a toolbar with Print / Close.
     2. ON PAPER — hide the entire app and print only those sheets.

   The app never had print styles before, so without part 2 a print would try
   to reproduce the whole dark UI: sidebar, fixed header, dark backgrounds. */

/* ── 0. The Print button (Roster toolbar, top-right) ──────────────────── */
/* margin-left:auto parks it at the far right of the search row, which is
   otherwise empty (per Big, 2026-08-06). The icon needs an explicit size:
   an inline <svg> with only a viewBox falls back to 300×150 and blew the
   button up into a tall block. */
.rt-print {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.rt-print-ico {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ── 1. The on-screen preview ─────────────────────────────────────────── */
.rp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  overflow-y: auto;
  background: rgba(8, 12, 22, 0.75);
  backdrop-filter: blur(2px);
  padding: 0 var(--sp-4) var(--sp-8);
}
.rp-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 auto var(--sp-5);
  max-width: 820px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-2, 0 6px 20px rgba(0, 0, 0, 0.3));
}
.rp-bar-title {
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.rp-bar-note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* The bar's own buttons. NOT .primary-btn / .small-btn: dialogs.css sets
   .primary-btn { width: 100% } for the login card, and in this flex row that
   stretched Print across the whole bar and crushed the title and note into
   one-word columns (per Big's screenshot, 2026-08-06). */
.rp-btn {
  flex: none;
  white-space: nowrap;
  font: inherit;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.rp-btn:hover {
  background: var(--surface-3);
  border-color: var(--muted);
  color: var(--ink);
}
.rp-btn-go {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.rp-btn-go:hover {
  filter: brightness(1.08);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.rp-paper {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}
/* Preview only: hold the full sheet height so it reads as a real page and the
   leftover space at the bottom is visible. Dropped in print, where the page
   box already decides the height. */
.rp-paper > .rp-page {
  min-height: 277mm;
}
.rp-empty {
  padding: var(--sp-8);
  text-align: center;
  color: #444;
  background: #fff;
  border-radius: var(--r-md);
}

/* A PAGE is one physical sheet, filled with as many rooms as fit (per Big,
   2026-08-06). It is always light — it is paper, in either theme — and its
   colours are fixed hex, not tokens, so the preview matches the printer.

   Sized in MILLIMETRES to match A4 exactly: with @page margin 10mm the
   printable area is 190×277mm, so the page is 190mm wide and its own 4mm
   padding leaves a 182mm × 269mm content box. js/pages/rosterPrint.js measures
   against that 269mm, which is why the type sizes below are shared by screen
   and paper instead of being tightened only inside @media print — a preview
   measured at different sizes would pack the pages wrong. */
.rp-page {
  position: relative;
  box-sizing: border-box;
  width: 190mm;
  padding: 4mm;
  background: #fff;
  color: #111;
  border-radius: var(--r-md);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  /* display:block, NOT flex. The spacing between rooms used to be a flex
     `gap`, but @media print sets display:block for the page break to behave —
     and `gap` does nothing in block layout, so on paper every room ran into
     the next one with no space at all (per Big's printout, 2026-08-06).
     Margins work identically in both, so screen and paper now agree. */
  display: block;
}
/* Pass 1 of pagination renders every room in one tall container purely to
   measure it; it is replaced immediately, so never show it. */
.rp-measure {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}
.rp-pageno {
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #999;
}
.rp-sheet {
  color: #111;
}
/* The cut line. These sheets get guillotined apart so each teacher walks off
   with their own room (per Big, 2026-08-06), so every room after the first
   carries a dashed rule with room to cut on either side. Kept as margin +
   padding rather than a flex gap so it survives display:block on paper.
   NOTE: the margin is what SHEET_GAP in js/pages/rosterPrint.js accounts for —
   offsetHeight already includes the padding and the border, but never margins.
   Change one and the other has to follow or pagination drifts. */
.rp-sheet + .rp-sheet {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed #888;
}
.rp-class {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111;
}
.rp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 2px solid #111;
  font-size: 12px;
  color: #222;
}
/* One set of type sizes for BOTH screen and paper — the preview measures
   itself to decide where pages break, so it has to render at printed size. */
.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rp-table th,
.rp-table td {
  border: 1px solid #999;
  padding: 3px 8px;
  text-align: left;
  color: #111;
}
.rp-table th {
  background: #eee;
  font-weight: 700;
}
.rp-table .rp-no {
  width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* The tick box the teacher checks names off with (per Big, 2026-08-06). An
   empty bordered cell, not an <input type="checkbox"> — form controls print
   inconsistently and some printers drop them altogether. Sized in mm so it
   comes out the same on paper as it looks on screen. */
.rp-tick {
  width: 7mm;
  padding: 0 !important;
}
.rp-table td.rp-tick {
  background: #fff;
}
/* The spare half-cell on the last row of an odd two-column list has nothing
   to tick, so it gets no box — just blank paper. */
.rp-table td.rp-tick-off {
  border-color: #ccc;
}

/* Long lists run in two columns so a room does not waste the right half of the
   sheet — see TWO_COL_FROM in js/pages/rosterPrint.js. The divider between the
   two halves is heavier so the eye does not read across the gap by mistake.
   It sits on column 4 because each half is now three cells: tick, #, name. */
.rp-table-2col td:nth-child(4),
.rp-table-2col th:nth-child(4) {
  border-left: 2px solid #666;
}
.rp-table-2col .rp-no {
  width: 34px;
}
.rp-none {
  color: #777;
  font-style: italic;
}

/* ── 2. On paper ──────────────────────────────────────────────────────── */
@media print {
  /* Hide the app. Every direct child of <body> goes except the preview —
     which also covers the toasts, popovers and banners that live there. */
  body.printing-roster > *:not(#roster-print) {
    display: none !important;
  }
  /* base.css pins the app to a desktop width; paper is narrower than that. */
  body.printing-roster {
    min-width: 0 !important;
    background: #fff !important;
  }
  .rp-overlay {
    position: static;
    padding: 0;
    background: none;
    backdrop-filter: none;
    overflow: visible;
  }
  .rp-bar {
    display: none !important; /* the buttons are not part of the document */
  }
  .rp-paper {
    max-width: none;
    display: block;
  }
  /* One .rp-page = one sheet of paper, filled by rosterPrint.js's pagination,
     then a forced break. The last page must NOT force one or the printer
     spits out a blank sheet. */
  .rp-paper > .rp-page {
    min-height: 0; /* preview-only; the page box sets the height on paper */
  }
  .rp-page {
    box-shadow: none;
    border-radius: 0;
    /* width/padding/display stay as set above — they ARE the A4 printable
       area, and the layout must not differ from the measured preview. */
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }
  .rp-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .rp-pageno {
    display: none; /* the printer's own page numbers, if any, are enough */
  }
  /* A room is never split mid-list: a teacher holding page 2 with no room
     name on it cannot tell whose class it is. Pagination already packs rooms
     so this should never fire — it is the backstop if a printer's metrics
     differ slightly from the browser's. */
  .rp-sheet {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Force black ink. The app is usually in dark theme, and inherited token
     colours were tinting names a washed-out blue on paper. */
  #roster-print,
  #roster-print * {
    color: #000 !important;
  }
  /* Browsers drop background colours when printing unless asked not to — the
     heading row is the one place the shading actually helps readability. */
  .rp-table th {
    background: #e8e8e8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rp-none {
    color: #555 !important;
  }
  /* Repeat the column headings when a very long list does span pages. */
  .rp-table thead {
    display: table-header-group;
  }
  /* 10mm here + .rp-page's own 4mm padding = a 14mm margin on paper, and a
     190×277mm printable area — the numbers rosterPrint.js paginates against. */
  @page {
    margin: 10mm;
  }
}