/* =================================================================== */
/* INTERACTIVE MAP COMPONENT STYLES - FINAL VERSION                    */
/* =================================================================== */

@font-face {
    font-family: 'Snowstorm';
    src: url('../../assets/fonts/snowstorm.otf') format('opentype');
}

/* --- Shared Tooltip Style --- */
/* This now ONLY applies to the GLOBE tooltip */
.map-tooltip {
    font-family: 'Snowstorm', Arial, sans-serif;
    background: rgba(42, 42, 42, 0.95);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    border-radius: 10px;
    padding: 20px;
    min-width: 220px;
    text-align: center;
    position: absolute;
    display: none;
    color: #ccc;
    z-index: 10001;
}

.map-tooltip strong {
    font-size: 1.5em;
    color: var(--cyan-glow);
    text-shadow: 0 0 0px var(--cyan-glow);
    font-style: italic;
    display: block;
    margin-bottom: 15px;
}

.map-tooltip .map-tooltip-btn {
    font-family: inherit;
    background: rgba(var(--cyan-glow-rgba), 0.2);
    border: 1px solid var(--cyan-glow);
    color: white;
    padding: 5px 10px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.map-tooltip .map-tooltip-btn:hover {
    background: rgba(var(--cyan-glow-rgba), 0.4);
    transform: translateY(-2px);
    border-color: var(--cyan-glow);
    color: #fff;
}
#mapPainterContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* --- Map Painter Specific Styles --- */

/* NEW UNIFIED CONTROL PANEL STYLE (BOTTOM BAR) */
.map-painter-controls {
    font-family: 'Snowstorm', Arial, sans-serif;
    background: rgba(42, 42, 42, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 15px; /* A bit more padding */
    
    /* Flexbox properties for layout */
    display: flex;
    justify-content: space-between; /* Pushes groups to opposite ends */
    align-items: center;
    flex-wrap: wrap; /* Allows stacking on mobile */
    gap: 20px;
    border-top: 1px solid var(--panel-border);
}

.map-painter-controls .map-control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.map-painter-controls .map-control-group:nth-child(3) {
    justify-content: center;
}

/* UNIFIED: Hide labels on all sizes */
.map-painter-controls h4,
.map-custom-color-container label {
    display: none;
}

.map-color-palette {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.map-color-swatch, #painter-eraser-btn, #painter-clear-btn {
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-color-swatch {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--panel-border);
    border-radius: 5px;
}

#painter-eraser-btn, #painter-clear-btn {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: #ccc;
    padding: 10px 15px;
    font-size: 1.1em;
    border-radius: 5px;
    text-transform: uppercase;
}

#painter-eraser-btn:hover, #painter-clear-btn:hover {
    color: #fff;
    background: rgba(var(--cyan-glow-rgba), .1);
}

.map-color-swatch.active, #painter-eraser-btn.active {
    border-color: var(--cyan-glow);
    box-shadow: 0 0 10px var(--cyan-glow);
    transform: scale(1.1);
}

.map-custom-color-container { display: flex; align-items: center; gap: 10px; }
#painter-custom-color {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 50px; height: 36px; padding: 0;
    border: 2px solid var(--panel-border);
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
}
#painter-custom-color::-webkit-color-swatch-wrapper { padding: 0; }
#painter-custom-color::-webkit-color-swatch { border: none; border-radius: 3px; }
#painter-custom-color::-moz-color-swatch { border: none; border-radius: 3px; }

.map-painter-canvas {
    position: relative;
    flex-grow: 1; /* This makes it fill the available vertical space */
    width: 100%;
}
.map-painter-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* NEW UNIFIED TOOLTIP BAR STYLE */
.map-tooltip.is-painter-bar {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(17, 22, 32, 0.9);
    backdrop-filter: blur(5px);
    padding: 8px;
    text-align: center;
    border: none;
    border-bottom: 1px solid var(--panel-border);
    z-index: 100;
    
    /* Reset floating styles */
    border-radius: 0;
    box-shadow: none;
}
.map-tooltip.is-painter-bar strong {
    font-size: 1.2em;
    margin: 0;
}
.map-tooltip.is-painter-bar .map-tooltip-btn {
    display: none;
}
/* Style the select dropdown when the placeholder is active */
/* Set the default text color for the select box AND all its options. */
.map-control-group select {
  color: #ffffff;
}

/* Ensure options in the dropdown list are always white */
.map-control-group select option {
  color: #ffffff;
  background: #2a2a2a; /* Optional: Sets a dark background for the dropdown list */
}

/* When the select is "invalid" (because the empty-value placeholder is chosen),
   make the visible text gray. This does NOT affect the options in the list. */
.map-control-group select:invalid {
  color: #9e9e9e;
}

