/* public/css/documents/treatment-cert.css — ใบรับรองแพทย์ (การรักษา) / Medical Certificate — Treatment: A4 portrait by
   default, A5 from the toolbar's Paper toggle (the shell swaps body.page-A4 ↔ page-A5 and the @page rule). The
   six-disease certificate's sheet (title block, a date head on the right, "Thai / English" labels on one line, dotted
   blanks that fill their row, the signature at the page bottom) with one difference in how a blank is drawn: this
   form has answers that run to several lines (chief complaint, diagnosis, a long list of tests or medicines, the
   physician's recommendation), so EVERY line of a value sits on its own dotted rule and every row of the sheet is
   exactly one line pitch high (--pitch), filled or empty. A blank is `.blank` = the editable `.v` over `.rules`, a
   stack of pitch-high boxes with a real dotted bottom border, clipped to the value's height (a background pattern
   would do it without the extra elements, but Chrome prints patterns blurred — tested 2026-10-05; only real
   borders print as crisp as the other certificates' blanks). A long answer (.fld) starts beside its floated label
   and continues on full-width lines under it; the recommendation takes whatever height the page has left
   (editor.js fitPage on [data-stretch]).
   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 */

.tx-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 lines must never push the signature over */
  --pitch: 2.2em;     /* one line of the form: a label, a value, a ruled line (8.5mm on A4 — room for handwriting) */
  --rule-lift: .3em;  /* a rule sits this far above the bottom of its line, just under the text's descenders */ }
.page-A5 .tx-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; }

/* 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; line-height: 1; } /* line-height 1: the smaller type never stretches a row past its pitch */

/* a blank: the editable value over its dotted rules, one rule under every line */
.blank { position: relative; display: block; min-width: 3.5em; }
.blank > .v { display: block; box-sizing: border-box; min-height: var(--pitch); padding: 0 .5em; line-height: var(--pitch); white-space: pre-wrap; overflow-wrap: anywhere; }
.rules { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--rule-lift) * -1); bottom: 0; overflow: hidden; pointer-events: none; }
.rules > i { display: block; box-sizing: border-box; height: var(--pitch); border-bottom: 1px dotted #555; }

/* rows: one pitch high; a label never shrinks (nowrap) and its blank takes the rest of the row; two .half pairs
   share a row equally. Top-aligned, not baseline-aligned: an empty blank has no baseline of its own and would sit
   a line too high — every label and value has the same line height, so their baselines meet anyway. */
.ln { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 .8em; line-height: var(--pitch); }
.ln .blank { flex: 1 1 6em; min-width: 6em; }
.f-inline { display: inline-flex; align-items: flex-start; gap: .8em; flex: 0 0 auto; max-width: 100%; }
.f-inline.half { flex: 1 1 0; min-width: 0; }
.ln .blank.w-date { flex: 0 0 9em; text-align: center; }

/* the certificate's date, right-aligned under the title as on the disease certificates */
.head-right { display: flex; flex-direction: column; align-items: flex-end; margin: 0 0 .5em; }
.head-right .ln { justify-content: flex-end; }

.part { margin-top: .9em; }

/* a long answer (.fld): the label (.fl) floats at the start of the first line and the value's lines run the full
   width under it; the minimum heights are the lines a hand-filled form needs */
.fl { line-height: var(--pitch); }
.fld { display: flow-root; }
.fld > .fl { float: left; position: relative; z-index: 2; padding-right: .8em; background: #fff; } /* opaque and above the rules: the first line's rule starts after the label */
.lines > .v[data-field="complaint"] { min-height: calc(var(--pitch) * 3); }
.lines > .v[data-field="diagnosis"] { min-height: calc(var(--pitch) * 2); }
.lines > .v[data-field="tx.lab"] { min-height: calc(var(--pitch) * 2); }
.lines > .v[data-field="tx.medication"] { min-height: calc(var(--pitch) * 3); }
.lines > .v[data-field="recommendation"] { min-height: calc(var(--pitch) * 3); } /* then the leftover page height (fitPage) */
/* A5 is a little shorter than A4 for its type size: two spare lines go, so a filled sheet keeps the same slack */
.page-A5 .lines > .v[data-field="complaint"], .page-A5 .lines > .v[data-field="tx.medication"] { min-height: calc(var(--pitch) * 2); }

/* the treatment rows: tick box + label, then the items; a wrapped line hangs under the label, not under the box */
.tx-row > .lines { margin-left: 1.65em; }

/* tick boxes */
.opt { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; height: var(--pitch); }
.cb { flex: 0 0 auto; display: inline-block; width: 1.05em; height: 1.05em; border: 1px solid #333; box-sizing: border-box; position: relative; background: #fff; }
.cb.on::after { content: ''; position: absolute; left: .3em; top: -.12em; width: .32em; height: .72em; border: solid #111; border-width: 0 .14em .14em 0; transform: rotate(40deg); }

/* 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: 1.6em 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 */
@media screen {
  .opt { cursor: pointer; user-select: none; }
  .opt:hover .cb { box-shadow: 0 0 0 1.5px #93c5fd; }
}
.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 { break-inside: avoid; page-break-inside: avoid; }
  .rules > i, .sig-line { border-bottom-color: #444; }
  .empty, .notice { display: none !important; }
}
