/*
 * print.css — Print stylesheet for the Attended Events Report, the
 *             Year Planner and Statistics. Loaded with media="print", so it only ever
 *             applies to print/PDF output.
 *
 * @copyright  2026 Karl Dyson
 * @license    Apache-2.0
 * @version    1.7.0
 */

/* Hide app chrome not meaningful on paper */
#navbar,
#toast,
.no-print,
#event-panel,
#panel-backdrop,
.page-footer {
  display: none !important;
}

/* Only the printable views' content should print, regardless of which
   app-view happened to be visible when print was triggered. */
.app-view:not(#view-report):not(#view-year-planner):not(#view-stats) {
  display: none !important;
}

/* The fixed nav is hidden, so drop the space reserved for it */
#view-app {
  padding-top: 0 !important;
  min-height: 0 !important;
}

/* ---------------------------------------------------------------------------
   Letterhead
   --------------------------------------------------------------------------- */

.report-print-header {
  display: block !important;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1.5pt solid #333;
}

.report-print-header h2 {
  margin: 0 0 0.2rem;
  font-size: 15pt;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#report-print-byline {
  margin: 0 0 0.15rem;
  font-size: 9.5pt;
  color: #444;
}

#report-filter-summary {
  margin: 0;
  font-size: 9pt;
  color: #666;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Table — thin horizontal rules, no grid
   --------------------------------------------------------------------------- */

#report-grid table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
}

#report-grid thead {
  display: table-header-group; /* repeat header row on every printed page */
}

#report-grid thead tr {
  break-after: avoid;       /* keep header glued to the first body row */
  page-break-after: avoid;  /* legacy fallback */
}

#report-grid th {
  text-align: left;
  padding: 5px 10px;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333;
  border-bottom: 1pt solid #333;
}

#report-grid td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 0.5pt solid #ccc;
}

#report-grid tr {
  break-inside: avoid;       /* modern property */
  page-break-inside: avoid;  /* legacy fallback */
}

/* Orientation only — paper size comes from the print dialog. The 15mm
   margin is larger than typical printer hardware margins, so it's the one
   that applies; the Year Planner's proportions below assume it. */
@page {
  size: landscape;
  margin: 15mm;
}

/* ---------------------------------------------------------------------------
   Year Planner — one landscape page

   Safari/WebKit scales the printed layout to fit the page width, and how
   much depends on the printer's own margins, so absolute (mm) sizes can't
   be relied on to fill a page. Instead the planner is a box whose height is
   a fixed proportion of its width (the shape of an A4 page inside the 15mm
   @page margins, plus ~2% slack), and every size inside is derived from that
   width with container units. A4 and A3 share the same proportions, so one
   layout fits either — the paper is chosen in the print dialog.
   --yp-rows (month header row + day rows) is set by renderYearPlanner().
   --------------------------------------------------------------------------- */

#view-year-planner {
  --yp-ratio: calc(267 / 180 * 1.02);
  --yp-h: calc(100cqw / var(--yp-ratio));                       /* planner height */
  --yp-row: calc(var(--yp-h) * 0.955 / var(--yp-rows, 32));     /* one grid row */
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  container-type: inline-size;
  aspect-ratio: var(--yp-ratio);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Keep month colours, weekend shading and badge colours — Safari drops
   backgrounds when printing unless told otherwise */
#view-year-planner,
#view-year-planner * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.yp-print-header {
  display: flex !important;
  flex: none;
  align-items: baseline;
  gap: 1.5cqw;
  height: calc(var(--yp-h) * 0.045);
  overflow: hidden;
}
.yp-print-header h2 {
  margin: 0;
  font-size: calc(var(--yp-h) * 0.045 * 0.55);
  font-weight: 700;
}
.yp-print-header p {
  font-size: calc(var(--yp-h) * 0.045 * 0.3);
  color: #555;
}

#yp-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: none;
}

/* Rows share the remaining height equally; ruled lines are cell borders
   (inside each cell's box) rather than grid gaps, so they take no height */
#yp-grid {
  height: 100%;
  min-width: 0;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(var(--yp-rows, 32), minmax(0, 1fr));
  gap: 0;
  background: none;
  border-top: 0.2mm solid #b8bec7;
  border-left: 0.2mm solid #b8bec7;
}
#yp-grid > * {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-right: 0.2mm solid #b8bec7;
  border-bottom: 0.2mm solid #b8bec7;
}

.yp-month-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: calc(var(--yp-row) * 0.55);
}

.yp-cell {
  padding: 0 0.25cqw;
  font-size: calc(var(--yp-row) * 0.5);
  line-height: 1;
  flex-wrap: nowrap;
  gap: 0 0.2cqw;
}
.yp-badges {
  flex-wrap: nowrap;
  gap: 0.15cqw;
}
.yp-badge {
  font-size: 0.85em;
  padding: 0 0.25em;
  line-height: 1.3;
  border-width: 0.2mm;
}

/* "Today" is a screen aid — leave it off the printed planner */
.yp-date.is-today { outline: none; }
.yp-date.is-today .yp-day { color: inherit; font-weight: normal; }
.yp-date.is-today .yp-dow { color: var(--color-text-muted); }

/* ---------------------------------------------------------------------------
   Statistics — flows over as many landscape pages as it needs, with each
   card kept whole on one page.
   --------------------------------------------------------------------------- */

/* Plain block layout: WebKit can't cleanly split flex containers or
   scrolling boxes across pages (rows get cut, headers don't repeat) */
#view-stats,
#admin-stats,
.stats-card {
  display: block !important;
}
#view-stats {
  max-width: none !important;
  padding: 0 1px !important;  /* keeps the cards' right border inside the page */
}
#view-stats > * + *,
#admin-stats > * + * { margin-top: 5mm; }
.stats-card > * + * { margin-top: 3mm; }
.stats-scroll { overflow: visible !important; }
#view-stats,
#view-stats * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.stats-print-meta {
  display: block !important;
  margin-top: -3mm;
  font-size: 9pt;
  color: #555;
}

.stats-card,
.stats-tile { box-shadow: none !important; }
/* WebKit ignores break-inside on table rows, so keep each card whole on a
   page instead; compact rows let even the longest card fit one page */
.stats-tiles,
.stats-card { break-inside: avoid; page-break-inside: avoid; }
#admin-stats { break-before: page; page-break-before: always; margin-top: 0 !important; }
/* All-users section prints only when an admin ticks "Include all users" */
#view-stats:not(.stats-print-all) #admin-stats { display: none !important; }
.stats-heat { font-size: 9pt; border-spacing: 1.5px; }
.stats-heat td { height: 1.45rem; }
.stats-heat tr.stats-group th { padding-top: 0.4rem; }

/* Screen-only controls and prompts; an open event list still prints */
.stats-switch,
.stats-detail:not(:has(.stats-events)) { display: none !important; }
.stats-heat td.sel { outline: none !important; }
.stats-event { padding: 0.15rem 0.4rem; }