/**
 * Dark Mode Styles
 * Applied when body has .dark-mode class
 */

.dark-mode {
  background-color: #1a1a1a;
  color: #e5e7eb;
}

/* Typography */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #f9fafb;
}

.dark-mode p {
  color: #d1d5db;
}

/* Header */
.dark-mode header,
.dark-mode .modern-nav {
  background-color: #111827;
  border-bottom: 1px solid #374151;
}

.dark-mode .nav-link {
  color: #d1d5db;
}

.dark-mode .nav-link:hover {
  color: #10b981;
}

/* Cards */
.dark-mode .glass-card,
.dark-mode .bg-white {
  background-color: #1f2937;
  border-color: #374151;
}

.dark-mode .shadow-lg,
.dark-mode .shadow-md {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Forms */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #9ca3af;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  background-color: #4b5563;
  border-color: #10b981;
}

/* Buttons */
.dark-mode .btn-modern.btn-glass {
  background-color: rgba(31, 41, 55, 0.8);
  border-color: #4b5563;
  color: #d1d5db;
}

.dark-mode .btn-modern.btn-glass:hover {
  background-color: rgba(55, 65, 81, 0.9);
}

.dark-mode .btn-modern.btn-outline {
  border-color: #4b5563;
  color: #d1d5db;
}

.dark-mode .btn-modern.btn-outline:hover {
  background-color: #374151;
}

/* Dropdowns */
.dark-mode #notificationsDropdown,
.dark-mode #autocompleteResults {
  background-color: #1f2937;
  border-color: #374151;
}

.dark-mode .autocomplete-item:hover,
.dark-mode .notification-item:hover {
  background-color: #374151;
}

/* Tables */
.dark-mode table {
  background-color: #1f2937;
}

.dark-mode thead {
  background-color: #111827;
}

.dark-mode th,
.dark-mode td {
  border-color: #374151;
}

.dark-mode tr:hover {
  background-color: #374151;
}

/* Text Colors */
.dark-mode .text-gray-900 {
  color: #f9fafb !important;
}

.dark-mode .text-gray-800 {
  color: #e5e7eb !important;
}

.dark-mode .text-gray-700 {
  color: #d1d5db !important;
}

.dark-mode .text-gray-600 {
  color: #9ca3af !important;
}

.dark-mode .text-gray-500 {
  color: #6b7280 !important;
}

.dark-mode .text-gray-400 {
  color: #4b5563 !important;
}

/* Background Colors */
.dark-mode .bg-gray-50 {
  background-color: #111827 !important;
}

.dark-mode .bg-gray-100 {
  background-color: #1f2937 !important;
}

.dark-mode .bg-gray-200 {
  background-color: #374151 !important;
}

/* Borders */
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
  border-color: #374151 !important;
}

/* Footer */
.dark-mode footer {
  background-color: #111827;
  border-top: 1px solid #374151;
}

/* Mobile Menu */
.dark-mode .mobile-menu {
  background-color: #1f2937;
  border-color: #374151;
}

.dark-mode .mobile-menu-link:hover {
  background-color: #374151;
}

/* Badges */
.dark-mode .bg-red-500,
.dark-mode .bg-blue-500,
.dark-mode .bg-green-500 {
  /* Keep bright colors for badges */
}

/* Hero Sections */
.dark-mode .hero-section {
  background: linear-gradient(135deg, #1a4d2e 0%, #0f3a2e 100%);
}

/* Smooth Transition */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}