/* public/css/documents/opd-card.css — the OPD card: A5 portrait, boxed clinical form in the spirit of the
   clinic's old WorldMedic card. Labels in small grey caps, values on dotted blanks, single hairline boxes.
   A4 from the toolbar's Paper toggle: every length and type size in the body is written calc(… * var(--s)), with
   --s 1 on A5 and 1.2 on A4, so the A4 card is the same card enlarged by a fifth on a page 1.4× as big — the extra
   room goes to the clinical area (notes). Only the page geometry (letterhead, footer, print bands, margins) has
   its own A4 values, at the end of this file.
   Print (§6 / errata E1): fixed letterhead + footer repeat on every page; the thead/tfoot spacer rows of
   table.doc-pages reserve their bands so content never runs under them. */

@page { size: A5; margin: 0; }

.opd-card { font-family: 'Sarabun', sans-serif; color: #111; font-size: calc(8pt * var(--s)); line-height: 1.25; --s: 1;
  --page-body: 186mm; } /* A5 210mm minus the 15mm + 9mm print bands: editor.js stretches [data-stretch] to fill it */
.opd-card .th { font-weight: 400; color: #555; }

/* ---- letterhead / footer (fixed bands in print) ---- */
.doc-letterhead { display: flex; align-items: center; gap: 3mm; height: 13mm; padding-bottom: 1mm; border-bottom: 1.2px solid #111; box-sizing: border-box; }
.lh-logo { height: 9.5mm; width: auto; }
.lh-text { flex: 1 1 auto; min-width: 0; }
.lh-name { font-weight: 700; font-size: 9pt; line-height: 1.15; }
.lh-line { font-size: 6pt; color: #333; line-height: 1.25; }
.lh-title { text-align: right; white-space: nowrap; }
.lh-doc { font-weight: 700; font-size: 10.5pt; letter-spacing: .3px; }
.lh-doc-th { font-size: 6.5pt; color: #444; }
.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: 6pt; color: #444; }
.doc-footer b { color: #111; }
.ft-id.is-empty { visibility: hidden; }                /* CN · name · date mirror the fields; nothing typed yet → blank */

/* ---- generic pieces ---- */
.doc-body { padding: calc(1.5mm * var(--s)) 0 0; }
.box { border: 1px solid #333; padding: calc(1mm * var(--s)) calc(1.6mm * var(--s)); margin-top: calc(1.1mm * var(--s)); }
.k { font-size: calc(calc(6.5pt * var(--s)) * var(--text-scale)); color: #333; white-space: nowrap; font-weight: 700; letter-spacing: .1px; }
.k .th { font-weight: 400; color: #666; }
.v { border-bottom: 1px dotted #777; min-height: 1.15em; padding: 0 calc(.7mm * var(--s)); overflow-wrap: anywhere; white-space: pre-wrap; }
.f { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: calc(1.2mm * var(--s)); align-items: baseline; margin: calc(.45mm * var(--s)) 0; }
/* a row of two label/value pairs; each pair is its own box (and its own removable field) */
.f-row { display: flex; align-items: baseline; gap: 0 calc(2.4mm * var(--s)); margin: calc(.45mm * var(--s)) 0; }
.f-row > .f { flex: 1 1 0; min-width: 0; margin: 0; }
.r-dob > .f:first-child { flex-grow: 1.4; }
.r-sex > .f:last-child { flex-grow: 1.1; }
.r-tel > .f:first-child { flex-grow: 1.3; }
.f.stack, .f.multi { grid-template-columns: 1fr; row-gap: 0; } /* .multi: a data-wrap-below="fit" field whose value did not fit beside its label (Nationality) */
.f.stack .k, .f.multi .k { margin-bottom: calc(-.3mm * var(--s)); }
.f-inline { display: inline-flex; align-items: baseline; gap: calc(1mm * var(--s)); max-width: 100%; }
.f-inline .v { min-width: calc(14mm * var(--s)); }
/* drug allergy = one removable field: label + No/Unknown/Yes + the "Allergy to" blank, on its own line */
.allergy-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(.4mm * var(--s)) calc(1.6mm * var(--s)); flex: 1 1 100%; min-width: 0; }
.allergy-main > .k { margin-right: calc(.4mm * var(--s)); }
.allergy-text { flex: 1 1 calc(32mm * var(--s)); min-width: 0; }
/* Alerts: always a full line of its own. A short value sits beside the label; one that would not fit on the rest
   of the line drops below the label and takes the whole row (its natural width is the whole text) */
.alerts-line { flex: 1 1 100%; display: flex; flex-wrap: wrap; min-width: 0; }
/* a value with a line break (Enter) goes under its label at full width, like the Physician field */
.multi.alerts-line .v, .multi.vcomment .v { flex-basis: 100%; }
.multi.vcomment { flex-basis: 100%; flex-wrap: wrap; }
.alerts-line .v { flex: 1 1 auto; min-width: 0; }
.medhx > .v { flex: 1 1 calc(16mm * var(--s)); min-width: calc(14mm * var(--s)); }   /* the "Other" blank takes the rest of the line */
.allergy-text .v { flex: 1 1 auto; min-width: calc(22mm * var(--s)); }
.muted { color: #666; font-weight: 400; font-size: calc(calc(6.5pt * var(--s)) * var(--text-scale)); }

/* tick boxes (static, for handwriting; pre-ticked from Plato where the data says so) */
.opt { display: inline-flex; align-items: center; gap: calc(.6mm * var(--s)); margin-right: calc(1.2mm * var(--s)); white-space: nowrap; }
.cb { display: inline-block; width: calc(2.5mm * var(--s)); height: calc(2.5mm * var(--s)); border: 1px solid #333; box-sizing: border-box; position: relative; background: #fff; }
.cb.on::after { content: ''; position: absolute; left: calc(.65mm * var(--s)); top: calc(-.35mm * var(--s)); width: calc(.8mm * var(--s)); height: calc(1.7mm * var(--s)); border: solid #111; border-width: 0 1.4px 1.4px 0; transform: rotate(40deg); }

/* ---- identity box ---- */
/* each part is pinned to its column, so leaving the photo out keeps the other two in place */
.identity { display: grid; grid-template-columns: calc(19mm * var(--s)) minmax(0, 1fr) calc(46mm * var(--s)); column-gap: calc(2mm * var(--s)); }
.photo { grid-column: 1; width: calc(19mm * var(--s)); height: calc(24mm * var(--s)); border: 1px solid #999; display: flex; align-items: center; justify-content: center; background: #f6f6f6; box-sizing: border-box; }
.id-main { grid-column: 2; min-width: 0; }
.photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-ph { font-size: calc(6pt * var(--s)); color: #888; }
.f.name .v { font-weight: 700; font-size: calc(calc(9.5pt * var(--s)) * var(--text-scale)); }
.id-visit { grid-column: 3; border-left: 1px solid #bbb; padding-left: calc(2mm * var(--s)); }

/* ---- strips ---- */
.strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(.4mm * var(--s)) calc(2.4mm * var(--s)); }
.strip > .k { margin-right: calc(.4mm * var(--s)); }
/* habits box: smoking / alcohol / blood group stacked on the left; vaccinations on the right, level with
   smoking, free to run to several lines */
.habits { display: grid; grid-template-columns: fit-content(calc(74mm * var(--s))) minmax(0, 1fr); column-gap: calc(4mm * var(--s)); align-items: start; }
.grp { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(.4mm * var(--s)) calc(1mm * var(--s)); margin: calc(.3mm * var(--s)) 0; }
.grp .v { min-width: calc(12mm * var(--s)); }
.hab-right .grp { flex-wrap: nowrap; }
.hab-right .v { flex: 1 1 auto; min-width: calc(20mm * var(--s)); }

/* vitals line: cells never break internally; the line wraps cell by cell */
.vitals .vstrip { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(.5mm * var(--s)) calc(2mm * var(--s)); }
.vlabel { margin-right: calc(.8mm * var(--s)); }
.vc { display: inline-flex; align-items: baseline; gap: calc(.7mm * var(--s)); white-space: nowrap; }
.vk { font-size: calc(calc(6.5pt * var(--s)) * var(--text-scale)); color: #333; }
.vc .v { min-width: calc(7.5mm * var(--s)); text-align: center; white-space: normal; }
.vu { font-size: calc(calc(6pt * var(--s)) * var(--text-scale)); color: #555; }
/* the comments cell: its natural width is the whole comment on one line, so a short one sits beside DTX and takes
   the rest of that line, a long one moves to a line of its own at full width and wraps there */
.vcomment { flex: 1 1 auto; min-width: 0; white-space: normal; }
.vcomment .v { flex: 1 1 auto; min-width: calc(18mm * var(--s)); text-align: left; }

/* ---- clinical two-column area (a table, so it fragments across pages) ---- */
.cols { width: 100%; border-collapse: collapse; margin-top: calc(1.1mm * var(--s)); border: 1px solid #333; table-layout: fixed; }
.cols td { vertical-align: top; padding: calc(.9mm * var(--s)) calc(1.6mm * var(--s)); }
.col-left { width: 58%; border-right: 1px solid #333; }
.col-right { width: 42%; }
.sec h3 { font-size: calc(calc(7.5pt * var(--s)) * var(--text-scale)); margin: calc(.4mm * var(--s)) 0 calc(.3mm * var(--s)); font-weight: 700; }
/* each column ends with a free-text area that sits outside the sections (it survives any removal). It stays out
   of the way while the column still has fields to type in, and appears once the column has been emptied, taking
   the whole column when the clinical area is stretched to the page bottom. */
.free:empty:not(.show) { display: none; }           /* editor.js adds .show once the column has nothing left to type in */
.cols.is-stretched td { height: 100%; }
.cols.is-stretched .col-inner { height: 100%; display: flex; flex-direction: column; }
.cols.is-stretched .free { flex: 1 1 auto; }
.sec + .sec { margin-top: calc(1mm * var(--s)); }
.blank-area { display: block; border-bottom: none; }
.blank-area:empty { min-height: calc(8mm * var(--s)); }                 /* room for handwriting while nothing is typed */
.dx-list { margin: 0; padding-left: calc(3.5mm * var(--s)); }
.dx-list li { margin: calc(.2mm * var(--s)) 0; }
.dx-code { font-weight: 700; }
.order-group { margin: calc(.3mm * var(--s)) 0; overflow-wrap: anywhere; }
.og { font-weight: 700; }
.oi { white-space: normal; }
.oi + .oi::before { content: '; '; color: #777; }   /* separator drawn by CSS so removing an item keeps the list tidy */
.dosage { color: #333; }

/* notes */
.note { margin: 0 0 calc(1.2mm * var(--s)); }
.note + .note { border-top: 1px dashed #bbb; padding-top: calc(1.2mm * var(--s)); }
.note-meta { display: flex; flex-wrap: wrap; gap: calc(2mm * var(--s)); align-items: baseline; font-size: calc(calc(6.3pt * var(--s)) * var(--text-scale)); color: #555; margin-bottom: calc(.4mm * var(--s)); }
.note-type { font-weight: 700; letter-spacing: .3px; color: #222; }
.note-body { min-height: calc(4mm * var(--s)); overflow-wrap: anywhere; }
.note-body p { margin: 0 0 calc(.6mm * var(--s)); }
.note-body h1, .note-body h2, .note-body h3, .note-body h4 { font-size: calc(calc(8pt * var(--s)) * var(--text-scale)); margin: calc(.8mm * var(--s)) 0 calc(.3mm * var(--s)); }
.note-body ul, .note-body ol { margin: calc(.3mm * var(--s)) 0; padding-left: calc(4mm * var(--s)); }
.note-body table { border-collapse: collapse; max-width: 100%; }
.note-body td, .note-body th { border: 1px solid #bbb; padding: calc(.3mm * var(--s)) calc(1mm * var(--s)); font-size: calc(calc(7pt * var(--s)) * var(--text-scale)); }
.note-files { margin-top: calc(.5mm * var(--s)); display: flex; flex-wrap: wrap; gap: calc(1.2mm * var(--s)); }
.file-chip { font-size: calc(calc(6pt * var(--s)) * var(--text-scale)); border: 1px solid #ccc; border-radius: 2px; padding: 0 calc(1mm * var(--s)); color: #333; }
.draft-tag { font-size: calc(calc(6pt * var(--s)) * var(--text-scale)); font-weight: 700; color: #b45309; border: 1px solid #b45309; border-radius: 2px; padding: 0 calc(.8mm * var(--s)); }
.prompts .prompt { margin-bottom: calc(1mm * var(--s)); }
.prompt .ph { display: block; font-weight: 700; font-size: calc(calc(7.5pt * var(--s)) * var(--text-scale)); }
.prompt .v { display: block; min-height: calc(9mm * var(--s)); border-bottom: none; }

/* sign-off band: medical-certificate tick boxes + advice on the left, the physician's signature on the right */
.signoff { display: grid; grid-template-columns: minmax(0, 1fr) calc(60mm * var(--s)); column-gap: calc(4mm * var(--s)); align-items: stretch; padding-top: calc(1mm * var(--s)); padding-bottom: calc(1mm * var(--s)); }
.so-left { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.mc { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.3mm * var(--s)) calc(1.4mm * var(--s)); }
.mc .opt { margin-right: calc(.4mm * var(--s)); }
.advice { font-size: calc(calc(6pt * var(--s)) * var(--text-scale)); color: #555; margin-top: calc(1mm * var(--s)); }
.sign { display: flex; flex-direction: column; }
.sign > .k { align-self: flex-start; }
.sig-line { height: calc(9mm * var(--s)); border-bottom: 1px solid #333; margin: calc(.3mm * var(--s)) 0 calc(.3mm * var(--s)); }
.sig-name { font-size: calc(calc(7pt * var(--s)) * var(--text-scale)); text-align: center; overflow-wrap: anywhere; }
.sig-name [data-doctor-name]:empty { display: inline-block; min-width: calc(40mm * var(--s)); border-bottom: 1px dotted #777; vertical-align: baseline; }

/* screen-only helpers used by editor.js */
@media screen {
  .opt { cursor: pointer; user-select: none; }       /* tick boxes toggle on click (editor.js) */
  .opt:hover .cb { box-shadow: 0 0 0 1.5px #93c5fd; }
  .oi > .item-remove { left: -2px; right: auto; top: -11px; }  /* inline items may wrap: pin the × above their start */
  .prompt .v:empty::before, .blank-area:empty::before { content: 'Click to type…'; color: #9ca3af; font-style: italic; font-size: calc(7pt * var(--s)); }
}
.empty { font-size: calc(9pt * var(--s)); color: #6b7280; padding: calc(.6mm * var(--s)) 0; display: flex; gap: calc(3mm * var(--s)); align-items: center; width: 100%; }
.notice.error { color: #b91c1c; font-size: calc(7pt * var(--s)); margin: 0 0 calc(.5mm * var(--s)); }
.notes-tools { margin-top: calc(.8mm * var(--s)); }

/* page skeleton (errata E1): on screen the table is invisible plumbing; in print its thead/tfoot spacer rows
   repeat on every page and reserve the bands that the fixed letterhead/footer paint into. */
.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: 8mm; right: 8mm; height: 13mm; padding-top: 1.5mm; background: #fff; }
  .doc-footer { position: fixed; bottom: 0; left: 8mm; right: 8mm; height: 7mm; background: #fff; padding-bottom: 1mm; }
  .band-top { height: 15mm; }      /* 13mm letterhead + 2mm gap — repeated by <thead> on every page */
  .band-bottom { height: 9mm; }    /* 7mm footer + 2mm gap — repeated by <tfoot> on every page */
  .doc-body { padding: 0; }
  .box, .identity, .strip, .signoff, .note-meta, .sec.dx, .sec.ud, .sign, .order-group { break-inside: avoid; page-break-inside: avoid; }
  .sec h3 { break-after: avoid; page-break-after: avoid; }
  .v { border-bottom-color: #555; }
  .empty, .notice, .draft-tag { display: none !important; }
}

/* ---------------- A4 (the toolbar's Paper toggle) ----------------
   The same card at --s = 1.2 on the certificates' A4 letterhead, footer and print bands; --page-body grows from
   186 mm to 271 mm, and that is where the extra room goes (the clinical area stretches into it). */
.page-A4 .opd-card { --s: 1.2; --page-body: 271mm; }
.page-A4 .doc-letterhead { gap: 4mm; height: 15mm; padding-bottom: 1.5mm; }
.page-A4 .lh-logo { height: 11mm; }
.page-A4 .lh-name { font-size: 11pt; line-height: 1.2; }
.page-A4 .lh-line { font-size: 7.5pt; line-height: 1.3; }
.page-A4 .lh-doc { font-size: 13pt; }
.page-A4 .lh-doc-th { font-size: 8pt; }
.page-A4 .doc-footer { font-size: 6.5pt; }
@media print {
  .page-A4 .doc-letterhead { left: 14mm; right: 14mm; height: 15mm; padding-top: 2mm; }
  .page-A4 .doc-footer { left: 14mm; right: 14mm; }
  .page-A4 .band-top { height: 17mm; }   /* 15mm letterhead + 2mm gap */
}