/* ============================================================
   OROSEIMETEO — RETE METEO V2.1
   Dashboard rete, statistiche, ultime stazioni, estremi live
   ============================================================ */


/* ============================================================
   HERO / STATISTICHE RETE
   ============================================================ */

.rete-hero-inner{
    display:block;
}

.rete-hero-inner > div:first-child{
    max-width:760px;
}

.rete-overview-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-top:24px;
}

.rete-stat-card{
    display:flex;
    align-items:center;
    gap:13px;

    min-width:0;
    min-height:82px;

    padding:16px;

    border:1px solid #dce8ed;
    border-radius:17px;

    background:#fff;

    box-shadow:
        0 6px 20px
        rgba(24,66,86,.07);
}

.rete-stat-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 44px;

    width:44px;
    height:44px;

    border-radius:14px;

    background:#eef6f8;
}

.rete-stat-icon svg{
    width:25px;
    height:25px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.rete-stat-card strong{
    display:block;

    margin-bottom:3px;

    color:#173f56;

    font-size:26px;
    line-height:1;
    font-weight:900;
}

.rete-stat-card span{
    display:block;

    color:#718894;

    font-size:11px;
    font-weight:750;
    line-height:1.25;
}


/* Colori statistiche */

.rete-stat-card.is-total .rete-stat-icon{
    color:#1688af;
    background:#e7f5fa;
}

.rete-stat-card.is-online .rete-stat-icon{
    color:#35a45d;
    background:#e8f7ed;
}

.rete-stat-card.is-offline .rete-stat-icon{
    color:#d9615b;
    background:#fdeceb;
}

.rete-stat-card.is-verified .rete-stat-icon{
    color:#2b9d91;
    background:#e7f7f4;
}

.rete-stat-card.is-collab .rete-stat-icon{
    color:#7765c7;
    background:#f0edfb;
}

.rete-hidden-count{
    display:none !important;
}


/* ============================================================
   DASHBOARD SUPERIORE
   ============================================================ */

.rete-dashboard-v2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;

    margin-bottom:20px;
}

.rete-dashboard-card{
    overflow:hidden;

    border:1px solid #dce8ed;
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 5px 18px
        rgba(27,70,91,.045);
}

.rete-dashboard-head{
    display:flex;
    align-items:center;
    gap:12px;

    padding:18px 19px 15px;

    border-bottom:
        1px solid #e4ecef;
}

.rete-dashboard-head h2{
    margin:0 0 3px;

    color:#173f56;

    font-size:17px;
    line-height:1.2;
}

.rete-dashboard-head p{
    margin:0;

    color:#7a909c;

    font-size:11px;
    line-height:1.4;
}

.rete-dashboard-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 40px;

    width:40px;
    height:40px;

    border-radius:13px;
}

.rete-dashboard-icon svg{
    width:23px;
    height:23px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.rete-dashboard-icon.is-latest{
    color:#1688af;
    background:#e9f6fa;
}

.rete-dashboard-icon.is-live{
    color:#d58a17;
    background:#fff4dd;
}

.rete-dashboard-loading{
    padding:22px;

    color:#8a9ba3;

    font-size:12px;
    text-align:center;
}


/* ============================================================
   ULTIME STAZIONI AGGIUNTE
   ============================================================ */

.rete-latest-list{
    padding:2px 18px 8px;
}

.rete-latest-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;

    width:100%;

    padding:13px 2px;

    border:0;
    border-bottom:
        1px solid #edf2f4;

    background:none;

    color:inherit;
    text-align:left;

    cursor:pointer;
}

.rete-latest-item:last-child{
    border-bottom:0;
}

.rete-latest-main{
    min-width:0;
}

.rete-latest-name{
    display:block;

    margin-bottom:3px;

    color:#176f9a;

    font-size:14px;
    font-weight:850;
}

.rete-latest-meta-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:6px;

    margin-top:4px;
}

.rete-latest-meta{
    display:inline;

    color:#81939c;

    font-size:10px;
    line-height:1.3;
}

.rete-latest-value{
    align-self:center;

    color:#173f56;

    font-size:17px;
    font-weight:850;

    white-space:nowrap;
}

.rete-latest-status{
    display:inline-block;

    width:7px;
    height:7px;

    margin-right:5px;

    border-radius:50%;

    background:#39a85b;

    vertical-align:1px;
}

