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

/* Brand accent — solid fill raised for CTA shape visibility; fg mint for text/links/icons */
html.dark,
html.dark body,
body.dark,
.dark {
  --color-brand-accent: #0f5a56;
  --color-brand-accent-hover: #0c4e4a;
  --color-brand-accent-pressed: #083f3c;
  --color-brand-accent-shadow: 0 8px 24px rgba(15, 90, 86, 0.28),
    0 2px 8px rgba(15, 90, 86, 0.16);
  --color-brand-accent-outline-hover: rgba(15, 90, 86, 0.14);
  --color-brand-accent-focus: rgba(94, 234, 212, 0.35);
  /* Text / links / icons on dark surfaces — not the logo ink */
  --color-brand-accent-on-dark-surface: #5eead4;
  --color-brand-accent-on-dark-surface-hover: #99f6e4;
  --color-brand-accent-on-dark-surface-focus: rgba(94, 234, 212, 0.35);
  --color-brand-accent-on-dark: var(--color-brand-accent-on-dark-surface);
  --color-brand-accent-on-dark-hover: var(--color-brand-accent-on-dark-surface-hover);
  --color-brand-accent-fg: var(--color-brand-accent-on-dark-surface);
  --color-brand-accent-fg-hover: var(--color-brand-accent-on-dark-surface-hover);
  --color-brand-accent-text-on-light: var(--color-brand-accent-on-dark-surface);
}

html.dark a:not([class]) {
  color: #FFFFFF;
}

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

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

/* Typed inputs / placeholders: components/forms.css (.dark input[type="…"], etc.) */

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

/* Make .bg-white rule more specific to prevent it from affecting links with colored backgrounds */
/* Only apply dark mode bg-white override to solid .bg-white; exclude opacity variants (bg-white/95, bg-white/20) and colored bg-* */
html.dark .bg-white:not([class*="bg-white/"]):not([class*="bg-blue-"]):not([class*="bg-green-"]):not([class*="bg-purple-"]):not([class*="bg-indigo-"]):not([class*="bg-teal-"]):not([class*="bg-amber-"]):not([class*="bg-rose-"]):not([class*="bg-red-"]):not([class*="bg-yellow-"]):not([class*="bg-pink-"]):not([class*="bg-orange-"]):not([class*="bg-cyan-"]):not([class*="bg-emerald-"]):not([class*="bg-violet-"]):not([class*="bg-fuchsia-"]):not([class*="bg-sky-"]):not([class*="bg-lime-"]) {
  background-color: var(--color-dark-surface) !important;
}

/* NOTE: Removed rule that was unsetting background-color on colored button links.
   This was breaking light mode by removing Tailwind's bg-* utility classes.
   Colored button links should keep their Tailwind background colors in both modes. */

/* NOTE: Removed rule that was using background-color: revert on colored button links.
   The revert value was removing Tailwind's bg-* utility classes.
   Colored button links should keep their Tailwind background colors. */

/* NOTE: Colored button/link backgrounds are now preserved by the specific :not() selectors
   in the html.dark .bg-white rule above. No additional rules needed here. */

/* Status badges (e.g. booking details Confirmed/Active) must keep their colored background in dark mode.
   Explicit colors override any global dark-mode rule that forces white/surface background. */
html.dark .status-badge[class*="bg-blue-"] {
  background-color: rgba(37, 99, 235, 0.9) !important;
  background-image: none !important;
}
html.dark .status-badge[class*="bg-green-"] {
  background-color: rgba(34, 197, 94, 0.9) !important;
  background-image: none !important;
}
html.dark .status-badge[class*="bg-red-"] {
  background-color: rgba(239, 68, 68, 0.9) !important;
  background-image: none !important;
}
html.dark .status-badge[class*="bg-purple-"] {
  background-color: rgba(168, 85, 247, 0.9) !important;
  background-image: none !important;
}
html.dark .status-badge[class*="bg-gray-"] {
  background-color: rgba(107, 114, 128, 0.9) !important;
  background-image: none !important;
}
html.dark .status-badge[class*="bg-amber-"] {
  background-color: rgba(245, 158, 11, 0.9) !important;
  background-image: none !important;
}

