/* public/css/documents/six-disease-cert.css — ใบรับรองแพทย์ (6 โรค) / Medical Certificate: A4 portrait by default, A5
   from the toolbar's Paper toggle (the shell swaps body.page-A4 ↔ page-A5 and the @page rule). A generous bilingual
   sheet: a title block (ใบรับรองแพทย์ over MEDICAL CERTIFICATE), the place / date head on the right, every short label
   as "Thai / English" on one line (.bl), every value on a dotted blank that fills its row (one field per row, or two
   halves), the six diseases as a two-column list (Thai | English), the certification as the Thai sentence with its
   English translation under it, and the signature pushed to the page bottom (editor.js fitPage on the spacer).
   Everything inside the body is measured in em, so the A5 variant is the same sheet at a smaller type size; only
   the page geometry (letterhead, footer, print bands, margins) is in mm, with the OPD card's A5 values under .page-A5.
   Print: fixed letterhead + footer repeat on every page; the thead/tfoot spacer rows of table.doc-pages reserve
   their bands (same technique as the OPD card). */

@page { size: A4; margin: 0; } /* the shell's <style id="paper-size"> says A5 instead when that is chosen */

.six-cert { font-family: 'Sarabun', sans-serif; color: #111; font-size: 11pt; line-height: 1.55;
  --page-body: 268mm; } /* A4 297mm minus the 17mm + 9mm print bands, less 3mm: the stretched spacer must never push the signature over (the empty blanks of the blank form measure a hair taller in print) */
.page-A5 .six-cert { font-size: 7.9pt; --page-body: 183mm; } /* A5 210mm minus the 15mm + 9mm bands, less the same 3mm */