.rete-latest-status.offline{
    background:#c7d0d4;
}


/* Badge tipo rete */

.rete-latest-badge{
    display:inline-flex;
    align-items:center;

    min-height:20px;

    padding:3px 7px;

    border-radius:999px;

    background:#edf4f7;
    color:#607c8a;

    font-size:9px;
    font-weight:850;
    line-height:1;
}

.rete-latest-badge.is-collaborative{
    background:#eef0fb;
    color:#675ab0;
}

.rete-latest-badge.is-oroseimeteo{
    background:#e6f5fa;
    color:#087fa8;
}

.rete-latest-badge.is-external{
    background:#edf4f7;
    color:#607c8a;
}

.rete-latest-verified{
    display:inline-flex;
    align-items:center;
    gap:3px;

    color:#348b52;

    font-size:9px;
    font-weight:850;
}


/* ============================================================
   ESTREMI IN QUESTO MOMENTO
   ============================================================ */

.rete-live-extremes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;

    padding:15px 18px 18px;
}

.rete-live-card{
    position:relative;

    min-width:0;

    padding:13px;

    border:1px solid #e0eaee;
    border-radius:14px;

    background:#f8fafb;

    color:inherit;
    text-align:left;

    cursor:pointer;
}

.rete-live-card:hover{
    border-color:#cedfe6;
}

.rete-live-card-head{
    display:flex;
    align-items:center;
    gap:7px;

    margin-bottom:7px;

    font-size:10px;
    font-weight:850;
}

.rete-live-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:25px;
    height:25px;

    border-radius:8px;
}

