/* Digital School Portal - Print Stylesheet
   ============================================================================
   PRINT CONTRACT
   ----------------------------------------------------------------------------
   1. A page that declares a printable region wraps it in `.print-root`.
      portal.js then marks that region, every ancestor of it and every
      descendant of it with `.print-active`, and only `.print-active` nodes are
      printed. This is the "isolated print region" mode used by every report.

   2. A page with no `.print-root` prints normally, minus the known app chrome
      and anything marked `.no-print`. This is the "chrome suppression" mode.

   Both modes suppress chrome by NAME (sidebar, topbar, bottom nav, toolbars…).
   The previous implementation hid `body *` and revealed only `.print-root`,
   which silently printed a blank sheet on any page that forgot the wrapper,
   and reserved the layout space of the hidden nodes so toolbars printed as
   empty bands. Do not reintroduce a blanket `visibility: hidden`.
   ============================================================================ */

/* ── Page setup ─────────────────────────────────────────────────────────────
   Reports can override these per-template with their own @page rules.       */
@page {
  margin: 10mm 10mm 10mm 10mm;
  size: A4 portrait;
}

/* Broadsheet gets landscape because it is a wide table. */
@page broadsheet-landscape {
  size: A4 landscape;
  margin: 8mm;
}

@media print {
  /* Apply landscape to broadsheet pages */
  body.page-report-broadsheet {
    page: broadsheet-landscape;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     GLOBAL PRINT BASELINE
     Always print on clean white paper with plain light background & variables.
     ══════════════════════════════════════════════════════════════════════════ */
  :root,
  html,
  html[data-theme],
  body {
    color-scheme: light !important;
    --color-bg:              #ffffff !important;
    --color-surface:         #ffffff !important;
    --color-surface-2:       #f3f4f6 !important;
    --color-surface-3:       #e9ecef !important;
    --color-text:            #111827 !important;
    --color-text-muted:      #4b5563 !important;
    --color-text-faint:      #6b7280 !important;
    --color-border:          #d1d5db !important;
    --color-border-input:    #d1d5db !important;
    --color-border-inner:    #e5e7eb !important;
    --color-border-strong:   #9ca3af !important;
    --color-primary:         #1e3a8a !important;
    --color-primary-dim:     #1e3a8a !important;
    --color-primary-text:    #1e3a8a !important;
    --color-secondary:       #374151 !important;
    --color-accent:          #be185d !important;
    --color-success:         #065f46 !important;
    --color-danger:          #991b1b !important;
    --color-warning:         #92400e !important;
    --color-info:            #1e40af !important;
    --color-surface-hover:   #ffffff !important;
    --color-surface-tint:    transparent !important;
    --color-surface-tint-2:  transparent !important;
    --shadow-1: none !important;
    --shadow-2: none !important;
    --shadow-3: none !important;
    /* Report-specific tokens */
    --report-ink:       #111827;
    --report-border:    #d1d5db;
    --report-border-dk: #6b7280;
    --report-border-lt: #e5e7eb;
    --report-zebra:     #f3f4f6;
  }

  html,
  body,
  .portal-layout-root,
  .portal-main-column,
  .portal-main-area,
  .portal-print-view,
  .portal-print-view-main,
  .print-root {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Override dark surface inline styles in print */
  [style*="var(--color-surface)"],
  [style*="var(--color-surface-2)"],
  [style*="var(--color-surface-3)"] {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
  }

  [style*="var(--color-text)"] { color: #111827 !important; }
  [style*="var(--color-text-muted)"] { color: #4b5563 !important; }

  /* ── Chrome suppressed by name (both modes) ──────────────────────────── */
  .portal-sidebar,
  .portal-topbar,
  .portal-sidebar-toggle,
  .portal-sidebar-backdrop,
  .portal-bottom-nav,
  .portal-breadcrumbs,
  .portal-offline-banner,
  .portal-sheet,
  .portal-sheet-backdrop,
  .portal-nav-sheet,
  .portal-nav-sheet-backdrop,
  .portal-toast-container,
  .portal-modal-overlay,
  .portal-fab,
  .print-view-bar,
  .print-view-tip,
  .pdf-unavailable-notice,
  .report-filters,
  .report-toolbar,
  .report-actions,
  .report-actions-mobile,
  .pdf-download-group,
  .feed-remove-btn,
  .htmx-indicator,
  .sync-btn,
  #notif-modal-container,
  #confirm-modal,
  .no-print {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── Mode 1: isolated print region ────────────────────────────────────── */
  body.print-region *:not(.print-active) {
    display: none !important;
  }

  body.print-region .portal-layout-root,
  body.print-region .portal-main-column,
  body.print-region .portal-main-area,
  body.print-region .print-root,
  body.print-region .portal-print-view,
  body.print-region .portal-print-view-main {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }

  /* ══════════════════════════════════════════════════════════════════════════
     COMPACT LAYOUT — reduce the generous screen-space to paper-space
     ══════════════════════════════════════════════════════════════════════════ */

  /* Root page wrapper — strip outer padding the screen version uses */
  .max-w-4xl.mx-auto,
  .max-w-5xl.mx-auto,
  .max-w-6xl.mx-auto,
  .max-w-full {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Portal card: remove shadow and reduce padding drastically for print */
  .portal-card {
    box-shadow: none !important;
    border: 1px solid var(--report-border) !important;
    background: #ffffff !important;
    color: var(--report-ink) !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
    /* Reduce the generous padding */
    padding: 6pt 8pt !important;
    margin-bottom: 4pt !important;
  }

  /* ── School header block ─────────────────────────────────────────────── */
  /* The header is a flex row: [logo | school text | spacer logo] */
  .portal-card.p-4.mb-4.flex,
  .portal-card.p-4.mb-5.flex,
  .portal-card[class*="flex"][class*="items-center"][class*="gap-4"] {
    padding: 5pt 8pt !important;
    margin-bottom: 4pt !important;
  }

  /* Shrink school logo in header */
  .portal-card img[class*="h-14"],
  .portal-card img[class*="h-16"],
  img[class*="h-12"][class*="w-12"],
  img[class*="h-14"][class*="w-14"],
  img[class*="h-16"][class*="w-16"] {
    height: 36pt !important;
    width: 36pt !important;
  }

  /* School name in header */
  .portal-card h1[class*="text-xl"],
  .portal-card h1[class*="text-2xl"] {
    font-size: 13pt !important;
    line-height: 1.2 !important;
    margin-bottom: 1pt !important;
  }

  /* School address / motto in header */
  .portal-card p[class*="text-xs"],
  .portal-card p[class*="text-sm"] {
    font-size: 7.5pt !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  /* Report title badge inside header */
  .portal-card span[class*="font-bold"][class*="uppercase"][class*="tracking-wider"] {
    font-size: 8pt !important;
    padding: 1pt 4pt !important;
  }

  /* ── Student info grid ───────────────────────────────────────────────── */
  /* Three-column info grid: photo | details | details */
  .grid.grid-cols-3.gap-4,
  .grid.grid-cols-3[class*="mb-6"] {
    gap: 4pt !important;
    margin-bottom: 4pt !important;
    padding: 5pt 6pt !important;
  }

  /* Student photo avatar */
  .w-20.h-20,
  img[class*="w-20"][class*="h-20"],
  div[class*="w-20"][class*="h-20"] {
    width: 42pt !important;
    height: 42pt !important;
  }

  /* Student profile (transcript) photo/avatar */
  .w-16.h-16,
  img[class*="w-16"][class*="h-16"],
  div[class*="w-16"][class*="h-16"] {
    width: 32pt !important;
    height: 32pt !important;
    font-size: 13pt !important;
  }

  /* DL grid in student info */
  dl.grid,
  dl[class*="grid-cols-2"] {
    gap: 2pt 10pt !important;
    font-size: 8pt !important;
  }

  dt[class*="text-xs"],
  dl dt { font-size: 7pt !important; margin: 0 !important; }
  dl dd { font-size: 8pt !important; margin: 0 !important; }

  /* Section headings: "Academic Performance", "Conduct & Character", etc. */
  h3[class*="font-semibold"][class*="text-sm"][class*="uppercase"] {
    font-size: 7.5pt !important;
    margin-bottom: 2pt !important;
    margin-top: 5pt !important;
    letter-spacing: 0.04em !important;
  }

  /* ── Score summary stat cards ────────────────────────────────────────── */
  /* The 5-column stats row below the score table */
  .grid.grid-cols-2.md\:grid-cols-5,
  .grid[class*="grid-cols-5"] {
    gap: 3pt !important;
    margin-bottom: 4pt !important;
  }

  /* Individual stat card */
  .grid.grid-cols-2.md\:grid-cols-5 > div,
  .grid[class*="grid-cols-5"] > div {
    padding: 3pt 4pt !important;
    border-radius: 0 !important;
  }

  /* Stat card number */
  .grid.grid-cols-2.md\:grid-cols-5 p[class*="text-xl"],
  .grid[class*="grid-cols-5"] p[class*="text-xl"] {
    font-size: 10pt !important;
    line-height: 1.1 !important;
  }

  /* Stat card label */
  .grid.grid-cols-2.md\:grid-cols-5 p[class*="text-xs"],
  .grid[class*="grid-cols-5"] p[class*="text-xs"] {
    font-size: 6.5pt !important;
    margin-top: 1pt !important;
  }

  /* Subject stats for subject report (2×6 grid) */
  .grid.grid-cols-2.md\:grid-cols-4,
  .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
    gap: 3pt !important;
    margin-bottom: 4pt !important;
  }
  .grid.grid-cols-2.md\:grid-cols-4 > .portal-card,
  .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 > .portal-card {
    padding: 3pt 5pt !important;
  }

  /* ── Tables ──────────────────────────────────────────────────────────── */
  /* Undo mobile card-stacking so phones/tablets still print a real table. */
  table,
  .table,
  .portal-table {
    display: table !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    white-space: normal !important;
    color: var(--report-ink) !important;
    background: #ffffff !important;
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: 8pt !important;
  }

  thead { display: table-header-group !important; }
  tbody { display: table-row-group !important; }

  tr {
    display: table-row !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: auto !important;
  }

  th, td {
    display: table-cell !important;
  }

  /* Compact cell padding */
  th {
    padding: 3pt 5pt !important;
    font-size: 7.5pt !important;
    background-color: var(--report-zebra) !important;
    color: var(--report-ink) !important;
    border-bottom: 1.5pt solid var(--report-border-dk) !important;
  }

  td {
    padding: 2.5pt 5pt !important;
    font-size: 8pt !important;
    border-bottom: 0.5pt solid var(--report-border-lt) !important;
  }

  /* Score table header (coloured primary bar) */
  thead tr[style*="var(--color-primary)"],
  thead tr[style*="background: var(--color-primary)"] {
    background: #1e3a8a !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  thead tr[style*="var(--color-primary)"] th,
  thead tr[style*="background: var(--color-primary)"] th {
    color: #ffffff !important;
    border-bottom: none !important;
    padding: 3pt 5pt !important;
    font-size: 7.5pt !important;
  }

  /* Zebra striping on score table body rows */
  tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
  }
  tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
  }

  /* The mobile row labels injected by portal.js are a screen affordance only */
  .portal-table td::before,
  .portal-table th::before {
    content: none !important;
    display: none !important;
  }

  /* Table overflow wrapper — remove on print, let table expand full width */
  .overflow-x-auto {
    overflow: visible !important;
    margin-bottom: 4pt !important;
  }

  /* Broadsheet vertical text headers — use horizontal for print readability */
  #broadsheet-table th[style*="writing-mode"] {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    max-height: none !important;
    min-width: 28pt !important;
    font-size: 6.5pt !important;
    padding: 2pt 2pt !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 45pt !important;
  }

  #broadsheet-table td {
    padding: 2pt 3pt !important;
    font-size: 7.5pt !important;
  }

  #broadsheet-table td:first-child,
  #broadsheet-table th:first-child {
    min-width: 90pt !important;
    position: static !important;   /* remove sticky on paper */
  }

  /* ── Traits table ────────────────────────────────────────────────────── */
  .overflow-x-auto table.w-full.text-sm:not(#broadsheet-table) {
    font-size: 8pt !important;
  }

  /* Trait table rows */
  table.w-full.text-sm tr td[class*="py-1"] {
    padding-top: 2pt !important;
    padding-bottom: 2pt !important;
  }

  /* ── Grade legend ────────────────────────────────────────────────────── */
  .portal-card.px-4.py-3,
  .portal-card[class*="px-4"][class*="py-3"] {
    padding: 4pt 6pt !important;
    margin-top: 3pt !important;
  }

  .flex.flex-wrap.gap-2 > span[class*="text-xs"] {
    font-size: 6.5pt !important;
    padding: 1pt 3pt !important;
  }

  /* ── Comments block ──────────────────────────────────────────────────── */
  .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
    gap: 6pt !important;
    margin-bottom: 5pt !important;
  }

  .grid.grid-cols-1.md\:grid-cols-2.gap-6 > div {
    padding-top: 5pt !important;
  }

  .grid.grid-cols-1.md\:grid-cols-2.gap-6 p[class*="text-sm"] {
    font-size: 8pt !important;
    min-height: 24pt !important;
  }

  .grid.grid-cols-1.md\:grid-cols-2.gap-6 p[class*="text-xs"] {
    font-size: 7pt !important;
  }

  /* Signature lines */
  .mt-4.pt-3 {
    margin-top: 4pt !important;
    padding-top: 3pt !important;
  }

  /* ── Footer (next term date) ─────────────────────────────────────────── */
  .text-center.pt-4.border-t.text-sm {
    padding-top: 4pt !important;
    font-size: 8pt !important;
  }

  /* ── Legend / grid layout for 1-col → 2-col ─────────────────────────── */
  .grid.grid-cols-1.md\:grid-cols-2.gap-4 {
    gap: 5pt !important;
    margin-bottom: 4pt !important;
  }

  /* ── Transcript: term cards and session blocks ───────────────────────── */
  .session-block {
    margin-bottom: 6pt !important;
  }

  .session-block h2[class*="font-bold"] {
    font-size: 9pt !important;
    margin-bottom: 2pt !important;
  }

  /* Term card header strip */
  .term-card > div[class*="px-4"][class*="py-2"] {
    padding: 3pt 6pt !important;
  }

  .term-card > div[class*="px-4"][class*="py-2"] p {
    font-size: 8pt !important;
  }

  /* Per-term table inside transcript */
  .term-card table {
    font-size: 7.5pt !important;
  }

  .term-card td, .term-card th {
    padding: 2pt 4pt !important;
    font-size: 7.5pt !important;
  }

  /* Transcript student info card */
  .portal-card.p-5.mb-6 {
    padding: 5pt 8pt !important;
    margin-bottom: 4pt !important;
  }

  /* Cumulative stats in transcript header */
  .portal-card.p-5.mb-6 span[class*="text-xl"] {
    font-size: 10pt !important;
  }

  /* Session page-break: a new session starts on a fresh page in long transcripts */
  .session-page-break {
    page-break-before: auto !important;
    break-before: auto !important;
  }

  /* Force transcript header to repeat at top of each page if multi-page */
  .portal-card.p-4.mb-4.flex {
    break-inside: avoid !important;
  }

  /* ── Annual report term sub-table ────────────────────────────────────── */
  /* Annual card outer padding */
  .portal-card.p-8 {
    padding: 6pt 8pt !important;
  }

  /* ── Status badges in print ──────────────────────────────────────────── */
  .badge,
  [class*="status-"],
  .portal-badge {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 7pt !important;
    padding: 1pt 3pt !important;
  }

  /* ── Links ───────────────────────────────────────────────────────────── */
  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* ── General utility overrides ───────────────────────────────────────── */

  /* Many sections have mb-6 on screen — collapse to paper gap */
  .mb-6 { margin-bottom: 5pt !important; }
  .mb-5 { margin-bottom: 4pt !important; }
  .mb-4 { margin-bottom: 3pt !important; }
  .mb-3 { margin-bottom: 3pt !important; }
  .mb-2 { margin-bottom: 2pt !important; }
  .mb-1 { margin-bottom: 1pt !important; }

  .p-8  { padding: 6pt 8pt !important; }
  .p-6  { padding: 5pt 7pt !important; }
  .p-5  { padding: 4pt 6pt !important; }
  .p-4  { padding: 4pt 5pt !important; }
  .p-3  { padding: 3pt 4pt !important; }

  /* Gap helpers */
  .gap-6 { gap: 5pt !important; }
  .gap-4 { gap: 4pt !important; }
  .gap-3 { gap: 3pt !important; }

  /* Hide Tailwind responsive show/hide helpers that hide the spacer logo */
  .hidden { display: none !important; }
  /* Reveal the balancing spacer column for the header logo on paper */
  .hidden.sm\:block {
    display: block !important;
  }

  /* Min-height placeholders (comment fields) — shrink for paper */
  .min-h-12 { min-height: 20pt !important; }
}