/* Dark Mode CSS */
:root {
  --bg-color: #f8f8fb;
  --text-color: #8492a6;
  --card-bg: #fff;
  --navbar-bg: #fff;
  --border-color: #eff2f7;
  --input-bg: #fff;
  --input-border: #e0e6ed;
  --btn-primary-bg: #007bff;
  --btn-primary-border: #007bff;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --card-bg: #2d2d2d;
  --navbar-bg: #2d2d2d;
  --border-color: #404040;
  --input-bg: #3a3a3a;
  --input-border: #555;
  --btn-primary-bg: #0d6efd;
  --btn-primary-border: #0d6efd;
}

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar */
.navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border-color);
}

.navbar-brand, .nav-link {
  color: var(--text-color) !important;
}

/* Cards */
.card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Forms */
.form-control {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-color) !important;
}

.form-control:focus {
  background-color: var(--input-bg) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--text-color) !important;
}

/* Tables */
.table {
  color: var(--text-color) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

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

/* Buttons */
.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  color: var(--text-color) !important;
}

.dark-mode-toggle:hover {
  background-color: rgba(0,0,0,0.1);
}

[data-theme="dark"] .dark-mode-toggle:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Modals */
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.modal-header {
  border-bottom-color: var(--border-color) !important;
}

.modal-footer {
  border-top-color: var(--border-color) !important;
}

/* Alerts */
.alert {
  border-color: var(--border-color) !important;
}

/* Smooth transitions for all elements */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}