/* ============================================================
   Wasfa — Print stylesheet (A4)
   ============================================================
   One stylesheet for all printable pages: prescriptions, patient
   medical summaries, inventory / dispense reports, audit logs.

   Strategy:
     1. Hide ALL app chrome (sidebar, topbar, buttons, modals, toasts).
     2. Force a clean white-on-black palette regardless of light/dark mode.
     3. Promote any element with class .print-area (or the special
        .print-prescription / .patient-print / .report-print) to be the
        ONLY visible block on the sheet.
     4. Apply A4-friendly typography + universal table rules.
     5. QR codes inside printable areas are sized to 3×3 cm.
   ============================================================ */

@media print {

  /* ── Page setup ─────────────────────────────────────────────────── */
  @page {
    size: A4;
    margin: 14mm;
  }

  /* ── 1. Hide app chrome ─────────────────────────────────────────── */
  .sidebar,
  .topbar,
  .dashboard-sidebar,
  .main-content > .page-header,        /* the in-page back/forward bar */
  .app-shell > #sidebar-mount,
  #sidebar-mount,
  .wasfa-btn,
  .header-actions,
  .toolbar,
  .filters-bar,
  .pagination,
  .toast-container,
  .modal-overlay,
  .modal-backdrop,
  .loading-overlay,                    /* Utils.showLoading spinner */
  #command-palette,                    /* id, not class */
  #floating-help-btn,                  /* the floating "?" launcher */
  .cmd-kbd-hint,                       /* and its kbd hint chip */
  .theme-toggle,
  .no-print,
  .offline-banner,
  nav,
  footer {
    display: none !important;
  }

  /* A dispensed-and-locked controlled prescription must NOT be printable or
     exportable. Pages add html.rx-locked when displaying such an Rx: every
     printable region is suppressed and only a plain notice remains. */
  html.rx-locked .print-area,
  html.rx-locked .print-prescription,
  html.rx-locked .patient-print,
  html.rx-locked .report-print {
    display: none !important;
  }
  html.rx-locked body::after {
    content: "وصفة مصروفة ومقفلة — لا يمكن طباعتها أو تصديرها";
    visibility: visible;
    display: block;
    text-align: center;
    font-weight: 700;
    padding: 40px 20px;
  }

  /* ── 2. Force B&W palette ───────────────────────────────────────── */
  html[data-theme],
  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Thmanyah Sans', 'Tajawal', 'Cairo', sans-serif !important;
    font-size: 11pt;
    margin: 0;
    padding: 0;
  }
  /* Override any var(--*) that resolves to a dark colour in dark mode. */
  *, *::before, *::after {
    background-color: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* ── 3. Show only the print region ──────────────────────────────── */
  /* Old class kept for backwards compatibility */
  body * { visibility: hidden; }
  .print-area,
  .print-area *,
  .print-prescription,
  .print-prescription *,
  .patient-print,
  .patient-print *,
  .report-print,
  .report-print * {
    visibility: visible;
  }
  .print-area,
  .print-prescription,
  .patient-print,
  .report-print {
    position: absolute;
    inset: 0;
    width: 100%;
    display: block !important;
    background: #fff !important;
    color: #000 !important;
    border: none !important;
  }

  /* ── 4. Typography ─────────────────────────────────────────────── */
  h1 { font-size: 18pt; margin: 0 0 6mm; font-weight: 900; }
  h2 { font-size: 14pt; margin: 4mm 0 3mm; font-weight: 700; }
  h3 { font-size: 12pt; margin: 3mm 0 2mm; font-weight: 700; }
  p, td, th, li { font-size: 11pt; line-height: 1.5; }
  .muted { font-size: 9pt !important; color: #555 !important; }

  /* ── 5. Tables (universal: prescriptions, inventory, audit) ────── */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 3mm 0;
    page-break-inside: auto;
  }
  th, td {
    border: 1px solid #000 !important;
    padding: 2mm 3mm !important;
    text-align: right;
    vertical-align: top;
    background: #fff !important;
    color: #000 !important;
  }
  thead th {
    border-bottom: 2px solid #000 !important;
    font-weight: 900;
    background: #eee !important;
  }
  /* Real Wasfa pages use <div class="wasfa-card"> not <section>; cover both. */
  tr,
  .drug-detail-card,
  .patient-print section,
  .patient-print .wasfa-card,
  .patient-print .qr-section,
  .report-print .wasfa-card {
    page-break-inside: avoid;
  }

  /* ── 6. QR codes — size the graphic only, keep everything in flow ── */
  /* Real Wasfa pages render the QR inside .qr-section / .qr-display /
     .qr-image, which also hold a heading, explanatory text and the status
     badge. Only the graphic gets a fixed 3×3 cm size; the container stays in
     flow (page-break-protected via section 5 above). Do NOT position:absolute
     the container — that squashed the whole card into a 30mm box at the
     sheet corner. !important on width/height is required to beat the inline
     style="width:240px;height:240px" set on the QR img in prescription-detail. */
  .print-qr,
  .qr-section img,
  .qr-display img,
  .qr-image img,
  .print-prescription img[alt*="QR"],
  .print-prescription img[alt*="qr"],
  .print-prescription canvas[data-qr] {
    width: 30mm !important;
    height: 30mm !important;
    padding: 0 !important;
    border: none !important;
  }
  /* Neutralise the on-screen decorative frame in print without positioning. */
  .qr-section,
  .qr-image {
    padding: 0 !important;
    border: none !important;
  }

  /* ── 6b. Prescription template structure ────────────────────────── */
  /* Moved here from enhancements.css so ONE stylesheet owns print. Layout
     only — colors stay monochrome per the universal palette above. */
  .print-prescription .print-header {
    text-align: center;
    border-bottom: 4px double #000;
    padding-bottom: 6mm;
    margin-bottom: 6mm;
  }
  .print-prescription .print-header h1 { margin: 0; }
  .print-prescription .print-header p { margin: 1mm 0 0; font-size: 10pt; }
  .print-prescription .Rx-symbol {
    font-size: 28pt;
    font-weight: 700;
    font-family: serif;
  }
  .print-prescription .print-section {
    margin-bottom: 4mm;
    padding: 3mm;
    border: 1px solid #000 !important;
    border-radius: 2mm;
  }
  .print-prescription .print-section h3 {
    margin: 0 0 2mm;
    border-bottom: 1px solid #000;
    padding-bottom: 1mm;
  }
  .print-prescription .print-drug {
    padding: 2mm;
    border-bottom: 1px dashed #555;
    margin-bottom: 2mm;
  }
  .print-prescription .print-drug:last-child { border-bottom: none; }
  .print-prescription .print-drug .drug-name { font-weight: 700; font-size: 12pt; }
  .print-prescription .print-footer {
    margin-top: 8mm;
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    padding-top: 5mm;
    border-top: 1px solid #000;
  }
  .print-prescription .signature-box {
    flex: 1;
    text-align: center;
    padding: 6mm 3mm;
    border: 1px solid #000 !important;
    border-radius: 2mm;
  }
  .print-prescription .qr-box { text-align: center; padding: 2mm; }

  /* ── 7. Avoid splitting headers from their content ─────────────── */
  h1, h2, h3 { page-break-after: avoid; }
  img, svg { page-break-inside: avoid; }

  /* ── 8. Show the URL of links — but skip <a> with empty href ──── */
  a[href]:not([href=""])::after {
    content: '';
  }

  /* ── 9. Page numbers (where supported) ─────────────────────────── */
  @page {
    @bottom-center {
      content: counter(page) " / " counter(pages);
      font-family: 'Thmanyah Sans', 'Tajawal', sans-serif;
      font-size: 9pt;
      color: #555;
    }
  }
}