/**
 * Dark Mode Theme
 * Dark mode overrides and styles
 * Extracted from list-spot-3step.css and custom.css
 */

/* ============================================================================
   GLOBAL DARK MODE
   ============================================================================ */

html.dark {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
}

html.dark a {
  color: #FFFFFF;
}

html.dark a:hover {
  color: var(--color-primary-blue-hover) !important;
}

/* MOVED TO DISCOVER.CSS - Map styles consolidated there for better organization */

/* ============================================================================
   DARK MODE FORM CONTROLS
   ============================================================================ */

html.dark input,
html.dark select,
html.dark textarea {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--color-gray-400);
}

/* ============================================================================
   DARK MODE UTILITY CLASS OVERRIDES
   ============================================================================ */

html.dark .bg-white { background-color: var(--color-dark-surface) !important; }
html.dark .text-gray-800 { color: var(--color-dark-text) !important; }
html.dark .text-gray-600 { color: var(--color-dark-text-muted) !important; }
html.dark .text-gray-500 { color: var(--color-gray-400) !important; }
html.dark .border-gray-300 { border-color: var(--color-dark-border) !important; }

/* Remove shadows in dark mode for cleaner look */
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
  box-shadow: none !important;
}

/* ============================================================================
   DARK MODE WIZARD STEP STYLES
   ============================================================================ */

.dark body {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
}

.dark #mainContent {
  background-color: var(--color-dark-bg);
}

.dark .wizard-step {
  background-color: var(--color-dark-bg);
}

.dark #progress-bar .bg-white {
  background-color: var(--color-dark-surface) !important;
}

.dark .wizard-step .bg-white {
  background-color: var(--color-dark-surface) !important;
}

.dark .wizard-step .text-gray-900 {
  color: var(--color-dark-text) !important;
}

.dark .wizard-step .text-gray-800 {
  color: var(--color-dark-text) !important;
}

.dark .wizard-step .text-gray-700 {
  color: var(--color-dark-text-muted) !important;
}

.dark .wizard-step .text-gray-600 {
  color: var(--color-dark-text-muted) !important;
}

.dark .wizard-step .text-gray-500 {
  color: var(--color-gray-400) !important;
}

/* ============================================================================
   DARK MODE PROGRESS BAR
   ============================================================================ */

.dark #progress-bar {
  background: transparent !important;
  border-color: transparent !important;
}

.dark #progress-line {
  background: linear-gradient(90deg, #60a5fa 0%, #1d4ed8 100%) !important;
}

.dark #progress-line-container {
  background: var(--color-gray-700) !important;
}

.dark .step-circle {
  background: var(--color-gray-700) !important;
  color: var(--color-gray-400) !important;
}

.dark .step-circle.active {
  background: #60a5fa !important;
  color: white !important;
}

.dark .step-circle.completed {
  background: #34d399 !important;
  color: white !important;
}

.dark .step-label p {
  color: var(--color-gray-400) !important;
}

.dark .step-label p:first-child {
  color: var(--color-dark-text-muted) !important;
}

.dark #progressPercentage,
.dark #progressText {
  color: var(--color-dark-text-muted) !important;
}

/* ============================================================================
   DARK MODE FORM INPUTS
   ============================================================================ */

.dark input[type="text"],
.dark input[type="number"],
.dark input[type="email"],
.dark input[type="tel"],
.dark textarea,
.dark select {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

.dark #autocomplete {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

.dark select option {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
}

.dark select option:checked {
  background-color: var(--color-primary-blue);
  color: white;
}

.dark select option:hover {
  background-color: var(--color-gray-700);
}

.dark input[type="text"]:focus,
.dark input[type="number"]:focus,
.dark input[type="email"]:focus,
.dark input[type="tel"]:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 20%);
}

.dark #autocomplete:focus {
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 20%);
}

/* ============================================================================
   DARK MODE PHOTO UPLOAD
   ============================================================================ */

.dark .photo-preview-container {
  background: var(--color-gray-800);
}

.dark .spot-type-label {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

.dark .spot-type-label:hover:not(.opacity-50) {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--color-primary-blue);
  color: var(--color-primary-blue);
}

