/* =====================================================
   Modern Clean UI Override
   วางไว้ท้ายไฟล์ CSS เดิม
   ไม่เน้นเปลี่ยน padding เดิม แต่ปรับหน้าตาให้สะอาดขึ้น
===================================================== */

:root {
  --ui-primary: #2563eb;
  --ui-primary-soft: #eff6ff;
  --ui-success: #16a34a;
  --ui-danger: #dc2626;
  --ui-warning: #f59e0b;

  --ui-text: #1e293b;
  --ui-muted: #64748b;
  --ui-border: #e2e8f0;
  --ui-border-soft: #edf2f7;
  --ui-bg: #f8fafc;
  --ui-input: #f8fafc;
  --ui-white: #ffffff;

  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Base */
body {
  font-family: 'Sarabun', sans-serif;
  background: var(--ui-bg);
  color: var(--ui-text);
}

a {
  color: var(--ui-primary);
  text-decoration: none;
}

a:hover {
  color: #1d4ed8;
  text-decoration: none;
}

/* Card / Box */
.card,
.box {
  background: var(--ui-white);
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow);
}

.card-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important;
}

.card-title {
  color: var(--ui-text);
  font-weight: 600 !important;
}

/* Labels */
label,
b {
  color: #475569;
  font-weight: 500 !important;
}

/* Inputs */
.form-control {
  background-color: var(--ui-input) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #f1f5f9 !important;
  color: #64748b;
  border-color: #e2e8f0 !important;
}

/* Error */
.has-error input,
.has-error .form-control,
.has-feedback.has-error > span.select2 {
  border-color: var(--ui-danger) !important;
}

.has-error input:focus,
.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}

.has-error .smk-error-msg,
.form-group.has-error .help-block {
  color: var(--ui-danger) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--ui-input) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  background-color: transparent !important;
  color: var(--ui-text);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--ui-primary-soft) !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  border-radius: 999px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ui-primary) !important;
  color: #ffffff !important;
}

/* Buttons */
.btn {
  border-radius: var(--ui-radius) !important;
  font-weight: 600 !important;
  transition: all .18s ease;
}

.btn-primary {
  background-color: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24);
}

.btn-outline-primary {
  color: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
}

.btn-outline-primary:hover {
  color: #ffffff !important;
  background-color: var(--ui-primary) !important;
}

/* Header / Navbar */
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
.skin-blue .main-header li.user-header {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Sidebar */
[class*=sidebar-dark-] {
  background-color: #ffffff !important;
  border-right: 1px solid var(--ui-border-soft);
}

[class*=sidebar-dark-] .sidebar a {
  color: #334155 !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  border-radius: var(--ui-radius) !important;
  font-weight: 700 !important;
}

[class*=sidebar-dark-] .nav-sidebar > .nav-item:hover > .nav-link {
  background-color: #f1f5f9 !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius) !important;
}

/* List group */
.list-group-item {
  border-color: var(--ui-border-soft) !important;
  background-color: #ffffff !important;
}

.list-group-item b {
  color: var(--ui-muted);
}

.float-right {
  color: var(--ui-text);
  font-weight: 700 !important;
}

/* DataTables */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0;
  background: #ffffff;
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
}

table.dataTable thead th,
table.dataTable thead td {
  background-color: #f8fafc !important;
  color: #334155 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  font-weight: 700 !important;
}

table.dataTable tbody td {
  color: #334155;
  border-bottom: 1px solid var(--ui-border-soft);
}

table.dataTable tbody tr:hover {
  background-color: #f8fbff !important;
}

table.dataTable tbody tr.active {
  background-color: #dbeafe !important;
  color: #1e3a8a;
}

table.dataTable.no-footer {
  border-bottom: 1px solid var(--ui-border) !important;
}

/* DataTables Search */
.dataTables_wrapper .dataTables_filter input {
  background-color: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text);
  transition: all .18s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none;
}

/* DataTables Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  border-color: #bfdbfe !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ui-primary) !important;
  color: #ffffff !important;
  border-color: var(--ui-primary) !important;
}

/* Nav Pills / Tabs */
.nav-pills .nav-link {
  border-radius: var(--ui-radius) !important;
  color: #475569;
  font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ui-primary) !important;
  color: #ffffff !important;
}

/* Modal / Footer */
.modal-footer,
.main-footer {
  background: #ffffff;
  border-top: 1px solid var(--ui-border-soft);
}

/* Image */
.img-thumbnail,
.img-profile {
  border-color: var(--ui-border) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* SweetAlert */
.swal2-popup {
  border-radius: 16px !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--ui-primary) !important;
  border-radius: var(--ui-radius) !important;
}

.swal2-styled.swal2-cancel {
  background-color: #64748b !important;
  border-radius: var(--ui-radius) !important;
}

/* Loading */
.loading {
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(3px);
}

/* Utility color */
.text-info {
  color: var(--ui-primary) !important;
}

.text-green {
  color: var(--ui-success) !important;
}

.text-red {
  color: var(--ui-danger) !important;
}

.text-yellow {
  color: var(--ui-warning) !important;
}

/* Special controls */
.ref-control {
  background-color: #fed7aa !important;
  color: #7c2d12 !important;
}

.policy-control {
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
}

.sumery-point-box,
.tot_sem_stdloan {
  border-color: var(--ui-border) !important;
  background-color: #f8fafc !important;
  color: var(--ui-text) !important;
  border-radius: var(--ui-radius-lg) !important;
}