/* Base transitions */
:root {
  --transition-speed: 0.3s;
}

body,
.main-header,
.main-sidebar,
.content-wrapper,
.card,
.table,
.btn {
  transition: all var(--transition-speed) ease;
}

/* Dark mode styles using CSS variables */
body.dark-mode {
  background-color: var(--bg-color);
  color: var(--text-color);
}

body.dark-mode .main-header {
  background-color: var(--card-bg);
  border-bottom: 1px solid #333;
}

body.dark-mode .navbar-nav .nav-link {
  color: #e0e0e0;
}

body.dark-mode .navbar-nav .nav-link:hover {
  color: #ffffff;
}

/* Sidebar Styles */
body.dark-mode .main-sidebar {
  background-color: #1e1e1e;
}

body.dark-mode .nav-sidebar .nav-link {
  color: #bdbdbd;
}

body.dark-mode .nav-sidebar .nav-link.active,
body.dark-mode .nav-sidebar .nav-link:hover {
  background-color: #333;
  color: #ffffff;
}

/* Content Area Styles */
body.dark-mode .content-wrapper {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  color: #e0e0e0;
}

body.dark-mode .card-header {
  background-color: #2c2c2c;
  border-bottom: 1px solid #444;
}

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

body.dark-mode .btn {
  background-color: #333;
  color: #ffffff;
  border: 1px solid #444;
}

body.dark-mode .btn:hover {
  background-color: #444;
}

/* Footer Styles */
body.dark-mode .main-footer {
  background-color: #1e1e1e;
  color: #bdbdbd;
}

body.dark-mode .dropdown-menu {
  background-color: #1e1e1e;
}

body.dark-mode .text-dark {
  color: #fff !important;

}
body.dark-mode .bg-white{
    color: #fff !important;
    background-color: #333 !important;
}
body.dark-mode .dropdown-item:hover {
  background-color: #77b6ca !important
}
body.dark-mode  [class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link{
    color: #fff !important;
    background-color: #333 !important;
}