/* =====================================================================
   paper.css — สไตล์กระดาษ A4 สำหรับเทมเพลตแบบฟอร์ม
   ใช้คลาสเหล่านี้ใน template_html (ดูตัวอย่างใน database/templates)
   ===================================================================== */


/* ---------- หน้ากระดาษ ---------- */
.paper-page {
  --paper-font: 12pt;    /* Sarabun ~12pt ใกล้เคียงความสูงตัวอักษรของ TH Sarabun New 16pt ที่ราชการใช้ */
  --lh: 1.62em;
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  padding: 18mm 20mm 15mm 25mm;          /* บน ขวา ล่าง ซ้าย */
  background: #fff;
  color: #000;
  font-family: 'Sarabun', 'TH Sarabun New', 'TH SarabunPSK', sans-serif;
  font-size: var(--paper-font);
  line-height: var(--lh);
  position: relative;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.paper-page + .paper-page { margin-top: 10mm; }
/* แบบฟอร์มแนวนอน (เช่น ใบแนบ ภ.ง.ด.3) — ใช้ named page เพื่อให้พิมพ์เป็น A4 แนวนอนอัตโนมัติ */
.paper-page.landscape {
  --paper-font: 10pt; --lh: 1.45em;
  width: 297mm; min-height: 210mm; padding: 8mm 10mm;
  page: landscape;
}
.paper-page.compact { --paper-font: 11pt; font-size: var(--paper-font); --lh: 1.5em; padding-top: 14mm; padding-bottom: 12mm; }
.paper-page *, .paper-page *::before, .paper-page *::after { box-sizing: border-box; }

/* ---------- ตัวอักษร / จัดวาง ---------- */
.paper-page .title   { text-align: center; font-weight: 700; font-size: 1.5em; margin: 0 0 4mm; line-height: 1.4; }
.paper-page .subtitle{ text-align: center; font-weight: 600; margin: -2mm 0 4mm; }
.paper-page .c, .paper-page .center { text-align: center; }
.paper-page .r, .paper-page .right  { text-align: right; }
.paper-page .b       { font-weight: 700; }
.paper-page .mt      { margin-top: 3mm; }
.paper-page .mt-l    { margin-top: 8mm; }
.paper-page .indent  { text-indent: 25mm; }
.paper-page .small   { font-size: .85em; }
.paper-page p        { margin: 0; }

/* บรรทัดที่มีช่องกรอก: ช่อง .grow จะยืดเต็มส่วนที่เหลือของบรรทัด */
.paper-page .ln {
  display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 1.5mm;
  min-height: var(--lh); white-space: nowrap;
}
.paper-page .ln.right  { justify-content: flex-end; }
.paper-page .ln.center { justify-content: center; }
.paper-page .ln > .f   { flex: 0 1 auto; max-width: 100%; }   /* หดได้ไม่ต่ำกว่า len-xx; ข้อความยาวจะถูกย่ออัตโนมัติ */
.paper-page .ln > .f.grow { flex: 1 1 0; min-width: 10mm; }

/* ช่องกรอกแบบเส้นประ */
.paper-page .f {
  display: inline-block;
  min-width: 25mm;
  border-bottom: 1px dotted #000;
  text-align: center;
  padding: 0 2mm;
  line-height: calc(var(--lh) - 1px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  vertical-align: baseline;
}
.paper-page .f.l { text-align: left; }
.paper-page .len-10 { min-width: 10mm; } .paper-page .len-12 { min-width: 12mm; } .paper-page .len-15 { min-width: 15mm; }
.paper-page .len-18 { min-width: 18mm; } .paper-page .len-20 { min-width: 20mm; } .paper-page .len-25 { min-width: 25mm; }
.paper-page .len-30 { min-width: 30mm; } .paper-page .len-35 { min-width: 35mm; } .paper-page .len-40 { min-width: 40mm; }
.paper-page .len-45 { min-width: 45mm; } .paper-page .len-50 { min-width: 50mm; } .paper-page .len-60 { min-width: 60mm; }
.paper-page .len-70 { min-width: 70mm; } .paper-page .len-80 { min-width: 80mm; } .paper-page .len-100 { min-width: 100mm; }

/* ข้อความหลายบรรทัดบนเส้นประ (ข้อความยาว / ที่อยู่) — ใช้ style="--rows:3" กำหนดจำนวนบรรทัดขั้นต่ำ */
.paper-page .lines {
  --rows: 2;
  min-height: calc(var(--lh) * var(--rows));
  white-space: pre-wrap;
  word-break: break-word;
  line-break: auto;
  background:
    linear-gradient(#fff calc(var(--lh) - 1px), transparent 0) 0 0 / 100% var(--lh),
    repeating-linear-gradient(90deg, #000 0 1px, #fff 1px 3px);
  padding: 0 2mm;
}
.paper-page .lines.indent-first { text-indent: 25mm; }

/* ช่องเครื่องหมาย ☐ ใช้กับตัวกรอง check:ค่า */
.paper-page .box {
  display: inline-block; width: 4.2mm; height: 4.2mm; border: 1px solid #000;
  line-height: 4mm; text-align: center; font-size: .8em; font-weight: 700;
  vertical-align: -0.4mm; margin: 0 1mm 0 2mm;
}

/* ตาราง */
.paper-page table.grid { width: 100%; border-collapse: collapse; }
.paper-page table.grid th, .paper-page table.grid td {
  border: 1px solid #000; padding: 0 2mm; height: var(--lh); line-height: 1.35; vertical-align: middle;
}
.paper-page table.grid th { font-weight: 600; text-align: center; }
.paper-page table.grid td.c { text-align: center; }
.paper-page table.grid td.r { text-align: right; white-space: nowrap; }

/* ลายมือชื่อ */
.paper-page .sigs { display: flex; justify-content: space-between; gap: 8mm; margin-top: 8mm; }
.paper-page .sigs.end { justify-content: flex-end; }
.paper-page .sig { width: 78mm; text-align: center; line-height: 1.75; }
.paper-page .sig .line { display: flex; align-items: baseline; gap: 1.5mm; white-space: nowrap; }
.paper-page .sig .line .f { flex: 1 1 0; min-width: 0; }

/* ช่องติดอากรแสตมป์ / รูปถ่าย */
.paper-page .stamp {
  position: absolute; top: 8mm; right: 20mm; width: 28mm; height: 24mm;
  border: 1px dashed #000; font-size: 9pt; line-height: 1.3; text-align: center;
  display: flex; align-items: center; justify-content: center; padding: 2mm;
}
.paper-page .box-area { border: 1px solid #000; padding: 2mm 3mm; }
.paper-page .cols { display: flex; gap: 6mm; }
.paper-page .cols > * { flex: 1 1 0; min-width: 0; }

/* ที่ว่างสำหรับตราครุฑ — ยังไม่มีไฟล์ภาพจริงตามระเบียบ ใช้กรอบเส้นประแทนชั่วคราว
   (แทนที่ด้วย <img src="../assets/img/garuda.png" ...> เมื่อมีไฟล์ที่ถูกต้องแล้ว) */
.paper-page .gov-crest {
  width: 20mm; height: 20mm; margin: 0 auto 2mm; border: 1px dashed #000; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .68em; line-height: 1.25; color: #555;
}
.paper-page .rule { border: 0; border-top: 1px solid #000; margin: 2mm 0; }

/* ค่าที่ผู้ใช้กรอก */
.paper-page .v { white-space: pre-wrap; }
.paper-page .f .v { white-space: nowrap; }

/* ---------- พิมพ์ ---------- */
@page { size: A4; margin: 0; }
@page landscape { size: A4 landscape; margin: 0; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.ff-fill > *:not(#ff-print-root) { display: none !important; }
  #ff-print-root { display: block !important; }
  #ff-print-root .paper-page { margin: 0 !important; box-shadow: none !important; page-break-after: always; break-after: page; }
  #ff-print-root .paper-page:last-child { page-break-after: auto; break-after: auto; }
}
#ff-print-root { display: none; }