/* ================================================================
   print.css — Print overrides
   ================================================================ */

@media print {
  /* Hide on-screen UI on every print */
  .topbar,
  .sidebar,
  .panel-strip,
  .modal-bg,
  .toast-container,
  .btn,
  .search-wrap,
  .panel-header,
  .qs-result-actions,
  .rpt-result-actions,
  .qs-list,
  .rpt-grid,
  .no-print {
    display: none !important;
  }

  /* Collapse the app shell into a single column and release ALL height
     constraints (the on-screen grid uses fixed rows + 100dvh + overflow
     hidden, which otherwise boxes the content and pushes the form tail to
     a second page). */
  html, body {
    height: auto !important;
    overflow: visible !important;
  }
  .app {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
  }
  .content {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  /* Force white background / black text regardless of dark mode theme.
     Dark mode CSS variables produce unreadable prints on B&W printers. */
  body, html, .content, .app,
  .rpt-result, .qs-result, .rpt-result-area, .qs-result-area {
    background: white !important;
    color: black !important;
    font-size: 10pt;
  }

  /* Force all table cells to white/black — dark mode sets dark bg on rows */
  table.data-table,
  table.data-table th,
  table.data-table td,
  table.data-table tbody tr,
  table.data-table tbody tr td {
    background: white !important;
    color: black !important;
  }

  /* Tables — break neatly across pages */
  table.data-table {
    page-break-inside: auto;
  }
  table.data-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  table.data-table thead {
    display: table-header-group;       /* repeat headers on every page */
  }
  table.data-table tfoot {
    display: table-footer-group;
  }
  table.data-table th {
    background: #f3f4f6 !important;
    color: black !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1px solid #ccc;
    padding: 5px 7px;
    font-size: 8pt;
    white-space: nowrap;
  }
  table.data-table td {
    border: 1px solid #e5e7eb;
    padding: 4px 7px;
    font-size: 9pt;
    white-space: nowrap;
  }

  /* Status badges → black-on-white for B&W laser printers. */
  .badge,
  .badge-secondary {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-weight: 700 !important;
    padding: 0 4px !important;
  }

  /* Hide elements explicitly marked no-print */
  .no-print { display: none !important; }

  /* Default duplex (two-sided) for member reports */
  @page { duplex: duplex-long-edge; }
}

/* ── Three-ring binder roster layout ─────────────────────────────
   Apply class "binder-print" to a result container to print it
   in a layout suitable for filing in a three-ring binder:
   - 1.25" left margin so the hole punch misses the data
   - Title block on every page with report name + date + count
   - Page numbers in the footer
   - Subtle row striping for readability
*/
@media print {
  @page binder {
    size: letter portrait;
    margin: 0.75in 0.75in 0.75in 1.25in;
  }

  .binder-print {
    page: binder;
  }

  /* Show the print-only title block */
  .binder-print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 14pt;
    padding-bottom: 8pt;
    border-bottom: 2pt solid #333;
  }
  .binder-print-header .bp-org {
    font-size: 9pt;
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 4pt;
  }
  .binder-print-header .bp-title {
    font-size: 16pt;
    font-weight: 700;
    color: black;
    margin-bottom: 4pt;
  }
  .binder-print-header .bp-meta {
    font-size: 9pt;
    color: #444;
  }

  /* Repeat title block on every page via running header.
     We can't do this with pure CSS reliably across browsers, so
     instead we let the table headers repeat (above) and rely on
     the first page bearing the title block. */

  /* Subtle row striping helps the eye track across a wide page */
  .binder-print table.data-table tbody tr:nth-child(even) {
    background: #f9fafb !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* On screen, hide the print-only title block */
.binder-print-header {
  display: none;
}

/* Hide a label print area that's been staged on body (single-label flow) —
   it must exist in DOM for printing but should never flash on screen. */
@media screen {
  body.printing-thermal > #kcl-print-area,
  body.printing-avery   > #kcl-print-area {
    display: none !important;
  }
}

/* ── Key Card Labels print rules ────────────────────────────────
   These activate only when printing labels (body class set by JS
   before window.print() is called).

   THERMAL: 3"×1" paper, zero margins, one label per page.
   AVERY:   Letter portrait, zero margins, 30 labels per sheet.
*/

/* On-screen Avery preview shows labels in a 3-column grid mimicking
   the sheet; the page-break-inside:avoid keeps each label intact. */
@media print {
  /* Hide the app shell ENTIRELY during label printing — display:none
     collapses layout space (visibility:hidden left 78 blank page boxes). */
  body.printing-thermal > *:not(#kcl-print-area):not(.kcl-print-area),
  body.printing-avery   > *:not(#kcl-print-area):not(.kcl-print-area) {
    display: none !important;
  }

  body.printing-thermal #kcl-print-area,
  body.printing-avery #kcl-print-area,
  body.printing-thermal .kcl-print-area,
  body.printing-avery .kcl-print-area {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto;
    background: white !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  body.printing-avery .kcl-print-area.kcl-avery-area,
  body.printing-avery #kcl-print-area.kcl-avery-area {
    display: grid !important;
  }

  /* Thermal: one 3"×1" page per label */
  body.printing-thermal {
    background: white !important;
  }
  body.printing-thermal .key-card {
    width: 2.85in !important;
    height: 0.92in !important;
    margin: 0 !important;
    padding: 0;
    page-break-after: always;
    page-break-inside: avoid;
    border: none !important;
    box-shadow: none !important;
  }
  body.printing-thermal .key-card:last-child {
    page-break-after: auto;
  }
  body.printing-thermal .kcl-thermal-area {
    display: block !important;
    page: thermal-label;
  }

  /* Avery 5960: 30 per Letter sheet, 3 cols × 10 rows */
  body.printing-avery {
    background: white !important;
  }
  body.printing-avery .kcl-avery-area {
    display: grid !important;
    grid-template-columns: repeat(3, 2.625in) !important;
    grid-auto-rows: 1in !important;
    column-gap: 0.125in !important;  /* Avery 5960/5160 horizontal pitch is 2.75in = 2.625in label + 0.125in gap */
    row-gap: 0 !important;            /* vertical pitch is exactly 1in = label height, no gap between rows */
    justify-content: start !important;
    margin: 0.5in 0.1875in !important;  /* top/bottom 0.5", left/right 3/16in (0.1875in) — official 5960/5160 page margins */
    page: avery-label;
  }
  body.printing-avery .key-card-avery {
    width: 2.625in !important;
    height: 1in !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  body.printing-avery .kcl-avery-blank {
    border: none !important;
    background: transparent !important;
  }

  /* NOTE on the two named @page rules below: @page is always a
     top-level at-rule — it can NEVER be nested inside a selector
     block like "body.printing-avery @page { ... }" (that was invalid
     CSS, silently dropped by the browser). A *named* @page rule,
     paired with the "page: <name>;" property on the element above,
     is the correct way to scope page size/margins to specific
     printed content — this is the exact same pattern the working
     "binder" page (below, in the three-ring binder block) already
     uses successfully. Previously, with no valid scoped rule in
     effect, label printing silently fell through to whichever
     unnamed @page rule appeared LAST in this file — which was the
     Membership Application's "letter portrait, 0.5in 0.6in" rule —
     producing correct paper size/orientation but wrong margins. */
  @page thermal-label {
    size: 3in 1in;
    margin: 0;
    duplex: simplex;
  }
  @page avery-label {
    size: letter portrait;
    margin: 0;
    duplex: simplex;
  }

  /* ── Membership Application ───────────────────────────────── */
  .app-form {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .app-form .af-banner {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #1e3a5f !important;
    color: #fff !important;
  }
  .app-form .af-row { page-break-inside: avoid; }
  .app-form .af-official-grid { page-break-inside: avoid; }

  /* Compress vertical rhythm so the entire form fits one Letter page
     at 100% scale (no browser shrink-to-fit needed). Letter portrait
     with the @page margins below gives ~9.5in of usable height. */
  @page { size: letter portrait; margin: 0.5in 0.6in; }

  .app-form .af-head { margin-bottom: 6px; }
  .app-form .af-org { font-size: 20pt; }
  .app-form .af-org-sub { font-size: 13pt; }
  .app-form .af-title { font-size: 11pt; margin-top: 2px; }
  .app-form .af-banner { font-size: 12px; padding: 4px; margin-bottom: 8px; letter-spacing: 1.5px; }
  .app-form .af-notice { font-size: 8.5pt; padding: 5px 12px; margin-bottom: 8px; line-height: 1.35; }
  .app-form .af-pastmember { padding: 5px 12px; margin-bottom: 8px; gap: 14px; }
  .app-form .af-pastmember .af-label { font-size: 10pt; }

  .app-form .af-section { margin-bottom: 8px; }
  .app-form .af-section-title { font-size: 10pt; margin-bottom: 6px; padding-bottom: 2px; }
  .app-form .af-row { margin-bottom: 7px; gap: 18px; }
  .app-form .af-label { font-size: 8.5pt; margin-bottom: 1px; }
  .app-form .af-line { height: 14px; }
  .app-form .af-felony { gap: 12px; }
  .app-form .af-felony .af-label { font-size: 10pt; }
  .app-form .af-box { width: 13px; height: 13px; }
  .app-form .af-caution { font-size: 8.5pt; padding: 4px 10px; margin-top: 6px; line-height: 1.3; }

  .app-form .af-official { padding: 7px 16px 8px; }
  .app-form .af-official-grid { gap: 30px; }
  .app-form .af-official-head { font-size: 9.5pt; margin-bottom: 8px; }
  .app-form .af-sign-line { height: 17px; margin-bottom: 4px; }
  .app-form .af-decision { margin-top: 9px; padding-top: 7px; font-size: 9pt; gap: 32px; }

  .app-form .af-footer { margin-top: 8px; padding-top: 5px; font-size: 8pt; }
}