.rete-live-card-icon svg{
    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.rete-live-card strong{
    display:block;

    margin-bottom:3px;

    color:#173f56;

    font-size:21px;
    line-height:1;
    font-weight:900;
}

.rete-live-card small{
    display:block;

    overflow:hidden;

    color:#788e99;

    font-size:10px;

    white-space:nowrap;
    text-overflow:ellipsis;
}


/* Caldo */

.rete-live-card.is-hot
.rete-live-card-head,
.rete-live-card.is-hot
.rete-live-card-icon{
    color:#c94538;
}

.rete-live-card.is-hot
.rete-live-card-icon{
    background:#fdecea;
}


/* Freddo */

.rete-live-card.is-cold
.rete-live-card-head,
.rete-live-card.is-cold
.rete-live-card-icon{
    color:#3279bd;
}

.rete-live-card.is-cold
.rete-live-card-icon{
    background:#e9f2fc;
}


/* Vento */

.rete-live-card.is-wind
.rete-live-card-head,
.rete-live-card.is-wind
.rete-live-card-icon{
    color:#647d8c;
}

.rete-live-card.is-wind
.rete-live-card-icon{
    background:#edf3f5;
}


/* Pioggia */

.rete-live-card.is-rain
.rete-live-card-head,
.rete-live-card.is-rain
.rete-live-card-icon{
    color:#258aca;
}

.rete-live-card.is-rain
.rete-live-card-icon{
    background:#e7f4fb;
}


/* Nessun valore significativo */

.rete-live-card.is-empty{
    cursor:default;
}

.rete-live-card.is-empty:hover{
    border-color:#e0eaee;
}

.rete-live-card.is-empty strong{
    font-size:17px;
}

.rete-live-card.is-empty small{
    color:#94a4ab;
}


/* ============================================================
   ESTREMI DELLA RETE — OGGI
   ============================================================ */

.rete-extreme-card{
    position:relative;
    overflow:hidden;
}

/*
 * Solo Tmin e Tmax hanno un simbolo:
 * blu verso il basso / rosso verso l'alto.
 */

.rete-extreme-card.is-min,
.rete-extreme-card.is-max{
    padding-right:54px;
}

.rete-extreme-card.is-min::before,
.rete-extreme-card.is-max::before{
    position:absolute;
    top:14px;
    right:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border-radius:10px;

    font-size:18px;
    line-height:1;
    font-weight:900;
}

.rete-extreme-card.is-min::before{
    content:"↓";
    color:#347fc2;
    background:#e8f2fc;
}

.rete-extreme-card.is-max::before{
    content:"↑";
    color:#d55443;
    background:#fdebe8;
}


/*
 * Nessuna icona decorativa sulle altre card.
 * Restano gli accenti cromatici originali.
 */

.rete-extreme-card.is-heat::before,
.rete-extreme-card.is-dew::before,
.rete-extreme-card.is-gust::before,
.rete-extreme-card.is-rain::before{
    content:none;
    display:none;
}


/* Orario / metadato */

.rete-extreme-meta{
    display:inline-flex;
    align-items:center;

    width:max-content;
    max-width:100%;

    margin-top:5px;

    padding:4px 8px;

    border-radius:999px;

    background:#f1f5f7;
    color:#718690;

    font-size:9px;
    line-height:1;
    font-weight:800;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:980px){

    .rete-overview-stats{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .rete-dashboard-v2{
        grid-template-columns:1fr;
    }
}


/* ============================================================
   SMARTPHONE
   ============================================================ */

@media(max-width:700px){

    .rete-overview-stats{
        grid-template-columns:
            1fr 1fr;

        gap:9px;

        margin-top:17px;
    }

    .rete-stat-card{
        min-height:72px;

        gap:10px;

        padding:12px;

        border-radius:14px;
    }

    .rete-stat-card.is-total{
        grid-column:1 / -1;
    }

    .rete-stat-icon{
        flex-basis:38px;

        width:38px;
        height:38px;

        border-radius:11px;
    }

    .rete-stat-icon svg{
        width:22px;
        height:22px;
    }

    .rete-stat-card strong{
        font-size:23px;
    }

    .rete-stat-card span{
        font-size:10px;
    }


    /* Dashboard */

    .rete-dashboard-v2{
        gap:12px;

        margin-bottom:16px;
    }

    .rete-dashboard-card{
        border-radius:16px;
    }

    .rete-dashboard-head{
        padding:15px 14px 13px;
    }

    .rete-dashboard-head h2{
        font-size:16px;
    }

    .rete-dashboard-head p{
        font-size:10px;
    }


    /* Ultime stazioni */

    .rete-latest-list{
        padding:
            1px 14px 7px;
    }

    .rete-latest-item{
        padding:13px 1px;
    }

    .rete-latest-name{
        font-size:14px;
    }

    .rete-latest-value{
        font-size:17px;
    }


    /* Estremi live */

    .rete-live-extremes{
        gap:8px;

        padding:
            13px 14px 15px;
    }

    .rete-live-card{
        padding:11px;

        border-radius:12px;
    }

    .rete-live-card strong{
        font-size:19px;
    }

    .rete-live-card.is-empty strong{
        font-size:15px;
    }


    /* Estremi giornalieri */

    .rete-extreme-card::before{
        top:11px;
        right:11px;

        width:27px;
        height:27px;

        border-radius:9px;

        font-size:14px;
    }
}


/* ============================================================
   SMARTPHONE PICCOLO
   ============================================================ */

@media(max-width:390px){

    .rete-stat-card{
        padding:10px;
    }

    .rete-stat-icon{
        flex-basis:34px;

        width:34px;
        height:34px;
    }

    .rete-stat-icon svg{
        width:20px;
        height:20px;
    }

    .rete-stat-card strong{
        font-size:21px;
    }

    .rete-live-card strong{
        font-size:18px;
    }
}


/* ============================================================
   ESTREMI OGGI — ICONE COERENTI CON ESTREMI LIVE
   ============================================================ */

.rete-extreme-card::before{
    display:none !important;
    content:none !important;
}

.rete-extreme-card.is-min,
.rete-extreme-card.is-max{
    padding-right:inherit;
}

.rete-extreme-label{
    display:flex !important;
    align-items:center;
    gap:7px;
    padding-right:0;
}

.rete-extreme-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 27px;

    width:27px;
    height:27px;

    border-radius:8px;
}

.rete-extreme-icon svg{
    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.rete-extreme-icon.is-min{
    color:#3279bd;
    background:#e9f2fc;
}

.rete-extreme-icon.is-max{
    color:#c94538;
    background:#fdecea;
}

.rete-extreme-icon.is-heat{
    color:#d58a17;
    background:#fff4dd;
}

.rete-extreme-icon.is-dew{
    color:#269d91;
    background:#e6f6f3;
}

.rete-extreme-icon.is-gust{
    color:#647d8c;
    background:#edf3f5;
}

.rete-extreme-icon.is-rain{
    color:#258aca;
    background:#e7f4fb;
}

@media(max-width:700px){

    .rete-extreme-label{
        gap:6px;
    }

    .rete-extreme-icon{
        flex-basis:25px;
        width:25px;
        height:25px;
    }

    .rete-extreme-icon svg{
        width:15px;
        height:15px;
    }
}


/* ============================================================
   RICERCA STAZIONI — AUTOCOMPLETE
   ============================================================ */

.rete-search-row{
    position:relative;
}

.rete-search-suggestions{
    position:absolute;
    z-index:5000;

    top:calc(100% + 7px);
    left:0;
    right:0;

    max-height:330px;
    overflow-y:auto;

    border:1px solid #d3e1e7;
    border-radius:15px;

    background:#fff;

    box-shadow:
        0 14px 34px
        rgba(24,59,77,.16);

    -webkit-overflow-scrolling:touch;
}

.rete-search-suggestions[hidden]{
    display:none !important;
}

.rete-search-suggestion{
    display:grid;
    grid-template-columns:
        minmax(0,1fr) auto;
    align-items:center;
    gap:12px;

    width:100%;

    padding:12px 14px;

    border:0;
    border-bottom:
        1px solid #edf2f4;

    background:#fff;

    color:#173f56;
    text-align:left;

    cursor:pointer;
}

.rete-search-suggestion:last-child{
    border-bottom:0;
}

.rete-search-suggestion:hover,
.rete-search-suggestion.active{
    background:#edf7fa;
}

.rete-search-suggestion-main{
    min-width:0;
}

.rete-search-suggestion-main strong{
    display:block;

    overflow:hidden;

    margin-bottom:3px;

    color:#176f9a;

    font-size:14px;
    font-weight:900;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.rete-search-suggestion-main small{
    display:block;

    overflow:hidden;

    color:#7c919b;

    font-size:10px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.rete-search-suggestion-value{
    color:#173f56;

    font-size:15px;
    font-weight:900;

    white-space:nowrap;
}

.rete-search-suggestion-empty{
    padding:15px;

    color:#80939c;

    font-size:12px;
    text-align:center;
}


/* Località negli estremi giornalieri */

.rete-extreme-station{
    margin-top:6px;

    color:#244e62 !important;

    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
}


@media(max-width:700px){

    .rete-search-suggestions{
        top:calc(100% + 6px);

        max-height:285px;

        border-radius:13px;
    }

    .rete-search-suggestion{
        padding:12px;
    }

    .rete-search-suggestion-main strong{
        font-size:14px;
    }

    .rete-search-suggestion-main small{
        font-size:10px;
    }

    .rete-search-suggestion-value{
        font-size:14px;
    }

    .rete-extreme-station{
        font-size:13px !important;
    }
}


/* ============================================================
   AUTOCOMPLETE COMPATTO
   ============================================================ */

.rete-search-row .rete-search-suggestions{
    max-height:230px;
    border-radius:12px;
    background:#fff;
}

.rete-search-row .rete-search-suggestion{
    min-height:0;
    padding:8px 11px;

    border:0;
    border-bottom:1px solid #e7eef1;
    border-radius:0;

    background:#fff !important;
    color:#173f56 !important;

    box-shadow:none;
}

.rete-search-row .rete-search-suggestion:last-child{
    border-bottom:0;
}

.rete-search-row .rete-search-suggestion:hover,
.rete-search-row .rete-search-suggestion.active{
    background:#eef7fa !important;
}

.rete-search-row .rete-search-suggestion-main strong{
    margin:0 0 2px;

    color:#176f9a !important;

    font-size:13px;
    line-height:1.15;
}

.rete-search-row .rete-search-suggestion-main small{
    color:#7b909a !important;

    font-size:9px;
    line-height:1.15;
}

.rete-search-row .rete-search-suggestion-value{
    color:#173f56 !important;

    font-size:13px;
    font-weight:900;
}

@media(max-width:700px){

    .rete-search-row .rete-search-suggestions{
        max-height:205px;
    }

    .rete-search-row .rete-search-suggestion{
        padding:7px 10px;
    }
}