/* Brand colors */
:root {
    --wc-brand-blue: #0088BB;
    --active-purple: #80b;
    --tile-thumb-bg: #f5f5f5; /* Default background color for layer thumbnails */
    --tile-icon-color: #666;
    --tile-icon-shadow: 0 0 3px #fff;
}


/* Layer menu (simple, clean) */
#layer-dropdown-menu {
    min-width: 280px;
    width: auto;
    padding: 0;
    margin-top: -39px;
    margin-right: -3px;
    border-radius: 8px;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    right: 0;
    left: auto;
    position: absolute;
}

/* Loading overlay for devices (opacify content, keep menu background) */
#layer-dropdown-menu .layer-menu-content {
    position: relative;
}

#layer-dropdown-menu.is-loading-devices .layer-menu-content {
    opacity: 0.4;
    pointer-events: none;
}

#layer-dropdown-menu .menu-loading-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: var(--wc-brand-blue);
    background: transparent;
    /* Ensure it takes full size */
    width: 100%;
    height: 100%;
}

#layer-dropdown-menu.is-loading-devices .menu-loading-overlay {
    display: flex;
}

#layer-dropdown-menu .menu-loading-overlay .weather-bars-loader {
    width: 72px;
    height: 52px; /* Force height to ensure visibility */
}


.layer-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tile-thumb-bg);
}

.layer-menu-header .close, #station-visibility-toggle ,#mynetwork-visibility-toggle {
    color: var(--tile-icon-color);
    opacity: 0.7;
}

.layer-menu-header .close:hover,#station-visibility-toggle:hover,#mynetwork-visibility-toggle:hover {
    opacity: 1;
    color: var(--tile-icon-color)

}

.layer-menu-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.layer-section {
    margin-top: 10px;
    padding: 0px 14px 0px;
}

.layer-section-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.layer-section-subtitle {
    font-size: 12px;
    margin-bottom: 10px;
}

.layer-footer .layer-section-title {
    margin-bottom: 0;
}

.layer-separator {
    height: 1px;
    background: var(--tile-thumb-bg);
    margin: 2px 14px 0px;
}


.layer-grid {
    display: grid;
    grid-template-columns: repeat(3, 76px);
    gap: 0px 0px; /* vertical y horizontal */
    justify-content: space-between; /* centra el grid en el contenedor */
    justify-items: center;
    align-items: start;
}


.layer-tile {
    width: 76px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    outline: none;
}

.layer-tile:hover {
    background: transparent;
}

.layer-tile-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    box-sizing: border-box;
    background-clip: padding-box; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer-tile:hover .layer-tile-thumb,
.layer-tile.active .layer-tile-thumb {
    border-color: var(--wc-brand-blue);
}

.layer-tile-thumb .layer-tile-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: var(--tile-icon-color);
    text-shadow: var(--tile-icon-shadow);
    pointer-events: none;
}

/* Forecast (GFS) icons always white with shadow */
[id^="layer-gfs-"] .layer-tile-thumb .layer-tile-icon {
    color: #fff;
    text-shadow: 0 0 4px #000;
}

#layer-gfs-none .layer-tile-thumb {
    background-image: var(--icon-default);
}
#layer-gfs-temp .layer-tile-thumb {
    background-image: var(--icon-temp);
}
#layer-gfs-rain .layer-tile-thumb {
    background-image: var(--icon-rain);
}
#layer-gfs-wind .layer-tile-thumb {
    background-image: var(--icon-wind);
}
#layer-gfs-dewpoint .layer-tile-thumb {
    background-image: var(--icon-dewpoint);
}
#layer-gfs-gust .layer-tile-thumb {
    background-image: var(--icon-windgust);
}
#layer-gfs-rain-accum .layer-tile-thumb {
    background-image: var(--icon-rainaccum);
}
#layer-gfs-humidity .layer-tile-thumb {
    background-image: var(--icon-hum);
}
#layer-gfs-pressure .layer-tile-thumb {
    background-image: var(--icon-pressure);
}

