body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-blue-50 {
  background-color: #23232b !important;
}
body.dark-mode .text-black,
body.dark-mode .text-gray-700,
body.dark-mode .text-blue-700 {
  color: #f3f4f6 !important;
}
body.dark-mode .text-gray-600 {
  color: #b0b3b8 !important;
}
body.dark-mode .text-blue-600 {
  color: #60a5fa !important;
}
body.dark-mode .border-blue-200 {
  border-color: #33334d !important;
}
body.dark-mode .shadow {
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.7) !important;
}
body.dark-mode .bg-blue-600 {
  background-color: #2563eb !important;
}
body.dark-mode .bg-blue-700 {
  background-color: #1d4ed8 !important;
}
body.dark-mode .bg-red-500 {
  background-color: #dc2626 !important;
}
body.dark-mode .bg-red-600 {
  background-color: #b91c1c !important;
}
body.dark-mode .rounded {
  border-radius: 0.5rem !important;
}

/* Dark mode: applies if body has .dark-mode class OR user prefers dark scheme */
@media (prefers-color-scheme: dark), (forced-colors: active) {
  body:not(.dark-mode) {
    background-color: #18181b !important;
    color: #f3f4f6 !important;
  }
  body:not(.dark-mode) .bg-white,
  body:not(.dark-mode) .bg-blue-50 {
    background-color: #23232b !important;
  }
  body:not(.dark-mode) .text-black,
  body:not(.dark-mode) .text-gray-700,
  body:not(.dark-mode) .text-blue-700 {
    color: #f3f4f6 !important;
  }
  body:not(.dark-mode) .text-gray-600 {
    color: #b0b3b8 !important;
  }
  body:not(.dark-mode) .text-blue-600 {
    color: #60a5fa !important;
  }
  body:not(.dark-mode) .border-blue-200 {
    border-color: #33334d !important;
  }
  body:not(.dark-mode) .shadow {
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.7) !important;
  }
  body:not(.dark-mode) .bg-blue-600 {
    background-color: #2563eb !important;
  }
  body:not(.dark-mode) .bg-blue-700 {
    background-color: #1d4ed8 !important;
  }
  body:not(.dark-mode) .bg-red-500 {
    background-color: #dc2626 !important;
  }
  body:not(.dark-mode) .bg-red-600 {
    background-color: #b91c1c !important;
  }
  body:not(.dark-mode) .rounded {
    border-radius: 0.5rem !important;
  }
}

body.dark-mode {
  background-color: #18181b !important;
  color: #f3f4f6 !important;
}
body.dark-mode .bg-white,
body.dark-mode .bg-blue-50 {
  background-color: #23232b !important;
}
body.dark-mode .text-black,
body.dark-mode .text-gray-700,
body.dark-mode .text-blue-700 {
  color: #f3f4f6 !important;
}
body.dark-mode .text-gray-600 {
  color: #b0b3b8 !important;
}
body.dark-mode .text-blue-600 {
  color: #60a5fa !important;
}
body.dark-mode .border-blue-200 {
  border-color: #33334d !important;
}
body.dark-mode .shadow {
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.7) !important;
}
body.dark-mode .bg-blue-600 {
  background-color: #2563eb !important;
}
body.dark-mode .bg-blue-700 {
  background-color: #1d4ed8 !important;
}
body.dark-mode .bg-red-500 {
  background-color: #dc2626 !important;
}
body.dark-mode .bg-red-600 {
  background-color: #b91c1c !important;
}
body.dark-mode .rounded {
  border-radius: 0.5rem !important;
}
/* Add more overrides as needed for your UI */