/* ============================================================================
   DARK MODE LOADING OVERLAY
   ============================================================================ */

.dark #loadingOverlay {
  background: rgba(0, 0, 0, 0.7);
}

.dark .loader {
  background: var(--color-dark-surface);
  color: var(--color-dark-text);
}

/* ============================================================================
   DARK MODE FLATPICKR CALENDAR
   ============================================================================ */

html.dark .flatpickr-calendar {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark .flatpickr-months {
  background: var(--color-gray-800);
}

html.dark .flatpickr-current-month {
  color: var(--color-dark-text);
}

html.dark .flatpickr-weekday {
  color: var(--color-gray-400);
}

html.dark .flatpickr-day {
  color: var(--color-dark-text);
}

html.dark .flatpickr-day:hover {
  background: var(--color-gray-700);
}

html.dark .flatpickr-day.selected {
  background: var(--color-primary-blue);
  color: white;
}

html.dark .flatpickr-day.disabled {
  color: var(--color-gray-600);
}

html.dark .flatpickr-day.disabled::after {
  background: var(--color-gray-800);
}

/* ============================================================================
   DARK MODE AMENITY SELECTION
   ============================================================================ */

.dark .amenity-selected,
.dark .amenity-option:checked + .amenity-label {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: var(--color-primary-blue) !important;
  color: var(--color-primary-blue) !important;
}

.dark .spot-type-label.selected {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: var(--color-primary-blue) !important;
  color: var(--color-primary-blue) !important;
}

/* ============================================================================
   DARK MODE VEHICLE SELECTION
   ============================================================================ */

.vehicle-category-card,
.size-card {
  transition: all 0.15s ease !important;
}

.vehicle-category-card:hover:not(.selected),
.size-card:hover:not(.selected) {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-300) !important;
}

/* Selected state should ALWAYS override hover - target elements with inline styles */
.vehicle-category-card[style*="border-color: rgb(59, 130, 246)"],
.vehicle-category-card[style*="border-color: rgb(59, 130, 246)"]:hover,
.vehicle-category-card[style*="border-color: #1d4ed8"],
.vehicle-category-card[style*="border-color: #1d4ed8"]:hover,
.size-card[style*="border-color: rgb(59, 130, 246)"],
.size-card[style*="border-color: rgb(59, 130, 246)"]:hover,
.size-card[style*="border-color: #1d4ed8"],
.size-card[style*="border-color: #1d4ed8"]:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-color: rgb(59, 130, 246) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* CRITICAL: Ensure white text on ANY blue backgrounds for accessibility - HIGHEST PRIORITY */
*[style*="background-color: #2563eb"] *,
*[style*="background: #2563eb"] *,
*[style*="background-color: #2563EB"] *,
*[style*="background: #2563EB"] *,
.bg-blue-600 *,
.bg-primary * {
  color: #ffffff !important; /* White text on blue backgrounds for WCAG compliance */
}

/* Child elements of selected vehicles should keep their original text color - but NEVER on blue backgrounds */
.vehicle-category-card[style*="border-color: rgb(59, 130, 246)"]:not([style*="background-color: #2563eb"]):not([style*="background: #2563eb"]):not(.bg-blue-600) *,
.vehicle-category-card[style*="border-color: #1d4ed8"]:not([style*="background-color: #2563eb"]):not([style*="background: #2563eb"]):not(.bg-blue-600) *,
.size-card[style*="border-color: rgb(59, 130, 246)"]:not([style*="background-color: #2563eb"]):not([style*="background: #2563eb"]):not(.bg-blue-600) *,
.size-card[style*="border-color: #1d4ed8"]:not([style*="background-color: #2563eb"]):not([style*="background: #2563eb"]):not(.bg-blue-600) * {
  color: #1f2937 !important; /* Keep text dark in light mode - only when no blue background */
}

.dark .vehicle-category-card,
.dark .size-card {
  transition: all 0.15s ease !important;
}

.dark .vehicle-category-card:hover:not(.selected),
.dark .size-card:hover:not(.selected) {
  background: var(--color-gray-700) !important;
  border-color: var(--color-gray-600) !important;
}