.layer-tile-label {
    color: var(--tile-icon-color);
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.2;
    height: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.layer-tile:hover .layer-tile-thumb {
    border-color: var(--wc-brand-blue);
}

.layer-tile:hover .layer-tile-label {
    color: var(--wc-brand-blue);
}

/* Variable icons should follow hover color (blue) */
.station-variables-grid .layer-tile:hover .layer-tile-icon {
    color: var(--wc-brand-blue);
}

/* Keep active variable tiles readable on hover */
.station-variables-grid .layer-tile.active:hover .layer-tile-thumb,
.station-variables-grid .layer-tile.active:hover .layer-tile-icon,
.station-variables-grid .layer-tile.active:hover .layer-tile-label {
    opacity: 0.9;
}

.layer-tile.active .layer-tile-thumb {
    border-color: var(--wc-brand-blue);
}

.layer-tile.active .layer-tile-label {
    color: var(--wc-brand-blue);
}

.layer-grid .layer-btn{
    white-space: normal;
}

/* Stations */
#mynetwork-visibility-toggle,
#station-visibility-toggle {

    text-decoration: none;
    margin-left: 8px; 
    font-size: 16px; 
    text-decoration: none;
}

.station-section-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Wrappers for the gray background look */
.station-group-wrapper {
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.station-filter-group,
#station-category-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: 100%;
    gap: 6px;
    box-sizing: border-box;
    margin: 0;
}

/* Disable station filter buttons when stations are hidden */
.station-filter-group.disabled,
#station-category-group.disabled {
    pointer-events: none;
    opacity: 0.55;
}

.station-filter-group.disabled .btn,
#station-category-group.disabled .btn {
    cursor: not-allowed;
}

/* Base button style reset for the menu - overrides Bootstrap btn */
#layer-dropdown-menu .station-filter-group .btn,
#layer-dropdown-menu #station-category-group .btn {
    background-image: none;
    background-color: var(--tile-thumb-bg);
    border: 2px solid transparent;
    box-shadow: none;
    font-size: 12px;
    color: var(--tile-icon-color);
    position: relative;
    width: auto;
    white-space: nowrap;
    overflow: visible;
    margin: 0px;
    border-radius: 8px;
    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* --- Category Buttons States --- */

/* Selected Category (Current Tab) */
#station-category-group .btn.wc-cat-current,
#station-category-group .btn.wc-cat-active-current {
    background-color: #fff;
    color: var(--wc-brand-blue);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#station-category-group .btn.wc-cat-current:hover,
#station-category-group .btn.wc-cat-active-current:hover {
    background-color: #fff;
    color: var(--wc-brand-blue);

}

/* Indicator Dot for Active Children (Green Circle) */
#station-category-group .btn.wc-cat-active::after,
#station-category-group .btn.wc-cat-active-current::after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background-color: var(--wc-brand-blue);
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
}

/* Reset .active style if Bootstrap applies it to non-selected buttons */
#station-category-group .btn.active {
    background-color: transparent; 
    box-shadow: none;
}
/* Re-apply white bg for our classes if active class overrides it */
#station-category-group .btn.wc-cat-current.active,
#station-category-group .btn.wc-cat-active-current.active {
    background-color: #fff;
}

/* --- Filter Buttons States --- */

#layer-dropdown-menu .station-filter-group .btn:not(.active):hover,
#layer-dropdown-menu .station-filter-group .btn:not(.active):focus,
#layer-dropdown-menu .station-filter-group .btn:not(.active):active,
#station-category-group .btn:not(.active):hover,
#station-category-group .btn:not(.active):focus,
#station-category-group .btn:not(.active):active {
    background-color: var(--tile-thumb-bg);
    color: var(--tile-icon-color);
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

/* Hover ONLY FOR MOUSE DEVICES to fix IOS hover issue*/
@media (hover: hover) {
    #layer-dropdown-menu .station-filter-group .btn:not(.active):hover,
    #station-category-group .btn:not(.active):hover {
        background-color: var(--tile-thumb-bg);
        border-color: var(--wc-brand-blue);
        color: var(--wc-brand-blue);
    }

    /* Own / Following hover colors (restore original behavior) */
    #layer-dropdown-menu .station-filter-group #station-filter-own:not(.active):hover {
        border-color: #20a120;
        color: #20a120;
    }

    #layer-dropdown-menu .station-filter-group #station-filter-favorite:not(.active):hover {
        border-color: var(--active-purple);
        color: var(--active-purple);
    }
}

