/* ════════════════════════════════════════════════════════════════════
   CFS PRO — PRINT
   A4 ISO-22716-style batch records, COA, MSDS.
   Goal: when the user prints, it should look like a real lab doc.
   ════════════════════════════════════════════════════════════════════ */

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

  @top-left {
    content: "CFS — Generic Perfumes Factory";
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 8pt;
    color: #555;
  }
  @top-right {
    content: "Batch Record";
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 8pt;
    color: #555;
  }
  @bottom-left {
    content: "ISO 22716 — GMP for Cosmetics";
    font-family: "IBM Plex Mono", monospace;
    font-size: 7pt;
    color: #777;
    letter-spacing: .05em;
  }
  @bottom-center {
    content: "Confidential — Internal Use";
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 7pt;
    color: #999;
  }
  @bottom-right {
    content: "Page " counter(page) " / " counter(pages);
    font-family: "IBM Plex Mono", monospace;
    font-size: 7pt;
    color: #555;
  }
}

@page :first {
  @top-left   { content: none; }
  @top-right  { content: none; }
}

@media print {

  /* ── HARD RESET ────────────────────────────────────────────── */
  *, *::before, *::after {
    background: transparent !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    transition: none !important;
    animation: none !important;
  }

  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: 10.5pt;
    line-height: 1.45;
    font-family: "Fraunces", "Instrument Serif", Georgia, serif;
  }

  /* Hide app chrome */
  #topbar, #sidebar, #toasts, .palette, .overlay,
  .btn, .switch, .check, .radio, .modal-close, .toast,
  .tb-row-2, .sb-section, .sb-footer,
  .why-btn, .alts-btn, .recipes-panel, .tabs,
  .qa-card, .hero-illu, .empty,
  [data-no-print], .no-print {
    display: none !important;
  }

  /* Reset layout */
  #app-shell, #app-body, #main, .main-wrap {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    background: #fff !important;
  }

  /* ── PRINT-ONLY ELEMENTS ──────────────────────────────────── */
  .print-only { display: block !important; }
  .screen-only { display: none !important; }

  /* ── DOCUMENT HEAD (cover sheet) ──────────────────────────── */
  #print-header, .print-header {
    display: block !important;
    border-bottom: 2pt solid #1a1a1a;
    padding-bottom: 8pt;
    margin-bottom: 14pt;
  }
  #print-header h1, .print-header h1 {
    font-family: "Fraunces", Georgia, serif;
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 4pt;
  }
  #print-header .meta, .print-header .meta {
    font-family: "IBM Plex Mono", monospace;
    font-size: 8pt;
    color: #555;
    display: flex;
    gap: 12pt;
    margin-top: 4pt;
  }
  #print-header .meta b { color: #1a1a1a; font-weight: 600; }

  /* Document section header */
  h2, .doc-section {
    font-family: "Fraunces", Georgia, serif;
    font-size: 13pt;
    font-weight: 600;
    margin: 14pt 0 6pt;
    padding-bottom: 3pt;
    border-bottom: 1pt solid #888;
    break-after: avoid;
  }
  h3, .doc-sub {
    font-family: "Fraunces", Georgia, serif;
    font-size: 11pt;
    font-weight: 600;
    margin: 10pt 0 4pt;
    break-after: avoid;
  }

  /* ── PHASE BLOCKS ─────────────────────────────────────────── */
  .phase, .phase-block {
    border: .75pt solid #888 !important;
    border-radius: 0 !important;
    margin-bottom: 8pt !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .phase::before { display: none !important; }
  .phase-head, .phase-head {
    background: #f0f0f0 !important;
    border-bottom: .5pt solid #888 !important;
    padding: 4pt 8pt !important;
  }
  .phase-tag {
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 1pt 5pt !important;
  }
  .phase-name { font-weight: 600; }

  /* ── TABLES ───────────────────────────────────────────────── */
  table, .table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 6pt 0 !important;
    font-size: 9.5pt;
    break-inside: auto;
  }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }

  table th, .table th {
    background: #f0f0f0 !important;
    border: .5pt solid #888 !important;
    padding: 4pt 6pt !important;
    text-align: start !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 8pt !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  table td, .table td {
    border: .5pt solid #aaa !important;
    padding: 4pt 6pt !important;
    vertical-align: top !important;
  }

  /* INCI / ingredient names — keep monospace for traceability */
  .ing-inci, .inci, .mono, .num, td .mono {
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 9pt !important;
  }

  /* ── BADGES (flatten) ─────────────────────────────────────── */
  .badge {
    border: .5pt solid #888 !important;
    background: transparent !important;
    padding: 0pt 4pt !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 7pt !important;
  }

  /* ── STAT CARDS / SUMMARY ─────────────────────────────────── */
  .stat, .summary-card, .card {
    border: .5pt solid #888 !important;
    border-radius: 0 !important;
    padding: 6pt 8pt !important;
    break-inside: avoid;
  }
  .stat::after { display: none !important; }
  .stat-val { font-size: 14pt !important; font-weight: 700 !important; }
  .stat-label, .sc-label {
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 7pt !important;
    color: #555 !important;
  }

  /* ── ALERTS as boxed notes ───────────────────────────────── */
  .alert {
    border: .5pt solid #888 !important;
    border-inline-start: 3pt solid #1a1a1a !important;
    padding: 5pt 8pt !important;
    margin: 6pt 0 !important;
    font-size: 9pt !important;
    background: #fafafa !important;
  }

  /* ── SIGNATURE BLOCK ──────────────────────────────────────── */
  .sig-block {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16pt;
    margin-top: 24pt;
    break-inside: avoid;
  }
  .sig-line {
    border-top: .5pt solid #1a1a1a;
    margin-top: 32pt;
    padding-top: 4pt;
    font-family: "IBM Plex Mono", monospace;
    font-size: 8pt;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .sig-line b { color: #1a1a1a; }

  /* ── WATERMARK ────────────────────────────────────────────── */
  .watermark {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 9999;
  }
  .watermark::before {
    content: attr(data-text);
    font-family: "Fraunces", Georgia, serif;
    font-size: 96pt;
    font-weight: 800;
    color: rgba(184,149,78,.08) !important;
    transform: rotate(-30deg);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ── LINKS ────────────────────────────────────────────────── */
  a, a:visited {
    color: #1a1a1a !important;
    text-decoration: none !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: "IBM Plex Mono", monospace;
    font-size: 7.5pt;
    color: #777;
  }

  /* ── PAGE BREAKS ──────────────────────────────────────────── */
  h1, h2, h3 { break-after: avoid; }
  table, .phase, .card { break-inside: avoid; }
  .page-break       { break-after: page; page-break-after: always; }
  .page-break-before{ break-before: page; page-break-before: always; }
  .keep-together    { break-inside: avoid; page-break-inside: avoid; }

  /* Hide form controls' interactivity */
  input, select, textarea {
    border: none !important;
    border-bottom: .5pt solid #888 !important;
    border-radius: 0 !important;
    padding: 1pt 2pt !important;
    background: transparent !important;
  }

  /* Toggle prints as a checkbox-like glyph */
  .toggle.on::after  { content: "[X]"; font-family: "IBM Plex Mono", monospace; }
  .toggle.off::after { content: "[ ]"; font-family: "IBM Plex Mono", monospace; }
  .toggle, .switch { border: none !important; background: transparent !important; }
}

/* ── PRINT-ONLY (hidden on screen) ──────────────────────────── */
.print-only { display: none; }
#print-header, #print-footer { display: none; }
.watermark { display: none; }