/* Dark mode base styles */
body.dark-mode {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    color: #e5e5e5;
}

/* Ensure dark mode works with default theme */
body.dark-mode[data-theme="default"],
body.dark-mode:not([data-theme]) {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

body.dark-mode #theme-selector {
    background: rgba(50, 50, 50, 0.95) !important;
    color: #e5e5e5 !important;
    border-color: rgba(255, 140, 122, 0.4) !important;
}

body.dark-mode .card {
    background: rgba(40, 40, 40, 0.95);
    color: #e5e5e5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); /* Reduced glow for dark mode */
}

body.dark-mode .input-group input,
body.dark-mode .input-group input[type="time"],
body.dark-mode .input-group input[type="number"] {
    background: rgba(50, 50, 50, 0.8);
    border-color: var(--accent-orange);
    color: #e5e5e5;
}

body.dark-mode .input-group input:focus {
    background: rgba(60, 60, 60, 0.9);
}

body.dark-mode .weather-card {
    background: linear-gradient(135deg, rgba(255, 140, 122, 0.1), rgba(255, 122, 122, 0.1)); /* Reduced glow intensity */
    border-color: rgba(255, 140, 122, 0.4); /* Softer border color */
}

body.dark-mode #origin-search input,
body.dark-mode #destination-search input {
    background: rgba(50, 50, 50, 0.8) !important;
    color: #e5e5e5 !important;
}

body.dark-mode #origin-search.disabled::after,
body.dark-mode #destination-search.disabled::after {
    background: rgba(40, 40, 40, 0.95);
    color: #e5e5e5;
}

/* Dark mode text colors */
body.dark-mode .text-gray-600 {
    color: #b0b0b0;
}

body.dark-mode .text-gray-500 {
    color: #888;
}

body.dark-mode .text-gray-800 {
    color: #d0d0d0;
}

body.dark-mode .text-white {
    color: #e5e5e5;
}

body.dark-mode .text-red-600 {
    color: #ff8787;
}

body.dark-mode .text-red-800,
body.dark-mode .text-red-900 {
    color: #ff8a80; /* Softer, less harsh red text */
}

/* Dark mode background colors */
body.dark-mode .bg-yellow-50 {
    background-color: rgba(120, 100, 0, 0.3);
}

body.dark-mode .bg-blue-50 {
    background-color: rgba(0, 50, 100, 0.3);
}

body.dark-mode .bg-green-100,
body.dark-mode .bg-green-50 {
    background-color: rgba(50, 150, 50, 0.35); /* Safety label: green in dark mode */
}

body.dark-mode .bg-yellow-100,
body.dark-mode .bg-yellow-50 {
    background-color: rgba(180, 150, 0, 0.4); /* Safety label: yellow/caution in dark mode */
}

body.dark-mode .bg-red-100,
body.dark-mode .bg-orange-100,
body.dark-mode .bg-orange-50 {
    background-color: rgba(150, 50, 50, 0.35); /* Safety label: orange/danger in dark mode */
}

/* Dark mode border colors */
body.dark-mode .border {
    border-color: rgba(255, 140, 122, 0.3);
}

body.dark-mode .border-yellow-200 {
    border-color: rgba(200, 150, 0, 0.5);
}

body.dark-mode .border-blue-200 {
    border-color: rgba(100, 150, 200, 0.5);
}

body.dark-mode .border-green-400,
body.dark-mode .border-green-500,
body.dark-mode .border-green-200 {
    border-color: rgba(120, 220, 120, 0.6); /* Safety label: green border in dark mode */
}

body.dark-mode .border-yellow-400,
body.dark-mode .border-yellow-500,
body.dark-mode .border-yellow-200 {
    border-color: rgba(255, 200, 0, 0.6); /* Safety label: yellow border in dark mode */
}

body.dark-mode .border-red-400,
body.dark-mode .border-red-500,
body.dark-mode .border-orange-200,
body.dark-mode .border-orange-400,
body.dark-mode .border-orange-500 {
    border-color: rgba(255, 120, 120, 0.6); /* Safety label: orange/red border in dark mode */
}

/* Dark mode text colors for specific elements */
body.dark-mode .text-yellow-800 {
    color: #ffd700;
}

body.dark-mode .text-blue-800 {
    color: #7dd3fc;
}

body.dark-mode .text-green-900,
body.dark-mode .text-green-800 {
    color: #a5d6a7; /* Safety label: green text in dark mode */
}

body.dark-mode .text-yellow-800,
body.dark-mode .text-yellow-900 {
    color: #ffeb3b; /* Safety label: yellow text in dark mode */
}

body.dark-mode .text-orange-800 {
    color: #ffab91; /* Safety label: orange text in dark mode */
}

/* Dark mode hover states */
body.dark-mode .hover\:bg-gray-50:hover {
    background-color: rgba(60, 60, 60, 0.5);
}

body.dark-mode .hover\:bg-gray-100:hover {
    background-color: rgba(70, 70, 70, 0.5);
}

body.dark-mode .hover\:text-gray-800:hover {
    color: #e5e5e5;
}

/* Geoapify dropdown readability in dark mode */
body.dark-mode #origin-search .geoapify-autocomplete-items,
body.dark-mode #destination-search .geoapify-autocomplete-items {
    background: rgba(30, 30, 30, 0.98) !important;
    border-color: rgba(255, 140, 122, 0.35) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

