/* ==========================================================================
   BSF Form Style Overrides — สำหรับหน้าที่ใช้ bsf_show_form() ใน /recruit
   ครอบด้วย .bsf-form-wrap เพื่อ scope สไตล์ไม่ให้กระทบ element อื่น
   (ยกเว้นบาง selector ของ select2/datepicker popup ที่ DOM อยู่นอก wrap)
   ========================================================================== */

/* ซ่อนปุ่ม admin / workflow บางตัวที่ BSF generate */
.bsf-form-wrap .alert-show-query,
.bsf-form-wrap .form-action-bar {
  display: none !important;
}

/* ========== Base style สำหรับ btn-mini ทุกตัว ========== */
.bsf-form-wrap .btn-mini,
.modal .btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s, color 0.15s;
}
.bsf-form-wrap .btn-mini:hover,
.modal .btn-mini:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.bsf-form-wrap .btn-mini i,
.modal .btn-mini i {
  font-size: 0.95rem;
  line-height: 1;
}

/* ===== Add button (btn-light-primary) — สีส้ม theme ===== */
.bsf-form-wrap .btn-light-primary,
.modal .btn-light-primary {
  background: var(--ieat-orange, #f59e0b);
  color: #fff;
  padding: 0.5rem 1.1rem;
  font-size: 0.875rem;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
.bsf-form-wrap .btn-light-primary:hover,
.modal .btn-light-primary:hover {
  background: #ea8e08;
  color: #fff;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

/* ===== Edit button (btn-light-success) — เขียวอ่อน ===== */
.bsf-form-wrap .btn-light-success,
.modal .btn-light-success {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.bsf-form-wrap .btn-light-success:hover,
.modal .btn-light-success:hover {
  background: #10b981;
  color: #fff;
}

/* ===== View button (btn-light-info) — ฟ้าอ่อน ===== */
.bsf-form-wrap .btn-light-info,
.modal .btn-light-info {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}
.bsf-form-wrap .btn-light-info:hover,
.modal .btn-light-info:hover {
  background: #3b82f6;
  color: #fff;
}

/* ===== Delete button (btn-light-danger) — แดงอ่อน ===== */
.bsf-form-wrap .btn-light-danger,
.modal .btn-light-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.bsf-form-wrap .btn-light-danger:hover,
.modal .btn-light-danger:hover {
  background: #ef4444;
  color: #fff;
}

/* ===== Warning (btn-light-warning) — เหลืองอ่อน ===== */
.bsf-form-wrap .btn-light-warning,
.modal .btn-light-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.bsf-form-wrap .btn-light-warning:hover,
.modal .btn-light-warning:hover {
  background: #f59e0b;
  color: #fff;
}

/* ===== /public/ ใช้ btn-info / btn-warning / btn-danger (full color) ===== */
.bsf-form-wrap .btn-info,
.modal .btn-info {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: none;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.bsf-form-wrap .btn-info:hover,
.modal .btn-info:hover {
  background: #3b82f6;
  color: #fff;
  transform: translateY(-1px);
}

.bsf-form-wrap .btn-warning,
.modal .btn-warning {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: none;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.bsf-form-wrap .btn-warning:hover,
.modal .btn-warning:hover {
  background: #10b981;
  color: #fff;
  transform: translateY(-1px);
}

.bsf-form-wrap .btn-danger,
.modal .btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: none;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.bsf-form-wrap .btn-danger:hover,
.modal .btn-danger:hover {
  background: #ef4444;
  color: #fff;
  transform: translateY(-1px);
}

/* Dark mode */
[data-theme="dark"] .bsf-form-wrap .btn-info,
[data-theme="dark"] .modal .btn-info {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
[data-theme="dark"] .bsf-form-wrap .btn-warning,
[data-theme="dark"] .modal .btn-warning {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}
[data-theme="dark"] .bsf-form-wrap .btn-danger,
[data-theme="dark"] .modal .btn-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

/* Add button "เพิ่มข้อมูล" (btn-primary) ใน /public/ */
.bsf-form-wrap a.btn-primary,
.modal a.btn-primary,
.bsf-form-wrap .btn.btn-primary,
.modal .btn.btn-primary {
  background: var(--ieat-orange, #f59e0b);
  border-color: var(--ieat-orange, #f59e0b);
  color: #fff;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
  transition: background 0.15s, transform 0.1s;
}
.bsf-form-wrap a.btn-primary:hover,
.modal a.btn-primary:hover {
  background: #ea8e08;
  border-color: #ea8e08;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

/* ==========================================================================
   icofont mapping → FontAwesome
   /public/ ของ BSF อ้าง class เช่น `icofont icofont-trash` แต่ไฟล์ icofont.css
   ของโปรเจกต์นี้ไม่ครอบคลุม class เหล่านั้น (มี ~163 class แต่ขาดไอคอนใช้งาน)
   → map ไป FontAwesome 4 (fontawesome.css ที่โหลดอยู่แล้ว)
   ========================================================================== */
.icofont {
  font-family: 'FontAwesome' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

/* ===== Map icofont-* → FA4 glyphs ===== */
.icofont-search:before,
.icofont-ui-search:before,
.icofont-search-alt-:before     { content: '\f002' !important; }  /* fa-search */
.icofont-ui-edit:before          { content: '\f044' !important; }  /* fa-edit */
.icofont-trash:before,
.icofont-ui-delete:before        { content: '\f1f8' !important; }  /* fa-trash */
.icofont-ui-add:before           { content: '\f067' !important; }  /* fa-plus */
.icofont-copy-alt:before         { content: '\f0c5' !important; }  /* fa-copy */
.icofont-tick-mark:before        { content: '\f00c' !important; }  /* fa-check */
.icofont-close:before            { content: '\f00d' !important; }  /* fa-times */
.icofont-caret-right:before      { content: '\f0da' !important; }  /* fa-caret-right */
.icofont-home:before             { content: '\f015' !important; }  /* fa-home */
.icofont-social-dropbox:before   { content: '\f16b' !important; }  /* fa-dropbox */

.bsf-form-wrap .icofont,
.modal .icofont {
  font-size: 1rem;
  line-height: 1;
}

/* ซ่อนปุ่ม "เพิ่มข้อมูล" ที่ /public/form_main.php gen ซ้ำ
   (มี "+" ปุ่มจาก section header แล้ว — ไม่ต้องมี 2 อัน) */
.bsf-form-wrap .f-right,
.modal .f-right {
  display: none !important;
}

/* Table sub-form list — ปรับให้ดู modern */
.bsf-form-wrap .table,
.modal .table {
  font-family: 'Prompt', system-ui, sans-serif;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.bsf-form-wrap .table thead th,
.modal .table thead th {
  background: #f8fafc !important;
  color: var(--ieat-ink, #0f172a) !important;
  font-weight: 600;
  font-size: 0.825rem;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
}
.bsf-form-wrap .table tbody td,
.modal .table tbody td {
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.bsf-form-wrap .table tbody tr:hover td,
.modal .table tbody tr:hover td {
  background: #fafbfd;
}
.bsf-form-wrap .table.table-bordered,
.modal .table.table-bordered {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Dark mode table */
[data-theme="dark"] .bsf-form-wrap .table,
[data-theme="dark"] .modal .table {
  /* override Bootstrap 5 table CSS variables */
  --bs-table-bg: transparent;
  --bs-table-color: #e8e6f0;
  --bs-table-striped-bg: rgba(146, 104, 184, 0.06);
  --bs-table-striped-color: #e8e6f0;
  --bs-table-hover-bg: rgba(146, 104, 184, 0.12);
  --bs-table-hover-color: #fff;
  --bs-table-border-color: #2a2640;
  background: transparent !important;
  color: #e8e6f0 !important;
}
[data-theme="dark"] .bsf-form-wrap .table thead th,
[data-theme="dark"] .modal .table thead th {
  background: #1a1729 !important;
  color: #e8e6f0 !important;
  border-bottom-color: #2a2640;
}
[data-theme="dark"] .bsf-form-wrap .table tbody,
[data-theme="dark"] .modal .table tbody,
[data-theme="dark"] .bsf-form-wrap .table tbody tr,
[data-theme="dark"] .modal .table tbody tr,
[data-theme="dark"] .bsf-form-wrap .table tbody td,
[data-theme="dark"] .modal .table tbody td {
  background: #221d35 !important;
  background-color: #221d35 !important;
  color: #e8e6f0 !important;
  border-bottom-color: #2a2640 !important;
}
[data-theme="dark"] .bsf-form-wrap .table tbody tr:hover td,
[data-theme="dark"] .modal .table tbody tr:hover td {
  background: rgba(146, 104, 184, 0.18) !important;
}
[data-theme="dark"] .bsf-form-wrap .table.table-bordered,
[data-theme="dark"] .modal .table.table-bordered {
  border-color: #2a2640;
}
[data-theme="dark"] .bsf-form-wrap .table.table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="dark"] .modal .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: #1f1a30 !important;
  color: #e8e6f0 !important;
}

/* Override Bootstrap .bg-primary ใน table header */
.bsf-form-wrap .table .bg-primary,
.modal .table .bg-primary,
.bsf-form-wrap thead.bg-primary,
.modal thead.bg-primary {
  background: #f8fafc !important;
  color: var(--ieat-ink, #0f172a) !important;
}
[data-theme="dark"] .bsf-form-wrap .table .bg-primary,
[data-theme="dark"] .modal .table .bg-primary,
[data-theme="dark"] .bsf-form-wrap thead.bg-primary,
[data-theme="dark"] .modal thead.bg-primary {
  background: #1a1729 !important;
  color: #e8e6f0 !important;
}

/* Dark mode action buttons — เพิ่ม alpha + ปรับสีให้เห็น */
[data-theme="dark"] .bsf-form-wrap .btn-light-success,
[data-theme="dark"] .modal .btn-light-success {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}
[data-theme="dark"] .bsf-form-wrap .btn-light-info,
[data-theme="dark"] .modal .btn-light-info {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
[data-theme="dark"] .bsf-form-wrap .btn-light-danger,
[data-theme="dark"] .modal .btn-light-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
[data-theme="dark"] .bsf-form-wrap .btn-light-warning,
[data-theme="dark"] .modal .btn-light-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}

/* Action column ในตาราง — เว้นช่องระหว่างปุ่ม */
.bsf-form-wrap td .btn-mini,
.modal td .btn-mini {
  margin: 0 0.15rem;
}

/* ===== SweetAlert2 confirm/cancel buttons — ให้เป็น btn-mini size ===== */
.swal2-popup .btn,
.swal2-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem !important;
  font-family: 'Prompt', system-ui, sans-serif !important;
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
  border: none !important;
  margin: 0 0.25rem !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.swal2-popup .btn-success {
  background: #10b981 !important;
  color: #fff !important;
}
.swal2-popup .btn-success:hover {
  background: #059669 !important;
  transform: translateY(-1px);
}
/* Confirm "ยืนยันการลบ" — สีแดงเข้ม (อันตราย) */
.swal2-popup .btn-danger {
  background: #dc2626 !important;
  color: #fff !important;
}
.swal2-popup .btn-danger:hover {
  background: #b91c1c !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Cancel "ยกเลิก" — สีเหลือง (warning) */
.swal2-popup .btn-warning {
  background: #f59e0b !important;
  color: #fff !important;
}
.swal2-popup .btn-warning:hover {
  background: #d97706 !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.swal2-popup .btn .icofont,
.swal2-popup .btn .fas,
.swal2-popup .btn .fa {
  font-size: 0.875rem;
}

/* ปรับฟอนต์ + ขนาดของ SweetAlert popup เอง */
.swal2-popup {
  font-family: 'Prompt', system-ui, sans-serif !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
}
.swal2-popup .swal2-title {
  font-size: 1.1rem;
  font-family: 'Prompt', system-ui, sans-serif !important;
}
.swal2-popup .swal2-html-container {
  font-size: 0.95rem;
  font-family: 'Prompt', system-ui, sans-serif !important;
  margin: 1rem 0;
}

/* ปุ่มบันทึก/ยกเลิก ใน modal (BSF gen เป็น btn-success / btn-secondary) */
.modal .btn-success {
  background: var(--ieat-blue, #9268b8);
  border-color: var(--ieat-blue, #9268b8);
  color: #fff;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.modal .btn-success:hover,
.modal .btn-success:focus {
  background: #7d57a8;
  border-color: #7d57a8;
  color: #fff;
}
.modal .btn-secondary,
.modal .btn-danger.close-modal,
.modal .btn-light {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: var(--ieat-slate, #64748b);
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
}
.modal .btn-secondary:hover,
.modal .btn-light:hover {
  background: #e5e7eb;
  color: var(--ieat-ink, #0f172a);
}
[data-theme="dark"] .modal .btn-secondary,
[data-theme="dark"] .modal .btn-light {
  background: #2a2640;
  border-color: #3a3450;
  color: #b8b3c9;
}
[data-theme="dark"] .modal .btn-secondary:hover {
  background: #3a3450;
  color: #e8e6f0;
}

/* ========== Modal (BSF sub-form popup) ========== */
/* BSF JS แทน .modal-dialog ด้วย .modal-bsf — กำหนดขนาดและ center เอง */
.modal-bsf {
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  max-width: 1140px;
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  pointer-events: none;
}
.modal-bsf .modal-content {
  width: 100%;
  pointer-events: auto;
}
@media (max-width: 1200px) {
  .modal-bsf {
    max-width: calc(100% - 2rem);
  }
}
@media (max-width: 768px) {
  .modal-bsf {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
}

.modal-content {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
  font-family: 'Prompt', system-ui, sans-serif;
}
.modal-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
}
.modal-header .modal-title {
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ieat-navy, #1e3a5f);
  line-height: 1.3;
  margin: 0;
}
.modal-body {
  padding: 1.5rem;
  /* ให้ .modal-body เป็น containing block ของ absolute children
     (select2 dropdown ใช้ dropdownParent = .modal-body → ต้อง position: relative
     ไม่งั้น dropdown จะลอยไปอ้างอิง .modal-content หรือ .modal ที่ fixed ทำให้
     position ผิด ตกไปอยู่บนสุดของ modal แทนที่จะใกล้ select) */
  position: relative;
}
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
}

/* ========== ฟิลด์ในโมดัล (BSF AJAX-loaded — ไม่มี .bsf-form-wrap) ========== */
.modal label,
.modal .form-label {
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.825rem;
  color: var(--ieat-ink, #0f172a);
  margin-bottom: 0.4rem;
}
.modal .form-label {
  display: block;
  width: 100%;
}
.modal .form-control,
.modal .form-select,
.modal input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.modal select,
.modal textarea {
  font-family: 'Prompt', system-ui, sans-serif;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.9375rem;
  background: #fff;
  color: var(--ieat-ink, #0f172a);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

/* ========== input-group (datepicker + calendar icon) ========== */
/* BSF ใช้ <label class="input-group"> ครอบ input + <span class="input-group-text"> icon
   ต้อง enforce flex display + ปรับ border-radius ให้ icon ติดด้านขวาของ input */
.modal label.input-group,
.modal .input-group {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  position: relative;
}
.modal .input-group > .form-control,
.modal label.input-group > input,
.modal label.input-group > .datepicker {
  flex: 1 1 auto;
  width: 1% !important;
  min-width: 0;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.modal .input-group-text {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-left: none;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  color: var(--ieat-slate, #64748b);
  cursor: pointer;
  white-space: nowrap;
}
[data-theme="dark"] .modal .input-group-text {
  background: #2a2540 !important;
  border-color: #4a4470 !important;
  color: #b8b3c9 !important;
}

/* ========== File input (BSF type="file") ========== */
/* BSF ใส่ <input type="text" id="wfsfiles-chk-X" style="position:absolute;..."> ก่อน file input
   เพื่อ track required state — แต่ position:absolute ของมันอาจวาง overlap label
   → กักให้อยู่ใน BSF_AREA ของตัวเอง (force position:relative บน wrapper) */
.modal [id$="_BSF_AREA"],
.bsf-form-wrap [id$="_BSF_AREA"] {
  position: relative;
}

/* hidden tracking input — ซ่อนแน่ๆ ไม่ให้ render padding/border จากกฎ .modal input
   *** ใช้ inline-style position:absolute (จาก PHP) ที่ไม่ระบุ top/left
   → browser ใส่ที่ static position = ใต้ label พอดี
   → ตอน required+empty → Bootstrap :invalid ใส่ padding-right + background-image (red icon)
     ทำให้กล่อง 1×1 ขยายเป็น ~36px กว้าง ดันให้ label/input "จม" ใกล้กันผิดปกติ
   FIX: pin ไปที่ top:0 left:0 ของ _BSF_AREA + override :invalid styling ทุกตัว */
.modal input[id^="wfsfiles-chk-"],
.bsf-form-wrap input[id^="wfsfiles-chk-"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ตอน required+empty (:invalid) ห้าม Bootstrap ใส่ padding-right / icon icon
   (Bootstrap rule :invalid { padding-right:calc(...); background-image:url(...) } */
.modal input[id^="wfsfiles-chk-"]:invalid,
.bsf-form-wrap input[id^="wfsfiles-chk-"]:invalid {
  padding: 0 !important;
  border: 0 !important;
  background-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 1px !important;
}

/* file input — ปรับ padding ให้เข้ากับฟอร์ม */
.modal input[type="file"],
.bsf-form-wrap input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--ieat-ink, #0f172a);
  font-family: 'Prompt', system-ui, sans-serif;
}
/* "Choose File" button styling (browser-native pseudo-element) */
.modal input[type="file"]::file-selector-button,
.bsf-form-wrap input[type="file"]::file-selector-button {
  background: #f1f5f9 !important;
  color: var(--ieat-ink, #0f172a) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.35rem;
  padding: 0.3rem 0.7rem;
  margin-right: 0.7rem;
  font-family: 'Prompt', system-ui, sans-serif;
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modal input[type="file"]::file-selector-button:hover,
.bsf-form-wrap input[type="file"]::file-selector-button:hover {
  background: #e2e8f0 !important;
  color: var(--ieat-ink, #0f172a) !important;
}

/* Dark mode */
[data-theme="dark"] .modal input[type="file"],
[data-theme="dark"] .bsf-form-wrap input[type="file"] {
  background: #221d35 !important;
  border-color: #3a3450 !important;
  color: #e8e6f0 !important;
}
[data-theme="dark"] .modal input[type="file"]::file-selector-button,
[data-theme="dark"] .bsf-form-wrap input[type="file"]::file-selector-button {
  background: #3a3450 !important;
  color: #e8e6f0 !important;
  border-color: #4a4470 !important;
}
[data-theme="dark"] .modal input[type="file"]::file-selector-button:hover,
[data-theme="dark"] .bsf-form-wrap input[type="file"]::file-selector-button:hover {
  background: #4a4470 !important;
  color: #fff !important;
  border-color: #5a5480 !important;
}

/* preview container — กันไม่ให้ overlap field ด้านบน */
.modal [id$="_BSF-PREVIEW"],
.bsf-form-wrap [id$="_BSF-PREVIEW"] {
  margin-top: 0.5rem;
  width: 100%;
}

/* ===== ลบ underline ของ anchor ใน BSF form / modal (ลิงก์ไฟล์ที่อัปแล้ว ฯลฯ) ===== */
.modal a,
.modal a:hover,
.modal a:focus,
.modal a:visited,
.bsf-form-wrap a,
.bsf-form-wrap a:hover,
.bsf-form-wrap a:focus,
.bsf-form-wrap a:visited {
  text-decoration: none !important;
}
.modal [class*="wfs-files-id-"] a:hover,
.bsf-form-wrap [class*="wfs-files-id-"] a:hover {
  opacity: 0.85;
}

/* ===== ปุ่มลบไฟล์ (BSF gen <button class="btn btn-mini btn-link-danger">) ===== */
.modal .btn-link-danger,
.bsf-form-wrap .btn-link-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #b91c1c !important;
  border: none;
  border-radius: 0.35rem;
  padding: 0.25rem 0.5rem !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.modal .btn-link-danger:hover,
.bsf-form-wrap .btn-link-danger:hover {
  background: #ef4444 !important;
  color: #fff !important;
}
[data-theme="dark"] .modal .btn-link-danger,
[data-theme="dark"] .bsf-form-wrap .btn-link-danger {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .modal .btn-link-danger:hover,
[data-theme="dark"] .bsf-form-wrap .btn-link-danger:hover {
  background: #ef4444 !important;
  color: #fff !important;
}

/* ===== Help text ใต้ field (BSF gen <small class="form-text text-muted">) =====
   BSF gen 2 ตัวต่อกัน (เฉพาะนามสกุล + ขนาดไฟล์) — ต้องอยู่บรรทัดเดียวกัน */
.modal small,
.modal .form-text,
.modal .text-muted,
.bsf-form-wrap small,
.bsf-form-wrap .form-text,
.bsf-form-wrap .text-muted {
  font-size: 0.75rem !important;
  color: #64748b !important;
  display: inline !important;
  margin-top: 0 !important;
  padding: 0 !important;
  line-height: 1.5;
}
/* small ตัวที่ 2+ — ใส่ space เผื่อ HTML whitespace ถูก trim */
.bsf-form-wrap small + small,
.modal small + small {
  margin-left: 0.15rem !important;
}
[data-theme="dark"] .modal small,
[data-theme="dark"] .modal .form-text,
[data-theme="dark"] .modal .text-muted,
[data-theme="dark"] .bsf-form-wrap small,
[data-theme="dark"] .bsf-form-wrap .form-text,
[data-theme="dark"] .bsf-form-wrap .text-muted {
  color: #b8b3c9 !important;
}

/* ========== Radio / Checkbox ในโมดัล (เหมือน .bsf-form-wrap) ========== */
.modal .form-check {
  display: inline-block;
  padding-left: 0;
  margin-right: 1.25rem;
  margin-bottom: 0.35rem;
  min-height: auto;
}
.modal .form-check-inline {
  margin-right: 1.25rem;
}
.modal .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 0;
  user-select: none;
  white-space: nowrap;
}
.modal .form-check-input {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0.4rem !important;
  vertical-align: middle;
  width: 1.05rem !important;
  height: 1.05rem !important;
  min-width: 1.05rem;
  min-height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  border: 1.5px solid #cbd5e1;
  background-color: #fff;
  float: none;
  padding: 0 !important;
  border-radius: 50%;
}
.modal input[type="checkbox"].form-check-input {
  border-radius: 0.25em;
}
.modal .form-check-input:checked {
  background-color: var(--ieat-blue, #9268b8);
  border-color: var(--ieat-blue, #9268b8);
}
.modal .form-check-input:focus {
  border-color: var(--ieat-blue, #9268b8);
  box-shadow: 0 0 0 3px rgba(146, 104, 184, 0.18);
}

/* Dark mode */
[data-theme="dark"] .modal .form-check-input {
  background-color: #221d35;
  border-color: #4a4470;
}
[data-theme="dark"] .modal .form-check-input:checked {
  background-color: var(--ieat-blue, #9268b8);
  border-color: var(--ieat-blue, #9268b8);
}
.modal .form-control:focus,
.modal .form-select:focus {
  border-color: var(--ieat-blue, #9268b8);
  box-shadow: 0 0 0 4px rgba(146, 104, 184, 0.1);
  outline: none;
}
.modal .row { --bs-gutter-y: 1rem; --bs-gutter-x: 1.25rem; }

/* wf-space-i — spacer class จาก function_workflow.php ใช้เป็น margin ใต้แต่ละฟิลด์
   และเป็น empty col-md-12 คั่นแถว ต้องมี margin-bottom ติดตัวเสมอ แม้ไม่มี content */
.bsf-form-wrap .wf-space-i,
.modal .wf-space-i {
  margin-bottom: 1.35rem;
}
.bsf-form-wrap .wf-space-i-c,
.modal .wf-space-i-c {
  margin-bottom: 0.2rem;
}

/* autonumber — input ตัวเลข (WFS_INPUT_FORMAT=N/N1-N6) ชิดขวาเหมือน root
   อ้างจาก assets/css/style-bsf.css:208 ของ root */
.bsf-form-wrap input.autonumber,
.modal input.autonumber {
  text-align: right;
  padding-right: 1rem;
}
.modal h5 {
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ieat-navy, #1e3a5f);
  margin: 0 0 1rem;
}
.modal .form-group { margin-bottom: 1rem; }
.modal [id$="_BSF_AREA"] { margin-bottom: 0.75rem; }

/* /public/form_mgt.php ห่อด้วย .card (Bootstrap default มี border + bg ขาว) → ลบทิ้ง */
.modal .card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* /public/form_mgt.php มี .card-body (form fields) + .card-footer (Save button) */
.modal .card-body {
  padding: 0.5rem 0;
}
.modal .card-footer {
  background: transparent;
  border-top: 1px solid #e5e7eb;
  margin: 1rem -1.5rem -1.5rem;
  padding: 1rem 1.5rem;
}
[data-theme="dark"] .modal .card-footer {
  border-top-color: #2a2640;
}

/* ปุ่ม Save ในโมดัล (BSF gen <button class="btn btn-success">) — ขนาด btn-mini */
.modal .card-footer .btn-success,
.modal .btn-sm.btn-success,
.modal form .btn-success[type="submit"] {
  background: var(--ieat-blue, #9268b8);
  border-color: var(--ieat-blue, #9268b8);
  color: #fff;
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.4rem 0.95rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 6px rgba(146, 104, 184, 0.25);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  margin-top: 1.25rem;
}
.modal .card-footer .btn-success:hover,
.modal .btn-sm.btn-success:hover,
.modal form .btn-success[type="submit"]:hover {
  background: #7d57a8;
  border-color: #7d57a8;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(146, 104, 184, 0.35);
}
.modal .card-footer .btn-success i,
.modal .btn-sm.btn-success i,
.modal form .btn-success[type="submit"] i {
  font-size: 0.85rem;
}

/* หัวเรื่องของ /public/form_mgt.php (h5 หรือ headline ในโมดัล) */
.modal .form-mgt-title,
.modal h5.modal-section,
.modal .modal-body > h5:first-child,
.modal .modal-body > h6:first-child {
  font-family: 'Prompt', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ieat-navy, #1e3a5f);
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e5e7eb;
}
[data-theme="dark"] .modal .modal-body > h5:first-child,
[data-theme="dark"] .modal .modal-body > h6:first-child {
  color: #e8e6f0;
  border-bottom-color: #2a2640;
}

/* select2 ในโมดัล */
.modal .select2-container--default .select2-selection--single {
  height: calc(1.5em + 1.25rem + 2px);
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: #fff;
}
.modal .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5em;
  font-family: 'Prompt', system-ui, sans-serif;
  color: var(--ieat-ink, #0f172a);
}

/* ========== Modal — Dark mode ========== */
[data-theme="dark"] .modal-content {
  background: #1a1729;
  color: #e8e6f0;
}
[data-theme="dark"] .modal-header {
  border-bottom-color: #2a2640;
}
[data-theme="dark"] .modal-header .modal-title,
[data-theme="dark"] .modal label,
[data-theme="dark"] .modal .form-label,
[data-theme="dark"] .modal h5 {
  color: #e8e6f0;
}
[data-theme="dark"] .modal-footer {
  border-top-color: #2a2640;
}
[data-theme="dark"] .modal-header .btn-close {
  filter: invert(0.9) hue-rotate(180deg);
}
[data-theme="dark"] .modal .form-control,
[data-theme="dark"] .modal .form-select,
[data-theme="dark"] .modal input:not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal textarea {
  /* input bg ต้อง "อ่อนกว่า" modal bg เพื่อให้เห็นชัด */
  background-color: #2d2843 !important;
  border-color: #4a4470 !important;
  color: #e8e6f0 !important;
}
[data-theme="dark"] .modal .form-control:focus,
[data-theme="dark"] .modal .form-select:focus {
  background-color: #353050 !important;
  border-color: var(--ieat-blue, #9268b8) !important;
  box-shadow: 0 0 0 4px rgba(146, 104, 184, 0.18) !important;
}
[data-theme="dark"] .modal .form-control::placeholder {
  color: #8a85a3 !important;
}
[data-theme="dark"] .modal .select2-container--default .select2-selection--single {
  background: #2d2843 !important;
  border-color: #4a4470 !important;
}
[data-theme="dark"] .modal .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e8e6f0 !important;
}
[data-theme="dark"] .modal .input-group-text {
  background-color: #2d2843 !important;
  border-color: #4a4470 !important;
  color: #b8b3c9 !important;
}

/* Field label (ป้ายชื่อ field — block-level อยู่บนสุด) */
.bsf-form-wrap label,
.bsf-form-wrap .form-label {
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  font-size: 0.825rem;
  margin-bottom: 0.4rem;
}

.bsf-form-wrap .form-label {
  display: block;
  width: 100%;
}

/* required asterisk */
.bsf-form-wrap .text-danger,
.bsf-form-wrap .required-mark {
  color: #dc2626 !important;
}

/* ===== BSF view-mode value display =====
   BSF ห่อค่าด้วย <span class="badge text-start f-14 bg-light-dark">value</span>
   Bootstrap 5 .badge default = color:#fff → ค่าจะมองไม่เห็น ต้อง override */
.bsf-form-wrap .badge.bg-light-dark,
.modal .badge.bg-light-dark,
.bsf-form-wrap span[id$="_VIEW_TEXT"],
.modal span[id$="_VIEW_TEXT"] {
  display: inline-block;
  background: #f3f4f6 !important;
  color: var(--ieat-ink, #0f172a) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  text-align: left;
  white-space: normal;
  font-family: 'Prompt', system-ui, sans-serif;
}
.bsf-form-wrap .f-14,
.modal .f-14 { font-size: 0.9rem !important; }

/* ซ่อน _VIEW_TEXT span ที่ว่างเปล่า (empty) — กันกล่องเทาโผล่ลอยๆ */
.bsf-form-wrap span[id$="_VIEW_TEXT"]:empty,
.modal span[id$="_VIEW_TEXT"]:empty,
.bsf-form-wrap .badge.bg-light-dark:empty,
.modal .badge.bg-light-dark:empty {
  display: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ซ่อน id "" (ไม่มี prefix) ที่ BSF gen เปล่าบางจุด */
.bsf-form-wrap span[id="_VIEW_TEXT"],
.modal span[id="_VIEW_TEXT"] {
  display: none !important;
}

[data-theme="dark"] .bsf-form-wrap .badge.bg-light-dark,
[data-theme="dark"] .modal .badge.bg-light-dark,
[data-theme="dark"] .bsf-form-wrap span[id$="_VIEW_TEXT"],
[data-theme="dark"] .modal span[id$="_VIEW_TEXT"] {
  background: #2d2843 !important;
  color: #e8e6f0 !important;
}
[data-theme="dark"] .bsf-form-wrap span[id$="_VIEW_TEXT"]:empty,
[data-theme="dark"] .modal span[id$="_VIEW_TEXT"]:empty,
[data-theme="dark"] .bsf-form-wrap .badge.bg-light-dark:empty,
[data-theme="dark"] .modal .badge.bg-light-dark:empty {
  display: none !important;
  background: transparent !important;
}

/* ========== Validation invalid state ========== */
.bsf-form-wrap .form-control.is-invalid,
.bsf-form-wrap .form-select.is-invalid,
.bsf-form-wrap input.is-invalid,
.bsf-form-wrap select.is-invalid,
.bsf-form-wrap textarea.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
  background-image: none !important; /* ปิด icon ของ Bootstrap default */
  padding-right: 0.875rem !important;
}

/* select2 wrapper เมื่อ select ข้างหลังเป็น .is-invalid */
.bsf-form-wrap select.is-invalid + .select2-container .select2-selection,
.bsf-form-wrap select.is-invalid + .select2-container--default .select2-selection--single {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Error message ใต้ field */
.bsf-form-wrap .bsf-invalid-feedback {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #dc2626;
  margin-top: 0.35rem;
  font-family: 'Prompt', system-ui, -apple-system, sans-serif;
}

/* Dark mode */
[data-theme="dark"] .bsf-form-wrap .form-control.is-invalid,
[data-theme="dark"] .bsf-form-wrap .form-select.is-invalid,
[data-theme="dark"] .bsf-form-wrap input.is-invalid,
[data-theme="dark"] .bsf-form-wrap select.is-invalid,
[data-theme="dark"] .bsf-form-wrap textarea.is-invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18) !important;
}
[data-theme="dark"] .bsf-form-wrap select.is-invalid + .select2-container .select2-selection,
[data-theme="dark"] .bsf-form-wrap select.is-invalid + .select2-container--default .select2-selection--single {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18) !important;
}
[data-theme="dark"] .bsf-form-wrap .bsf-invalid-feedback {
  color: #fca5a5;
}

/* font ใน input/select/textarea — ใช้ Prompt เหมือนหน้าอื่นของ recruit */
.bsf-form-wrap input,
.bsf-form-wrap select,
.bsf-form-wrap textarea,
.bsf-form-wrap .form-control,
.bsf-form-wrap .form-select {
  font-family: 'Prompt', system-ui, -apple-system, sans-serif;
}
.bsf-form-wrap input::placeholder,
.bsf-form-wrap textarea::placeholder {
  font-family: 'Prompt', system-ui, -apple-system, sans-serif;
}

/* Readonly / disabled — ให้สีต่างจาก input ปกติเพื่อให้ผู้ใช้รู้ว่าแก้ไม่ได้
   ยกเว้น radio/checkbox: คงสีเดิมเพื่อให้เห็นว่า checked อะไรอยู่ */
.bsf-form-wrap input[readonly]:not([type="radio"]):not([type="checkbox"]),
.bsf-form-wrap textarea[readonly],
.bsf-form-wrap select[readonly],
.bsf-form-wrap .form-control[readonly]:not([type="radio"]):not([type="checkbox"]),
.bsf-form-wrap .form-select[readonly],
.bsf-form-wrap input:disabled:not([type="radio"]):not([type="checkbox"]),
.bsf-form-wrap textarea:disabled,
.bsf-form-wrap select:disabled,
.bsf-form-wrap .form-control:disabled:not([type="radio"]):not([type="checkbox"]),
.bsf-form-wrap .form-select:disabled {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
.bsf-form-wrap input[readonly]:not([type="radio"]):not([type="checkbox"]):focus,
.bsf-form-wrap textarea[readonly]:focus,
.bsf-form-wrap select[readonly]:focus,
.bsf-form-wrap .form-control[readonly]:not([type="radio"]):not([type="checkbox"]):focus,
.bsf-form-wrap .form-select[readonly]:focus {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

/* Dark mode */
[data-theme="dark"] .bsf-form-wrap input[readonly]:not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] .bsf-form-wrap textarea[readonly],
[data-theme="dark"] .bsf-form-wrap select[readonly],
[data-theme="dark"] .bsf-form-wrap .form-control[readonly]:not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] .bsf-form-wrap .form-select[readonly],
[data-theme="dark"] .bsf-form-wrap input:disabled:not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] .bsf-form-wrap textarea:disabled,
[data-theme="dark"] .bsf-form-wrap select:disabled,
[data-theme="dark"] .bsf-form-wrap .form-control:disabled:not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] .bsf-form-wrap .form-select:disabled {
  background-color: #2a2440 !important;
  color: #9ca3b8 !important;
  border-color: #3a3450 !important;
}

/* Select2 readonly/disabled — select2 ห่อ <select> ที่ readonly ด้วย .select2-container
   ตัว select เดิมถูกซ่อนไว้ จึงต้อง style ตัว container และบล็อก click ที่นี่ */
.bsf-form-wrap select[readonly] + .select2-container .select2-selection,
.bsf-form-wrap select:disabled + .select2-container .select2-selection {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.bsf-form-wrap select[readonly] + .select2-container .select2-selection__rendered,
.bsf-form-wrap select:disabled + .select2-container .select2-selection__rendered {
  color: #64748b !important;
}
.bsf-form-wrap select[readonly] + .select2-container .select2-selection__arrow,
.bsf-form-wrap select:disabled + .select2-container .select2-selection__arrow {
  opacity: 0.5;
}
.bsf-form-wrap select[readonly] + .select2-container,
.bsf-form-wrap select:disabled + .select2-container {
  pointer-events: none;
}
.bsf-form-wrap select[readonly] + .select2-container .select2-selection__clear,
.bsf-form-wrap select:disabled + .select2-container .select2-selection__clear {
  display: none !important;
}

/* Dark mode */
[data-theme="dark"] .bsf-form-wrap select[readonly] + .select2-container .select2-selection,
[data-theme="dark"] .bsf-form-wrap select:disabled + .select2-container .select2-selection {
  background-color: #2a2440 !important;
  color: #9ca3b8 !important;
  border-color: #3a3450 !important;
}
[data-theme="dark"] .bsf-form-wrap select[readonly] + .select2-container .select2-selection__rendered,
[data-theme="dark"] .bsf-form-wrap select:disabled + .select2-container .select2-selection__rendered {
  color: #9ca3b8 !important;
}

/* Radio/Checkbox readonly — คงสีเดิม ไม่ dim
   block click ด้วย onclick="return false" ที่ฝั่ง PHP แทน (function_workflow.php)
   เหลือแค่ cursor: not-allowed เพื่อสื่อว่ากดไม่ได้ */
.bsf-form-wrap .form-check:has(input[type="radio"][readonly]) .form-check-label,
.bsf-form-wrap .form-check:has(input[type="checkbox"][readonly]) .form-check-label,
.bsf-form-wrap .form-check:has(input[type="radio"]:disabled) .form-check-label,
.bsf-form-wrap .form-check:has(input[type="checkbox"]:disabled) .form-check-label {
  cursor: not-allowed;
}
.bsf-form-wrap input[type="radio"][readonly],
.bsf-form-wrap input[type="checkbox"][readonly] {
  cursor: not-allowed;
}

/* Spacing — เว้นแถว/ฟิลด์ให้หายใจสะดวก */
.bsf-form-wrap .row {
  --bs-gutter-y: 1.5rem;
  --bs-gutter-x: 1.25rem;
}

.bsf-form-wrap .form-group {
  margin-bottom: 1rem;
}

.bsf-form-wrap [id$="_BSF_AREA"] {
  margin-bottom: 0.75rem;
}

/* ============================================================
   FIX: radio container layout + section header spacing
   ============================================================
   Root cause: BSF render radio ผ่าน <span id="WF_RADIO*">
     - span เป็น inline element แต่ใส่ <div.form-check> เป็นลูก (invalid HTML)
     - browser คำนวณ baseline ผิด → label "ผ่านการคัดเลือกแล้ว" ลอย overlay
       h5 ของ row ถัดไป

   Fix: บังคับ span เป็น block + col parent มี overflow visible + section
   header มี margin clear-both ป้องกัน flow ชน
   ============================================================ */

/* 1) Parent col ที่มี radio → height ขยายตาม content ของลูก
   ใช้แค่ display: block ปลดจาก flex row ของ Bootstrap parent
   เพื่อให้ height คำนวณจาก content จริง */
.bsf-form-wrap [id$="_BSF_AREA"]:has(span[id^="WF_RADIO"]),
.modal [id$="_BSF_AREA"]:has(span[id^="WF_RADIO"]),
[id$="_BSF_AREA"]:has(span[id^="WF_RADIO"]) {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* 2) Radio container span → block ธรรมดา */
.bsf-form-wrap span[id^="WF_RADIO"],
.modal span[id^="WF_RADIO"],
span[id^="WF_RADIO"] {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

/* 3) form-check แต่ละตัว → block stack ธรรมดา (ไม่ใช้ flex/absolute) */
.bsf-form-wrap span[id^="WF_RADIO"] > .form-check,
.modal span[id^="WF_RADIO"] > .form-check,
span[id^="WF_RADIO"] > .form-check {
  display: block !important;
  width: 100% !important;
  margin: 0 0 0.45rem 0 !important;
  padding-left: 1.75em !important;
  min-height: 1.5rem !important;
  float: none !important;
  clear: none !important;
}

/* 4) form-check-input → Bootstrap default position (margin-left negative) */
.bsf-form-wrap span[id^="WF_RADIO"] .form-check-input,
.modal span[id^="WF_RADIO"] .form-check-input {
  margin-left: -1.75em !important;
  margin-top: 0.25rem !important;
  float: left !important;
}

/* 5) ROW ที่ห่อ radio col → บังคับให้ขยายตาม content ของลูกทุก col
   align-items: flex-start กัน Bootstrap stretch ทำ col-md-3 ใหญ่ผิด
   แต่ row height ต้องยังคำนวณจาก radio col ที่สูง */
.bsf-form-wrap .row:has([id$="_BSF_AREA"] span[id^="WF_RADIO"]),
.modal-body .row:has([id$="_BSF_AREA"] span[id^="WF_RADIO"]) {
  align-items: flex-start !important;
  min-height: auto !important;
  height: auto !important;
}

/* ============================================================
   Section header WRAPPER — ต้องชดเชย margin-top: -24px ของ .row
   (Bootstrap row มี margin-top: calc(-1 * var(--bs-gutter-y)) = -24px
    cols ปกติได้ padding-top: var(--bs-gutter-y) = 24px ชดเชย
    แต่ wrapper [id^="bsf_area_g_"] ไม่ได้ → row ดึงขึ้นทับ row ก่อนหน้า)
   ============================================================ */
.bsf-form-wrap .row > [id^="bsf_area_g_"],
.modal-body .row > [id^="bsf_area_g_"] {
  /* padding-top = gutter-y (1.5rem) ชดเชย -24px + extra 1rem เพิ่มพื้นที่หายใจ */
  padding-top: calc(var(--bs-gutter-y, 1.5rem) + 1rem) !important;
  width: 100% !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}

/* ============================================================
   Section header (h5 ใน bsf_area_g) — เว้นห่างชัดเจน
   margin-top: 1.5rem  เว้นจาก section ก่อนหน้า (ไม่เยอะเกิน)
   margin-bottom: 1.75rem  เว้นจาก content ถัดไป (border ไม่ติด label)
   ============================================================ */
.bsf-form-wrap [id^="bsf_area_g_"] > h5,
.modal-body [id^="bsf_area_g_"] > h5,
[id^="bsf_area_g_"] > h5 {
  display: block !important;
  width: 100% !important;
  font-family: 'Prompt', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--ieat-navy, #1e3a5f) !important;
  margin: 1.5rem 0 1.75rem 0 !important;
  padding: 0 0 0.4rem 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  line-height: 1.4 !important;
  clear: both !important;
  position: relative !important;
  background: transparent !important;
}

/* บังคับ content แรกหลัง h5 ให้มี clear+space ป้องกัน overlap (nested case) */
.bsf-form-wrap [id^="bsf_area_g_"] > h5 + *,
.modal-body [id^="bsf_area_g_"] > h5 + *,
[id^="bsf_area_g_"] > h5 + * {
  clear: both !important;
  margin-top: 0 !important;
}

/* empty label.form-label (BSF gen ไว้แต่ไม่มี text) → squash ทิ้ง */
.bsf-form-wrap .form-label:empty,
.modal .form-label:empty,
label.form-label:empty {
  display: none !important;
}

[data-theme="dark"] .bsf-form-wrap [id^="bsf_area_g_"] > h5,
[data-theme="dark"] .modal-body [id^="bsf_area_g_"] > h5,
[data-theme="dark"] [id^="bsf_area_g_"] > h5 {
  color: #e8e6f0 !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* ===== Radio / Checkbox (form-check) — ให้ดูเหมือน BSF backend ===== */
.bsf-form-wrap .form-check {
  display: inline-block;
  padding-left: 0;
  margin-right: 1.25rem;
  margin-bottom: 0.35rem;
  min-height: auto;
}

.bsf-form-wrap .form-check-inline {
  margin-right: 1.25rem;
}

/* input radio/checkbox + text label ที่อยู่ในตัว label เดียวกัน */
.bsf-form-wrap .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 0;
  user-select: none;
}

.bsf-form-wrap .form-check-input {
  float: none;
  margin-left: 0;
  margin-right: 0.4rem;
  vertical-align: middle;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  border: 1.5px solid #cbd5e1;
  background-color: #fff;
  float: none;
}

.bsf-form-wrap .form-check-input:checked {
  background-color: var(--ieat-blue, #9268b8);
  border-color: var(--ieat-blue, #9268b8);
}

.bsf-form-wrap .form-check-input:focus {
  border-color: var(--ieat-blue, #9268b8);
  box-shadow: 0 0 0 3px rgba(146, 104, 184, 0.18);
}

/* Dark mode radio/checkbox */
[data-theme="dark"] .bsf-form-wrap .form-check-input {
  background-color: #221d35;
  border-color: #4a4470;
}

[data-theme="dark"] .bsf-form-wrap .form-check-input:checked {
  background-color: var(--ieat-blue, #9268b8);
  border-color: var(--ieat-blue, #9268b8);
}

[data-theme="dark"] .bsf-form-wrap .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(146, 104, 184, 0.28);
}

/* Input-group (BSF wraps date in input-group label) */
/* BSF ใช้ <label class="input-group"> ครอบ input + <span class="input-group-text"> icon
   default <label> เป็น inline → input-group ไม่ขยายเต็มช่อง ต้อง enforce flex
   ต้อง override .step-form .form-control (ieat-theme.css) ที่ set border-radius ทุกมุม
   *** scope แคบ ใช้กับ label.input-group เท่านั้น ไม่ครอบ div.input-group
   (BSF generate <div class="input-group input-group-sm"> ตอน field มี
   WFS_TXT_BEFORE_INPUT/AFTER_INPUT — ห้ามแตะ ปล่อยใช้ Bootstrap default) */
.bsf-form-wrap label.input-group,
.step-form label.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  position: relative !important;
  margin-bottom: 0 !important;
}
.bsf-form-wrap label.input-group > input,
.bsf-form-wrap label.input-group > .datepicker,
.step-form label.input-group > input,
.step-form label.input-group > .datepicker {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}

.bsf-form-wrap label.input-group > .input-group-text,
.step-form label.input-group > .input-group-text {
  border-radius: 0 0.5rem 0.5rem 0 !important;
  border: 1px solid #e5e7eb;
  background-color: #f8fafc;
  color: var(--ieat-slate, #64748b);
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  margin-left: 0 !important;
}

/* Dark mode — ปุ่ม calendar กลมกลืนกับ input
   ⚠️ ต้องใส่ !important / match specificity ของ rule light (label.input-group > .input-group-text)
   ไม่งั้น light bg #f8fafc จะชนะแล้วเห็นเป็นปุ่มขาวในโหมด dark */
[data-theme="dark"] .bsf-form-wrap label.input-group > .input-group-text,
[data-theme="dark"] .step-form label.input-group > .input-group-text,
[data-theme="dark"] .bsf-form-wrap .input-group-text,
[data-theme="dark"] .step-form .input-group-text {
  background-color: #221d35 !important;
  border-color: #2a2640 !important;
  color: #b8b3c9 !important;
}

[data-theme="dark"] .bsf-form-wrap .input-group-text i,
[data-theme="dark"] .bsf-form-wrap .input-group-text svg,
[data-theme="dark"] .step-form .input-group-text i,
[data-theme="dark"] .step-form .input-group-text svg {
  color: #b8b3c9 !important;
}

/* ===== Select2 (light) ===== */
.bsf-form-wrap .select2-container--default .select2-selection--single {
  height: calc(1.5em + 1.25rem + 2px);
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: #fff;
}

.bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5em;
  padding-left: 0.35rem;
  font-size: 0.9375rem;
  font-family: 'Prompt', system-ui, -apple-system, sans-serif;
  color: var(--ieat-ink, #0f172a);
}

/* select2 dropdown panel — DOM อยู่นอก wrap จึง target ระดับ root */
.select2-dropdown,
.select2-results__option,
.select2-search--dropdown .select2-search__field {
  font-family: 'Prompt', system-ui, -apple-system, sans-serif;
}

.bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

.bsf-form-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.bsf-form-wrap .select2-container--open .select2-selection--single {
  border-color: var(--ieat-blue, #9268b8);
  box-shadow: 0 0 0 4px rgba(146, 104, 184, 0.1);
}

/* select2 clear button (X) */
.bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__clear {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ieat-slate, #94a3b8);
  margin-right: 0.4rem;
  padding: 0 0.25rem;
  cursor: pointer;
  transition: color 0.15s;
}
.bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #dc2626;
}

/* ===== Select2 (dark mode) ===== */
[data-theme="dark"] .bsf-form-wrap .select2-container--default .select2-selection--single {
  background: #221d35 !important;
  border-color: #2a2640 !important;
}

[data-theme="dark"] .bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__clear {
  color: #b8b3c9;
}
[data-theme="dark"] .bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #f87171;
}

[data-theme="dark"] .bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e8e6f0 !important;
}

[data-theme="dark"] .bsf-form-wrap .select2-container--default .select2-selection__placeholder {
  color: #7a7595 !important;
}

[data-theme="dark"] .bsf-form-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #7a7595 transparent transparent transparent;
}

/* Select2 dropdown panel (dark) — DOM อยู่นอก wrap จึง target ระดับ root */
[data-theme="dark"] .select2-dropdown {
  background: #221d35;
  border-color: #2a2640;
  color: #e8e6f0;
}

[data-theme="dark"] .select2-results__option {
  color: #e8e6f0;
}

[data-theme="dark"] .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(146, 104, 184, 0.25);
  color: #fff;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field,
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: #1a1729 !important;
  color: #e8e6f0 !important;
  border: 1px solid #2a2640 !important;
  border-radius: 0.4rem;
  padding: 0.4rem 0.6rem;
  outline: none;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--ieat-orange, #f39c12) !important;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.15);
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field::placeholder {
  color: #7a7595;
}

/* select2 results list pane (เผื่อพื้นด้านล่าง search field ยังขาว) */
[data-theme="dark"] .select2-results,
[data-theme="dark"] .select2-results__options {
  background: #221d35;
  color: #e8e6f0;
}

[data-theme="dark"] .select2-results__option[aria-selected="true"],
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-theme="dark"] .select2-container--default .select2-results__option--selected,
[data-theme="dark"] li.select2-results__option[aria-selected="true"] {
  background: #2c2740 !important;
  color: #c9a4e4 !important;
  font-weight: 500;
}

[data-theme="dark"] .select2-results__option[aria-disabled="true"],
[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"] {
  color: #6b6585;
}

/* ===== Datepicker popup (dark) — DOM อยู่นอก wrap ===== */
[data-theme="dark"] .datepicker.datepicker-dropdown {
  background: #221d35;
  border-color: #2a2640;
  color: #e8e6f0;
}

[data-theme="dark"] .datepicker.datepicker-dropdown.dropdown-menu {
  background: #221d35;
  min-width: auto !important;       /* Remove min-width constraint */
  width: auto !important;           /* Let width adjust to content */
  padding: 0 !important;            /* Remove any padding that creates gaps */
}

[data-theme="dark"] .datepicker table tr td,
[data-theme="dark"] .datepicker table tr th {
  color: #e8e6f0;
}

[data-theme="dark"] .datepicker table tr td.day:hover,
[data-theme="dark"] .datepicker table tr td.focused {
  background: rgba(146, 104, 184, 0.25);
}

[data-theme="dark"] .datepicker table tr td.active,
[data-theme="dark"] .datepicker table tr td.active:hover {
  background: var(--ieat-blue, #9268b8);
  color: #fff;
}

[data-theme="dark"] .datepicker table tr td.day.disabled,
[data-theme="dark"] .datepicker table tr td.old,
[data-theme="dark"] .datepicker table tr td.new {
  color: #5a5670;
}

/* ===== Datepicker dropdown — remove right-side whitespace ===== */
.datepicker.dropdown-menu,
.datepicker.datepicker-dropdown {
  min-width: auto !important;
  max-width: fit-content !important;
  width: fit-content !important;
  padding: 0 !important;
}

/* ปล่อยให้ bootstrap-datepicker คุม width ตาราง (auto + cell 30px) ห้าม width:100% ไม่งั้น dropdown บานเต็มจอ */
.datepicker table {
  width: auto;
  border-collapse: collapse;
  margin: 0;
}

.datepicker table tr td,
.datepicker table tr th {
  box-sizing: border-box;
}

/* Tabs (กรณี BSF generate FIELD_G_ID groups) */
.bsf-form-wrap .nav-tabs {
  border: none;
  border-bottom: 2px solid var(--bs-border-color, #e5e7eb);
  margin-bottom: 1rem;
}

.bsf-form-wrap .nav-tabs .nav-link {
  border: none;
  color: var(--ieat-slate, #64748b);
  font-family: 'Prompt', sans-serif;
  font-weight: 500;
  padding: 0.6rem 1rem;
}

.bsf-form-wrap .nav-tabs .nav-link.active {
  color: var(--ieat-blue, #9268b8);
  background: transparent;
  border-bottom: 2px solid var(--ieat-blue, #9268b8);
  margin-bottom: -2px;
}

[data-theme="dark"] .bsf-form-wrap .nav-tabs {
  border-bottom-color: #2a2640;
}