/* Giao diện mẫu đơn (GĐ 9): ô nhập bên trái, bản in A4 bên phải.
   Màu qua token (ui-guidelines R1). Ngoại lệ duy nhất là khối bản in — giấy trắng mực đen là thuộc tính
   của TỜ GIẤY, không phải của nhận diện đơn vị, và nó phải giống nhau ở mọi phường. */

/* ⚠️ MỌI luật `@media print` trong file này BẮT BUỘC mở đầu bằng `body.eform-page`.
   `layout.eta` nạp file này cho MỌI trang công khai, nên một luật in không có phạm vi sẽ làm cán bộ
   một cửa in trang chi tiết thủ tục ra tờ giấy cụt đầu. `tests/invariants.test.ts` khóa ràng buộc này. */

.eform-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Kiosk: một cột, bản in nằm DƯỚI ô nhập. Bàn phím ảo cao hơn 400px và neo đáy màn hình — chia hai cột
   thì mở bàn phím ra là bản in biến mất khỏi tầm nhìn. */
html[data-kiosk='1'] .eform-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ef-guide,
.ef-legal {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
}

.ef-legal {
  background: var(--warn-bg);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--warn);
  font-weight: 600;
}

.ef-group {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px 18px;
  margin: 0 0 16px;
}

.ef-group legend {
  font-weight: 800;
  color: var(--red-dark);
  padding: 0 6px;
}

.ef-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.ef-field label {
  font-weight: 700;
  font-size: 14.5px;
}

.ef-req {
  color: var(--red);
}

/* Vùng chạm tối thiểu cho màn cảm ứng (ui-guidelines R2) — mẫu đơn là màn có mật độ điều khiển cao nhất
   của cả hệ thống, đúng chỗ áp lực "nhét thêm ô" sẽ bóp chiều cao xuống. */
.ef-field input,
.ef-field select,
.ef-field textarea {
  min-height: var(--tap-min);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.ef-field textarea {
  min-height: calc(var(--tap-min) + 30px);
  resize: vertical;
}

.ef-field input:focus-visible,
.ef-field select:focus-visible,
.ef-field textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 1px;
}

.ef-hint {
  color: var(--ink-soft);
  font-size: 13px;
}

.eform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.eform-actions button {
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.eform-actions button[aria-busy='true'] {
  opacity: 0.6;
  cursor: progress;
}

.ef-status {
  background: var(--warn-bg);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  color: var(--warn);
  font-size: 14px;
}

/* ---- Khối bản in ---- */

.eform-print {
  /* KHÔNG đặt bề rộng cố định theo mm: html2pdf ép container theo khổ giấy trừ lề, phần thừa bị cắt
     trong im lặng. */
  width: 100%;
  padding: 22px 26px 30px;
  background: #fff;
  color: #000;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* Khai đủ stack: khi xuất PDF, khối được nhân bản và gắn lại dưới `body`, mất thừa kế font từ tổ tiên. */
  font-family: 'Times New Roman', Times, serif;
  font-size: 15px;
  line-height: 1.6;
}

.ef-national {
  text-align: center;
  margin: 0 0 14px;
}

.ef-national span {
  display: block;
  font-weight: 700;
}

.ef-motto {
  border-bottom: 1px solid #000;
  display: inline-block !important;
  padding-bottom: 2px;
}

/*
 * ⚠️ KHÔNG dùng `text-transform` ở khối bản in.
 *
 * `text-transform` là phép biến đổi lúc VẼ — `textContent` không thấy nó. Bộ xuất `.docx` đọc chính
 * `textContent`, nên tiêu đề hiện "GIẤY ỦY QUYỀN" trên màn hình mà file tải về lại ra "Giấy ủy quyền":
 * ba đầu ra lệch nhau, đúng thứ kiến trúc "một cây DOM cho cả ba" sinh ra để chặn. Muốn chữ HOA thì gõ
 * HOA thẳng trong dữ liệu mẫu.
 */
.ef-doc-title {
  text-align: center;
  font-weight: 700;
  font-size: 19px;
  margin: 18px 0 6px;
}

.ef-doc-subtitle {
  text-align: center;
  font-style: italic;
  margin: 0 0 14px;
}

.ef-para {
  margin: 0 0 10px;
}

.ef-para[data-ef-align='center'] {
  text-align: center;
}

.ef-para[data-ef-align='right'] {
  text-align: right;
}

.ef-para[data-ef-indent] {
  text-indent: 28px;
}

.ef-para[data-ef-bold] {
  font-weight: 700;
}

.ef-para[data-ef-italic] {
  font-style: italic;
}

.ef-spacer {
  margin: 0;
  height: 20px;
}

/* Chỗ chờ điền: gạch chân để in ra là một dòng kẻ viết tay được. */
.ef-slot {
  border-bottom: 1px dotted #555;
  padding: 0 2px;
  min-width: 60px;
  display: inline-block;
}

.ef-sign {
  display: flex;
  gap: 20px;
  margin: 24px 0 0;
  /* Khối chữ ký bị cắt đôi giữa hai trang là tờ đơn phải in lại. */
  break-inside: avoid;
  page-break-inside: avoid;
}

.ef-sign-col {
  flex: 1;
  text-align: center;
}

.ef-sign-col span {
  display: block;
}

.ef-sign-title {
  font-weight: 700;
}

.ef-sign-note {
  font-style: italic;
  font-size: 13.5px;
}

.ef-footer {
  margin: 26px 0 0;
  text-align: right;
  font-size: 11.5px;
  color: #555;
  font-style: italic;
}

@media (max-width: 900px) {
  .eform-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Bản in ---- */

@media print {
  body.eform-page .site-header,
  body.eform-page .crumbs,
  body.eform-page .list-head,
  body.eform-page .preview-note,
  body.eform-page .ef-legal,
  body.eform-page .ef-guide,
  body.eform-page .ef-status,
  body.eform-page .eform-fields,
  body.eform-page .eform-actions,
  body.eform-page .static-notice,
  body.eform-page .vkb,
  body.eform-page .idle-overlay {
    display: none !important;
  }

  /*
   * `!important` là bắt buộc, không phải cẩu thả: khi bàn phím ảo của kiosk đang mở, `keyboard.js` đặt
   * `padding-bottom` ~450px **inline** lên chính `.content-plain`, và style inline thắng mọi luật của
   * stylesheet. Người dân bấm In lúc bàn phím còn mở sẽ nhận thêm một trang giấy TRẮNG.
   */
  body.eform-page main,
  body.eform-page .content-plain {
    padding: 0 !important;
  }

  body.eform-page .eform-grid {
    display: block;
  }

  body.eform-page .eform-print {
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 14pt;
  }

  body.eform-page .ef-slot {
    border-bottom-color: #000;
  }
}