/* ใช้เฉพาะเมื่อ body หรือ html มี class dark-mode */

body {
  font-family: 'Noto Sans Thai', sans-serif !important;
}

body.dark-mode, html.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* Navbar */
body.dark-mode .navbar {
  background-color: #1e1e1e !important;
}
body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .btn {
  color: #e0e0e0 !important;
}
body.dark-mode .navbar .btn-outline-light {
  color: #e0e0e0;
  border-color: #e0e0e0;
}
body.dark-mode .navbar .btn-outline-light:hover {
  background-color: #e0e0e0;
  color: #121212;
}

/* Card / Container */
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #333;
}

/* Table */
body.dark-mode table {
  color: #e0e0e0;
}
body.dark-mode .table thead {
  background-color: #2a2a2a;
  color: #ffffff;
}
body.dark-mode .table-hover tbody tr:hover {
  background-color: #2c2c2c;
}

/* Modal */
body.dark-mode .modal-content {
  background-color: #1f1f1f;
  color: #e0e0e0;
}
body.dark-mode .modal-header {
  border-bottom: 1px solid #444;
}
body.dark-mode .modal-body {
  color: #e0e0e0;
}

/* Dropdown / Autocomplete */
body.dark-mode .position-absolute.bg-white {
  background-color: #2a2a2a !important;
  color: #e0e0e0;
  border-color: #444 !important;
}
body.dark-mode .position-absolute.bg-white div:hover {
  background-color: #3a3a3a !important;
}

/* Input Placeholder */
body.dark-mode ::placeholder {
  color: #bbb;
  opacity: 0.7;
}

/* Alert / Feedback */
body.dark-mode .alert-warning {
  background-color: #4d3a00;
  border-color: #806000;
  color: #fff4d2;
}

/* Pagination */
body.dark-mode .page-link {
  background-color: #1e1e1e;
  color: #ccc;
  border-color: #444;
}
body.dark-mode .page-item.active .page-link {
  background-color: #ffffff;
  color: #121212;
  border-color: #ffffff;
}

/* Buttons (custom enhancements) */
body.dark-mode .btn-outline-primary {
  color: #90caf9;
  border-color: #90caf9;
}
body.dark-mode .btn-outline-primary:hover {
  background-color: #90caf9;
  color: #121212;
}

body.dark-mode .btn-outline-danger {
  color: #ef9a9a;
  border-color: #ef9a9a;
}
body.dark-mode .btn-outline-danger:hover {
  background-color: #ef9a9a;
  color: #121212;
}

/* Session Timeout Modal */
body.dark-mode #timeoutModal .modal-content {
  background-color: #2c2c2c;
  color: #fff;
}
body.dark-mode #timeoutModal .modal-header {
  background-color: #ffa000;
  color: #000;
}
/* สำหรับกล่องที่มี background สว่างใน dark mode */
.bg-light-subtle {
  color: #000 !important;
}

/* เพิ่มความชัดเจนให้ข้อความย่อยในกล่อง */
.bg-light-subtle p {
  color: #000 !important;
}