/* Reset focus/active/disabled to defaults to override dark.css */
#layer-dropdown-menu .station-filter-group .btn:not(.active):focus:not(:hover),
#layer-dropdown-menu .station-filter-group .btn:not(.active):active,
#layer-dropdown-menu .station-filter-group .btn.disabled,
#layer-dropdown-menu #station-category-group .btn:not(.active):focus:not(:hover),
#layer-dropdown-menu #station-category-group .btn:not(.active):active,
#layer-dropdown-menu #station-category-group .btn.disabled {
    background-color: var(--tile-thumb-bg);
    color: var(--tile-icon-color);
    border-color: transparent;
    box-shadow: none;
}

#layer-dropdown-menu .station-filter-group .btn.active {
    background-color: var(--wc-brand-blue);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-color: transparent;
}

#layer-dropdown-menu .station-filter-group .btn.active:hover {
    opacity: 0.9;
}

/* Mine button gets green background when active */
#layer-dropdown-menu .station-filter-group #station-filter-own.active {
    background-color: #20a120;
    color: white;
}

@media (hover: hover) {
    #layer-dropdown-menu .station-filter-group #station-filter-own:hover:not(.active) {
        border-color: #20a120;
        color: #20a120;
    }
}

/* Favorites button gets amber background when active */
#layer-dropdown-menu .station-filter-group #station-filter-favorite.active {
    background-color: var(--active-purple);
    color: white; 
}

@media (hover: hover) {
    #layer-dropdown-menu .station-filter-group #station-filter-favorite:hover:not(.active) {
        border-color: var(--active-purple);
        color: var(--active-purple);
    }
}

#layer-dropdown-menu .station-filter-group #station-filter-own.active:hover,
#layer-dropdown-menu .station-filter-group #station-filter-favorite.active:hover {
    border-color: transparent;
    color: #fff;
    opacity: 0.9;
}

.station-variables .radio {
    font-size: 12px;
    margin: 6px 0;
}

/* Footer (toggle-button is already in the project; just align) */
.layer-footer {
    padding: 10px 14px;
    /*border-top: 1px solid var(--tile-thumb-bg);*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Adjustment so the YiiWheels toggle aligns properly */
.layer-footer-toggle .toggle-button {
    margin: 0;
    vertical-align: middle;
}

/* Mobile Responsive */
@media (max-width: 700px) {
    #layer-dropdown-menu {
        width: 100vw;
        max-width: calc(100vw - 20px);
        border-radius: 14px;
        max-height: calc(100vh - 110px);
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
        margin-top: -80px;
    }
    #layer-dropdown-menu .station-filter-group .btn{
        padding: 2px 0px;
    }
    
}

/* Station Variable Tiles: colors and styles */
.station-variables-grid .layer-tile-thumb {
    background-image: none;
    background-color: var(--tile-thumb-bg);
    background-clip: border-box;
}

.station-variables-grid .layer-tile-icon {
    text-shadow: 0 0 3px var(--tile-icon-shadow);
}



.station-variables-grid .layer-tile.active .layer-tile-thumb {
    background-color: var(--wc-brand-blue);
}

.station-variables-grid .layer-tile.active .layer-tile-icon {
    color: #fff;
    text-shadow: 0 0 4px #000;
}

/* Hover+active: opacity 0.9 same as buttons, also in dark mode */
.station-variables-grid .layer-tile.active:hover .layer-tile-thumb,
.station-variables-grid .layer-tile.active:focus .layer-tile-thumb {
     opacity: 0.9;
}


/* Disabled state for tiles */
.layer-tile.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Cursor not-allowed on the grid when disabled */
.station-variables-grid.disabled {
    cursor: not-allowed;
}

.layer-tile.disabled:hover .layer-tile-thumb {
    border-color: transparent;
}
.layer-tile.disabled:hover .layer-tile-label {
    color: #333;
}





/* =====================================================
     GFS (scalar layers) + Dark Mode via invert/hue-rotate
     =====================================================
     If the project applies dark mode using:
         .leaflet-layer, .leaflet-control-* { filter: invert(...) hue-rotate(...); }
     that filter also affects the heatmap canvas tiles and alters colors.
     When a scalar layer is active, layers.js adds .gfs-force-light to the container
     and here we disable the filter so the heatmap displays correctly.
*/

.leaflet-container.gfs-force-light .leaflet-layer,
.leaflet-container.gfs-force-light .leaflet-control-zoom-in,
.leaflet-container.gfs-force-light .leaflet-control-zoom-out,
.leaflet-container.gfs-force-light .leaflet-control-attribution {
        filter: none !important;
}