/* Dark Mode Overrides */
body.dark-mode {
  background-color: var(--dark-bg);
  color: #e0e0e0;
}

body.dark-mode .navbar {
  background-color: #1f1f1f !important;
  border-bottom: 1px solid #333;
}
body.dark-mode .navbar-brand {
  color: #fff !important;
}
body.dark-mode .nav-link, body.dark-mode .dropdown-item {
  color: #fff !important;
}
body.dark-mode .nav-link:hover, body.dark-mode .dropdown-item:hover {
  color: var(--primary-color) !important;
  background-color: transparent;
}
body.dark-mode .dropdown-menu {
  background-color: #1f1f1f;
  border: 1px solid #333;
}

body.dark-mode .card {
  background-color: #1f1f1f;
  border: 1px solid #333;
  color: #e0e0e0;
}
body.dark-mode .card-title, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #fff;
}
body.dark-mode .bg-light {
  background-color: #1a1a1a !important;
}
body.dark-mode .text-dark {
  color: #fff !important;
}
body.dark-mode .text-muted {
  color: #aaa !important;
}

/* Dashboard Specific Overrides */
body.dark-mode .bg-white {
  background-color: #1f1f1f !important;
  color: #e0e0e0;
}

body.dark-mode .table {
  color: #e0e0e0;
}

body.dark-mode .table-light th,
body.dark-mode .table-light td {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444;
}

body.dark-mode .table-hover tbody tr:hover td {
  background-color: #2c2c2c !important;
  color: #fff;
}

body.dark-mode td, body.dark-mode th {
  border-color: #333 !important;
}

body.dark-mode .card-header {
  border-bottom: 1px solid #333 !important;
}

body.dark-mode .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

body.dark-mode .form-control:focus {
  background-color: #333;
  color: #fff;
  border-color: var(--primary-color);
}

body.dark-mode .btn-light {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border-color: #444 !important;
}

body.dark-mode .btn-light:hover {
  background-color: #333;
  color: #fff;
}

body.dark-mode .border {
  border-color: #444 !important;
}

body.dark-mode .border-light {
  border-color: #444 !important;
}

body.dark-mode .bg-light {
  background-color: #1a1a1a !important;
}

/* =======================================================
   DASHBOARD FIXES WITH CSS VARIABLES (AS REQUESTED)
   ======================================================= */

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --card-bg: #f8f9fa;
  --border-color: #ddd;
}

body.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
  --card-bg: #1e1e1e;
  --border-color: #333;
}

/* 1. Global Background for Dashboard */
body.dashboard-body,
body.dashboard-body .section-padding {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Background Image Rule (Do not change header backgrounds) */
body.dashboard-body header.bg-dark {
  background-color: #212529 !important; /* Keep original dark or use standard dark, do not map to var(--bg-color) */
}

/* 2. Cards */
body.dashboard-body .dashboard-card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}
body.dashboard-body .dashboard-card .card-header,
body.dashboard-body .dashboard-card .card-footer {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Text overrides in dark mode cards */
body.dark-mode .dashboard-card .text-dark,
body.dark-mode .dashboard-card h1,
body.dark-mode .dashboard-card h2,
body.dark-mode .dashboard-card h3,
body.dark-mode .dashboard-card h4,
body.dark-mode .dashboard-card h5,
body.dark-mode .dashboard-card h6 {
  color: var(--text-color) !important;
}

/* 3. Tables */
body.dashboard-body .dashboard-table {
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}
body.dashboard-body .dashboard-table th,
body.dashboard-body .dashboard-table td,
body.dashboard-body .dashboard-table tr {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Special Table Header Darkening in Dark Mode (Optional but requested) */
body.dark-mode .dashboard-table .table-light th {
  background-color: #151515 !important;
}

/* 4. Forms */
body.dashboard-body .dashboard-form .form-control {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}
body.dashboard-body .dashboard-form .form-control::placeholder {
  color: var(--text-color);
  opacity: 0.6;
}
body.dashboard-body .dashboard-form .input-group-text {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* 5. Icons & Buttons in Dashboard */

/* Ensure danger and custom colors stay intact unless they are meant to be text-color */
body.dark-mode .btn-light.dashboard-btn {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}