/* Dark mode selected state should ALWAYS override hover - target elements with inline styles */
.dark .vehicle-category-card[style*="border-color: rgb(59, 130, 246)"],
.dark .vehicle-category-card[style*="border-color: rgb(59, 130, 246)"]:hover,
.dark .vehicle-category-card[style*="border-color: #1d4ed8"],
.dark .vehicle-category-card[style*="border-color: #1d4ed8"]:hover,
.dark .size-card[style*="border-color: rgb(59, 130, 246)"],
.dark .size-card[style*="border-color: rgb(59, 130, 246)"]:hover,
.dark .size-card[style*="border-color: #1d4ed8"],
.dark .size-card[style*="border-color: #1d4ed8"]:hover {
  background-color: rgba(59, 130, 246, 0.25) !important;
  border-color: rgb(59, 130, 246) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Dark mode child elements of selected vehicles should keep their original text color */
.dark .vehicle-category-card[style*="border-color: rgb(59, 130, 246)"] *,
.dark .vehicle-category-card[style*="border-color: #1d4ed8"] *,
.dark .size-card[style*="border-color: rgb(59, 130, 246)"] *,
.dark .size-card[style*="border-color: #1d4ed8"] * {
  color: #f9fafb !important; /* Keep text white in dark mode */
}

/* ============================================================================
   DARK MODE CHARACTER COUNTING
   ============================================================================ */

/* Dark mode character counter colors */
.dark #title-count.text-gray-400,
.dark #description-count.text-gray-400 {
  color: #9ca3af !important;
}

.dark #title-count.text-orange-400,
.dark #description-count.text-orange-400 {
  color: #fb923c !important;
}

.dark #title-count.text-red-400,
.dark #description-count.text-red-400 {
  color: #f87171 !important;
}

.dark #title-count.text-green-400,
.dark #description-count.text-green-400 {
  color: #4ade80 !important;
}

/* ============================================================================
   DARK MODE SPOT TYPE CHECKBOX
   ============================================================================ */

.spot-type-checkbox:checked + .spot-type-label * {
  color: var(--color-primary-blue) !important;
}

.dark .spot-type-checkbox:checked + .spot-type-label * {
  color: var(--color-primary-blue) !important;
}

/* ============================================================================
   DARK MODE TEXT COLORS
   ============================================================================ */

/* Light mode blue text colors */
.text-blue-900 {
  color: #1e3a8a !important;
}

.text-white {
  color: #FFFFFF !important;
}

.text-blue-700 {
  color: #1d4ed8 !important;
}

.text-blue-700 {
  color: #2563eb !important;
}

.text-blue-700 {
  color: #2563eb !important; /* Darker blue for better contrast on light backgrounds (was #1d4ed8) */
}

.text-blue-400 {
  color: #60a5fa !important;
}

/* Dark mode blue text colors - all lightened for accessibility (WCAG AA 4.5:1 contrast on dark backgrounds) */
.dark .text-blue-900 {
  color: #dbeafe !important; /* Lightest blue for darkest shade in dark mode */
}

.dark .text-white {
  color: #FFFFFF !important; /* Very light blue for better contrast on dark backgrounds */
}

.dark .text-blue-700 {
  color: #FFFFFF !important; /* Light blue for better contrast on dark backgrounds */
}

.dark .text-blue-700 {
  color: #60a5fa !important; /* Medium-light blue for better contrast (was #1d4ed8) */
}

.dark .text-blue-700 {
  color: #60a5fa !important; /* Same as 600 for consistency */
}

.dark .text-blue-400 {
  color: #FFFFFF !important; /* Lighter than default for dark backgrounds */
}

/* Light mode hover states */
.text-blue-900:hover {
  color: #1e3a8a !important;
}

.text-white:hover {
  color: #1e3a8a !important;
}

.text-blue-700:hover {
  color: #FFFFFF !important;
}

.text-blue-700:hover {
  color: #1d4ed8 !important;
}

.text-blue-700:hover {
  color: #2563eb !important;
}

.text-blue-400:hover {
  color: #1d4ed8 !important;
}

/* Dark mode hover states - even lighter for better visibility */
.dark .text-blue-900:hover {
  color: #eff6ff !important; /* Almost white on hover */
}