body.dark-mode #origin-search .geoapify-autocomplete-items > *,
body.dark-mode #destination-search .geoapify-autocomplete-items > * {
    color: #f3f4f6 !important; /* gray-100 */
}

/* Geoapify sometimes renders nested spans with their own colors; force them too */
body.dark-mode #origin-search .geoapify-autocomplete-items *:not(strong):not(b),
body.dark-mode #destination-search .geoapify-autocomplete-items *:not(strong):not(b) {
    color: #f3f4f6 !important; /* near-white */
}

body.dark-mode #origin-search .geoapify-autocomplete-items > *:hover,
body.dark-mode #destination-search .geoapify-autocomplete-items > *:hover,
body.dark-mode #origin-search .geoapify-autocomplete-item-active,
body.dark-mode #destination-search .geoapify-autocomplete-item-active {
    background: rgba(255, 140, 122, 0.16) !important;
}

body.dark-mode #origin-search .geoapify-autocomplete-items strong,
body.dark-mode #destination-search .geoapify-autocomplete-items strong,
body.dark-mode #origin-search .geoapify-autocomplete-items b,
body.dark-mode #destination-search .geoapify-autocomplete-items b {
    color: #ffd3cc !important;
}

/* Footer panel contrast in dark mode */
body.dark-mode footer .bg-gray-50 {
    background-color: rgba(35, 35, 35, 0.95) !important;
}

body.dark-mode footer .border-gray-200,
body.dark-mode footer .border-gray-300 {
    border-color: rgba(255, 140, 122, 0.25) !important;
}

body.dark-mode footer .text-gray-600 {
    color: #d1d5db !important; /* gray-300 */
}

body.dark-mode footer a {
    color: #ffd3cc !important;
}

body.dark-mode footer a:hover {
    color: #ff8c7a !important;
}

/* Dark mode button styles */
body.dark-mode .btn-primary {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for dark mode */
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 2px 10px rgba(255, 140, 122, 0.15); /* Reduced glow on hover for dark mode */
}

body.dark-mode .btn-primary.shadow-lg {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; /* Override shadow-lg for dark mode */
}

/* Dark mode paywall modal */
body.dark-mode .paywall-overlay {
    background-color: rgba(0, 0, 0, 0.85);
}

body.dark-mode .paywall-modal {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(30, 30, 30, 0.95));
    border-color: rgba(255, 140, 122, 0.5);
    color: #e5e5e5;
}

body.dark-mode .paywall-modal h2,
body.dark-mode .paywall-modal h3 {
    color: var(--accent-orange);
}

body.dark-mode .paywall-modal .text-gray-600 {
    color: #b0b0b0;
}

body.dark-mode .paywall-modal .text-gray-500 {
    color: #888;
}

body.dark-mode .paywall-modal input[type="time"] {
    background: rgba(50, 50, 50, 0.8);
    color: #e5e5e5;
    border-color: rgba(255, 140, 122, 0.3);
}

body.dark-mode .paywall-modal input[type="time"]:focus {
    background: rgba(60, 60, 60, 0.9);
    border-color: var(--accent-orange);
}

body.dark-mode .paywall-modal .border {
    border-color: rgba(255, 140, 122, 0.3);
}

body.dark-mode .paywall-modal button {
    color: #e5e5e5;
}

body.dark-mode .paywall-modal .text-gray-700 {
    color: #d0d0d0;
}

/* Dark mode welcome modal */
body.dark-mode .welcome-overlay {
    background-color: rgba(0, 0, 0, 0.85);
}

body.dark-mode .welcome-modal {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(30, 30, 30, 0.95));
    border-color: rgba(255, 140, 122, 0.5);
    color: #e5e5e5;
}

body.dark-mode .welcome-modal h2 {
    color: var(--accent-orange);
}

body.dark-mode .welcome-modal .text-gray-600 {
    color: #b0b0b0;
}

body.dark-mode .welcome-modal .text-gray-700 {
    color: #c0c0c0;
}

body.dark-mode .welcome-modal .bg-gray-50 {
    background-color: rgba(50, 50, 50, 0.5);
}

body.dark-mode .welcome-modal .bg-green-100,
body.dark-mode .welcome-modal .bg-green-50 {
    background-color: rgba(0, 100, 0, 0.3);
}

body.dark-mode .welcome-modal .border-green-500,
body.dark-mode .welcome-modal .border-green-200 {
    border-color: rgba(100, 200, 100, 0.5);
}

body.dark-mode .welcome-modal .text-green-900,
body.dark-mode .welcome-modal .text-green-800 {
    color: #90ee90;
}

body.dark-mode .welcome-modal .bg-yellow-50 {
    background-color: rgba(120, 100, 0, 0.3);
}

body.dark-mode .welcome-modal .border-yellow-200 {
    border-color: rgba(200, 150, 0, 0.5);
}

body.dark-mode .welcome-modal .bg-green-100.text-green-700 {
    background-color: rgba(0, 100, 0, 0.3);
    color: #90ee90;
}

body.dark-mode .welcome-modal .bg-yellow-100.text-yellow-700 {
    background-color: rgba(120, 100, 0, 0.3);
    color: #ffd700;
}

body.dark-mode .welcome-modal .border-green-300 {
    border-color: rgba(100, 200, 100, 0.5);
}

body.dark-mode .welcome-modal .border-yellow-300 {
    border-color: rgba(200, 150, 0, 0.5);
}