/* ============================================================================
   LIGHT MODE — muted Tailwind utilities used as body/icons (~2.5:1 → AA)
   html.dark remaps below take precedence when .dark is on.
   ============================================================================ */
html:not(.dark) .text-gray-400,
html:not(.dark) .text-slate-400 {
  color: var(--text-hint, #64748b) !important;
}

html:not(.dark) .text-green-600 {
  color: var(--color-success-green, #047857) !important;
}

html:not(.dark) .text-green-700 {
  color: #065f46 !important;
}

html:not(.dark) .text-amber-600,
html:not(.dark) .text-yellow-600 {
  color: var(--color-warning-yellow, #b45309) !important;
}

html:not(.dark) .text-amber-700,
html:not(.dark) .text-yellow-700 {
  color: #92400e !important;
}

html.dark .text-gray-900 { color: var(--color-dark-text) !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-slate-400) !important; }
html.dark .text-gray-400 { color: var(--color-dark-text-secondary) !important; }
html.dark .border-gray-300 { border-color: var(--color-dark-border) !important; }

/* Slate text colors for new design system */
html.dark .text-slate-900 { color: var(--color-dark-text) !important; }
html.dark .text-slate-800 { color: var(--color-dark-text) !important; }
html.dark .text-slate-700 { color: var(--color-dark-text-muted) !important; }
html.dark .text-slate-600 { color: var(--color-dark-text-muted) !important; }
html.dark .text-slate-500 { color: var(--color-slate-400) !important; }
html.dark .text-slate-400 { color: var(--color-dark-text-secondary) !important; }
html.dark .border-slate-300 { border-color: var(--color-dark-border) !important; }

/* Flatten shadows on wizard cards only; modals, toasts, and dropdowns keep elevation */
html.dark .wizard-step .shadow-md,
html.dark .wizard-step .shadow-lg,
html.dark .wizard-step .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%, #2563eb 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 (select options only; typed inputs in forms.css)
   ============================================================================ */

.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 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 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:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.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;
}

/* Text on solid blue surfaces (CTAs, primary buttons) */
.bg-blue-600 *,
.btn-primary * {
  color: #ffffff !important;
}

/* Selected vehicle/size cards (ListSpot): border set inline by JS */
#listspot-wizard-form .vehicle-category-card[style*="border-color: rgb(59, 130, 246)"]:not(.bg-blue-600) *,
#listspot-wizard-form .vehicle-category-card[style*="border-color: #1d4ed8"]:not(.bg-blue-600) *,
#listspot-wizard-form .size-card[style*="border-color: rgb(59, 130, 246)"]:not(.bg-blue-600) *,
#listspot-wizard-form .size-card[style*="border-color: #1d4ed8"]:not(.bg-blue-600) * {
  color: #1f2937 !important;
}