.dark .text-white:hover {
  color: #dbeafe !important; /* Brightest blue for hover state */
}

.dark .text-blue-700:hover {
  color: #FFFFFF !important; /* Very light on hover */
}

.dark .text-blue-700:hover {
  color: #FFFFFF !important; /* Lighter on hover */
}

.dark .text-blue-700:hover {
  color: #FFFFFF !important; /* Same as 600 hover */
}

.dark .text-blue-400:hover {
  color: #FFFFFF !important; /* Brighter on hover */
}

/* ============================================================================
   DARK MODE BORDERS AND BACKGROUNDS
   ============================================================================ */

.dark .wizard-step .border-gray-200 {
  border-color: var(--color-dark-border) !important;
}

.dark .wizard-step .border-gray-300 {
  border-color: var(--color-dark-border) !important;
}

.dark .wizard-step .bg-gray-50 {
  background-color: var(--color-gray-800) !important;
}

.dark .wizard-step .bg-gray-100 {
  background-color: var(--color-gray-700) !important;
}

.dark .wizard-step .bg-white.rounded-xl.shadow-lg {
  background-color: var(--color-dark-surface) !important;
  box-shadow: none !important;
}

.dark .bg-white.border-t {
  background-color: var(--color-dark-surface) !important;
  border-color: var(--color-dark-border) !important;
}

.dark .bg-white.border-t.rounded-xl {
  background-color: var(--color-dark-surface) !important;
  border-color: var(--color-dark-border) !important;
}

/* ============================================================================
   DARK MODE BUTTONS
   ============================================================================ */

.dark button {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

.dark .text-gray-700 {
  color: var(--color-dark-text-muted) !important;
}

.dark .text-gray-500 {
  color: var(--color-gray-400) !important;
}

.dark .border-gray-200 {
  border-color: var(--color-dark-border) !important;
}

.dark .border-gray-300 {
  border-color: var(--color-dark-border) !important;
}

/* ============================================================================
   DARK MODE RESPONSIVE
   ============================================================================ */

@media (width <= 768px) {
  .step-circle {
    background: var(--color-gray-700) !important;
    color: var(--color-gray-400) !important;
  }

  .step-label {
    color: var(--color-gray-400) !important;
  }

  .step-label p {
    color: var(--color-gray-400) !important;
  }

  .step-label p:last-child {
    color: var(--color-gray-500) !important;
  }
}

/* ============================================================================
   DARK MODE HOVER STATES
   ============================================================================ */

@media (hover: none) {
  button:hover {
    transform: none !important;
  }

  .photo-preview-container:hover img {
    transform: none !important;
  }
}

/* ============================================================================
   DARK MODE ACCESSIBILITY
   ============================================================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .dark {
    --color-dark-bg: #000000;
    --color-dark-surface: #1a1a1a;
    --color-dark-border: #404040;
    --color-dark-text: #ffffff;
    --color-dark-text-muted: #e0e0e0;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dark * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   DARK MODE FORM ENHANCEMENTS
   ============================================================================ */

/* ============================================================================
   DARK MODE THIRD-PARTY COMPONENTS
   ============================================================================ */

/* Flatpickr calendar dark mode styles from list-spot-3step.css */
html.dark .flatpickr-calendar {
  background-color: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark .flatpickr-months {
  background-color: var(--color-dark-surface);
}

html.dark .flatpickr-current-month {
  color: var(--color-dark-text);
}

html.dark .flatpickr-weekday {
  color: var(--color-dark-text-muted);
}

html.dark .flatpickr-day {
  color: var(--color-dark-text);
}

html.dark .flatpickr-day:hover {
  background-color: var(--color-gray-700);
}

html.dark .flatpickr-day.selected {
  background-color: var(--color-primary-blue);
  color: white;
}

html.dark .flatpickr-day.disabled {
  color: var(--color-gray-500);
}

html.dark .flatpickr-day.disabled::after {
  border-color: var(--color-gray-500);
}

/* ============================================================================
   DARK MODE UTILITY ENHANCEMENTS
   ============================================================================ */

/* Additional utility class overrides from list-spot-3step.css */
.dark button {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

.dark .text-gray-700 {
  color: var(--color-dark-text-muted) !important;
}

.dark .text-gray-500 {
  color: var(--color-gray-400) !important;
}

.dark .border-gray-200 {
  border-color: var(--color-dark-border) !important;
}

.dark .border-gray-300 {
  border-color: var(--color-dark-border) !important;
}

.dark .bg-white.border-t {
  background-color: var(--color-dark-surface) !important;
  border-color: var(--color-dark-border) !important;
}

.dark .bg-white.border-t.rounded-xl {
  background-color: var(--color-dark-surface) !important;
  border-color: var(--color-dark-border) !important;
}

.dark #loadingOverlay {
  background-color: rgba(17, 24, 39, 0.9) !important;
  color: var(--color-dark-text) !important;
}

/* ============================================================================
   DARK MODE LISTSPOT COMPONENT ENHANCEMENTS
   ============================================================================ */

/* ListSpot-specific dark mode styles from list-spot-3step.css */
.dark .photo-preview-container {
  background-color: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

.dark .spot-type-label {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

.dark .spot-type-label:hover:not(.opacity-50) {
  background-color: var(--color-gray-700);
  border-color: var(--color-primary-blue);
}

.dark .amenity-selected,
.dark .spot-type-selected {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  border-color: #3b5279 !important;
  color: white !important;
  box-shadow: var(--shadow-elevated);
}

.dark .spot-type-label.selected {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  border-color: var(--color-primary-blue) !important;
  color: white !important;
  box-shadow: var(--shadow-elevated);
}

.dark .completion-indicator .checkmark {
  color: var(--color-success-green);
}

/* ============================================================================
   DARK MODE NAVIGATION & THEME TOGGLE
   ============================================================================ */

/* Dark mode navigation glass morphism from custom.css */
html.dark nav {
  background: rgb(17 24 39 / 95%);
  border-bottom-color: rgb(255 255 255 / 10%);
}

html.dark #user-menu-button {
  background: rgb(30 41 59 / 70%) !important;
  border-color: rgb(255 255 255 / 10%) !important;
}

html.dark #user-menu-button:hover {
  background-color: var(--color-gray-600) !important;
  border-color: var(--color-primary-blue) !important;
}

html.dark #mobile-menu {
  background: rgb(17 24 39 / 98%);
  border-top-color: rgb(255 255 255 / 10%);
}

html.dark #theme-toggle {
  background: linear-gradient(135deg, rgb(251 191 36 / 20%), rgb(245 158 11 / 20%));
  box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}

