/**
 * Dark Mode Styles
 * 
 * Consolidated dark mode styling rules for the discover page.
 * This file centralizes dark mode contrast and color adjustments
 * that were previously scattered across multiple component CSS files.
 * 
 * NOTE: This is the SINGLE SOURCE OF TRUTH for dark mode styles.
 * Do not duplicate these rules in other CSS files.
 */

/* ========================================
 * GOOGLE MAPS DARK MODE
 * ======================================== */
.dark .gm-style-cc {
  background: #1f2937 !important;
  color: #d1d5db !important;
}

.dark .google-maps-attribution-collapsed .gm-style-cc,
.dark .google-maps-attribution-expanded .gm-style-cc {
  background: #1f2937 !important;
}

/* ========================================
 * TEXT CONTRAST IMPROVEMENTS
 * ======================================== */
/* Ensure sufficient contrast for labels and secondary text */
.dark .text-gray-500 {
  color: #9ca3af !important; /* Upgraded from gray-500 to gray-400 for better contrast */
}

.dark .text-gray-600 {
  color: #d1d5db !important; /* Upgraded from gray-600 to gray-300 for better contrast */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.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"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* 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;
}

/* 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: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* 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: #f9fafb !important; /* Light text on dark backgrounds */
}

/* ========================================
 * FORM ELEMENT CONTRAST
 * ======================================== */
.dark input::placeholder,
.dark textarea::placeholder {
  color: #9ca3af !important; /* Ensure placeholder text is readable */
}

.dark select option {
  background: #1f2937;
  color: #f3f4f6;
}

/* ========================================
 * BORDER CONTRAST
 * ======================================== */
.dark .border-gray-200 {
  border-color: #374151 !important; /* Upgrade border visibility */
}

.dark .border-gray-300 {
  border-color: #4b5563 !important;
}

/* ========================================
 * FOCUS STATE CONTRAST
 * ======================================== */
.dark *:focus-visible {
  outline-color: #60a5fa !important; /* Blue-400 for good visibility */
}

/* ========================================
 * DISABLED STATE CONTRAST
 * ======================================== */
.dark button:disabled,
.dark input:disabled,
.dark select:disabled {
  opacity: 0.6;
  color: #6b7280 !important;
}