.dark .vehicle-category-card,
.dark .size-card {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.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 (Tailwind blue / status text — dark mode only)
   ============================================================================ */

html.dark .text-blue-900,
.dark .text-blue-900 {
  color: #dbeafe !important;
}

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

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

html.dark .text-blue-400,
.dark .text-blue-400 {
  color: #93c5fd !important;
}

html.dark .text-blue-900:hover,
.dark .text-blue-900:hover {
  color: #eff6ff !important;
}

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

html.dark .text-blue-400:hover,
.dark .text-blue-400:hover {
  color: #bfdbfe !important;
}

/* Semantic status text (not background fills) */
html.dark .text-red-700,
.dark .text-red-700 {
  color: #fca5a5 !important;
}

html.dark .text-red-600,
.dark .text-red-600 {
  color: #f87171 !important;
}

html.dark .text-green-700,
.dark .text-green-700 {
  color: #86efac !important;
}

html.dark .text-green-600,
.dark .text-green-600 {
  color: #4ade80 !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 MODE BUTTONS
   ============================================================================ */






/* ============================================================================
   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:not(.bottom-sheet-drag-button) {
    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-fill-subtle: #0a0a0a;
    --color-dark-surface: #141414;
    --color-dark-surface-raised: #1f1f1f;
    --color-dark-surface-overlay: #2a2a2a;
    --color-dark-bg-secondary: var(--color-dark-surface-raised);
    --color-dark-border: #6b6b70;
    --color-dark-border-strong: #8e8e93;
    --color-dark-border-subtle: rgb(255 255 255 / 18%);
    --color-dark-text: #ffffff;
    --color-dark-text-muted: #f4f4f5;
    --color-dark-text-secondary: #d4d4d8;
  }
}

/* Reduced motion: global rule in base/animations.css */

/* ============================================================================
   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 */
/* NOTE: Only apply default dark styling to buttons WITHOUT colored backgrounds */
/* Buttons with Tailwind bg-* classes should keep their colors */
/* My Bookings: header tabs use glass styles in my-bookings.css (no Tailwind bg-* on <button>) */
/* Default surface for unstyled wizard buttons only (ListSpot).
   Other pages style their own buttons; avoid global bare-button overrides. */
.dark .wizard-step button:not([class*="bg-blue-"]):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-yellow-"]):not([class*="bg-purple-"]):not([class*="bg-indigo-"]):not([class*="bg-pink-"]):not([class*="bg-teal-"]):not([class*="bg-amber-"]):not([class*="bg-rose-"]):not([class*="bg-orange-"]):not([class*="bg-cyan-"]):not([class*="bg-emerald-"]):not([class*="bg-violet-"]):not([class*="bg-fuchsia-"]):not([class*="bg-sky-"]):not([class*="bg-lime-"]):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.tab-button-header):not(.tab-button):not(.ai-search-surface),
.dark #listspot-wizard-form button:not([class*="bg-blue-"]):not([class*="bg-green-"]):not([class*="bg-red-"]):not([class*="bg-yellow-"]):not([class*="bg-purple-"]):not([class*="bg-indigo-"]):not([class*="bg-pink-"]):not([class*="bg-teal-"]):not([class*="bg-amber-"]):not([class*="bg-rose-"]):not([class*="bg-orange-"]):not([class*="bg-cyan-"]):not([class*="bg-emerald-"]):not([class*="bg-violet-"]):not([class*="bg-fuchsia-"]):not([class*="bg-sky-"]):not([class*="bg-lime-"]):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.tab-button-header):not(.tab-button):not(.ai-search-surface) {
  background-color: var(--color-dark-surface);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

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

html.dark .border-gray-200,
.dark .border-gray-200 {
  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: 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: var(--color-primary-blue) !important;
  border-color: var(--color-primary-blue) !important;
  color: white !important;
  box-shadow: var(--shadow-md);
}

.dark .spot-type-label.selected {
  background: var(--color-primary-blue) !important;
  border-color: var(--color-primary-blue) !important;
  color: white !important;
  box-shadow: var(--shadow-md);
}

.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:not(.swiftspot-main-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(12 10 9 / 35%);
  border-color: var(--color-dark-border-subtle);
}

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,
    var(--color-dark-surface-raised) 25%,
    var(--color-dark-border-strong) 50%,
    var(--color-dark-surface-raised) 75%
  );
  background-size: 200px 100%;
}

