/* public/css/documents/driving-licence-cert.css — ใบรับรองแพทย์ (สำหรับใบอนุญาตขับรถ): A4 portrait, the Thai
   Medical Council form as a clean typed sheet — dotted blanks for values, one box per ID character, black pill
   badges for ส่วนที่ 1 / ส่วนที่ 2, the physician's opinion lines growing to the page bottom (editor.js fitPage).
   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; }

.dl-cert { font-family: 'Sarabun', sans-serif; color: #111; font-size: 10.5pt; line-height: 1.5;
  --page-body: 271mm; } /* A4 297mm minus the 17mm + 9mm print bands */

/* ---- 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; }

/* ---- generic pieces ---- */
.doc-body { padding: 2mm 0 0; }
.title { text-align: center; font-size: calc(15pt * var(--text-scale)); font-weight: 700; margin: 1mm 0 1mm; letter-spacing: .2px; }
.lb { white-space: nowrap; }
.v { display: inline-block; border-bottom: 1px dotted #555; min-height: 1.3em; padding: 0 1.5mm; min-width: 12mm; white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: baseline; box-sizing: border-box; }
.ln { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2mm; margin: .5mm 0; }
.grow { flex: 1 1 30mm; min-width: 0; }
.f-inline { display: inline-flex; align-items: baseline; gap: 2mm; }
.v-num { min-width: 16mm; text-align: center; }
.v-lic { min-width: 24mm; text-align: center; }
.v-day { min-width: 9mm; text-align: center; }
.v-month { min-width: 24mm; text-align: center; }
.v-year { min-width: 13mm; text-align: center; }
.tdate { display: inline-flex; align-items: baseline; gap: 1.5mm; white-space: nowrap; }
.numbers { justify-content: space-between; margin-bottom: 1mm; }
.numbers .v-num { min-width: 28mm; }

/* tick boxes */
.opt { display: inline-flex; align-items: center; gap: 1.2mm; margin-right: 1.5mm; white-space: nowrap; }
.cb { display: inline-block; width: 3.2mm; height: 3.2mm; border: 1px solid #333; box-sizing: border-box; position: relative; background: #fff; }
.cb.on::after { content: ''; position: absolute; left: .9mm; top: -.4mm; width: 1mm; height: 2.2mm; border: solid #111; border-width: 0 1.6px 1.6px 0; transform: rotate(40deg); }

/* ---- the two parts ---- */
.part { margin-top: 2mm; }
.part-head { display: flex; align-items: center; gap: 3mm; margin: 1.5mm 0 1mm; }
.badge { background: #111; color: #fff; border-radius: 2.5mm; padding: .2mm 3.5mm; font-weight: 700; font-size: calc(10pt * var(--text-scale)); line-height: 1.6; }
.hist .hl { width: 60mm; }        /* the five declaration rows line up */
.hist .opt { width: 16mm; }
.fine { font-size: calc(8.5pt * var(--text-scale)); color: #333; margin: .2mm 0 1mm; }

/* ID / passport: one character per box, the Thai 13-digit grouping as gaps */
.idline { align-items: center; }
.idboxes { display: inline-flex; align-items: center; gap: .9mm; }
.idc { display: inline-flex; align-items: center; justify-content: center; width: 6mm; height: 6.8mm; border: 1px solid #333; box-sizing: border-box; font-size: calc(11pt * var(--text-scale)); line-height: 1; overflow: hidden; }
.idgap { padding: 0 .4mm; font-weight: 700; }

/* signature blocks: a dotted line with the name in parentheses under it */
.sig { display: flex; align-items: flex-end; justify-content: flex-end; gap: 3mm; margin: 2mm 0 1mm; }
.sigbox { display: inline-flex; flex-direction: column; align-items: center; width: 58mm; }
.sig-line { display: block; width: 100%; height: 8mm; border-bottom: 1px dotted #555; }
.sig-name { font-size: calc(9.5pt * var(--text-scale)); margin-top: .5mm; text-align: center; overflow-wrap: anywhere; }
.sig-name [data-doctor-name]:empty, .sig-name [data-mirror]:empty { display: inline-block; min-width: 40mm; border-bottom: 1px dotted #777; vertical-align: baseline; } /* no name yet: a blank to write it on */
.sig-patient .tdate { margin-bottom: 2mm; } /* level with the signature line, not with the name under it */
.sig-doctor { margin-top: 3mm; }

/* examination line */
.vitals { gap: 0 4mm; }
.vc { display: inline-flex; align-items: baseline; gap: 1.2mm; white-space: nowrap; }
.para { text-indent: 12mm; margin: 1.5mm 0 .3mm; }
.diseases { list-style: none; margin: 0; padding-left: 12mm; }
.diseases li { margin: .1mm 0; }
.diseases li.ln { display: flex; }

/* the opinion: three ruled lines the text sits on (more appear as the text grows). The rules are the bottom borders
   of a stack of line-high boxes behind the text, clipped to its height — as the field's own background they never
   printed (shell.css clears every editable field's background in print) */
.opinion { margin-top: 1.5mm; }
.ruled { position: relative; }
.rules { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.rules > i { display: block; box-sizing: border-box; height: 8mm; border-bottom: .25mm solid #777; }
.lines { display: block; border-bottom: none; min-height: 24mm; line-height: 8mm; padding: 0 1.5mm; min-width: 0; }
/* the leftover page height goes here, so the footnotes sit at the page bottom (editor.js fitPage) */
.spacer { height: 0; }

/* footnotes */
.remarks { font-size: calc(8.5pt * var(--text-scale)); color: #222; margin-top: 2mm; line-height: 1.45; }
.nt { display: flex; gap: 3mm; align-items: flex-start; }
.nt-k { white-space: nowrap; font-weight: 700; }
.nt ul { list-style: none; margin: 0; padding: 0; }
.approval { margin: .5mm 0 0 14mm; }

/* 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; }
  .idc:focus { outline: 2px solid #60a5fa; outline-offset: 0; }
}
.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 */
  .doc-body { padding: 0; }
  .part-head, .ln, .sig, .vitals, .remarks, .idline { break-inside: avoid; page-break-inside: avoid; }
  .v { border-bottom-color: #444; }
  .empty, .notice { display: none !important; }
}