/* ============================================================
   Clinicify — the printed document
   ------------------------------------------------------------
   .rx-doc styles live OUTSIDE @media print so the on-screen
   preview and the paper output are the same markup and the same
   rules. Only page setup and chrome-hiding are print-only.

   The @page rule itself is injected at print time by js/print.js,
   because @page cannot read CSS custom properties.
   ============================================================ */

.rx-doc {
  /* Overridden per-document from settings; used by the preview. */
  --paper-w: 210mm;
  --paper-h: 297mm;
  --paper-margin: 12mm;

  width: var(--paper-w);
  min-height: var(--paper-h);
  padding: var(--paper-margin);
  background: #fff;
  color: #000;
  font-family: var(--font-doc, Georgia, "Times New Roman", serif);
  font-size: 10.5pt;
  line-height: 1.4;
}

/* ── 1. Letterhead ────────────────────────────────────────── */
.rx-letterhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8mm; padding-bottom: 2.5mm;
  border-bottom: 1.5pt solid #000;
}
.rx-clinic-name {
  font-size: 17pt; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.1; margin: 0;
}
.rx-doctor { font-size: 11pt; font-weight: 600; margin-top: 1mm; }
.rx-quals, .rx-reg { font-size: 8.5pt; color: #000; }
.rx-quals { font-style: italic; }
.rx-contact {
  text-align: right; font-size: 8.5pt; line-height: 1.35;
  white-space: pre-line; flex: none; max-width: 60mm;
}

/* ── 2. Patient bar ───────────────────────────────────────── */
.rx-patientbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6mm; padding: 2mm 0 1.5mm;
  border-bottom: .5pt solid #000;
  font-size: 10pt;
}
.rx-patient-name { font-weight: 700; }
.rx-patientbar .rx-sep { padding: 0 2mm; color: #555; }
.rx-date { white-space: nowrap; }
.rx-label {
  font-family: var(--font-ui, sans-serif); font-size: 7.5pt;
  letter-spacing: .06em; text-transform: uppercase; color: #444;
}

/* ── 3. Diagnosis ─────────────────────────────────────────── */
.rx-diagnosis { padding: 2mm 0 0; font-size: 10pt; }
.rx-diagnosis .rx-label { margin-right: 2mm; }

/* ── 4/5. Rx symbol + medicine table ──────────────────────── */
.rx-body { display: flex; gap: 3mm; align-items: flex-start; padding-top: 3mm; }
.rx-symbol {
  font-size: 30pt; line-height: .9; font-weight: 400; flex: none;
  width: 12mm; text-align: left;
}
.rx-table-wrap { flex: 1; min-width: 0; }

.rx-table { width: 100%; border-collapse: collapse; }
.rx-table th, .rx-table td {
  text-align: left; vertical-align: top;
  padding: 1.6mm 2mm; border-bottom: .5pt solid #999;
}
.rx-table thead th {
  border-bottom: 1pt solid #000; border-top: .5pt solid #000;
  font-family: var(--font-ui, sans-serif);
  font-size: 7.5pt; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #000;
  padding-top: 1.2mm; padding-bottom: 1.2mm;
}
.rx-table .rx-c-num   { width: 7mm; text-align: right; padding-right: 1mm; }
.rx-table .rx-c-dose  { width: 1%; }
.rx-table .rx-c-dur   { width: 18mm; }
.rx-table .rx-c-notes { width: 32%; }

.rx-med-name { font-weight: 600; font-size: 10.5pt; }
.rx-med-sub  { font-size: 8.5pt; color: #333; }

/* Long drug names must wrap rather than force the table wider than
   the page — this is what keeps narrow paper from clipping columns. */
.rx-med-name, .rx-med-sub, .rx-notes-cell, .rx-block-text {
  overflow-wrap: anywhere;
}

/* Dose cell — the qty gutter is always reserved so every row's
   dot grid lines up with the slot labels in the header. Track and
   gutter widths are computed per page by print.js so the column
   never outgrows the paper. */
.rx-dose { display: flex; align-items: center; gap: 1.5mm; white-space: nowrap; }
.rx-qty {
  width: var(--qty-w, 9mm); flex: none; text-align: right;
  font-size: 9pt; font-variant-numeric: tabular-nums;
}
.rx-dots, .rx-slot-heads {
  display: grid;
  grid-template-columns: repeat(var(--slots, 3), var(--dot-track, 13mm));
  justify-items: center; align-items: center;
}
.rx-slot-heads span {
  font-size: 7pt; letter-spacing: .03em; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: var(--dot-track, 13mm);
}
.rx-food {
  font-size: 8pt; color: #222; margin-top: .8mm;
  padding-left: calc(var(--qty-w, 9mm) + 1.5mm);
}
.rx-notes-cell { font-size: 9pt; }
.rx-dur { font-size: 9.5pt; white-space: nowrap; }

/* ── 6. Dot legend ────────────────────────────────────────── */
.rx-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1mm 4mm;
  margin-top: 2mm; padding-top: 1.5mm;
  font-family: var(--font-ui, sans-serif); font-size: 7.5pt; color: #000;
}
.rx-legend .rx-legend-item { display: inline-flex; align-items: center; gap: 1.5mm; }
.rx-legend .rx-legend-slots { color: #333; }

/* ── 7/8. Notes, follow-up ────────────────────────────────── */
.rx-extra { margin-top: 4mm; }
.rx-block { margin-top: 3mm; font-size: 9.5pt; }
.rx-block .rx-label { display: block; margin-bottom: .8mm; }
.rx-block-text { white-space: pre-wrap; }
.rx-followup { margin-top: 3mm; font-size: 10pt; font-weight: 600; }

/* ── 9. Signature ─────────────────────────────────────────── */
.rx-sign { margin-top: 12mm; margin-left: auto; width: 55mm; text-align: center; }
.rx-sign-line { border-bottom: .5pt solid #000; height: 12mm; }
.rx-sign-name { font-size: 9.5pt; font-weight: 600; padding-top: 1mm; }
.rx-sign-quals { font-size: 8pt; }

/* ── Narrow paper (A5 and small custom sizes) ─────────────────
   Same document, tightened so every column still fits. Applied by
   print.js when the page is under 160 mm wide. ---------------- */
.rx-doc.rx-compact { font-size: 9.5pt; }
.rx-compact .rx-symbol { font-size: 22pt; width: 8mm; }
.rx-compact .rx-body { gap: 2mm; }
.rx-compact .rx-clinic-name { font-size: 14pt; }
.rx-compact .rx-table th,
.rx-compact .rx-table td { padding: 1.2mm 1.2mm; }
.rx-compact .rx-med-name { font-size: 9.5pt; }
.rx-compact .rx-med-sub { font-size: 8pt; }
.rx-compact .rx-slot-heads span { font-size: 6.5pt; }
.rx-compact .rx-qty { font-size: 8pt; }
.rx-compact .rx-food { font-size: 7.5pt; }
.rx-compact .rx-c-num { width: 5mm; }
.rx-compact .rx-c-dur { width: 13mm; }
.rx-compact .rx-dur { font-size: 8.5pt; }
.rx-compact .rx-notes-cell { font-size: 8pt; }
.rx-compact .rx-c-notes { width: 24%; }
.rx-compact .rx-sign { margin-top: 8mm; width: 45mm; }

/* Narrow paper. The notes column is folded under the medicine name and
   the row number is dropped — dosing information never gets squeezed. */
.rx-doc.rx-tight { font-size: 8.5pt; }
.rx-tight .rx-c-num { display: none; }
.rx-med-note { font-size: 8pt; font-style: italic; overflow-wrap: anywhere; }
.rx-tight .rx-med-note { font-size: 7.5pt; }
.rx-tight .rx-table th,
.rx-tight .rx-table td { padding: 1mm .8mm; }
.rx-tight .rx-symbol { font-size: 18pt; width: 6mm; }
.rx-tight .rx-med-name { font-size: 8.5pt; }
.rx-tight .rx-med-sub,
.rx-tight .rx-notes-cell,
.rx-tight .rx-dur { font-size: 7.5pt; }

/* ── Dots inside the document ─────────────────────────────── */
/* Same geometry as the screen toggles. Filled state is border-width,
   not a background fill, so it survives "background graphics: off". */
.rx-doc .dot {
  display: inline-block; width: 3.2mm; height: 3.2mm; border-radius: 50%;
  border: .4mm solid #000; background: transparent; box-sizing: border-box;
}
.rx-doc .dot.is-on { border-width: 1.6mm; border-color: var(--accent, #1560c4); }

/* ============================================================
   PRINT
   ============================================================ */
@media print {

  /* The app shell constrains html/body to one viewport and hides overflow.
     That must be undone for print or the document is clipped to a single
     screen height and multi-page prescriptions lose their later pages. */
  html, body {
    background: #fff !important;
    margin: 0; padding: 0;
    height: auto !important;
    overflow: visible !important;
  }

  /* Hide the whole application. The document is the page. */
  .no-print,
  .app-shell,
  .nav,
  .modal-layer,
  .toast-layer,
  #banner-layer { display: none !important; }

  .print-root { display: block !important; }

  /* Page margins come from @page; the document itself fills the page. */
  .print-root .rx-doc {
    width: auto; min-height: 0; padding: 0;
    box-shadow: none; margin: 0;
  }

  /* Force black ink on white — no toner-eating fills. */
  .rx-doc, .rx-doc * {
    color: #000 !important;
    background: transparent !important;
  }
  .rx-doc .dot.is-on { border-color: #000 !important; }

  /* Keep rows whole; repeat the header (and its slot labels) on later pages. */
  .rx-table thead { display: table-header-group; }
  .rx-table tfoot { display: table-footer-group; }
  .rx-table tr { break-inside: avoid; page-break-inside: avoid; }
  .rx-letterhead, .rx-patientbar, .rx-legend, .rx-sign {
    break-inside: avoid; page-break-inside: avoid;
  }
  .rx-sign { break-before: avoid; page-break-before: avoid; }

  a[href]::after { content: none !important; }
}