html.dark .shimmer {
  background: linear-gradient(
    90deg,
    var(--color-dark-surface-raised) 25%,
    var(--color-dark-border-strong) 50%,
    var(--color-dark-surface-raised) 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 {
  border: 1px solid var(--color-dark-border);
  background: var(--color-dark-surface);
}

/* Theme toggle transition: base/animations.css (html.dark-mode-transitioning) */

/* ============================================================================
   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: var(--color-dark-text) !important;
  --text-secondary: var(--color-dark-text-muted) !important;
  --bg-primary: var(--color-dark-surface) !important;
  --bg-secondary: var(--color-dark-bg) !important;
  --border-color: var(--color-dark-border) !important;
  /* Semantic aliases: canvas → subtle band → surface → raised (lightness increases) */
  --surface-page: var(--color-dark-bg) !important;
  --surface-raised: var(--color-dark-surface) !important;
  --surface-subtle: var(--color-dark-fill-subtle) !important;
  --surface-muted: var(--color-dark-surface-raised) !important;
  --border-ui: var(--color-dark-border) !important;
  --border-ui-subtle: var(--color-dark-border-subtle) !important;
  --text-heading: var(--text-primary) !important;
  --text-body: var(--text-primary) !important;
  --text-supporting: var(--color-dark-text-secondary) !important;
  --text-caption: var(--color-dark-text-secondary) !important;
  --text-hint: var(--color-dark-text-secondary) !important;
  --state-success-bg: rgb(16 185 129 / 14%);
  --state-error-bg: rgb(239 68 68 / 14%);
  --state-warning-bg: rgb(217 119 6 / 18%);
  --state-info-bg: rgb(8 145 178 / 16%);
  --focus-ring-color: rgb(59 130 246 / 22%);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --focus-ring-strong: 0 0 0 3px rgb(59 130 246 / 28%);
}

html.dark .field-success {
  background-color: var(--state-success-bg) !important;
  border-color: var(--state-success) !important;
  box-shadow: 0 0 0 3px rgb(16 185 129 / 22%) !important;
}

html.dark .field-error {
  background-color: var(--state-error-bg) !important;
  border-color: var(--state-error) !important;
  box-shadow: 0 0 0 3px rgb(239 68 68 / 22%) !important;
}

/* Inline-style contrast: use class-based Tailwind remaps above (html.dark .text-gray-*,
   html.dark .text-slate-*). Avoid global *[style*="…"] scans — expensive and they override
   intentional Tailwind/component colors. Maps attribution fixes are scoped below (.gm-style-cc). */

/* ============================================================================
   DISCOVER (maps, sheet) — merged from former css/discover/dark-mode.css
   Loaded once via base templates; no second file named dark-mode.css.
   ============================================================================ */

/* Google Maps attribution — override Google's inline light-theme styles in dark mode.
   Maps injects rgb(245,245,245) bars and rgb(0,0,0) text; global html.dark color and
   broad [style*="color: rgb(0, 0, 0)"] page rules must not win here. */
html.dark .gm-style-cc,
.dark .gm-style-cc {
  background: rgba(31, 41, 55, 0.92) !important;
  color: #d1d5db !important;
}

html.dark .gm-style-cc *,
.dark .gm-style-cc * {
  color: #d1d5db !important;
}

html.dark .gm-style-cc [style*="background-color: rgb(245"],
html.dark .gm-style-cc [style*="background-color:rgb(245"],
html.dark .gm-style-cc [style*="background-color: rgb(255"],
html.dark .gm-style-cc [style*="background-color:rgb(255"],
.dark .gm-style-cc [style*="background-color: rgb(245"],
.dark .gm-style-cc [style*="background-color:rgb(245"],
.dark .gm-style-cc [style*="background-color: rgb(255"],
.dark .gm-style-cc [style*="background-color:rgb(255"] {
  background-color: transparent !important;
}

html.dark .gm-style-cc button,
.dark .gm-style-cc button {
  background: none !important;
  border: 0 !important;
  color: #d1d5db !important;
}

html.dark .google-maps-attribution-collapsed .gm-style-cc,
html.dark .google-maps-attribution-expanded .gm-style-cc,
.dark .google-maps-attribution-collapsed .gm-style-cc,
.dark .google-maps-attribution-expanded .gm-style-cc {
  background: rgba(31, 41, 55, 0.92) !important;
}

/* Focus ring visibility on dark backgrounds */
.dark *:focus-visible {
  outline-color: #60a5fa !important; /* blue-400 */
}

/* Disabled controls in dark mode */
.dark button:disabled,
.dark input:disabled,
.dark select:disabled {
  opacity: 0.7;
  color: #9ca3af !important; /* gray-400 */
}