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

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

html.dark .map-container,
html.dark #mini-map {
  border-color: var(--color-primary-blue);
  box-shadow: none;
}

/* ============================================================================
   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: var(--color-dark-surface) !important;
  border-color: var(--color-dark-border) !important;
}

.dark #progress-line {
  background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 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: #3b82f6"],
.vehicle-category-card[style*="border-color: #3b82f6"]: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: #3b82f6"],
.size-card[style*="border-color: #3b82f6"]: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;
}

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



.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: #3b82f6"],
.dark .vehicle-category-card[style*="border-color: #3b82f6"]: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: #3b82f6"],
.dark .size-card[style*="border-color: #3b82f6"]: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: #3b82f6"] *,
.dark .size-card[style*="border-color: rgb(59, 130, 246)"] *,
.dark .size-card[style*="border-color: #3b82f6"] * {
  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
   ============================================================================ */

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

.text-blue-800 {
  color: #1e40af !important;
}

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

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

.dark .text-blue-800 {
  color: #93c5fd !important;
}

.dark .text-blue-600 {
  color: #3b82f6 !important;
}

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

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

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

.dark .text-blue-700:hover {
  color: #93c5fd !important;
}

.dark .text-blue-800:hover {
  color: #bfdbfe !important;
}

.dark .text-blue-600:hover {
  color: #60a5fa !important;
}

/* ============================================================================
   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, #3b82f6 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, #3b82f6 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%;
}

html.dark .map-full-height {
  border-color: var(--color-dark-border);
}

/* ============================================================================
   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 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --bg-primary: #1f2937;
    --bg-secondary: #374151;
    --border-color: #4b5563;
  }
}