/* Modern Dark Mode Fixes and Improved Styling */

/* Ensure dark mode actually looks dark */
.dark {
    color-scheme: dark;
}

/* Glass morphism effects with proper dark mode */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass {
    background: rgba(17, 24, 39, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.glass-dark {
    background: rgba(17, 24, 39, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark mode background fixes */
.dark body {
    background: #0f172a !important;
    background-image: linear-gradient(to bottom right, #0f172a, #1e293b) !important;
}

.dark .bg-white {
    background-color: rgb(30 41 59) !important;
}

.dark .bg-gray-50 {
    background-color: rgb(30 41 59) !important;
}

.dark .bg-gray-100 {
    background-color: rgb(51 65 85) !important;
}

.dark .bg-gray-200 {
    background-color: rgb(71 85 105) !important;
}

/* Dark mode text colors */
.dark .text-gray-900 {
    color: rgb(241 245 249) !important;
}

.dark .text-gray-800 {
    color: rgb(226 232 240) !important;
}

.dark .text-gray-700 {
    color: rgb(203 213 225) !important;
}

.dark .text-gray-600 {
    color: rgb(148 163 184) !important;
}

.dark .text-gray-500 {
    color: rgb(100 116 139) !important;
}

/* Dark mode borders */
.dark .border-gray-200 {
    border-color: rgb(51 65 85 / 0.3) !important;
}

.dark .border-gray-300 {
    border-color: rgb(71 85 105 / 0.3) !important;
}

/* Input fields in dark mode */
.dark input[type="text"],
.dark input[type="search"],
.dark select,
.dark textarea {
    background-color: rgb(30 41 59) !important;
    border-color: rgb(51 65 85) !important;
    color: rgb(226 232 240) !important;
}

.dark input[type="text"]:focus,
.dark input[type="search"]:focus,
.dark select:focus,
.dark textarea:focus {
    background-color: rgb(15 23 42) !important;
    border-color: rgb(99 102 241) !important;
}

.dark input::placeholder {
    color: rgb(100 116 139) !important;
}

/* Dark mode cards and panels */
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-2xl,
.dark .bg-white.rounded-lg {
    background-color: rgb(30 41 59) !important;
    border: 1px solid rgb(51 65 85 / 0.5);
}

/* Hover states in dark mode */
.dark .hover\:bg-gray-50:hover {
    background-color: rgb(51 65 85) !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: rgb(71 85 105) !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: rgb(100 116 139) !important;
}

/* Map popup styles for dark mode */
.dark .leaflet-popup-content-wrapper {
    background-color: rgb(30 41 59) !important;
    color: rgb(226 232 240) !important;
    border: 1px solid rgb(51 65 85);
}

.dark .leaflet-popup-tip {
    background-color: rgb(30 41 59) !important;
    border-color: rgb(51 65 85) !important;
}

.dark .leaflet-popup-close-button {
    color: rgb(148 163 184) !important;
}

.dark .leaflet-popup-close-button:hover {
    color: rgb(226 232 240) !important;
}

/* Map controls in dark mode */
.dark .leaflet-control-zoom a {
    background-color: rgb(30 41 59) !important;
    color: rgb(226 232 240) !important;
    border-color: rgb(51 65 85) !important;
}

.dark .leaflet-control-zoom a:hover {
    background-color: rgb(51 65 85) !important;
}

.dark .leaflet-control-attribution {
    background-color: rgba(30, 41, 59, 0.8) !important;
    color: rgb(148 163 184) !important;
}

/* Fix for map markers - ensure they stay in place */
.leaflet-marker-icon {
    position: absolute !important;
    margin-left: -12px !important;
    margin-top: -41px !important;
    width: 25px !important;
    height: 41px !important;
    z-index: 600 !important;
}

.custom-station-marker {
    position: absolute !important;
    z-index: 700 !important;
    pointer-events: all !important;
}

.user-location-marker {
    position: absolute !important;
    z-index: 650 !important;
    pointer-events: none !important;
}

/* Ensure price labels on markers stay visible */
.custom-station-marker > div {
    position: relative !important;
}

/* Fix for Leaflet div icons */
.leaflet-div-icon {
    background: transparent !important;
    border: none !important;
}

/* Gradient overlays in dark mode */
.dark .gradient-primary {
    background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%) !important;
}

.dark .gradient-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.dark .gradient-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

.dark .gradient-danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* Fix modal backgrounds in dark mode */
.dark .fixed.inset-0.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Scrollbar in dark mode */
.dark ::-webkit-scrollbar-track {
    background: rgb(30 41 59);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgb(71 85 105);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(100 116 139);
}

/* Toast notifications in dark mode */
.dark .gradient-primary,
.dark .gradient-success,
.dark .gradient-warning,
.dark .gradient-danger {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Station cards in dark mode */
.dark .group:hover {
    background-color: rgb(30 41 59) !important;
    border-color: rgb(99 102 241 / 0.5) !important;
}

/* Loading overlay in dark mode */
.dark .glass.rounded-2xl {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
}

/* Mobile sheet in dark mode */
.dark .fixed.bottom-0.glass {
    background: rgba(30, 41, 59, 0.95) !important;
    border-top: 1px solid rgba(71, 85, 105, 0.5) !important;
}

/* Settings modal in dark mode */
.dark .relative.glass.rounded-3xl {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
}