/* ============================================================================
   DARK MODE PHONE INPUT SYSTEM
   ============================================================================ */

/* Dark mode phone input from custom.css */
.dark #country-dropdown {
  border-color: var(--color-gray-600);
  box-shadow: 0 10px 25px rgb(0 0 0 / 30%);
}

.dark .country-option:hover {
  background-color: var(--color-gray-700) !important;
}

.dark #phone_number::placeholder {
  color: var(--color-gray-500);
}

/* ============================================================================
   DARK MODE DROPDOWN SYSTEM
   ============================================================================ */

/* Dark mode dropdown from custom.css */
html.dark .dropdown-menu {
  background: rgb(31 41 55 / 98%);
  border-color: rgb(255 255 255 / 10%);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 30%), 0 10px 10px -5px rgb(0 0 0 / 20%);
}

html.dark .dropdown-menu a:hover {
  background: rgb(59 130 246 / 20%);
  color: #60a5fa;
}

/* ============================================================================
   DARK MODE ENHANCED COMPONENTS
   ============================================================================ */

/* Dark mode card enhancements from custom.css */
html.dark .card-enhanced {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 20%);
}

html.dark .input-enhanced {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

html.dark .input-enhanced:focus {
  background: var(--color-dark-bg-secondary);
  border-color: var(--color-primary-blue);
}

html.dark .glass-morphism {
  background: rgb(15 23 42 / 30%);
  border-color: rgb(255 255 255 / 10%);
}

html.dark .toast {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

html.dark .modal {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

html.dark .loading-skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200px 100%;
}

html.dark .shimmer {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200px 100%;
}

/* MOVED TO DISCOVER.CSS - Map styles consolidated there for better organization */

/* ============================================================================
   DARK MODE UTILITY CLASSES
   ============================================================================ */

/* Dark mode utility class overrides from custom.css */
html.dark .border-gradient {
  background: linear-gradient(var(--color-dark-surface), var(--color-dark-surface)) padding-box, var(--gradient-primary) border-box;
}

/* ============================================================================
   DARK MODE ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Dark mode animation enhancements from custom.css */
html.dark-mode-transitioning * {
  transition: background-color var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow) !important;
}

/* ============================================================================
   LISTSPOT UNIFIED DARK MODE SUPPORT
   ============================================================================ */

/* Dark mode support for listspot unified variables - Class-based (not system preference) */
html.dark:root,
body.dark:root,
.dark:root {
  --text-primary: #f9fafb !important;
  --text-secondary: #d1d5db !important;
  --bg-primary: #1f2937 !important;
  --bg-secondary: #374151 !important;
  --border-color: #4b5563 !important;
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #ffffff !important; /* Pure white text for maximum contrast on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #ffffff !important; /* Pure white text for maximum contrast on very dark backgrounds */
}

/* AGGRESSIVE FIX: Override any gray-800 text that might appear on dark backgrounds */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"],
.dark *[style*="color: #ffffff"],
html.dark *[style*="color: #ffffff"],
body.dark *[style*="color: #ffffff"] {
  color: #ffffff !important; /* Pure white text for maximum contrast in dark mode */
}

/* ULTIMATE FIX: Any element with gray-800 color that might be on dark backgrounds */
*[style*="color: #ffffff"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]) {
  color: #ffffff !important; /* Pure white text for maximum contrast when not on light backgrounds */
}