/* ---- letterhead / footer (fixed bands in print) ---- */
.doc-letterhead { display: flex; align-items: center; gap: 4mm; height: 15mm; padding-bottom: 1.5mm; border-bottom: 1.2px solid #111; box-sizing: border-box; }
.lh-logo { height: 11mm; width: auto; }
.lh-text { flex: 1 1 auto; min-width: 0; }
.lh-name { font-weight: 700; font-size: 11pt; line-height: 1.2; }
.lh-line { font-size: 7.5pt; color: #333; line-height: 1.3; }
.doc-footer { height: 7mm; display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid #999; padding-top: 1mm; box-sizing: border-box; font-size: 6.5pt; color: #444; }
.doc-footer b { color: #111; }
.ft-id.is-empty { visibility: hidden; }
.page-A5 .doc-letterhead { gap: 3mm; height: 13mm; padding-bottom: 1mm; }
.page-A5 .lh-logo { height: 9.5mm; }
.page-A5 .lh-name { font-size: 9pt; line-height: 1.15; }
.page-A5 .lh-line { font-size: 6pt; line-height: 1.25; }
.page-A5 .doc-footer { font-size: 6pt; }

/* ---- generic pieces (em: they follow the paper size and the Text % control) ---- */
.doc-body { padding: 2mm 0 0; }
.title-block { text-align: center; margin: .4em 0 .5em; }
.title { margin: 0; font-size: 1.9em; font-weight: 700; line-height: 1.25; letter-spacing: .2px; }
.subtitle { margin-top: .15em; font-size: 1em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #222; }
.lb { white-space: nowrap; }
.v, .mir { display: inline-block; border-bottom: 1px dotted #555; min-height: 1.3em; padding: 0 .5em; min-width: 3.5em; white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: baseline; box-sizing: border-box; }
.mir:empty { min-width: 12em; } /* no name yet: a blank to write it on */

/* rows: labels never shrink (nowrap), a value grows into the leftover; a label + value pair (.f-inline) keeps its
   width and wraps onto the next line as a unit when the row is full — never squeezed into overlapping text;
   two .half pairs share a row equally, their blanks filling each half */
.ln { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .8em; margin: .65em 0; }
.f-inline { display: inline-flex; align-items: baseline; gap: .8em; flex: 0 0 auto; max-width: 100%; }
.f-inline.half { flex: 1 1 0; }
.grow { flex: 1 1 6em; min-width: 6em; }
.v-name { flex: 1 1 auto; min-width: 8em; } /* the physician's name never breaks: a very long one wraps the "a medical doctor" tail instead */
.v-date { min-width: 8em; text-align: center; }
.v-place { min-width: 16em; text-align: center; }

/* a bilingual label: "Thai / English" on one line, the English a shade lighter */
.bl { white-space: nowrap; }
.bl .sep { color: #9ca3af; padding: 0 .35em; }
.bl .en { color: #4b5563; font-size: .92em; }

/* the place and date, right-aligned under the title as on the five-disease certificate */
.head-right { display: flex; flex-direction: column; align-items: flex-end; margin: 0 0 .9em; }
.head-right .ln { justify-content: flex-end; margin: .25em 0; }

.part { margin-top: .3em; }
.certify { margin-top: 1em; }
.list-head { margin: .3em 0 .1em; }

/* the six diseases: Thai | English, indented under "free from the following diseases" */
.diseases { list-style: none; margin: .2em 0 .9em; padding-left: 3em; }
.diseases li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2em; margin: .22em 0; }
.d-en { letter-spacing: .3px; }

/* the certification: the Thai sentence, then its English translation, the name on a blank in each */
.clause { margin: .4em 0; text-align: justify; }
.clause.en { color: #333; font-size: .95em; }
.clause .mir { min-width: 12em; }

/* the leftover page height goes here, so the signature sits at the page bottom (editor.js fitPage) */
.spacer { height: 0; }

/* the physician's signature: a dotted line with the name in parentheses under it */
.sig { display: flex; align-items: flex-end; justify-content: flex-end; gap: 1em; margin: 2.4em 0 .3em; }
.sigbox { display: inline-flex; flex-direction: column; align-items: center; width: 19em; }
.sig-line { display: block; width: 100%; height: 2.6em; border-bottom: 1px dotted #555; }
.sig-name { font-size: .92em; margin-top: .15em; text-align: center; overflow-wrap: anywhere; }
.sig-name [data-doctor-name]:empty { display: inline-block; min-width: 12em; border-bottom: 1px dotted #777; vertical-align: baseline; }

/* screen-only helpers used by editor.js */
.empty { font-size: 9pt; color: #6b7280; padding: .4mm 0; display: flex; gap: 3mm; align-items: center; width: 100%; }
.notice.error { color: #b91c1c; font-size: 8pt; }

/* page skeleton: on screen the table is invisible plumbing; in print its thead/tfoot rows repeat on every page */
.doc-pages { width: 100%; border-collapse: collapse; }
.doc-pages > thead > tr > td, .doc-pages > tfoot > tr > td, .doc-pages > tbody > tr > td { padding: 0; vertical-align: top; }
.band { height: 0; }

/* ---------------- print ---------------- */
@media print {
  .doc-letterhead { position: fixed; top: 0; left: 14mm; right: 14mm; height: 15mm; padding-top: 2mm; background: #fff; }
  .doc-footer { position: fixed; bottom: 0; left: 14mm; right: 14mm; height: 7mm; background: #fff; padding-bottom: 1mm; }
  .band-top { height: 17mm; }      /* 15mm letterhead + 2mm gap — repeated by <thead> on every page */
  .band-bottom { height: 9mm; }    /* 7mm footer + 2mm gap — repeated by <tfoot> on every page */
  .page-A5 .doc-letterhead { left: 8mm; right: 8mm; height: 13mm; padding-top: 1.5mm; }
  .page-A5 .doc-footer { left: 8mm; right: 8mm; }
  .page-A5 .band-top { height: 15mm; } /* 13mm letterhead + 2mm gap */
  .doc-body { padding: 0; }
  .head-right, .ln, .sig, .diseases, .clause { break-inside: avoid; page-break-inside: avoid; }
  .v, .mir { border-bottom-color: #444; }
  .empty, .notice { display: none !important; }
}