/* Dark mode styles */
:root {
  --bs-body-bg: #121212;
  --bs-body-color: #e0e0e0;
  --bs-card-bg: #1e1e1e;
  --bs-card-border-color: #333;
  --bs-navbar-bg: #1e1e1e;
  --bs-navbar-color: #e0e0e0;
  --bs-btn-bg: #333;
  --bs-btn-color: #e0e0e0;
  --bs-btn-border-color: #444;
  --bs-input-bg: #2a2a2a;
  --bs-input-color: #e0e0e0;
  --bs-input-border-color: #444;
  --bs-table-bg: #1e1e1e;
  --bs-table-color: #e0e0e0;
  --bs-table-border-color: #333;
  --bs-link-color: #64b5f6;
  --bs-link-hover-color: #90caf9;
  --bs-dropdown-bg: #1e1e1e;
  --bs-dropdown-color: #e0e0e0;
  --bs-dropdown-border-color: #333;
  --bs-modal-bg: #1e1e1e;
  --bs-modal-color: #e0e0e0;
  --bs-toast-bg: #1e1e1e;
  --bs-toast-color: #e0e0e0;
  --bs-alert-bg: #2a2a2a;
  --bs-alert-color: #e0e0e0;
  --bs-text-muted: #a0a0a0;
}

/* Apply dark theme to html element and all children */
[data-theme="dark"] {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-theme="dark"] * {
  color: inherit;
}

/* Specific component overrides */
[data-theme="dark"] .card {
  background-color: var(--bs-card-bg) !important;
  border-color: var(--bs-card-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-theme="dark"] .navbar {
  background-color: var(--bs-navbar-bg) !important;
  color: var(--bs-navbar-color) !important;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-nav .nav-link {
  color: var(--bs-navbar-color) !important;
}

[data-theme="dark"] .btn {
  background-color: var(--bs-btn-bg) !important;
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

[data-theme="dark"] .btn:hover {
  background-color: #444 !important;
  color: var(--bs-btn-color) !important;
}

[data-theme="dark"] .form-control {
  background-color: var(--bs-input-bg) !important;
  color: var(--bs-input-color) !important;
  border-color: var(--bs-input-border-color) !important;
}

[data-theme="dark"] .table {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

[data-theme="dark"] a {
  color: var(--bs-link-color) !important;
}

[data-theme="dark"] a:hover {
  color: var(--bs-link-hover-color) !important;
}

/* Dropdown styles */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bs-dropdown-bg) !important;
  border-color: var(--bs-dropdown-border-color) !important;
  color: var(--bs-dropdown-color) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--bs-dropdown-color) !important;
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: #333 !important;
  color: var(--bs-dropdown-color) !important;
}

/* Modal styles */
[data-theme="dark"] .modal-content {
  background-color: var(--bs-modal-bg) !important;
  color: var(--bs-modal-color) !important;
  border-color: var(--bs-dropdown-border-color) !important;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--bs-dropdown-border-color) !important;
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--bs-dropdown-border-color) !important;
}

/* Toast styles */
[data-theme="dark"] .toast {
  background-color: var(--bs-toast-bg) !important;
  color: var(--bs-toast-color) !important;
}

[data-theme="dark"] .toast-header {
  background-color: var(--bs-toast-bg) !important;
  color: var(--bs-toast-color) !important;
  border-bottom-color: var(--bs-dropdown-border-color) !important;
}

/* Alert styles */
[data-theme="dark"] .alert {
  background-color: var(--bs-alert-bg) !important;
  color: var(--bs-alert-color) !important;
  border-color: var(--bs-dropdown-border-color) !important;
}

[data-theme="dark"] .alert-info {
  background-color: #1a3a4a !important;
  color: #b3d9ff !important;
  border-color: #2a5a6a !important;
}

[data-theme="dark"] .alert-danger {
  background-color: #4a1a1a !important;
  color: #ffb3b3 !important;
  border-color: #6a2a2a !important;
}

[data-theme="dark"] .alert-success {
  background-color: #1a4a1a !important;
  color: #b3ffb3 !important;
  border-color: #2a6a2a !important;
}

[data-theme="dark"] .alert-warning {
  background-color: #4a3a1a !important;
  color: #fff2b3 !important;
  border-color: #6a5a2a !important;
}

/* Text utilities */
[data-theme="dark"] .text-muted {
  color: var(--bs-text-muted) !important;
}

/* Container and layout */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Theme toggle button */
[data-theme="dark"] .theme-toggle {
  background-color: var(--bs-btn-bg) !important;
  color: var(--bs-btn-color) !important;
  border-color: var(--bs-btn-border-color) !important;
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: #444 !important;
  color: var(--bs-btn-color) !important;
}