/* ─────────────────────────────────────────────────────────────────
   Quintarthai print stylesheet (P3-4 from audit, 2026-05-19)
   Hides chrome, ink-saves, preserves data fidelity.
   ───────────────────────────────────────────────────────────────── */

@media print {
  /* ─── 1. Hide chrome that wastes paper ─── */
  .topbar, .sidebar, .main-header, header.topbar,
  .qte-skip-link,
  #qtCookieBanner, #qtCookieDrawer,
  .video-card, .floating-actions,
  .whatsapp-fab, .draggable-q,
  nav, .nav-section-title, .nav-item, .tb-group, .tb-dropdown,
  .modal-overlay:not(.printing),
  .toast, .qt-loader-stuck-banner,
  button:not(.print-preserve),
  .copy-link, .share-btn,
  iframe, video, audio,
  .sidebar-mobile-wrapper {
    display: none !important;
  }

  /* ─── 2. Reset spatial layout for paper ─── */
  html, body {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11pt !important;
    line-height: 1.45 !important;
  }
  .app-layout, .main-content, main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* ─── 3. Ink-saving — strip backgrounds, gradients, shadows ─── */
  *, *::before, *::after {
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color-adjust: economy !important;
    -webkit-print-color-adjust: economy !important;
  }
  /* Preserve essential color signals (verdict pills, badges) */
  .verdict-pill.compliant,
  .badge-green,
  .status-ok { color: #166534 !important; }   /* dark green */
  .verdict-pill.non-compliant,
  .badge-red,
  .status-fail { color: #991B1B !important; } /* dark red */
  .verdict-pill.review,
  .badge-yellow,
  .status-warn { color: #92400E !important; } /* dark amber */

  /* ─── 4. Typography for paper ─── */
  body, p, li, td, th {
    font-family: Georgia, 'Times New Roman', serif !important;
  }
  code, pre, .mono, [class*="mono"] {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 10pt !important;
  }
  h1 { font-size: 22pt !important; margin: 0 0 8pt; }
  h2 { font-size: 16pt !important; margin: 14pt 0 6pt; }
  h3 { font-size: 13pt !important; margin: 10pt 0 4pt; }
  h4 { font-size: 11pt !important; margin: 8pt 0 3pt; font-weight: 700; }

  /* ─── 5. Tables: borders + page-break protection ─── */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
    page-break-inside: avoid;
  }
  th, td {
    border: 1px solid #888 !important;
    padding: 4pt 6pt !important;
    font-size: 9.5pt !important;
    text-align: left !important;
  }
  thead th {
    background: #eee !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    font-weight: 700 !important;
  }

  /* ─── 6. Cards / panels: keep contents together ─── */
  .card, .panel, .kpi-card, .stock-report-card,
  .risk-assessment-card, .compliance-card, .sharia-card,
  .endpoint, .istat, .bento-card {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #ccc !important;
    padding: 8pt 10pt !important;
    margin: 6pt 0 !important;
  }

  /* ─── 7. Show source URLs after links ─── */
  a[href^="http"]:after,
  a[href^="https"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    font-style: italic;
  }
  /* Don't print internal anchors / javascript: links */
  a[href^="#"]:after,
  a[href^="javascript:"]:after,
  a[href^="mailto:"]:after { content: ""; }

  /* ─── 8. Page header + footer (browsers honor these via @page) ─── */
  @page {
    size: letter portrait;
    margin: 0.5in 0.6in 0.7in 0.6in;
  }
  @page :first {
    margin-top: 0.4in;
  }

  /* Print-only header (you can add a .print-only-header div in markup) */
  .print-only-header, .print-only-footer {
    display: block !important;
    font-size: 9pt;
    color: #555;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4pt;
    margin-bottom: 8pt;
  }
  .print-only-footer {
    border-top: 1px solid #ccc;
    border-bottom: 0;
    margin-top: 12pt;
    padding-top: 4pt;
    text-align: center;
  }

  /* ─── 9. Chart canvases — print as outlines, suggest viewing on screen ─── */
  canvas {
    border: 1px dashed #888 !important;
    min-height: 80pt;
    position: relative;
  }
  canvas:after {
    content: "[ Interactive chart — view at quintarthai.com ]";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 10pt;
    font-style: italic;
    background: rgba(255,255,255,0.95);
  }

  /* ─── 10. Page break helpers ─── */
  .page-break-before { page-break-before: always; break-before: page; }
  .page-break-after  { page-break-after: always; break-after: page; }
  .avoid-break       { page-break-inside: avoid; break-inside: avoid; }

  /* ─── 11. Verdict math — keep purification breakdown intact ─── */
  .purification-breakdown,
  .ratio-table,
  .compliance-checklist {
    page-break-inside: avoid !important;
  }

  /* ─── 12. Form inputs — render as plain text ─── */
  input[type="text"], input[type="email"], input[type="number"], textarea, select {
    border: 1px solid #888 !important;
    background: transparent !important;
    color: #000 !important;
  }
  input[type="checkbox"]:checked:after { content: "✓"; font-weight: 700; }
}