/* --- Map Legend Bar --- */
.map-legend-bar {
    display: none;
    align-items: center;
    justify-content: space-between; /* MODIFIED */
    gap: 10px;
    padding: 0 10px;
    flex-grow: 1;
    min-width: 250px; /* Increased min-width */
}

.map-legend-bar.visible {
    display: flex;
}

.legend-gradient {
    height: 15px;
    width: 100%;
    flex-grow: 1;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Position relative for the middle label */
    position: relative;
}

/* NEW RULE for the middle label */
.legend-label-mid {
    position: absolute;
    top: -18px; /* Position it above the gradient bar */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9em;
    color: #ccc;
}

.legend-label-min,
.legend-label-max {
    font-size: 0.9em;
    color: #ccc;
}

/* --- Mobile Optimizations for Map Toolbar --- */
@media (max-width: 768px) {
    .map-viewer-toolbar {
        flex-direction: column; /* Stack the two main control groups vertically */
        align-items: stretch;   /* Make each group take the full width */
        gap: 10px;              /* Add some space between the stacked groups */
    }

    .map-viewer-toolbar .map-control-group {
        flex-wrap: wrap;         /* Allow items inside a group (like dropdowns) to wrap to a new line */
        justify-content: center; /* Center the items for a cleaner look */
    }

    /* This is the key part for a stable UI */
    .map-viewer-toolbar .map-legend-bar {
        width: 100%;       /* Make the legend bar take the full width */
        order: 3;          /* IMPORTANT: This moves the legend to the *bottom* of its group */
        margin-top: 10px;  /* Add some space above the legend when it appears */
    }
}
.map-legend-group {
    flex-grow: 1; /* Make the group take up all available space */
    display: flex;
    justify-content: flex-end; /* Push the legend bar to the right side of this group */
}

/* --- NEW: Gradient style for the custom color picker --- */
.map-custom-color-container {
    background: linear-gradient(135deg, var(--cyan-glow), var(--purple-glow), var(--pink-glow));
    border-radius: 5px;
    padding: 2px; /* This creates a thin "gradient border" effect */
    box-sizing: border-box;
}

/* --- Centering Fix for Mobile Tooltip Bar --- */
.map-tooltip-bar {
    /* Base styles from main.css are now consolidated here */
    background: rgba(10, 10, 10, 0.8);
    border-bottom: 1px solid var(--panel-border);
    color: #fff;
    padding: 8px 15px;
    text-align: center;
    font-size: 1.2em;
    flex-shrink: 0;
    position: absolute;
    z-index: 10;

    /* Logic for centering content */
    align-items: center;
    justify-content: center;
    
    /* THE FIX: Hide it completely and collapse its space by default */
    display: none; 
}

/* This rule makes it appear when the JS adds the .visible class */
.map-tooltip-bar.visible {
    display: flex;
}

/* --- NEW: Mobile Tooltip Bar Flexbox Management --- */

/* Tell the main tooltip bar to allow its children to wrap onto new lines */
.map-tooltip-bar.visible {
    flex-wrap: wrap;
}

/* Tell the button to take up 100% of the width, forcing it to a new line */
.map-tooltip-bar .map-tooltip-btn {
    width: 100%;
    margin-top: 8px; /* Add some space above the button */
}

/* ADD THIS NEW RULE */
.map-viewer-toolbar select,
.map-painter-controls select {
    font-size: 1em;
    padding: 8px 16px;
    background: rgba(0,0,0,.5);
    border: 1px solid var(--panel-border);
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    transition: all .2s ease;
}

/* --- NEW: Map Search Bar Styles --- */
.map-search-container {
    position: relative; /* Anchor for the results dropdown */
    display: flex;
    align-items: center;
}

#map-search-input {
    /* Style to match other toolbar controls */
    font-size: 1em;
    padding: 8px 12px 8px 16px; /* Extra padding for potential icon */
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--panel-border);
    color: #ccc;
    border-radius: 4px;
    font-family: inherit;
    width: 250px; /* Default width for desktop */
    transition: all 0.2s ease;
}

#map-search-input:focus {
    border-color: var(--cyan-glow);
    outline: none;
}

#map-search-clear-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
}

#map-search-results {
    display: none; /* Hidden by default */
    position: absolute;
    top: 110%; /* Position it just below the input */
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: rgba(42, 42, 42, 0.98);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    z-index: 100; /* Make sure it's on top */
    backdrop-filter: blur(5px);
}

.map-search-result-item {
    padding: 10px 15px;
    color: #ccc;
    cursor: pointer;
    font-size: 1em;
}

.map-search-result-item:hover {
    background: rgba(var(--cyan-glow-rgba), 0.15);
    color: #fff;
}

