/* ──────────────────────────────────────────────────────────
   Print styles for the quote PDF.

   Used by TWO render paths that share the same rules:
     1. window.print() in the app (Phase 1 — TRQ-119)
     2. Puppeteer server-side rendering for /api/.../pdf
        (Phase 2 — TRQ-120). The server reads this file and
        inlines its contents into the HTML it hands Puppeteer.

   Keep rules here generic enough to work in both contexts.
   ────────────────────────────────────────────────────────── */

@page {
  size: A4;
  margin: 18mm 18mm 22mm 18mm;
}

/* Render-only-on-print helper: the print-only clone of QuoteDocument is
   mounted in the app shell but hidden on screen. */
.print-only { display: none !important; }
@media print { .print-only { display: block !important; } }

@media print {
  /* Print everything crisp and in colour */
  html, body, * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Force page chrome to white. The app's body uses a cream --tq-bg
     (#f5f1eb) which bleeds through on any page where .print-root
     content doesn't fill the sheet — producing a "beige box" below
     the last element. Scoped to .app-chrome so the Puppeteer path
     is unaffected. */
  html.app-chrome,
  html.app-chrome body {
    background: white !important;
  }

  /* Hide the app chrome when printing — only the .print-root subtree
     prints. This rule is SCOPED to html.app-chrome so the server-side
     Puppeteer path (which has no chrome to hide) isn't affected.
     Without the scope, .print-root's position:absolute takes the only
     content out of document flow → Chromium produces blank pages. */
  html.app-chrome body * { visibility: hidden !important; }
  html.app-chrome .print-root,
  html.app-chrome .print-root * { visibility: visible !important; }
  html.app-chrome .print-root {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    background: white !important;
    box-shadow: none !important;
  }

  /* Server-side path: no chrome to hide, so .print-root stays in normal
     flow and the PDF engine paginates the content the usual way. */
  html:not(.app-chrome) .print-root {
    background: white !important;
  }

  /* Always-hidden elements in print */
  .print-hide,
  [data-html2canvas-ignore="true"] {
    visibility: hidden !important;
    display: none !important;
  }

  /* Quote document itself — no shadows, no max-height, no overflow */
  #quote-document {
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: white !important;
    color: #111 !important;
    font-size: 11pt;
  }

  /* Sections must not split across pages — orphans/widows as backup */
  [data-print-section] {
    break-inside: avoid;
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  /* Cost breakdown table: keep header with at least one body row */
  [data-print-section="cost-breakdown"] thead {
    display: table-header-group;
  }
  [data-print-section="cost-breakdown"] tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Totals block must stay together on one page */
  [data-print-section="totals"] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Photo appendix. The first data-print-pair contains the "Site
     Photographs" header AND the first 2 photos — by applying break-before:
     page to that pair (rather than the outer section) the header always
     rides onto the new page WITH its photos, never orphaned. Subsequent
     pairs just break naturally. */
  [data-print-section="photos"] > [data-print-pair]:first-child {
    break-before: page;
    page-break-before: always;
  }
  [data-print-pair] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Aspect-aware photo sizing (TRQ-177). The data-orientation attr is
     set by QuoteDocument from the precomputed aspect ratio, so each
     photo gets a height cap tuned to its shape:
       - landscape (≥1.3:1)  → 115mm
       - portrait  (<1:1)    → 110mm
       - square    (1.0–1.3) → 113mm
     Caps live in src/utils/photoLayout.js and are mirrored here.
     Width is always full content width (158mm) — height-cap kicks in
     only when the aspect would otherwise overflow.

     The 3mm shave from Mark's reference 118mm gives the budget room
     for the heading (12mm) + spacing (6mm) on the first photo page.
     12 + 115 + 6 + 115 = 248mm fits the 250mm A4 content area.

     Default rule (used when data-orientation is missing — e.g. an old
     cached render) caps at landscape height. Safer than no cap. */
  [data-print-section="photos"] .print-photo img {
    max-width: 100%;
    max-height: 115mm;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  [data-print-section="photos"] .print-photo[data-orientation="portrait"] img {
    max-height: 110mm;
  }
  [data-print-section="photos"] .print-photo[data-orientation="square"] img {
    max-height: 113mm;
  }
  /* Tighter inter-photo spacing on the photos section. Tailwind's
     space-y-6 (24mm) was eating the height budget — 6mm matches the
     PAIR_INTER_PHOTO_SPACING_MM constant in photoLayout.js. */
  [data-print-section="photos"] [data-print-pair] > * + * {
    margin-top: 6mm !important;
  }
  /* Neutralise the heading's vertical padding/margins so the
     12mm budgeted in PAIR_HEADING_HEIGHT_MM is realistic.
     The h2 itself contributes ~12mm at text-lg. */
  [data-print-section="photos"] h2 {
    margin-top: 0 !important;
    margin-bottom: 4mm !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* TRQ-171: PDF rendering disables JS (sec-audit C-2 hardening), so
     Tailwind's CDN runtime never executes — utility classes added to
     QuoteDocument that don't have a matching rule below silently fail
     to apply. The three rules in this block guarantee the PDF matches
     the DOCX layout regardless of whether Tailwind classes are
     processed.

     1. Logo — match Mark's reference 65×32mm. The Tailwind class
        max-w-[245px] max-h-[120px] only applies when JIT is running. */
  #quote-document img[alt="Logo"] {
    max-width: 245px !important;
    max-height: 120px !important;
    object-fit: contain;
  }

  /* 2. Measurements — render filled bullet glyphs ("● Length: 4,000mm")
        matching Mark's reference. Tailwind's list-disc pl-6 utilities
        won't apply without the JIT, and Tailwind's preflight strips
        the browser default list-style. Force it back on here. */
  #quote-document [data-print-section="measurements"] ul {
    list-style: disc !important;
    padding-left: 24px !important;
  }
  #quote-document [data-print-section="measurements"] ul li::marker {
    color: #374151;
  }

  /* 3. "Site Photographs" heading — centred above the centred photos
        below. Tailwind's text-center utility is again JIT-only. */
  #quote-document [data-print-section="photos"] h2 {
    text-align: center !important;
  }

  /* Preserve the few coloured elements we actually want in print */
  .bg-gray-50 { background: #f9fafb !important; }
  .bg-gray-100 { background: #f3f4f6 !important; }
  .border-gray-200 { border-color: #e5e7eb !important; }
  .border-gray-300 { border-color: #d1d5db !important; }
  .border-gray-800 { border-color: #1f2937 !important; }
  .text-gray-500 { color: #6b7280 !important; }
  .text-gray-600 { color: #4b5563 !important; }
  .text-gray-700 { color: #374151 !important; }
  .text-gray-800 { color: #1f2937 !important; }
  .text-gray-900 { color: #111827 !important; }

  /* Remove any container widths that would pinch the print area */
  .max-w-5xl, .max-w-3xl, .max-w-2xl, .max-w-xl {
    max-width: none !important;
  }
}