:root {
  color-scheme: light;
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-border-color: #e0e0e0;
  --bs-secondary-bg: #f8f9fa;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    color-scheme: dark;
    --bs-body-bg: #121212;
    --bs-body-color: #e8e8e8;
    --bs-border-color: #333333;
    --bs-secondary-bg: #1e1e1e;
  }
}

:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: #121212;
  --bs-body-color: #e8e8e8;
  --bs-border-color: #333333;
  --bs-secondary-bg: #1e1e1e;
}

:root[data-bs-theme="light"] {
  color-scheme: light;
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-border-color: #e0e0e0;
  --bs-secondary-bg: #f8f9fa;
}

/* Light mode navbar */
.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.navbar .btn-link,
.navbar .navbar-brand {
  color: #212529 !important;
}

.navbar .btn-link:hover {
  color: #0d6efd !important;
}

/* Dark mode for navbar */
[data-bs-theme="dark"] .navbar {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #333333;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .navbar .btn-link,
[data-bs-theme="dark"] .navbar .navbar-brand {
  color: #e8e8e8 !important;
}

[data-bs-theme="dark"] .navbar .btn-link:hover {
  color: #64b5f6 !important;
}

/* Light mode dropdowns */
.dropdown-menu {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dropdown-item {
  color: #212529;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f8f9fa;
  color: #0d6efd;
}

.dropdown-divider {
  border-color: #e0e0e0;
}

.dropdown-header {
  color: #6c757d;
  font-size: 0.85rem;
}

/* Dark mode for dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #2a2a2a;
  border-color: #333333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .dropdown-item {
  color: #e8e8e8;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #363636;
  color: #64b5f6;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: #333333;
}

[data-bs-theme="dark"] .dropdown-header {
  color: #999999;
}

/* Light mode cards and panels */
.card {
  background-color: #ffffff;
  border-color: #e0e0e0;
  color: #212529;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.list-group-item {
  background-color: #ffffff;
  border-color: #e0e0e0;
  color: #212529;
}

.modal-content {
  background-color: #ffffff;
  color: #212529;
  border-color: #e0e0e0;
}

.form-control,
.form-select {
  background-color: #ffffff;
  border-color: #e0e0e0;
  color: #212529;
}

.form-control:focus,
.form-select:focus {
  background-color: #ffffff;
  border-color: #0d6efd;
  color: #212529;
}

.table {
  color: #212529;
  border-color: #e0e0e0;
}

.badge {
  background-color: #e0e0e0;
  color: #212529;
}

/* Dark mode for cards and panels */
[data-bs-theme="dark"] .card {
  background-color: #252525;
  border-color: #333333;
  color: #e8e8e8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: #252525;
  border-color: #333333;
  color: #e8e8e8;
}

[data-bs-theme="dark"] .modal-content {
  background-color: #252525;
  color: #e8e8e8;
  border-color: #333333;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #1e1e1e;
  border-color: #333333;
  color: #e8e8e8;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #1e1e1e;
  border-color: #0d6efd;
  color: #e8e8e8;
}

[data-bs-theme="dark"] .table {
  color: #e8e8e8;
  border-color: #333333;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

[data-bs-theme="dark"] .badge {
  background-color: #3a3a3a;
  color: #e8e8e8;
}

/* Checklist item rows: khung border riêng cho từng row, tách biệt nhau */
.checklist-item-row {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.checklist-item-row + .checklist-item-row {
  border-top-width: 1px;
  margin-top: 0;
}
.checklist-item-row:last-child {
  margin-bottom: 0;
}

/* Light mode buttons */
.btn {
  transition: all 0.2s;
}

.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
}

.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-primary:hover {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #ffffff;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #ffffff;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #ffffff;
}

/* Dark mode buttons */
[data-bs-theme="dark"] .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

[data-bs-theme="dark"] .btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: #64b5f6;
  border-color: #64b5f6;
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
  background-color: #64b5f6;
  border-color: #64b5f6;
  color: #121212;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: #adb5bd;
  border-color: #adb5bd;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #adb5bd;
  border-color: #adb5bd;
  color: #121212;
}

[data-bs-theme="dark"] .btn-outline-danger {
  color: #f8787b;
  border-color: #f8787b;
}

[data-bs-theme="dark"] .btn-outline-danger:hover {
  background-color: #f8787b;
  border-color: #f8787b;
  color: #121212;
}

[data-bs-theme="dark"] .btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

[data-bs-theme="dark"] .btn-outline-warning:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #121212;
}

[data-bs-theme="dark"] .btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

[data-bs-theme="dark"] .btn-outline-light:hover {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  color: #121212;
}

/* Nav tabs styling */
.nav-tabs {
  border-bottom-color: #e0e0e0;
}

.nav-tabs .nav-link {
  color: #6c757d;
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  border-color: #e0e0e0;
  color: #212529;
}

.nav-tabs .nav-link.active {
  background-color: transparent;
  border-color: #dee2e6 #dee2e6 #ffffff;
  color: #212529;
}

[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: #333333;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: #999999;
  border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: #333333;
  color: #e8e8e8;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: transparent;
  border-color: #333333 #333333 #121212;
  color: #e8e8e8;
}

/* Text styling for dark mode */
[data-bs-theme="dark"] .text-muted {
  color: #999999 !important;
}

[data-bs-theme="dark"] .text-secondary {
  color: #adb5bd !important;
}

/* Notification dropdown styling */
#notificationDropdown {
  width: 380px;
  max-width: 95vw;
  min-width: 280px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

[data-bs-theme="dark"] #notificationDropdown {
  background-color: #252525;
  border-color: #333333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.notification-item {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dee2e6;
  color: #212529 !important;
}

.notification-item:hover {
  background-color: #f8f9fa !important;
}

[data-bs-theme="dark"] .notification-item {
  background-color: #1e1e1e !important;
  border-bottom-color: #333333;
  color: #e8e8e8 !important;
}

[data-bs-theme="dark"] .notification-item:hover {
  background-color: #252525 !important;
}

[data-bs-theme="dark"] .notification-item.bg-white,
[data-bs-theme="dark"] .notification-item.bg-light {
  background-color: #1e1e1e !important;
  color: #e8e8e8 !important;
}

#notificationsList {
  max-height: 350px;
  overflow-y: auto;
}

#notificationBadge {
  left: 85% !important;
  top: 5px !important;
}

/* Navbar menu styling - consistent across all pages */
.navbar-menu {
  gap: 1rem;
}

.navbar-menu button {
  font-size: 0.9rem;
}

/* Smooth transitions to prevent harsh flashes */
* {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Links in dark mode - no harsh flash */
[data-bs-theme="dark"] a {
  color: #64b5f6;
  text-decoration: none;
}

[data-bs-theme="dark"] a:hover {
  color: #90caf9;
}

[data-bs-theme="dark"] a:active,
[data-bs-theme="dark"] a:focus {
  color: #64b5f6;
  outline: none;
}

/* Prevent Bootstrap's active state flash */
[data-bs-theme="dark"] .btn:active,
[data-bs-theme="dark"] .btn:focus {
  box-shadow: none;
}

[data-bs-theme="dark"] .dropdown-item:active {
  background-color: #363636;
  color: #e8e8e8;
}

/* Mobile responsive */
@media (max-width: 576px) {
  .navbar-menu {
    gap: 0.5rem;
  }

  .navbar-menu button {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem !important;
  }

  #notificationDropdown {
    position: fixed !important;
    top: 55px !important;
    left: 2.5vw !important;
    right: 2.5vw !important;
    width: auto !important;
    margin: 0 !important;
  }
}