/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
}

#map{
    width:100%;
    height:100vh;
}

/* ==========================
   SIDEBAR
========================== */

#sidebar{

    position:absolute;

    top:15px;

    right:15px;

    width:clamp(220px,24vw,320px);

    max-height:calc(100vh - 30px);

    overflow-y:auto;

    background:rgba(255,255,255,.95);

    border-radius:10px;

    padding:15px;

    box-shadow:0 5px 18px rgba(0,0,0,.20);

    z-index:1000;

}

#sidebar h3{

    margin-bottom:12px;

    padding-bottom:8px;

    border-bottom:1px solid #e5e5e5;

    font-size:16px;

    color:#0b4d8a;

}

.station-item{

    padding:10px 0;

    border-bottom:1px solid #efefef;

    font-size:14px;

}

.station-item:last-child{

    border-bottom:none;

}

.station-item a{

    color:#333;

    text-decoration:none;

    transition:.2s;

}

.station-item a:hover{

    color:#0b72d1;

}

/* ==========================
   POPUP
========================== */

.station-popup{

    min-width:250px;

    max-width:280px;

}

.station-popup h3{

    margin-bottom:15px;

    text-align:center;

    color:#0b4d8a;

    font-size:18px;

}

.popup-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid #ececec;

    font-size:15px;

}

.popup-label{

    color:#666;

    font-weight:500;

}

.popup-value{

    font-weight:700;

    color:#1d3557;

}

.popup-footer{

    margin-top:16px;

    text-align:center;

}

.popup-footer a{

    color:#0b72d1;

    text-decoration:none;

}

/* ==========================
   LEGENDA
========================== */

.legend{

    background:rgba(255,255,255,.95);

    padding:10px;

    border-radius:8px;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

    font-size:12px;

}

.legend h4{

    margin-bottom:6px;

}

/* ==========================
   ICONA STAZIONE
========================== */

.custom-icon{

    text-align:center;

}

.weather-station-icon{

    font-size:24px;

    text-shadow:0 0 4px #fff;

}

/* ==========================
   SCROLLBAR
========================== */

#sidebar::-webkit-scrollbar{

    width:6px;

}

#sidebar::-webkit-scrollbar-thumb{

    background:#bbb;

    border-radius:5px;

}


/* ======================================================
   CARD RETE
====================================================== */

.network-card{

    background:#ffffff;

    border-radius:12px;

    padding:15px;

    margin-bottom:15px;

    border:1px solid #dbe3ea;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.network-card h3{

    margin:0 0 15px;

    font-size:17px;

    color:#1d3557;

    text-align:center;

}

.network-card hr{

    border:none;

    border-top:1px solid #e5e5e5;

    margin:12px 0;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:6px 0;

    font-size:14px;

}

.summary-label{

    color:#555;

}

.summary-value{

    font-weight:700;

    color:#1d3557;

}

.summary-station{

    display:block;

    font-size:12px;

    color:#777;

    margin-top:2px;

    margin-bottom:8px;

}

.summary-update{

    text-align:center;

    font-size:13px;

    color:#666;

}

.station-item{

    background:#fff;

    border-radius:10px;

    padding:10px 12px;

    margin-bottom:10px;

    border-left:4px solid #3aa655;

    box-shadow:0 2px 6px rgba(0,0,0,.06);

    transition:.2s;

}

.station-item:hover{

    transform:translateY(-2px);

    box-shadow:0 4px 12px rgba(0,0,0,.12);

}

.station-item a{

    color:#333;

    text-decoration:none;

    display:block;

}

.station-item strong{

    display:block;

    margin-bottom:6px;

}

/* ======================================================
   LOADER
====================================================== */

#map-loader{

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.96);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:5000;

    transition:opacity .35s ease;

}

#map-loader.hidden{

    opacity:0;

    pointer-events:none;

}

.loader-box{

    text-align:center;

}

.loader-box i{

    font-size:60px;

    color:#0b72d1;

    margin-bottom:20px;

}

.loader-box h2{

    color:#1d3557;

    margin-bottom:10px;

}

.loader-box p{

    color:#666;

    margin-bottom:25px;

}

.loader-spinner{

    width:46px;

    height:46px;

    margin:auto;

    border:5px solid #d9d9d9;

    border-top-color:#0b72d1;

    border-radius:50%;

    animation:loaderSpin .8s linear infinite;

}

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}

/* ======================================================
   MOBILE SIDEBAR
====================================================== */

#open-sidebar{

    display:none;

}

#close-sidebar{

    display:none;

}

@media(max-width:768px){

    #sidebar{

        right:-100%;

        width:min(85vw,320px);

        height:100%;

        max-height:100vh;

        top:0;

        border-radius:0;

        padding-top:60px;

        transition:right .30s ease;

    }

    #sidebar.open{

        right:0;

    }

   #open-sidebar{

    display:flex;

    position:absolute;

    top:70px;

    right:12px;

    width:42px;

    height:42px;

    justify-content:center;

    align-items:center;

    background:#0b72d1;

    color:#fff;

    border:none;

    border-radius:50%;

    font-size:20px;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    z-index:3000;

    cursor:pointer;

}

    #close-sidebar{

        display:block;

        position:absolute;

        top:12px;

        right:12px;

        background:none;

        border:none;

        font-size:24px;

        cursor:pointer;

        color:#555;

    }

}

/* ==========================
   OVERLAY
========================== */

#sidebar-overlay{

    display:none;

}

@media(max-width:768px){

    #sidebar-overlay{

        position:absolute;

        inset:0;

        background:rgba(0,0,0,.35);

        z-index:2000;

        opacity:0;

        pointer-events:none;

        transition:opacity .25s;

    }

    #sidebar-overlay.show{

        opacity:1;

        pointer-events:auto;

    }

}


/* ===========================================
   LEGENDA CUSTOM
=========================================== */

#legend-toggle{

    position:absolute;

    bottom:max(20px, env(safe-area-inset-bottom));

    left:max(20px, env(safe-area-inset-left));

    right:auto;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#0b72d1;

    color:#fff;

    cursor:pointer;

    font-size:20px;

    z-index:3000;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

}

#legend-panel{

    position:absolute;

    bottom:75px;

    left:max(20px, env(safe-area-inset-left));

    right:auto;

    background:#fff;

    padding:14px;

    border-radius:10px;

    box-shadow:0 5px 15px rgba(0,0,0,.20);

    display:none;

    z-index:3000;

    min-width:170px;

}

#legend-panel.open{

    display:block;

}

#legend-panel h4{

    margin-bottom:10px;

    color:#1d3557;

}

#legend-panel div{

    margin:6px 0;

}