/* Map-specific styles for PattayaRain */

#map {
    height: calc(100vh - 70px);
    min-height: 400px;
    /* The background-color below will be overridden by Leaflet.container if light theme is used for the base layer,
       but it acts as a fallback if the tiles don't load. */
    background-color: #212529; 
}

/* Let Leaflet handle legend positioning */
.map-legend-container {
    z-index: 1000;
}

/* Styles for the legend card itself */
.map-legend-container .card {
    background-color: rgba(33, 37, 41, 0.9) !important; /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    backdrop-filter: blur(4px); /* Frosty glass effect */
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.prediction-overlay {
    z-index: 999;
    pointer-events: none; /* Allows clicks to pass through to the map below */
}

/* Ensure controls within the overlay are clickable */
.prediction-overlay .card {
    pointer-events: auto; 
}

.loading-overlay {
    z-index: 2000; /* High z-index to appear on top */
    backdrop-filter: blur(5px); /* Blurs content behind it */
}

/* Leaflet control theme customizations for a light base map */
.leaflet-container {
    background-color: var(--bs-light); /* Sets the overall map background to light */
}

.leaflet-control-container .leaflet-control {
    background-color: var(--bs-light); /* Light background for controls */
    border: 1px solid var(--bs-border-color); /* Subtle border */
    color: var(--bs-dark); /* Dark text for controls */
}

/* Specific styling for Leaflet zoom and locate buttons */
.leaflet-control-zoom a, .leaflet-control-locate a {
    background-color: var(--bs-light) !important; /* Override Leaflet defaults */
    border-bottom: 1px solid var(--bs-border-color) !important; /* Separator for stacked buttons */
    color: var(--bs-dark) !important; /* Dark icons/text */
}

/* Hover effects for Leaflet controls */
.leaflet-control-zoom a:hover, .leaflet-control-locate a:hover {
    background-color: var(--bs-gray-300) !important; /* Slightly darker light background on hover */
    color: var(--bs-dark) !important;
}

/* Styling for Leaflet attribution text */
.leaflet-control-attribution {
    background-color: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent light background */
    color: var(--bs-dark) !important; /* Dark text */
}

.leaflet-control-attribution a {
    color: var(--bs-primary); /* Bootstrap primary color for links */
}

/* Popup styling for markers */
.leaflet-popup-content-wrapper {
    background-color: var(--bs-light); /* Light background for popups */
    color: var(--bs-dark); /* Dark text for popups */
    border: 1px solid var(--bs-border-color);
}

.leaflet-popup-tip {
    background-color: var(--bs-light); /* Light background for popup tip (arrow) */
    border: 1px solid var(--bs-border-color);
}

/* Responsive adjustments for prediction overlay on small screens */
@media (max-width: 768px) {
    .prediction-overlay .card {
        margin: 0 1rem 1rem 1rem;
    }
}

/* Add a CSS transition for smooth drawing of new layers (for opacity changes on pulse) */
.rain-overlay-animated {
    /* Positional changes are handled by the backend sending new coordinates for each frame.
       This transition primarily smooths the opacity pulses. */
    transition: opacity 0.3s ease-in-out; 
}

/* Pulsing animation for a "live" feel (applies to opacity only) */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.8; }
    100% { opacity: 0.6; }
}

/* Animation speed varies by intensity */
.rain-polygon-light {
    animation: pulse 4s ease-in-out infinite;
}
.rain-polygon-moderate {
    animation: pulse 3s ease-in-out infinite;
}
.rain-polygon-heavy {
    animation: pulse 2s ease-in-out infinite;
}
.rain-polygon-very-heavy {
    animation: pulse 1.5s ease-in-out infinite;
}
.rain-polygon-extreme-heavy {
    animation: pulse 1s ease-in-out infinite;
}

/* Style for forecast frames text, making it bold and primary color */
#current-frame-time.text-primary {
    font-weight: bold;
    color: var(--bs-primary) !important; 
}


/* --- CORRECTED AND ENHANCED: Styles for the On-Map Timeline Overlay --- */

/* The .leaflet-control class is added to make this rule more specific than the general one above, ensuring it overrides the light theme. */
.leaflet-control.leaflet-control-timeline {
    background-color: rgba(33, 37, 41, 0.85) !important; /* Semi-transparent dark background */
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    pointer-events: auto;
}

.leaflet-control-timeline .timeline-display {
    color: #f8f9fa !important; /* White and readable text */
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.leaflet-control-timeline .intensity-bar {
    display: flex;
    gap: 4px; /* Space between color swatches */
    justify-content: center;
}

.leaflet-control-timeline .intensity-bar .intensity-color {
    width: 20px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.2);
}

/* FIX: Override Bootstrap's default blue to be more readable on a dark background */
.leaflet-control-timeline .text-primary {
    color: #58a6ff !important; /* A more vibrant, readable blue */
}

/* --- END OF CORRECTIONS --- */