/* NUCLEAR OPTION: Force light text on ANY very dark computed backgrounds */
/* Note: This rule was removed as it was empty and caused linting errors */

/* Target any element that might have gray-800 text in dark contexts */
.dark *,
html.dark *,
body

/* AGGRESSIVE: Override gray-800 text in ALL dark mode contexts */
.dark [class*="text-gray-800"],
.dark .text-gray-800,
html.dark [class*="text-gray-800"],
html.dark .text-gray-800,
body.dark [class*="text-gray-800"],
body.dark .text-gray-800,
.dark *[style*="color: #ffffff"],
.dark *[style*="color: #ffffff"],
.dark *[style*="color: #ffffff"],
.dark *[style*="color: #ffffff"],
html.dark *[style*="color: #ffffff"],
html.dark *[style*="color: #ffffff"],
html.dark *[style*="color: #ffffff"],
html.dark *[style*="color: #ffffff"],
body.dark *[style*="color: #ffffff"],
body.dark *[style*="color: #ffffff"],
body.dark *[style*="color: #ffffff"],
body.dark *[style*="color: #ffffff"] {
  color: #ffffff !important; /* Force pure white text for maximum contrast in ALL dark mode contexts */
}

/* CRITICAL FIX: Gray-500 text on dark slate backgrounds */
*[style*="background: #1e293b"] *,
*[style*="background-color: #1e293b"] *,
.dark *[style*="background: #1e293b"] *,
.dark *[style*="background-color: #1e293b"] * {
  color: #e2e8f0 !important; /* Light slate text on dark slate backgrounds */
}

