/* Custom Base Layout Rules */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #0B0B0C;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbar for premium dark theme */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #FFC803;
}

/* Map Overlay Gradient to blend map with UI */
.map-overlay-gradient {
    background: linear-gradient(to bottom, rgba(11, 11, 12, 0.8) 0%, rgba(11, 11, 12, 0) 25%, rgba(11, 11, 12, 0) 70%, rgba(11, 11, 12, 0.9) 100%);
}

/* Dashed vertical connector line in selection state */
.bg-dashed-custom {
    background-image: linear-gradient(to bottom, #10b981 40%, rgba(255,255,255,0) 0%);
    background-position: right;
    background-size: 2px 8px;
    background-repeat: repeat-y;
}

/* Radar Pulse Animation */
.radar-pulse {
    animation: radar-grow 2s infinite cubic-bezier(0.21, 0.61, 0.35, 1);
}
.delay-75 {
    animation-delay: 0.5s;
}

@keyframes radar-grow {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Leaflet Custom Map Tweaks */
.leaflet-container {
    background: #0B0B0C !important;
}

/* Darken map tiles slightly more and boost contrast */
.leaflet-tile-container {
    filter: brightness(0.7) contrast(1.1) saturate(0.9);
}

/* Hide default leaflet control elements */
.leaflet-control-zoom, .leaflet-control-attribution {
    display: none !important;
}

/* Safe Area Inset padding for modern screens */
#bottomSheet {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
header {
    padding-top: calc(1rem + env(safe-area-inset-top));
}
#sidebar {
    padding-top: calc(1.5rem + env(safe-area-inset-top));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* Interactive card hover states */
.ride-card {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease;
}
.ride-card:active {
    transform: scale(0.97);
}