/* The highlight pulse effect */
.region-highlighted {
    stroke: var(--pink-glow) !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 5px var(--pink-glow));
    transition: all 0.3s ease-out;
}

/* Mobile responsive adjustments */
@media (max-width: 900px) { /* Adjust breakpoint as needed */
    .map-search-container {
        width: 100%; /* Take full width on smaller screens */
        order: 3; /* Move to the bottom of its group */
        margin-top: 10px;
    }
    #map-search-input {
        width: 100%;
    }

    /* --- NEW: Painter Toolbar Mobile Layout Override --- */

    .map-painter-controls {
        /* Switch from Flexbox to Grid on mobile */
        display: grid;
        /* Define a two-row layout */
        grid-template-areas:
            "tools"
            "palette";
        justify-items: center; /* Center the content of both rows */
        padding: 10px; /* Adjust padding for a tighter mobile view */
    }

    /* Assign the first group (dropdown, eraser, clear) to the "tools" row */
    .map-painter-controls .map-control-group:nth-of-type(1) {
        grid-area: tools;
    }

    /* Assign the second group (color swatches) to the "palette" row */
    .map-painter-controls .map-control-group:nth-of-type(2) {
        grid-area: palette;
    }
}

/* =================================================================== */
/* TIMELAPSE FEATURE STYLES                                            */
/* =================================================================== */

#timelapse-btn.active {
    background: rgba(var(--pink-glow-rgba), .3);
    color: #fff;
    border-color: var(--pink-glow);
}

#timelapse-controls-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20; /* Above the map, below the toolbar */
    padding: 10px;
}

.map-timelapse-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(42, 42, 42, 0.95);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 10px 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.4);
}

.timelapse-playback-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.timelapse-playback-buttons button {
    font-family: inherit;
    font-size: 1.5em;
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.timelapse-playback-buttons button:hover {
    color: var(--cyan-glow);
}

#timelapse-date-display {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    min-width: 140px; /* Prevent layout shift */
    text-align: center;
}

.timelapse-slider-wrapper {
    flex-grow: 1;
}

input[type="range"]#timelapse-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 5px;
    border: 1px solid var(--panel-border);
    outline: none;
    cursor: pointer;
}

input[type="range"]#timelapse-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--cyan-glow);
    border-radius: 50%;
    border: 2px solid #fff;
}

input[type="range"]#timelapse-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--cyan-glow);
    border-radius: 50%;
    border: 2px solid #fff;
}

.timelapse-timeframe-buttons {
    display: flex;
    gap: 8px;
}

.timelapse-timeframe-buttons button {
    font-size: 0.9em;
    padding: 6px 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--panel-border);
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.timelapse-timeframe-buttons button.active,
.timelapse-timeframe-buttons button:hover {
    background: rgba(var(--cyan-glow-rgba), .3);
    color: #fff;
    border-color: var(--cyan-glow);
}


/* --- Mobile Styles for Timelapse --- */
@media (max-width: 768px) {
    .map-timelapse-controls {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }

    .timelapse-playback-buttons {
        order: 2; /* Move playback to the middle */
        width: 100%;
        justify-content: center;
    }
    
    .timelapse-slider-wrapper {
        order: 1; /* Move slider to the top */
        width: 100%;
    }

    .timelapse-timeframe-buttons {
        order: 3; /* Move timeframes to the bottom */
        width: 100%;
        justify-content: center;
    }

    #timelapse-date-display {
        font-size: 1em;
        min-width: 110px;
    }
}

/* Add to end of interactive-map.css */

.timelapse-speed-buttons {
    display: flex;
    gap: 8px;
}

.timelapse-speed-buttons button {
    font-size: 0.9em;
    padding: 6px 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--panel-border);
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.timelapse-speed-buttons button.active,
.timelapse-speed-buttons button:hover {
    background: rgba(var(--cyan-glow-rgba), .3);
    color: #fff;
    border-color: var(--cyan-glow);
}

/* --- Mobile Styles for Timelapse --- */
@media (max-width: 768px) {
    .map-timelapse-controls {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }

    .timelapse-playback-buttons {
        order: 2; /* Move playback to the middle */
        width: 100%;
        justify-content: center;
    }
    
    .timelapse-slider-wrapper {
        order: 1; /* Move slider to the top */
        width: 100%;
    }

    .timelapse-speed-buttons {
        order: 3; /* Move speed controls after playback */
        width: 100%;
        justify-content: center;
    }

    .timelapse-timeframe-buttons {
        order: 4; /* Move timeframes to the very bottom */
        width: 100%;
        justify-content: center;
    }

    #timelapse-date-display {
        font-size: 1em;
        min-width: 110px;
    }
}