/* Ensure gray-500 text is never used on dark backgrounds - MAXIMUM SPECIFICITY */
*[style*="color: #6b7280"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
.dark *[style*="color: #6b7280"],
.dark .text-gray-500,
html.dark *[style*="color: #6b7280"],
body.dark *[style*="color: #6b7280"],
html.dark .text-gray-500,
body.dark .text-gray-500,
.dark .discover-page *[style*="color: #6b7280"],
html.dark .discover-page *[style*="color: #6b7280"],
body.dark .discover-page *[style*="color: #6b7280"] {
  color: #d1d5db !important; /* Light gray text in dark contexts */
}

/* ULTRA-AGGRESSIVE CONTRAST FIX - Override any remaining gray-800 text in dark mode */

/* NUCLEAR OPTION: Force white text on any element with gray-800 color in dark contexts */
html.dark *[style*="color: rgb(31, 41, 55)"],
body.dark *[style*="color: rgb(31, 41, 55)"],
.dark *[style*="color: rgb(31, 41, 55)"],
html.dark *[style*="color:rgb(31, 41, 55)"],
body.dark *[style*="color:rgb(31, 41, 55)"],
.dark *[style*="color:rgb(31, 41, 55)"],
html.dark *[style*="color: rgb(31,41,55)"],
body.dark *[style*="color: rgb(31,41,55)"],
.dark *[style*="color: rgb(31,41,55)"],
html.dark *[style*="color:rgb(31,41,55)"],
body.dark *[style*="color:rgb(31,41,55)"],
.dark *[style*="color:rgb(31,41,55)"] {
  color: #ffffff !important;
}

/* Cover computed styles that might result in gray-800 */

/* CRITICAL FIX: #60A5FA on #374151 - Force white text for blue-400 on gray-700 */
.dark *[style*="color: #60a5fa"],
.dark *[style*="color:#60a5fa"],
.dark *[style*="color: #60A5FA"],
.dark *[style*="color:#60A5FA"],
.dark *[style*="color: rgb(96, 165, 250)"],
.dark *[style*="color:rgb(96, 165, 250)"],
html.dark *[style*="color: #60a5fa"],
html.dark *[style*="color:#60a5fa"],
html.dark *[style*="color: #60A5FA"],
html.dark *[style*="color:#60A5FA"],
html.dark *[style*="color: rgb(96, 165, 250)"],
html.dark *[style*="color:rgb(96, 165, 250)"],
body.dark *[style*="color: #60a5fa"],
body.dark *[style*="color:#60a5fa"],
body.dark *[style*="color: #60A5FA"],
body.dark *[style*="color:#60A5FA"],
body.dark *[style*="color: rgb(96, 165, 250)"],
body.dark *[style*="color:rgb(96, 165, 250)"] {
  color: #ffffff !important; /* Force white text for blue-400 in dark mode */
}

/* CRITICAL FIX: #FFFFFF on #091425 - Force better contrast for white text on very dark backgrounds */
*[style*="background: #091425"] *[style*="color: #ffffff"],
*[style*="background:#091425"] *[style*="color:#ffffff"],
*[style*="background-color: #091425"] *[style*="color: #ffffff"],
*[style*="background-color:#091425"] *[style*="color:#ffffff"],
*[style*="background: #091425"] *[style*="color: #FFFFFF"],
*[style*="background:#091425"] *[style*="color:#FFFFFF"],
*[style*="background-color: #091425"] *[style*="color: #FFFFFF"],
*[style*="background-color:#091425"] *[style*="color:#FFFFFF"],
*[style*="background: rgb(9, 20, 37)"] *[style*="color: rgb(255, 255, 255)"],
*[style*="background:rgb(9, 20, 37)"] *[style*="color:rgb(255, 255, 255)"],
*[style*="background-color: rgb(9, 20, 37)"] *[style*="color: rgb(255, 255, 255)"],
*[style*="background-color:rgb(9, 20, 37)"] *[style*="color:rgb(255, 255, 255)"] {
  color: #f3f4f6 !important; /* Use gray-100 for better contrast on very dark backgrounds */
}

/* ULTIMATE FALLBACK: Any blue-400 text in dark mode should be white */
.dark .text-blue-400,
html.dark .text-blue-400,
body.dark .text-blue-400 {
  color: #ffffff !important;
}

/* ULTIMATE FALLBACK: Any white text on very dark backgrounds should use gray-100 */
*[style*="background-color: #091425"],
*[style*="background: #091425"] {
  color: #f3f4f6 !important;
}

/* CRITICAL FIX: #1F2937 (gray-800) on #091425 (very dark) - Force white text */
*[style*="background: #091425"] *[style*="color: #1f2937"],
*[style*="background:#091425"] *[style*="color:#1f2937"],
*[style*="background-color: #091425"] *[style*="color: #1f2937"],
*[style*="background-color:#091425"] *[style*="color:#1f2937"],
*[style*="background: #091425"] *[style*="color: #1F2937"],
*[style*="background:#091425"] *[style*="color:#1F2937"],
*[style*="background-color: #091425"] *[style*="color: #1F2937"],
*[style*="background-color:#091425"] *[style*="color:#1F2937"],
*[style*="background: rgb(9, 20, 37)"] *[style*="color: rgb(31, 41, 55)"],
*[style*="background:rgb(9, 20, 37)"] *[style*="color:rgb(31, 41, 55)"],
*[style*="background-color: rgb(9, 20, 37)"] *[style*="color: rgb(31, 41, 55)"],
*[style*="background-color:rgb(9, 20, 37)"] *[style*="color:rgb(31, 41, 55)"] {
  color: #ffffff !important; /* Force white text for gray-800 on very dark backgrounds */
}

/* AGGRESSIVE: Any gray-800 text on very dark backgrounds */
.dark *[style*="color: #1f2937"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
html.dark *[style*="color: #1f2937"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
body.dark *[style*="color: #1f2937"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
.dark *[style*="color: #1F2937"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
html.dark *[style*="color: #1F2937"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
body.dark *[style*="color: #1F2937"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]) {
  color: #ffffff !important; /* Force white text for gray-800 in dark mode when not on light backgrounds */
}

/* CRITICAL FIX: #FFFFFF on #0E1926 - Force better contrast for white text on slate-900 */
*[style*="background: #0e1926"] *[style*="color: #ffffff"],
*[style*="background:#0e1926"] *[style*="color:#ffffff"],
*[style*="background-color: #0e1926"] *[style*="color: #ffffff"],
*[style*="background-color:#0e1926"] *[style*="color:#ffffff"],
*[style*="background: #0E1926"] *[style*="color: #FFFFFF"],
*[style*="background:#0E1926"] *[style*="color:#FFFFFF"],
*[style*="background-color: #0E1926"] *[style*="color: #FFFFFF"],
*[style*="background-color:#0E1926"] *[style*="color:#FFFFFF"],
*[style*="background: rgb(14, 25, 38)"] *[style*="color: rgb(255, 255, 255)"],
*[style*="background:rgb(14, 25, 38)"] *[style*="color:rgb(255, 255, 255)"],
*[style*="background-color: rgb(14, 25, 38)"] *[style*="color: rgb(255, 255, 255)"],
*[style*="background-color:rgb(14, 25, 38)"] *[style*="color:rgb(255, 255, 255)"] {
  color: #f8fafc !important; /* Use slate-50 for better contrast on slate-900 backgrounds */
}

/* CRITICAL FIX: #E5E7EB (gray-200) on #091425 - Force white text */
*[style*="background: #091425"] *[style*="color: #e5e7eb"],
*[style*="background:#091425"] *[style*="color:#e5e7eb"],
*[style*="background-color: #091425"] *[style*="color: #e5e7eb"],
*[style*="background-color:#091425"] *[style*="color:#e5e7eb"],
*[style*="background: #091425"] *[style*="color: #E5E7EB"],
*[style*="background:#091425"] *[style*="color:#E5E7EB"],
*[style*="background-color: #091425"] *[style*="color: #E5E7EB"],
*[style*="background-color:#091425"] *[style*="color:#E5E7EB"],
*[style*="background: rgb(9, 20, 37)"] *[style*="color: rgb(229, 231, 235)"],
*[style*="background:rgb(9, 20, 37)"] *[style*="color:rgb(229, 231, 235)"],
*[style*="background-color: rgb(9, 20, 37)"] *[style*="color: rgb(229, 231, 235)"],
*[style*="background-color:rgb(9, 20, 37)"] *[style*="color:rgb(229, 231, 235)"] {
  color: #ffffff !important; /* Force white text for gray-200 on very dark backgrounds */
}

/* AGGRESSIVE: Any gray-200 text on very dark backgrounds */
.dark *[style*="color: #e5e7eb"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
html.dark *[style*="color: #e5e7eb"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
body.dark *[style*="color: #e5e7eb"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
.dark *[style*="color: #E5E7EB"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
html.dark *[style*="color: #E5E7EB"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]),
body.dark *[style*="color: #E5E7EB"]:not([style*="background: #f"]):not([style*="background-color: #f"]):not([style*="background: white"]):not([style*="background-color: white"]) {
  color: #ffffff !important; /* Force white text for gray-200 in dark mode when not on light backgrounds */
}