/*
 * Chỉnh giao diện formio.js 5.x (khuôn Bootstrap 5) cho khớp bộ CSS Imperial và bản 4.13.7 cũ.
 * Nạp như tài sản CSS thứ 4 của bản formio 5.6.1 (sau CSS formio) — không ảnh hưởng bản 4.x.
 * Mỗi luật ghi rõ vì sao; đo trên chính form đăng ký hội viên 24/09/2026.
 */

/* 1. Nút lịch / tiền tố / hậu tố cao hơn ô nhập (37,8px so với 30,8px).
 *    formio 5 ép chiều cao .form-control, còn .input-group-text của Bootstrap 5 giữ padding + line-height 1.5.
 *    Bỏ padding dọc để nhóm (flex, align-items: stretch) kéo nó đúng bằng chiều cao ô nhập. */
.formio-form .input-group > .input-group-text {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* 2. Bảng lưới (datagrid) viền 3px #ddd !important + đệm 10px của formio 5 — bản cũ viền 1px #dee2e6, ô đệm .5rem. */
.formio-form .formio-component-datagrid .datagrid-table,
.formio-form .formio-component-datagrid .datagrid-table td,
.formio-form .formio-component-datagrid .datagrid-table th {
  border: 1px solid #dee2e6 !important;
}
.formio-form .formio-component-datagrid .datagrid-table {
  padding: 0;
}
.formio-form .formio-component-datagrid .datagrid-table td,
.formio-form .formio-component-datagrid .datagrid-table th {
  padding: .5rem;
}

/* 3. Khoảng cách giữa các ô: formio 5 gắn lớp mb-2 (.5rem !important = 8px) lên mọi ô, đè luật
 *    .formio-component { margin-bottom: 5px } của Imperial ⇒ trả về 5px như bản cũ.
 *    Ô ẩn / nguồn dữ liệu: formio vốn cho lề 0, mb-2 cũng đè mất ⇒ trả về 0 (form hội viên thừa 8px trắng). */
.formio-form .formio-component.mb-2 {
  margin-bottom: 5px !important;
}
.formio-form .formio-component-hidden.mb-2:not(.formio-component-checkbox),
.formio-form .formio-component-datasource.mb-2 {
  margin-bottom: 0 !important;
}

/* 4. Nhãn nhóm radio / ô tích nhiều lựa chọn: formio 5 đổi sang display:inline nên mất đệm trên dưới,
 *    nhóm gọn hơn các ô khác 14px ⇒ trả về inline-block như nhãn mọi ô còn lại. */
.formio-form .formio-component-radio > label.col-form-label,
.formio-form .formio-component-selectboxes > label.col-form-label {
  display: inline-block;
}

/* 5. Ô textarea chỉ đọc hiện dạng khung (card card-body bg-light): formio 5 thêm mb-3 (16px) —
 *    form hợp đồng có 8 ô như vậy, dài thêm ~128px. Bản cũ không có lề này. */
.formio-form .formio-component-textarea .card.card-body.mb-3 {
  margin-bottom: 0 !important;
}

/* 6. Dấu * bắt buộc của ô ẩn nhãn (span.required-star, position:absolute) bị ô nhập trong nhóm có nút lịch
 *    và khung ô chọn (Choices) — cả hai position:relative, đứng sau trong HTML — vẽ đè mất: khách không thấy
 *    ô tìm phường/xã, ô tỉnh/quận/phường, ô ngày là bắt buộc. Đưa dấu * lên trên, không chặn cú bấm. */
.formio-form .formio-component > .required-star {
  z-index: 5;
  pointer-events: none;
}

/* 7. Ô chữ ký bị khoá (vd chữ ký Bên A của hợp đồng): bản cũ vẽ ảnh nền màu be, formio 5 để ảnh trống ⇒
 *    chỉ còn khoảng trắng. Tô nền be mặc định của formio cho khung; ô ký đang dùng có canvas tự tô đè lên. */
.formio-form .formio-component-signature .signature-pad-body {
  background-color: rgb(245, 245, 235);
}

/* 8. Ô chọn ở chế độ chỉ đọc (xem lại phiếu) vẫn hiện dấu × xoá lựa chọn — bản 4.13.7 không có.
 *    formio.full.min.css 5.6.1 tự có luật ẩn nút cho ô bị tắt nhưng thua luật hiện nút
 *    `.choices[data-type*="select-one"] … .choices__item[data-deletable]:not([data-placeholder]) .choices__button`
 *    (7 lớp) ⇒ phải !important. Chỉ đụng ô bị tắt (.is-disabled): ô đang sửa được giữ nguyên nút ×. */
.formio-form .choices.is-disabled .choices__button {
  display: none !important;
}