/* CSS for the weewx Seasons skin
 * Copyright (c) Tom Keffer, Matthew Wall
 * Distributed under terms of GPLv3.  See LICENSE.txt for your rights.
 */

:root {
    --background-color:#ffffff;
    --title-background-color:#dddddd;
    --button-background-color:#bbbbbb;
    --element-background-color:#d2e8e8;
    --section-border-color:#aaaaaa;
    --cell-border-color:#dddddd;
    --highlight-color:#4282b4;
    --link-color:#4282b4;
    --visited-color:#4282b4;
    --hover-color:#4282b4;
    --timestamp-color:#aaaaaa;
    --hival-color:#aa4444;
    --loval-color:#4444aa;
    --ok-color:#44aa44;
    --low-color:#aa4444;
    --unknown-color:#dfdfdf;
}

/* use the fonts from google */
/* @import url('https://fonts.googleapis.com/css?family=Open+Sans'); */

/* use the local fonts */
@font-face {
    font-family: 'Open Sans';
    src: url('font/OpenSans.woff2') format('woff2'),
        url('font/OpenSans.woff') format('woff');
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Open Sans', arial, sans-serif;
    background-color: var(--background-color);
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--link-color);
}

a:link {
    color: var(--link-color);
}
a:visited {
    color: var(--visited-color);
}
a:hover {
    color: var(--hover-color);
}

#widget_group {
    float: left;
    margin-right: 40px;
}

#plot_group {
    overflow: hidden;
}

#title_bar {
    overflow: auto;
    margin-bottom: 5px;
    background-color: var(--element-background-color);
    border: 1px solid var(--section-border-color);
}

#contents {
    clear: both;
    margin: 20px;
}

#title {
    float: left;
    margin-left: 10px;
}

#rss_link {
    float: right;
    margin-top: 6px;
    margin-right: 20px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--background-color);
    border: 1px solid var(--section-border-color);
    webkit-radius: 5px;
    moz-radius: 5px;
    border-radius: 5px;
}

#reports {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    text-align: right;
}

.footnote {
    font-size: 80%;
    font-style: italic;
    clear: both;
    padding-left: 20px;
}

.page_title {
    font-size: 140%;
    line-height: 50%;
}

.lastupdate {
    font-size: 80%;
    line-height: 50%;
}

.widget {
    margin-bottom: 30px;
    clear: both;
}

.widget_title {
    font-weight: bold;
    padding: 2px 10px 2px 10px;
    /* underlined titles */
    border-bottom: 2px solid var(--section-border-color);
    /* outlined titles */
/*
    background-color: var(--title-background-color);
    border: 1px solid var(--section-border-color);
*/
}

.label {
    font-size: 80%;
    vertical-align: top;
    text-align: right;
    padding-top: 4px;
    padding-right: 5px;
}

.data {
    font-weight: bold;
    font-size: 80%;
    vertical-align: top;
    text-align: left;
    padding-top: 4px;
}

.units {
    font-size: 80%;
    vertical-align: top;
    padding-top: 4px;
}

.timestamp {
    font-size: 80%;
    font-weight: normal;
}

.hival {
    color: var(--hival-color);
}

.loval {
    color: var(--loval-color);
}

.status_ok {
    color: var(--ok-color);
}

.status_low {
    color: var(--low-color);
}

.status_unknown {
    color: var(--unknown-color);
}

.button {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    /* rounded box buttons */
/*
    border: 1px solid var(--section-border-color);
    webkit-radius: 3px;
    moz-radius: 3px;
    border-radius: 3px;
*/
}

.button_selected {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    /* underlined buttons */
    border-bottom: 5px solid var(--highlight-color);
    /* rounded box buttons */
/*
    background-color: var(--button-background-color);
    border: 1px solid var(--section-border-color);
    webkit-radius: 3px;
    moz-radius: 3px;
    border-radius: 3px;
*/
}

.widget_control {
    float: right;
    cursor: pointer;
    margin-left: 20px;
    margin-right: 5px;
}

.widget img {
    width: 350px;
    border: 1px solid var(--section-border-color);
    margin-top: 4px;
}

.new_row {
    border-top: 1px solid var(--cell-border-color);
}

.celestial_body {
    margin-bottom: 30px;
    float: left;
}

.widget table th {
    font-weight: normal;
    text-align: right;
    border-bottom: 1px solid var(--cell-border-color);
}

#hilo_widget table th {
    font-size: 80%;
    text-align: right;
    border-bottom: none;
}

#hilo_widget .data {
    font-weight: bold;
    font-size: 80%;
    text-align: right;
    padding-left: 10px;
}

#totals_widget table th {
    font-size: 80%;
    text-align: right;
    border-bottom: none;
}

#totals_widget .data {
    font-weight: bold;
    font-size: 80%;
    text-align: right;
    padding-left: 10px;
}

#sensors_widget table th {
    padding-top: 10px;
}

#history_widget img {
    border: none;
    margin-bottom: 10px;
    width: 500px; /* should match the image width in skin.conf */
}

#history_widget.widget_title {
    min-width: 500px;
}

.plot_container {
    margin-top: 4px;
}

#map_canvas {
    width: 350px;
    height: 350px;
    margin-top: 4px;
}


@media (max-width:800px) {
    #plot_group { overflow: visible; float: left; }
}
@media (min-width:801px) {
    #plot_group { overflow: hidden; float: none; }
}

/* Sfondo Roma Monteverde Meteo */
body {
    background-image: url("sfondo.webp");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Card moderne Roma Monteverde Meteo */
.widget {
    margin-bottom: 22px;
    padding: 18px;
    background: rgba(255,255,255,0.86);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    backdrop-filter: blur(4px);
}

.widget_title {
    font-size: 1.15em;
    padding: 4px 8px 10px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}

#title_bar {
    background: rgba(255,255,255,0.88);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    margin-bottom: 22px;
}

/* Testata Roma Monteverde Meteo */
#title_bar {
    position: relative;
    text-align: center;
    padding: 18px 20px 14px 20px;
}

#title {
    float: none;
    margin: 0 auto;
    width: 100%;
}

#title img {
    width: 165px !important;
    max-width: 40% !important;
    margin: 0 auto 10px auto !important;
}

.page_title {
    font-size: 2em;
    line-height: 1.15;
    margin: 4px 0 8px 0 !important;
}

.lastupdate {
    line-height: 1.2;
    margin-top: 8px;
    opacity: 0.75;
}

#rss_link,
#reports {
    float: none;
}


/* Foto di Roma nella testata */
#title_bar {
    background-image:
        linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)),
        url("sfondo.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 260px;
}


/* Inquadratura testata come bozza */
#title_bar {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    background-position: center center;

}


/* ===== Roma Monteverde Meteo - restyling moderno ===== */

body {
    background: #eef5fb;
    color: #16324a;
}

#contents {
    max-width: 1380px;
    margin: 24px auto;
    padding: 0 18px;
}

#title_bar {
    max-width: 1380px;
    margin: 0 auto;
    padding: 28px 24px;
    border: 0;
    border-radius: 26px;
    overflow: hidden;
    min-height: 340px;
    box-shadow: 0 14px 40px rgba(28, 74, 110, 0.20);
    background-image:
        linear-gradient(180deg, rgba(5, 44, 77, 0.18), rgba(5, 44, 77, 0.35)),
        url("sfondo.webp");
    background-size: cover;
    background-position: center;
}

#title img {
    width: 800px !important;
    max-width: none !important; margin-left: -20px !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.20));
}

.lastupdate {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    color: #16324a;
    font-weight: 600;
}

#rss_link,
#reports {
    background: transparent;
    border-radius: 14px;
    padding: 10px 14px;
    margin-top: 10px;
}

#widget_group {
    float: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

#plot_group {
    margin-top: 20px;
    overflow: visible;
}

.widget {
    margin: 0;
    padding: 20px;
    border: 0;
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 10px 28px rgba(28, 74, 110, 0.12);
}

.widget_title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #0d5f93;
    border-bottom: 1px solid #d9e8f2;
    padding-bottom: 10px;
}

.widget table {
    width: 100%;
}

.widget td {
    padding: 7px 4px;
}

.widget .label {
    color: #5f7688;
}

.widget .data {
    font-weight: 700;
    color: #17384f;
}

#history_widget {
    margin-top: 6px;
}

#history_widget img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.footnote {
    text-align: center;
    color: #6f8494;
    padding: 20px;
}

@media (max-width: 900px) {
    #widget_group {
        grid-template-columns: 1fr;
    }

    #title_bar {
        margin: 12px;
        min-height: 280px;
        padding: 20px 14px;
    }

    #contents {
        margin: 12px auto;
        padding: 0 12px;
    }

    #title img {
        width: 180px !important;
    }
}
/* Grafico + Webcam affiancati */
#contents {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 20px;
    align-items: start;
}

#widget_group {
    grid-column: 1 / -1;
}

#plot_group {
    grid-column: 1;
    margin-top: 20px;
}

.webcam_dashboard {
    grid-column: 2;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 10px 28px rgba(28, 74, 110, 0.12);
}

.webcam_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #0d5f93;
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
}

.webcam_live {
    padding: 5px 10px;
    border-radius: 999px;
    background: #22a447;
    color: white;
    font-size: 0.78rem;
    font-weight: 800;
}

.webcam_subtitle {
    padding: 12px 18px 8px;
    color: #5f7688;
    font-size: 0.92rem;
}

.webcam_image {
    display: block;
    width: calc(100% - 24px);
    height: auto;
    margin: 4px 12px 12px;
    border-radius: 14px;
}

@media (max-width: 900px) {
    #contents {
        grid-template-columns: 1fr;
    }

    #widget_group,
    #plot_group,
    .webcam_dashboard {
        grid-column: 1;
    }
}

/* Allineamento finale grafico + webcam */
#plot_group { grid-row: 2; grid-column: 1; }
.webcam_dashboard { grid-row: 2; grid-column: 2; max-width: 100%; }
@media (max-width: 900px) {
  #plot_group { grid-row: auto; grid-column: 1; }
  .webcam_dashboard { grid-row: auto; grid-column: 1; }
}

/* Proporzioni finali grafico + webcam */
#contents {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.webcam_dashboard {
    width: 100%;
}

.webcam_image {
    width: calc(100% - 24px);
    height: auto;
}

/* Rimuove definitivamente bande RSS e Report */
#rss_link, #reports { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Nasconde RSS */
#rss_link { display: none !important; }

/* Nasconde i 4 widget superiori */
#current_widget, #sunmoon_widget, #hilo_widget, #sensors_widget { display: none !important; }

/* Nasconde Dati stazione */
#about_widget { display: none !important; }


/* Storico + webcam - disposizione definitiva */
#plot_group {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 20px;
}

#history_widget {
    width: 100% !important;
    box-sizing: border-box;
    display: flow-root;
}

#history_widget .webcam_dashboard {
    float: right;
    width: 52% !important;
    min-width: 420px;
    margin: 0 0 20px 20px;
}

#history_widget .webcam_image {
    width: calc(100% - 24px) !important;
    height: auto !important;
}

#history_widget .plot_container img {
    max-width: 100%;
}

@media (max-width: 900px) {
    #history_widget .webcam_dashboard {
        float: none;
        width: 100% !important;
        min-width: 0;
        margin: 18px 0;
    }
}

/* Grafici Storico più grandi e compatti */
#history_widget .plot_container {
    display: block;
}

#history_widget .plot_container img {
    width: 48% !important;
    max-width: 48% !important;
    height: auto !important;
    margin: 0 1% 14px 0;
    vertical-align: top;
}

@media (max-width: 900px) {
    #history_widget .plot_container img {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0;
    }
}

/* Logo sovrapposto alla webcam */
.webcam_image_wrap {
    position: relative;
    line-height: 0;
}

.webcam_logo_overlay {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 110px !important;
    height: auto !important;
    opacity: 0.78;
    z-index: 5;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
    pointer-events: none;
}

/* ===== WEBCAM INGRANDITA AL CLICK ===== */

.webcam_modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.webcam_modal img {
    display: block;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 8px 35px rgba(0,0,0,0.6);
}

.webcam_modal_close {
    position: fixed;
    top: 18px;
    right: 28px;
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    z-index: 100000;
}

@media (max-width: 700px) {
    .webcam_modal {
        padding: 8px;
    }

    .webcam_modal img {
        max-width: 98vw;
        max-height: 88vh;
    }

    .webcam_modal_close {
        top: 12px;
        right: 16px;
        font-size: 42px;
    }
}

/* ===== FIX MODAL WEBCAM FUORI DALLA GRIGLIA ===== */
body > #webcamModal.webcam_modal {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 20px !important;
    background: rgba(0,0,0,0.92) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

body > #webcamModal.webcam_modal > #webcamModalImage {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: auto !important;
    object-fit: contain !important;
}

body > #webcamModal .webcam_modal_close {
    position: fixed !important;
    top: 15px !important;
    right: 25px !important;
    left: auto !important;
    color: #fff !important;
    font-size: 48px !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
}


/* ===== BASE CONTRASTO LOGO WEBCAM ===== */
.webcam_logo_overlay {
    background: rgba(255, 255, 255, 0.78) !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    box-sizing: content-box !important;
}

/* ===== LOGO SU WEBCAM INGRANDITA ===== */

body > #webcamModal .webcam_modal_image_wrap {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    line-height: 0 !important;
}

body > #webcamModal .webcam_modal_image_wrap > #webcamModalImage {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    margin: 0 !important;
}

body > #webcamModal .webcam_modal_logo {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 110px !important;
    height: auto !important;
    max-width: 22% !important;
    background: rgba(255,255,255,0.78) !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    box-sizing: content-box !important;
    z-index: 10 !important;
}

/* ===== TESTATA FINALE ROMA MONTEVERDE ===== */

#title_bar {
    position: relative !important;
    min-height: 360px !important;
    max-width: 1380px !important;
    margin: 0 auto 24px auto !important;
    padding: 30px !important;
    border: 0 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;

    background-image:
        linear-gradient(180deg,
            rgba(5,44,77,0.12),
            rgba(5,44,77,0.42)),
        url("sfondo.webp") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    box-shadow: 0 14px 40px rgba(28,74,110,0.22) !important;
}

#title {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}

#title img {
    display: block !important;
    width: 700px !important;
    max-width: 75% !important;
    height: auto !important;
    margin: 0 auto 14px auto !important;
}

#title .lastupdate {
    display: inline-block !important;
    margin: 4px auto 0 auto !important;
    padding: 7px 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.82) !important;
    color: #17384f !important;
    font-weight: 600 !important;
}

@media (max-width: 900px) {
    #title_bar {
        min-height: 280px !important;
        margin: 12px !important;
        padding: 20px 12px !important;
        border-radius: 20px !important;
    }

    #title img {
        width: 520px !important;
        max-width: 92% !important;
    }
}


/* ===== DASHBOARD METEO COME BOZZA ===== */

#widget_group {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;
    gap: 18px !important;
    align-items: start !important;
}

#current_widget {
    grid-row: span 2 !important;
}

.widget {
    background: rgba(255,255,255,0.97) !important;
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(28,74,110,0.12) !important;
}

.widget_title {
    background: linear-gradient(135deg,#176b87,#3198b5) !important;
    color: white !important;
    padding: 13px 16px !important;
    font-weight: 700 !important;
    border: 0 !important;
}

.widget_title a {
    color: white !important;
}

.widget_contents {
    padding: 14px 16px !important;
}

@media (max-width: 900px) {
    #widget_group {
        grid-template-columns: 1fr !important;
    }

    #current_widget {
        grid-row: auto !important;
    }
}


/* ===== CARD DATI DAVIS ===== */

#current_widget.meteo_main {
    grid-column: 1 / -1 !important;
}

.meteo_cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    padding: 18px;
}

.meteo_card {
    background: #f7fbfe;
    border: 1px solid #dcebf4;
    border-radius: 16px;
    padding: 16px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(28,74,110,0.08);
}

.meteo_label {
    color: #617b8e;
    font-size: 0.9em;
    margin-bottom: 7px;
}

.meteo_card strong {
    color: #176b87;
    font-size: 1.35em;
}

@media (max-width:900px) {
    .meteo_cards {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:520px) {
    .meteo_cards {
        grid-template-columns: 1fr;
    }
}


/* ===== CARD METEO FINALI - STILE BOZZA ===== */

#current_widget.meteo_main {
    grid-column: 1 / -1 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#current_widget.meteo_main > .widget_title {
    border-radius: 18px !important;
    margin-bottom: 14px !important;
    padding: 14px 20px !important;
    font-size: 18px !important;
}

#current_widget .meteo_cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    padding: 0 !important;
}

#current_widget .meteo_card {
    background: white !important;
    border: 1px solid #dcebf4 !important;
    border-radius: 20px !important;
    min-height: 115px !important;
    padding: 20px !important;
    box-shadow: 0 8px 24px rgba(28,74,110,0.13) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#current_widget .meteo_label {
    display: block !important;
    font-size: 14px !important;
    color: #668094 !important;
    margin-bottom: 10px !important;
}

#current_widget .meteo_card strong {
    display: block !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
    color: #176b87 !important;
    font-weight: 700 !important;
}

@media (max-width: 900px) {
    #current_widget .meteo_cards {
        grid-template-columns: repeat(2,1fr) !important;
    }
}

@media (max-width: 520px) {
    #current_widget .meteo_cards {
        grid-template-columns: 1fr !important;
    }
}




/* ===== VISIBILITA CONDIZIONI ATTUALI ===== */
#current_widget.meteo_main {
    display: block !important;
}

/* ===== RIQUADRI SECONDARI DASHBOARD ===== */
#hilo_widget,
#sunmoon_widget,
#sensors_widget,
#about_widget {
    display: block !important;
    grid-column: auto !important;
    margin: 0 !important;
}

#hilo_widget,
#sunmoon_widget {
    min-height: 100%;
}

@media (max-width: 900px) {
    #hilo_widget,
    #sunmoon_widget,
    #sensors_widget,
    #about_widget {
        grid-column: 1 !important;
    }
}

/* ===== RIQUADRI SECONDARI DASHBOARD ===== */
#hilo_widget,
#sunmoon_widget,
#sensors_widget,
#about_widget {
    display: block !important;
    grid-column: auto !important;
    margin: 0 !important;
}

#hilo_widget,
#sunmoon_widget {
    min-height: 100%;
}

@media (max-width: 900px) {
    #hilo_widget,
    #sunmoon_widget,
    #sensors_widget,
    #about_widget {
        grid-column: 1 !important;
    }
}
#current_widget.meteo_main { display: block !important; }

/* ===== RIQUADRI SECONDARI 2x2 ===== */
#widget_group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#current_widget {
    grid-column: 1 / -1 !important;
}

#hilo_widget,
#sunmoon_widget,
#sensors_widget,
#about_widget {
    display: block !important;
    grid-column: auto !important;
    width: auto !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    #widget_group {
        grid-template-columns: 1fr !important;
    }

    #current_widget,
    #hilo_widget,
    #sunmoon_widget,
    #sensors_widget,
    #about_widget {
        grid-column: 1 !important;
    }
}

/* ===== ALTEZZA COMPATTA STATISTICHE E VOLTA CELESTE ===== */
#hilo_widget,
#sunmoon_widget {
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
}

/* ===== BLOCCO SECONDARIO SOTTO STORICO + WEBCAM ===== */
#secondary_widget_group {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
    margin-top: 20px !important;
}

#secondary_widget_group #hilo_widget,
#secondary_widget_group #sunmoon_widget,
#secondary_widget_group #sensors_widget,
#secondary_widget_group #about_widget {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: start !important;
}

@media (max-width: 900px) {
    #secondary_widget_group {
        grid-template-columns: 1fr !important;
    }
}

/* ===== RIFINITURA FINALE CARD DAVIS ===== */
#current_widget .meteo_cards {
    gap: 14px !important;
}

#current_widget .meteo_card {
    min-height: 92px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    border: 1px solid #e0edf5 !important;
    box-shadow: 0 6px 18px rgba(28,74,110,0.10) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#current_widget .meteo_card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(28,74,110,0.16) !important;
}

#current_widget .meteo_label {
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

#current_widget .meteo_card strong {
    font-size: 24px !important;
}

/* ===== RIFINITURA RIQUADRI SECONDARI ===== */
#secondary_widget_group {
    gap: 16px !important;
    margin-top: 22px !important;
}

#secondary_widget_group .widget {
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid #e0edf5 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(28,74,110,0.10) !important;
}

#secondary_widget_group .widget_title {
    background: linear-gradient(135deg,#176b87,#3198b5) !important;
    color: white !important;
    padding: 12px 16px !important;
    font-weight: 700 !important;
    border: 0 !important;
}

#secondary_widget_group .widget_contents {
    padding: 14px 16px !important;
}

#secondary_widget_group table {
    width: 100% !important;
}

#secondary_widget_group td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* ===== STORICO MODERNO - STILE ROMA MONTEVERDE ===== */
#history_widget {
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid #e0edf5 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(28,74,110,0.12) !important;
}

#history_widget #plot_title {
    background: linear-gradient(135deg,#176b87,#3198b5) !important;
    color: white !important;
    padding: 14px 18px !important;
    border: 0 !important;
    font-weight: 700 !important;
}

#history_widget #plot_title a {
    display: inline-block !important;
    padding: 6px 11px !important;
    margin: 2px 3px !important;
    border-radius: 12px !important;
    color: white !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

#history_widget #plot_title a:hover {
    background: rgba(255,255,255,0.20) !important;
    transform: translateY(-1px) !important;
}

#history_widget #plot_title .button_selected {
    background: rgba(255,255,255,0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35) !important;
}

#history_widget .plot_container {
    padding: 16px !important;
    box-sizing: border-box !important;
}

#history_widget .plot_container img {
    border-radius: 14px !important;
}

/* ===== ATMOSFERA GENERALE HOME ===== */
html {
    background: #edf5fa !important;
}

body {
    background:
        linear-gradient(180deg,#f7fbfe 0%,#edf5fa 45%,#e8f2f8 100%) !important;
    color: #17384f !important;
}

#contents {
    padding: 0 22px 30px 22px !important;
}

#widget_group,
#plot_group,
#secondary_widget_group {
    row-gap: 18px !important;
}

.footnote {
    max-width: 1380px !important;
    margin: 28px auto !important;
    padding: 16px 20px !important;
    text-align: center !important;
    color: #718696 !important;
    font-size: 13px !important;
}

/* ===== TESTO HERO ROMA MONTEVERDE ===== */
#title .hero_text {
    text-align: center !important;
    margin: -4px auto 10px auto !important;
    color: white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55) !important;
}

#title .hero_subtitle {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
}

#title .hero_description {
    margin-top: 5px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    opacity: 0.96 !important;
}

@media (max-width: 900px) {
    #title .hero_subtitle {
        font-size: 18px !important;
    }

    #title .hero_description {
        font-size: 13px !important;
    }
}

/* ===== WEBCAM - STILE DASHBOARD DEFINITIVO ===== */
#history_widget .webcam_dashboard {
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid #dcebf4 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(28,74,110,0.14) !important;
    box-sizing: border-box !important;
}

#history_widget .webcam_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg,#176b87,#3198b5) !important;
    color: white !important;
    padding: 13px 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

#history_widget .webcam_live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #22a447 !important;
    color: white !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#history_widget .webcam_live::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: white !important;
    display: inline-block !important;
}

#history_widget .webcam_subtitle {
    padding: 11px 16px 8px 16px !important;
    color: #668094 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#history_widget .webcam_image_wrap {
    position: relative !important;
    margin: 4px 12px 12px 12px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #eaf3f8 !important;
}

#history_widget .webcam_image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 14px !important;
}

/* ===== CARD DAVIS - SECONDA FILA CENTRATA ===== */
@media (min-width: 901px) {
    #current_widget .meteo_cards {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }

    #current_widget .meteo_card {
        grid-column: span 2 !important;
    }

    #current_widget .meteo_card:nth-child(5) {
        grid-column: 2 / span 2 !important;
    }

    #current_widget .meteo_card:nth-child(6) {
        grid-column: 4 / span 2 !important;
    }

    #current_widget .meteo_card:nth-child(7) {
        grid-column: 6 / span 2 !important;
    }
}

/* ===== CARD DAVIS - SECONDA FILA CENTRATA ===== */
@media (min-width: 901px) {
    #current_widget .meteo_cards {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }

    #current_widget .meteo_card {
        grid-column: span 2 !important;
    }

    #current_widget .meteo_card:nth-child(5) {
        grid-column: 2 / span 2 !important;
    }

    #current_widget .meteo_card:nth-child(6) {
        grid-column: 4 / span 2 !important;
    }

    #current_widget .meteo_card:nth-child(7) {
        grid-column: 6 / span 2 !important;
    }
}

/* ===== ETICHETTE CARD DAVIS PIU MODERNE ===== */
#current_widget .meteo_label {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    background: #eef7fb !important;
    color: #477087 !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

/* ===== VALORI CARD DAVIS - RIFINITURA ===== */
#current_widget .meteo_card strong {
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    color: #176b87 !important;
    letter-spacing: -0.4px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

@media (max-width: 1100px) {
    #current_widget .meteo_card strong {
        font-size: 22px !important;
    }
}

/* ===== STATISTICHE + VOLTA CELESTE - FINITURA ===== */
#hilo_widget .widget_contents,
#sunmoon_widget .widget_contents {
    padding: 14px 18px !important;
}

#hilo_widget table,
#sunmoon_widget table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#hilo_widget td,
#hilo_widget th,
#sunmoon_widget td,
#sunmoon_widget th {
    padding: 7px 9px !important;
    border-bottom: 1px solid #edf3f7 !important;
}

#hilo_widget td.label,
#sunmoon_widget td.label {
    color: #668094 !important;
    font-weight: 600 !important;
}

#hilo_widget td.data,
#sunmoon_widget td.data {
    color: #176b87 !important;
    font-weight: 700 !important;
}

#hilo_widget tr:last-child td,
#sunmoon_widget tr:last-child td {
    border-bottom: 0 !important;
}

#hilo_widget .widget_title a,
#sunmoon_widget .widget_title a {
    color: white !important;
    text-decoration: none !important;
}

#sunmoon_widget table.celestial th {
    font-size: 25px !important;
    color: #3198b5 !important;
}

/* ===== STORICO + WEBCAM - RIFINITURA VISIVA ===== */
#history_widget .plot_container {
    background: #f8fbfd !important;
    border-radius: 16px !important;
}

#history_widget .plot_container img {
    background: white !important;
    border: 1px solid #e2edf4 !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 15px rgba(28,74,110,0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#history_widget .plot_container img:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(28,74,110,0.14) !important;
}

#history_widget .webcam_dashboard {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#history_widget .webcam_dashboard:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(28,74,110,0.17) !important;
}

/* ===== FOOTER ROMA MONTEVERDE ===== */
.footnote {
    max-width: 1340px !important;
    margin: 32px auto 18px auto !important;
    padding: 16px 22px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid #dcebf4 !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 16px rgba(28,74,110,0.08) !important;
    text-align: center !important;
    color: #718696 !important;
    font-size: 13px !important;
}

.footnote a {
    color: #176b87 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.footnote a:hover {
    text-decoration: underline !important;
}

/* ===== DATI METEO SECONDARI ===== */
#current_widget .meteo_extras {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 260px)) !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 16px !important;
}

#current_widget .meteo_extra_card {
    background: rgba(238,247,251,0.92) !important;
    border: 1px solid #dcebf4 !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    text-align: center !important;
}

#current_widget .meteo_extra_card span {
    display: block !important;
    color: #668094 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

#current_widget .meteo_extra_card strong {
    color: #176b87 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

@media (max-width: 520px) {
    #current_widget .meteo_extras {
        grid-template-columns: 1fr !important;
    }
}

/* ===== DUE CARD EXTRA - STESSO STILE DAVIS ===== */
#current_widget .meteo_extra_card {
    background: white !important;
    border: 1px solid #e0edf5 !important;
    border-radius: 18px !important;
    min-height: 92px !important;
    padding: 16px 18px !important;
    box-shadow: 0 6px 18px rgba(28,74,110,0.10) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#current_widget .meteo_extra_card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(28,74,110,0.16) !important;
}

#current_widget .meteo_extra_card span {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    background: #eef7fb !important;
    color: #477087 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

#current_widget .meteo_extra_card strong {
    color: #176b87 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    letter-spacing: -0.4px !important;
    white-space: nowrap !important;
}

/* ===== 4 CARD EXTRA COMPATTE ===== */
#current_widget .meteo_extras {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin-top: 14px !important;
}

#current_widget .meteo_extra_card {
    min-height: 68px !important;
    padding: 10px 14px !important;
    border-radius: 15px !important;
}

#current_widget .meteo_extra_card span {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
}

#current_widget .meteo_extra_card strong {
    font-size: 21px !important;
}

@media (max-width: 900px) {
    #current_widget .meteo_extras {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    #current_widget .meteo_extras {
        grid-template-columns: 1fr !important;
    }
}

/* ===== 7 CARD PRINCIPALI PIU COMPATTE ===== */
#current_widget .meteo_card {
    min-height: 68px !important;
    padding: 10px 14px !important;
    border-radius: 15px !important;
}

#current_widget .meteo_card .meteo_label {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
}

#current_widget .meteo_card strong {
    font-size: 22px !important;
    line-height: 1.1 !important;
}

#current_widget .meteo_cards {
    gap: 12px !important;
}

/* ===== ZONA WEBCAM PREDISPOSTA PER DUE TELECAMERE ===== */
@media (min-width: 901px) {
    #history_widget .webcam_dashboard {
        float: right !important;
        width: 49% !important;
        min-width: 0 !important;
        margin: 0 0 18px 2% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 900px) {
    #history_widget .webcam_dashboard {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 18px 0 !important;
    }
}

/* ===== SPAZIATURA COMPATTA CARD -> STORICO/WEBCAM ===== */
#plot_group {
    margin-top: 10px !important;
}

#current_widget {
    margin-bottom: 4px !important;
}

#current_widget .meteo_extras {
    margin-bottom: 0 !important;
}

/* ==================================================
   RESTYLING BOZZA - STEP 1 - CARD METEO
   ================================================== */

#current_widget.meteo_main > .widget_title {
    background: linear-gradient(135deg,#0b4567 0%,#176b87 55%,#3198b5 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 8px 22px rgba(11,69,103,0.18) !important;
    letter-spacing: 0.6px !important;
}

#current_widget .meteo_card,
#current_widget .meteo_extra_card {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(196,220,233,0.82) !important;
    box-shadow:
        0 6px 18px rgba(28,74,110,0.10),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

#current_widget .meteo_label,
#current_widget .meteo_extra_card span {
    background: linear-gradient(135deg,#edf7fb,#e4f1f7) !important;
    color: #315f78 !important;
    border: 1px solid #d6e9f2 !important;
}

#current_widget .meteo_card strong,
#current_widget .meteo_extra_card strong {
    color: #0d6382 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8) !important;
}

#current_widget .meteo_card:hover,
#current_widget .meteo_extra_card:hover {
    transform: translateY(-4px) !important;
    border-color: #9fcbdc !important;
    box-shadow: 0 12px 28px rgba(28,74,110,0.17) !important;
}


/* ==================================================
   RESTYLING BOZZA - STEP 2 - TESTATE BLU CARD
   ================================================== */

#current_widget .meteo_card,
#current_widget .meteo_extra_card {
    padding: 0 0 10px 0 !important;
    min-height: 78px !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid #d6e7f0 !important;
    border-radius: 15px !important;
}

#current_widget .meteo_label,
#current_widget .meteo_extra_card span {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 9px 0 !important;
    padding: 7px 11px !important;
    border: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    background: linear-gradient(135deg,#0b4567,#176b87,#3198b5) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

#current_widget .meteo_card strong,
#current_widget .meteo_extra_card strong {
    display: block !important;
    padding: 0 12px !important;
    color: #176b87 !important;
    font-size: 22px !important;
    font-weight: 750 !important;
}


/* ==================================================
   RESTYLING BOZZA - STEP 3 - STORICO + WEBCAM
   ================================================== */

/* Pannello Storico */
#history_widget {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid #cfe2ec !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 28px rgba(20,65,95,0.15) !important;
}

/* Testata Storico */
#history_widget #plot_title {
    background: linear-gradient(135deg,#083c5d 0%,#0d6382 55%,#258eac 100%) !important;
    color: #ffffff !important;
    padding: 13px 18px !important;
    border: 0 !important;
}

/* Pulsanti Giorno Settimana Mese Anno */
#history_widget #plot_title a {
    border: 1px solid rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.08) !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
}

#history_widget #plot_title a.button_selected {
    background: #ffffff !important;
    color: #0d6382 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.14) !important;
}

/* Zona grafici */
#history_widget .plot_container {
    background: linear-gradient(180deg,#f7fbfd,#edf6fa) !important;
    padding: 16px !important;
}

/* Grafici */
#history_widget .plot_container img {
    background: #ffffff !important;
    border: 1px solid #d7e7ef !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(28,74,110,0.10) !important;
}

/* Webcam */
#history_widget .webcam_dashboard {
    background: #ffffff !important;
    border: 1px solid #cfe2ec !important;
    border-radius: 18px !important;
    box-shadow: 0 9px 24px rgba(20,65,95,0.16) !important;
}

/* Testata webcam */
#history_widget .webcam_header {
    background: linear-gradient(135deg,#083c5d 0%,#0d6382 55%,#258eac 100%) !important;
    padding: 13px 16px !important;
}

/* Sottotitolo webcam */
#history_widget .webcam_subtitle {
    background: #f4f9fc !important;
    color: #55788c !important;
    border-bottom: 1px solid #e1edf3 !important;
}

/* Badge LIVE */
#history_widget .webcam_live {
    background: #20a44b !important;
    box-shadow: 0 2px 8px rgba(32,164,75,0.30) !important;
}


/* ==================================================
   RESTYLING BOZZA - STEP 4 - STATISTICroby/weewx-data/skins/Seasons/seasons.css <<'EOF'

/* ==================================================
   RESTYLING BOZZA - STEP 4 - STATISTICHE + VOLTA CELESTE
   ================================================== */

#secondary_widget_group .widget {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid #cfe2ec !important;
    border-radius: 20px !important;
    box-shadow: 0 9px 25px rgba(20,65,95,0.14) !important;
}

#secondary_widget_group .widget_title {
    background: linear-gradient(135deg,#083c5d 0%,#0d6382 55%,#258eac 100%) !important;
    color: white !important;
    padding: 13px 17px !important;
    border: 0 !important;
}

#secondary_widget_group .widget_contents {
    background: linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%) !important;
}

#hilo_widget td,
#hilo_widget th,
#sunmoon_widget td,
#sunmoon_widget th {
    border-bottom: 1px solid #e5eff4 !important;
}

#hilo_widget td.data,
#sunmoon_widget td.data {
    color: #0d6382 !important;
    font-weight: 700 !important;
}

#hilo_widget td.label,
#sunmoon_widget td.label {
    color: #58778a !important;
}


/* ==================================================
   RESTYLING BOZZA - STEP 5 - SFONDO GENERALE
   ================================================== */

html {
    background: #dcecf5 !important;
}

body {
    background:
        radial-gradient(circle at 15% 18%,
            rgba(49,152,181,0.16) 0%,
            transparent 32%),
        radial-gradient(circle at 88% 45%,
            rgba(23,107,135,0.12) 0%,
            transparent 34%),
        linear-gradient(180deg,
            #edf7fc 0%,
            #e5f1f7 48%,
            #dcecf5 100%) !important;
    background-attachment: fixed !important;
}

#contents {
    padding-top: 6px !important;
    padding-bottom: 34px !important;
}


/* ==================================================
   RESTYLING BOZZA - STEP 5 - SFONDO GENERALE
   ================================================== */

html {
    background: #dcecf5 !important;
}

body {
    background:
        radial-gradient(circle at 15% 18%,
            rgba(49,152,181,0.16) 0%,
            transparent 32%),
        radial-gradient(circle at 88% 45%,
            rgba(23,107,135,0.12) 0%,
            transparent 34%),
        linear-gradient(180deg,
            #edf7fc 0%,
            #e5f1f7 48%,
            #dcecf5 100%) !important;
    background-attachment: fixed !important;
}

#contents {
    padding-top: 6px !important;
    padding-bottom: 34px !important;
}


/* ==================================================
   RESTYLING BOZZA - STEP 6 - ALLINEAMENTO DASHBOARD
   ================================================== */

#contents {
    width: calc(100% - 32px) !important;
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#widget_group,
#plot_group,
#secondary_widget_group {
    width: 100% !important;
    box-sizing: border-box !important;
}

#current_widget,
#history_widget,
#secondary_widget_group .widget {
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    #contents {
        width: calc(100% - 20px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ===== WEBCAM LIVE - SCHERMO INTERO ===== */
.webcam_fullscreen_btn {
    margin-left: 8px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.14) !important;
    color: white !important;
    font-size: 18px !important;
    cursor: pointer !important;
}

.webcam_fullscreen_btn:hover {
    background: rgba(255,255,255,0.28) !important;
}

#history_widget .webcam_image_wrap:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#history_widget .webcam_image_wrap:fullscreen .webcam_live_video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
}

/* ===== BADGE LIVE - PULSAZIONE ===== */
.webcam_live {
    animation: livePulse 1.5s ease-in-out infinite !important;
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(0.94);
    }
}

/* ===== WEBCAM LIVE FULLSCREEN IPHONE ===== */
.webcam_mobile_close {
    display: none;
}

body.webcam_fullscreen_open {
    overflow: hidden !important;
}

@media (max-width: 900px) {
    .webcam_image_wrap.webcam_mobile_fullscreen {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        z-index: 99999 !important;
        background: #000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .webcam_image_wrap.webcam_mobile_fullscreen .webcam_live_video {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
    }

    .webcam_image_wrap.webcam_mobile_fullscreen .webcam_mobile_close {
        display: block !important;
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 100001 !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(255,255,255,.65) !important;
        border-radius: 50% !important;
        background: rgba(0,0,0,.55) !important;
        color: #fff !important;
        font-size: 28px !important;
        line-height: 36px !important;
    }
}

/* ===== FULLSCREEN LIVE IPHONE - OVERRIDE FINALE ===== */
.webcam_image_wrap.webcam_mobile_fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    z-index: 999999 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.webcam_image_wrap.webcam_mobile_fullscreen .webcam_live_video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
}

.webcam_image_wrap.webcam_mobile_fullscreen .webcam_mobile_close {
    display: block !important;
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 1000001 !important;
}

/* ===== X FULLSCREEN IPHONE - GRANDE E CLICCABILE ===== */
.webcam_image_wrap.webcam_mobile_fullscreen .webcam_mobile_close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.72) !important;
    color: white !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    touch-action: manipulation !important;
}

/* ==================================================
   FOOTER ROMA MONTEVERDE METEO
   ================================================== */

.monteverde_footer {
    width: calc(100% - 32px) !important;
    max-width: 1336px !important;
    margin: 24px auto 18px auto !important;
    padding: 22px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;

    background: linear-gradient(135deg,
        rgba(8,60,93,0.97),
        rgba(13,99,130,0.97),
        rgba(37,142,172,0.95)) !important;

    border-radius: 20px !important;
    box-shadow: 0 9px 26px rgba(20,65,95,0.18) !important;
    color: white !important;
}

.monteverde_footer .footer_logo {
    display: block !important;
    width: 150px !important;
    max-width: 45% !important;
    height: auto !important;
    margin: 0 auto 8px auto !important;
}

.monteverde_footer .footer_station {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.monteverde_footer .footer_info {
    font-size: 13px !important;
    opacity: 0.92 !important;
}

.monteverde_footer .footer_update {
    margin-top: 7px !important;
    font-size: 12px !important;
    opacity: 0.82 !important;
}

.monteverde_footer .footer_weewx {
    margin-top: 8px !important;
    font-size: 11px !important;
    opacity: 0.72 !important;
}

.monteverde_footer .footer_weewx a {
    color: white !important;
    text-decoration: underline !important;
}

@media (max-width: 900px) {
    .monteverde_footer {
        width: calc(100% - 20px) !important;
        border-radius: 16px !important;
        padding: 18px 12px !important;
    }
}

/* ==================================================
   STORICO COMPATTO - 2 GRAFICI PER RIGA
   ================================================== */

@media (min-width: 901px) {

    #history_widget .plot_container {
        text-align: center !important;
    }

    #history_widget .plot_container img {
        display: inline-block !important;
        vertical-align: top !important;
        width: calc(50% - 14px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 6px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 900px) {

    #history_widget .plot_container img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 8px auto !important;
    }
}


/* ===== STORICO COMPATTO - CORREZIONE FINALE ===== */
@media (min-width: 901px) {

    #history_widget .plot_container img {
        float: left !important;
        display: block !important;
        width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        height: auto !important;
        margin: 6px !important;
        box-sizing: border-box !important;
    }

    #history_widget .plot_container::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}


/* ===== STORICO COMPATTO - 3 GRAFICI PER RIGA ===== */
@media (min-width: 901px) {

    #history_widget .plot_container img {
        float: left !important;
        display: block !important;
        width: calc(33.333% - 12px) !important;
        max-width: calc(33.333% - 12px) !important;
        height: auto !important;
        margin: 6px !important;
        box-sizing: border-box !important;
        cursor: zoom-in !important;
    }
}


/* ===== PROTEZIONE SPAZIO FUTURA SECONDA WEBCAM ===== */
@media (min-width: 901px) {
    #history_widget .plot_container {
        clear: both !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   11 CARD METEO - VERSIONE COMPATTA
   ================================================== */

#current_widget .meteo_card,
#current_widget .meteo_extra_card {
    min-height: 62px !important;
    padding-bottom: 6px !important;
}

#current_widget .meteo_label,
#current_widget .meteo_extra_card span {
    padding: 5px 9px !important;
    margin-bottom: 5px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

#current_widget .meteo_card strong,
#current_widget .meteo_extra_card strong {
    padding: 0 9px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
}

#current_widget .meteo_cards,
#current_widget .meteo_extras {
    row-gap: 8px !important;
}


/* ===== ZOOM GRAFICI STORICO ===== */

#history_widget .plot_container img {
    cursor: zoom-in !important;
}

.history_zoom_modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(5, 30, 48, 0.82);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.history_zoom_box {
    position: relative;
    width: min(1100px, 94vw);
    max-height: 94vh;
    padding: 18px;
    box-sizing: border-box;
    background: white;
    border-radius: 20px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.history_zoom_box img {
    display: block;
    width: 100%;
    max-height: calc(94vh - 36px);
    object-fit: contain;
    border-radius: 12px;
}

.history_zoom_close {
    position: absolute;
    top: -18px;
    right: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    z-index: 2;
    border: 2px solid white;
    border-radius: 50%;
    background: #083c5d;
    color: white;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}


/* ==================================================
   STORICO ULTRA COMPATTO - 4 ANTEPRIME PER RIGA
   ================================================== */

@media (min-width: 901px) {

    #history_widget .plot_container {
        padding: 8px !important;
    }

    #history_widget .plot_container img {
        float: left !important;
        display: block !important;
        width: calc(25% - 8px) !important;
        max-width: calc(25% - 8px) !important;
        height: auto !important;
        margin: 4px !important;
        box-sizing: border-box !important;
        cursor: zoom-in !important;
    }
}


/* ==================================================
   STATISTICHE - VERSIONE COMPATTA
   ================================================== */

#hilo_widget td,
#hilo_widget th {
    padding: 3px 7px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

#hilo_widget .widget_contents {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

#hilo_widget .widget_title {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}


/* ==================================================
   SPAZI HOME - COMPATTAZIONE FINALE
   ================================================== */

#plot_group {
    margin-top: 6px !important;
}

#secondary_widget_group {
    margin-top: 10px !important;
    gap: 12px !important;
}

@media (min-width: 901px) {
    #history_widget .webcam_dashboard {
        margin-bottom: 10px !important;
    }
}


/* ==================================================
   WEBCAM 2 FUTURA - PREDISPOSIZIONE
   Rimane invisibile finche' non verra' attivata
   ================================================== */

#history_widget .webcam_dashboard_second {
    display: none !important;
}

/* Quando arrivera' la seconda webcam bastera'
   attivare webcam_enabled e inserire lo stream */
@media (min-width: 901px) {
    #history_widget .webcam_dashboard_second.webcam_enabled {
        display: block !important;
        float: left !important;
        width: 49% !important;
        min-width: 0 !important;
        margin: 0 2% 10px 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 900px) {
    #history_widget .webcam_dashboard_second.webcam_enabled {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 18px 0 !important;
    }
}


/* ===== PROVA HEADER LEGGERMENTE PIU CHIARO ===== */
#title_bar {
    background-image:
        linear-gradient(180deg,
            rgba(5,44,77,0.06),
            rgba(5,44,77,0.28)),
        url("sfondo.webp") !important;
}


/* ===== HEADER ANCORA PIU CHIARO ===== */
#title_bar {
    background-image:
        linear-gradient(180deg,
            rgba(5,44,77,0.03),
            rgba(5,44,77,0.18)),
        url("sfondo.webp") !important;
}


/* ===== HEADER CHIARO - PROVA FINALE ===== */
#title_bar {
    background-image:
        linear-gradient(180deg,
            rgba(5,44,77,0.01),
            rgba(5,44,77,0.10)),
        url("sfondo.webp") !important;
}


/* === 17 SET - 11 CARD CONDIZIONI ATTUALI COMPATTE E UNIFORMI === */

#current_widget.meteo_main {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
}

#current_widget .widget_title {
    margin-bottom: 8px !important;
}

#current_widget .meteo_cards,
#current_widget .meteo_extras {
    width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 8px !important;
}

#current_widget .meteo_extras {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
}

#current_widget .meteo_card {
    min-height: 68px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

#current_widget .meteo_extra_card {
    min-height: 58px !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
}

#current_widget .meteo_card strong,
#current_widget .meteo_extra_card strong {
    margin-top: 3px !important;
}


/* === 17 SET - RIDUZIONE SPAZIO SOPRA/SOTTO BLOCCO 11 CARD === */

#current_widget.meteo_main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
}

#current_widget .widget_title {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

#current_widget .meteo_cards {
    margin-top: 0 !important;
}

#current_widget .meteo_extras {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}


/* === 17 SET - FRECCE TENDENZA 11 CARD === */
#current_widget strong.trend-up {
    color: #138a36 !important;
}

#current_widget strong.trend-down {
    color: #c62828 !important;
}

#current_widget strong.trend-equal {
    color: #666 !important;
}

/* === 17 SET - HERO PIU' VICINA ALLA BOZZA === */

#title_bar {
    min-height: 360px !important;
    padding: 28px 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background-position: center center !important;
    background-size: cover !important;
    position: relative !important;
}

#title_bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(7, 33, 62, 0.22),
        rgba(7, 33, 62, 0.52)
    );
    z-index: 0;
}

#title_bar #title {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

#title_bar #title img {
    width: 240px !important;
    max-width: 42vw !important;
    height: auto !important;
    margin: 0 auto 12px !important;
    display: block !important;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
}

#title_bar .hero_text {
    text-align: center !important;
    color: white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

#title_bar .hero_subtitle {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin-top: 4px !important;
}

#title_bar .hero_description {
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    margin-top: 6px !important;
    opacity: 0.95 !important;
}

#title_bar .lastupdate {
    margin-top: 10px !important;
    font-size: 0.95rem !important;
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

#rss_link {
    position: relative !important;
    z-index: 2 !important;
}

/* MOBILE */
@media (max-width: 700px) {
    #title_bar {
        min-height: 300px !important;
        padding: 22px 12px 18px !important;
    }

    #title_bar #title img {
        width: 185px !important;
        max-width: 58vw !important;
        margin-bottom: 8px !important;
    }

    #title_bar .hero_subtitle {
        font-size: 1.08rem !important;
    }

    #title_bar .hero_description {
        font-size: 0.90rem !important;
        line-height: 1.3 !important;
    }

    #title_bar .lastupdate {
        font-size: 0.85rem !important;
    }
}


/* === 17 SET - HERO PIU' CHIARA + ORARIO LEGGIBILE === */

#title_bar::before {
    background: linear-gradient(
        to bottom,
        rgba(7, 33, 62, 0.04),
        rgba(7, 33, 62, 0.14)
    ) !important;
}

#title_bar .lastupdate {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-shadow:
        0 1px 3px rgba(0,0,0,0.95),
        0 0 8px rgba(0,0,0,0.65) !important;
}


/* === 17 SET - STILE DASHBOARD PIU' VICINO ALLA BOZZA === */

/* Titoli principali dei riquadri */
.widget_title,
.webcam_header {
    border-radius: 12px 12px 0 0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

/* Riquadri principali */
.widget,
.webcam_dashboard {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 16px rgba(0,0,0,0.10) !important;
    border: 1px solid rgba(20,80,120,0.10) !important;
}

/* Le 11 card meteo */
#current_widget .meteo_card,
#current_widget .meteo_extra_card {
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(20,80,120,0.10) !important;
}

/* Titolo Condizioni Attuali */
#current_widget > .widget_title {
    border-radius: 12px !important;
    margin-bottom: 6px !important;
}

/* Sezione storico */
#history_widget {
    border-radius: 14px !important;
}

/* Webcam */
.webcam_dashboard {
    background: #ffffff !important;
}

.webcam_header {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Spaziature generali più ordinate */
#contents {
    row-gap: 14px !important;
}

#widget_group,
#plot_group {
    gap: 14px !important;
}

/* MOBILE */
@media (max-width: 700px) {
    .widget,
    .webcam_dashboard {
        border-radius: 12px !important;
    }

    #contents {
        row-gap: 10px !important;
    }
}


/* ==================================================
   17 SET - STORICO + WEBCAM PIU' VICINI ALLA BOZZA
   ================================================== */

/* Pannello storico più pulito */
#history_widget {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(13,99,130,0.12) !important;
    box-shadow: 0 6px 20px rgba(20,65,95,0.12) !important;
}

/* Barra storico più moderna e meno pesante */
#history_widget #plot_title {
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
    padding: 11px 16px !important;
    border-radius: 14px 14px 0 0 !important;
}

/* Pulsanti storico */
#history_widget #plot_title a {
    padding: 5px 10px !important;
    border-radius: 9px !important;
    font-size: 0.92rem !important;
}

/* Area grafici più chiara */
#history_widget .plot_container {
    background: #f7fafc !important;
    padding: 12px !important;
}

/* Grafici */
#history_widget .plot_container img {
    border-radius: 12px !important;
    border: 1px solid rgba(13,99,130,0.12) !important;
    box-shadow: 0 3px 12px rgba(20,65,95,0.08) !important;
}

/* Webcam più simile ad una card premium */
#history_widget .webcam_dashboard {
    border-radius: 16px !important;
    border: 1px solid rgba(13,99,130,0.14) !important;
    box-shadow: 0 6px 20px rgba(20,65,95,0.14) !important;
    overflow: hidden !important;
}

/* Testata webcam */
#history_widget .webcam_header {
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
    padding: 11px 14px !important;
    font-size: 0.98rem !important;
    letter-spacing: 0.03em !important;
}

/* Sottotitolo più sottile */
#history_widget .webcam_subtitle {
    padding: 7px 12px !important;
    background: #f7fafc !important;
    color: #526f80 !important;
    font-size: 0.88rem !important;
}

/* Cornice immagine/live */
#history_widget .webcam_image_wrap {
    background: #0b1e2c !important;
    overflow: hidden !important;
}

/* Badge LIVE più compatto */
#history_widget .webcam_live {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

/* Desktop: maggiore ordine tra webcam e grafici */
@media (min-width: 901px) {
    #history_widget .webcam_dashboard {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
}

/* Mobile */
@media (max-width: 900px) {
    #history_widget {
        border-radius: 13px !important;
    }

    #history_widget .plot_container {
        padding: 8px !important;
    }

    #history_widget .webcam_dashboard {
        border-radius: 13px !important;
    }
}


/* ==================================================
   17 SET - WIDGET SECONDARI PIU' COMPATTI E MODERNI
   ================================================== */

#secondary_widget_group {
    margin-top: 8px !important;
    gap: 10px !important;
}

/* Tutti i riquadri secondari */
#secondary_widget_group .widget {
    border-radius: 14px !important;
    border: 1px solid rgba(13,99,130,0.11) !important;
    box-shadow: 0 4px 14px rgba(20,65,95,0.08) !important;
    background: #ffffff !important;
}

/* Testate meno alte */
#secondary_widget_group .widget_title {
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    border-radius: 13px 13px 0 0 !important;
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
}

/* Contenuto più compatto */
#secondary_widget_group .widget_contents {
    padding: 7px 10px !important;
    background: #ffffff !important;
}

/* Tabelle */
#secondary_widget_group table {
    margin: 0 !important;
}

#secondary_widget_group td,
#secondary_widget_group th {
    padding: 3px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

/* Statistiche */
#hilo_widget .widget_contents {
    padding: 5px 8px !important;
}

/* Volta celeste */
#sunmoon_widget .widget_contents {
    padding: 6px 9px !important;
}

/* Sensori */
#sensors_widget .widget_contents {
    padding: 6px 9px !important;
}

/* Evita troppo spazio sotto */
#secondary_widget_group .widget:last-child {
    margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 900px) {
    #secondary_widget_group {
        gap: 8px !important;
        margin-top: 6px !important;
    }

    #secondary_widget_group .widget_title {
        padding: 7px 10px !important;
    }

    #secondary_widget_group td,
    #secondary_widget_group th {
        font-size: 11.5px !important;
    }
}


/* ==================================================
   17 SET - STATISTICHE + VOLTA CELESTE PIU' MODERNE
   ================================================== */

#secondary_widget_group {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important;
    gap: 12px !important;
    align-items: start !important;
    margin-top: 8px !important;
}

#hilo_widget,
#sunmoon_widget {
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Statistiche */
#hilo_widget .widget_title,
#sunmoon_widget .widget_title {
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
}

#hilo_widget .widget_contents {
    padding: 4px 6px !important;
}

#hilo_widget td,
#hilo_widget th {
    padding: 2px 5px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
}

/* Volta celeste più compatta */
#sunmoon_widget .widget_contents {
    padding: 6px 10px !important;
}

#sunmoon_widget td,
#sunmoon_widget th {
    padding: 3px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

/* Mobile: tornano uno sotto l'altro */
@media (max-width: 900px) {
    #secondary_widget_group {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}


/* ==================================================
   17 SET - FOOTER MODERNO ROMA MONTEVERDE
   ================================================== */

.monteverde_footer {
    margin-top: 14px !important;
    padding: 18px 16px 16px !important;
    text-align: center !important;
    background: linear-gradient(135deg,#083c5d 0%,#0d6382 55%,#176b87 100%) !important;
    color: #ffffff !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 18px rgba(20,65,95,0.12) !important;
}

.monteverde_footer .footer_logo {
    width: 78px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 6px !important;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.25)) !important;
}

.monteverde_footer .footer_station {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 3px !important;
}

.monteverde_footer .footer_info {
    font-size: 0.88rem !important;
    opacity: 0.92 !important;
    margin-bottom: 4px !important;
}

.monteverde_footer .footer_update {
    font-size: 0.82rem !important;
    opacity: 0.88 !important;
    margin-bottom: 4px !important;
}

.monteverde_footer .footer_weewx {
    font-size: 0.76rem !important;
    opacity: 0.72 !important;
}

.monteverde_footer .footer_weewx a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

.monteverde_footer .footer_weewx a:hover {
    text-decoration: underline !important;
}

@media (max-width: 700px) {
    .monteverde_footer {
        padding: 14px 10px 12px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .monteverde_footer .footer_logo {
        width: 62px !important;
    }

    .monteverde_footer .footer_station {
        font-size: 0.96rem !important;
    }
}


/* ==================================================
   17 SET - MENU PRINCIPALE
   ================================================== */

html {
    scroll-behavior: smooth !important;
}

.monteverde_nav {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    background: linear-gradient(135deg,#083c5d,#0d6382,#176b87) !important;
    box-shadow: 0 4px 14px rgba(20,65,95,0.18) !important;
    position: relative !important;
    z-index: 20 !important;
}

.monteverde_nav a {
    display: inline-block !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.90rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border-radius: 9px !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.monteverde_nav a:hover {
    background: rgba(255,255,255,0.16) !important;
    transform: translateY(-1px) !important;
}

#current_widget,
#history_widget,
#webcam_monteverde,
#hilo_widget,
#sunmoon_widget {
    scroll-margin-top: 15px !important;
}

/* MOBILE */
@media (max-width: 700px) {
    .monteverde_nav {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 7px 8px !important;
        scrollbar-width: none;
    }

    .monteverde_nav::-webkit-scrollbar {
        display: none;
    }

    .monteverde_nav a {
        flex: 0 0 auto !important;
        padding: 7px 10px !important;
        font-size: 0.82rem !important;
    }
}


/* ==================================================
   17 SET - STORICO 2 GRAFICI PER RIGA, SENZA DUPLICATI
   ================================================== */

@media (min-width: 901px) {

    #history_widget .plot_container img {
        float: left !important;
        display: block !important;
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        height: auto !important;
        margin: 5px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        cursor: zoom-in !important;
    }

    #history_widget .plot_container::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}

@media (max-width: 900px) {

    #history_widget .plot_container img {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 7px auto !important;
    }
}


/* ==================================================
   17 SET - RIPRISTINO STORICO COMPATTO 4 PER RIGA
   ================================================== */

@media (min-width: 901px) {

    #history_widget .plot_container img {
        float: left !important;
        display: block !important;
        width: calc(25% - 8px) !important;
        max-width: calc(25% - 8px) !important;
        height: auto !important;
        margin: 4px !important;
        box-sizing: border-box !important;
        cursor: zoom-in !important;
    }

    #history_widget .plot_container::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}


/* ==================================================
   17 SET - LAYOUT GENERALE PIU' DASHBOARD
   ================================================== */

body {
    background: #eef4f7 !important;
}

#contents {
    width: min(1180px, calc(100% - 28px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
    box-sizing: border-box !important;
}

#widget_group,
#plot_group,
#secondary_widget_group {
    margin-bottom: 12px !important;
}

.widget,
.webcam_dashboard {
    background: #ffffff !important;
}

#current_widget,
#history_widget,
#secondary_widget_group {
    scroll-margin-top: 18px !important;
}

/* evita che i blocchi tocchino i bordi su schermi medi */
@media (max-width: 1200px) {
    #contents {
        width: calc(100% - 20px) !important;
    }
}

/* mobile più compatto */
@media (max-width: 700px) {
    #contents {
        width: calc(100% - 12px) !important;
        padding-top: 8px !important;
    }

    #widget_group,
    #plot_group,
    #secondary_widget_group {
        margin-bottom: 8px !important;
    }
}

/* ==================================================
   17 SET - MOBILE SAFE - SENZA TOCCARE LA WEBCAM
   ================================================== */

@media (max-width: 700px) {

    body {
        overflow-x: hidden !important;
    }

    /* HERO */
    #title_bar {
        min-height: 245px !important;
        padding: 16px 10px !important;
        background-position: center center !important;
    }

    #title_bar #title {
        max-width: 100% !important;
    }

    #title_bar #title img {
        width: 145px !important;
        max-width: 50vw !important;
        margin-bottom: 5px !important;
    }

    #title_bar .hero_subtitle {
        font-size: 1.02rem !important;
        line-height: 1.2 !important;
    }

    #title_bar .hero_description {
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        padding: 0 8px !important;
    }

    #title_bar .lastupdate {
        font-size: 0.78rem !important;
        margin-top: 4px !important;
    }

    /* MENU */
    .monteverde_nav {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 3px !important;
        padding: 6px !important;
        scrollbar-width: none !important;
    }

    .monteverde_nav::-webkit-scrollbar {
        display: none !important;
    }

    .monteverde_nav a {
        flex: 0 0 auto !important;
        padding: 7px 9px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
    }

    /* CONTENUTO */
    #contents {
        width: calc(100% - 10px) !important;
        padding-top: 7px !important;
        padding-bottom: 8px !important;
    }

    /* CARD METEO */
    #current_widget .meteo_cards,
    #current_widget .meteo_extras {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        min-height: 58px !important;
        padding: 7px 8px !important;
        border-radius: 10px !important;
    }

    #current_widget .meteo_label,
    #current_widget .meteo_extra_card span {
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
    }

    #current_widget .meteo_card strong,
    #current_widget .meteo_extra_card strong {
        font-size: 0.94rem !important;
        line-height: 1.1 !important;
    }

    /* TITOLO STORICO */
    #history_widget #plot_title {
        padding: 8px 8px !important;
        font-size: 0.82rem !important;
        white-space: normal !important;
    }

    #history_widget #plot_title a {
        padding: 5px 7px !important;
        font-size: 0.77rem !important;
    }

    /* STATISTICHE + VOLTA CELESTE */
    #secondary_widget_group {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #hilo_widget,
    #sunmoon_widget {
        width: 100% !important;
    }

    #hilo_widget .widget_title,
    #sunmoon_widget .widget_title {
        font-size: 0.86rem !important;
        padding: 8px 10px !important;
    }

    #hilo_widget td,
    #hilo_widget th,
    #sunmoon_widget td,
    #sunmoon_widget th {
        font-size: 11px !important;
        padding: 3px 4px !important;
    }

    /* FOOTER */
    .monteverde_footer {
        margin-top: 8px !important;
        padding: 12px 8px !important;
    }

    .monteverde_footer .footer_logo {
        width: 58px !important;
    }

    .monteverde_footer .footer_station {
        font-size: 0.92rem !important;
    }

    .monteverde_footer .footer_info,
    .monteverde_footer .footer_update {
        font-size: 0.74rem !important;
    }
}

@media (max-width: 420px) {

    #title_bar {
        min-height: 225px !important;
    }

    #title_bar #title img {
        width: 132px !important;
    }

    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}


/* ==================================================
   17 SET - TITOLI SEZIONI UNIFORMI
   ================================================== */

#current_widget > .widget_title,
#history_widget > #plot_title,
#hilo_widget > .widget_title,
#sunmoon_widget > .widget_title,
.webcam_header {
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

#current_widget > .widget_title {
    padding: 9px 14px !important;
    border-radius: 12px !important;
}

#hilo_widget > .widget_title,
#sunmoon_widget > .widget_title {
    border-radius: 14px 14px 0 0 !important;
}

#hilo_widget > .widget_title a,
#sunmoon_widget > .widget_title a {
    color: #ffffff !important;
    text-decoration: none !important;
}


/* ==================================================
   17 SET - SFONDO PANORAMICO CHE SFUMA SOTTO LE CARD
   ================================================== */

#contents {
    position: relative !important;
    isolation: isolate !important;
    background: transparent !important;
}

#contents::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;

    top: -90px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 100vw !important;
    height: 470px !important;

    background:
        linear-gradient(
            to bottom,
            rgba(238,244,247,0.10) 0%,
            rgba(238,244,247,0.28) 25%,
            rgba(238,244,247,0.62) 62%,
            #eef4f7 100%
        ),
        url('/sfondo.webp') center center / cover no-repeat !important;

    pointer-events: none !important;
}

@media (max-width: 700px) {

    #contents::before {
        top: -60px !important;
        height: 380px !important;

        background:
            linear-gradient(
                to bottom,
                rgba(238,244,247,0.12) 0%,
                rgba(238,244,247,0.42) 45%,
                #eef4f7 100%
            ),
            url('/sfondo.webp') center center / cover no-repeat !important;
    }
}


/* ==================================================
   17 SET - SFUMATURA PIU' MORBIDA COME BOZZA
   ================================================== */

#contents::before {
    height: 560px !important;

    background:
        linear-gradient(
            to bottom,
            rgba(238,244,247,0.04) 0%,
            rgba(238,244,247,0.12) 18%,
            rgba(238,244,247,0.28) 38%,
            rgba(238,244,247,0.52) 60%,
            rgba(238,244,247,0.78) 80%,
            #eef4f7 100%
        ),
        url('/sfondo.webp') center center / cover no-repeat !important;
}

@media (max-width: 700px) {
    #contents::before {
        height: 430px !important;

        background:
            linear-gradient(
                to bottom,
                rgba(238,244,247,0.06) 0%,
                rgba(238,244,247,0.18) 28%,
                rgba(238,244,247,0.48) 58%,
                rgba(238,244,247,0.78) 80%,
                #eef4f7 100%
            ),
            url('/sfondo.webp') center center / cover no-repeat !important;
    }
}


/* ==================================================
   17 SET - SFUMATURA FORTE SOTTO LE CARD
   ================================================== */

#contents::before {
    height: 620px !important;

    background:
        linear-gradient(
            to bottom,
            rgba(238,244,247,0.08) 0%,
            rgba(238,244,247,0.22) 12%,
            rgba(238,244,247,0.48) 30%,
            rgba(238,244,247,0.72) 50%,
            rgba(238,244,247,0.90) 72%,
            #eef4f7 100%
        ),
        url('/sfondo.webp') center center / cover no-repeat !important;
}


/* ==================================================
   17 SET - HERO CONTINUO CON IL RESTO DEL SITO
   ================================================== */

#title_bar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-position: center center !important;
}

.monteverde_nav {
    margin-top: 0 !important;
    border-radius: 0 !important;
}

body {
    margin: 0 !important;
}

/* elimina lo stacco bianco tra hero e menu */
#title_bar + .monteverde_nav {
    margin-top: 0 !important;
}

/* continuità visiva verso le card */
#contents::before {
    top: -140px !important;
}

@media (max-width: 700px) {
    #title_bar {
        border-radius: 0 !important;
    }

    #contents::before {
        top: -100px !important;
    }
}


/* ==================================================
   17 SET - ELIMINA FASCIA DUPLICATA TRA HERO E MENU
   ================================================== */

#contents::before {
    top: 0 !important;
}

.monteverde_nav {
    position: relative !important;
    z-index: 5 !important;
}

#contents {
    margin-top: 0 !important;
}

/* lo sfondo panoramico parte solo sotto il menu */
#contents::before {
    background-position: center top !important;
}

@media (max-width: 700px) {
    #contents::before {
        top: 0 !important;
    }
}


/* ==================================================
   17 SET - LOGO HERO PIU' GRANDE
   ================================================== */

#title_bar #title img {
    width: 220px !important;
    max-width: 36vw !important;
}

@media (max-width: 700px) {
    #title_bar #title img {
        width: 165px !important;
        max-width: 52vw !important;
    }
}


/* ==================================================
   17 SET - LOGO HERO GRANDE - FORZATURA FINALE
   ================================================== */

#title_bar #title img {
    width: 320px !important;
    max-width: none !important;
    height: auto !important;
}

@media (max-width: 700px) {
    #title_bar #title img {
        width: 210px !important;
        max-width: 65vw !important;
    }
}


/* ==================================================
   17 SET - LOGO HERO EXTRA LARGE
   ================================================== */

#title_bar #title img {
    width: 420px !important;
    max-width: none !important;
    height: auto !important;
}

@media (max-width: 700px) {
    #title_bar #title img {
        width: 250px !important;
        max-width: 72vw !important;
    }
}


/* ==================================================
   17 SET - LOGO HERO XXL
   ================================================== */

#title_bar #title img {
    width: 520px !important;
    max-width: none !important;
    height: auto !important;
}

@media (max-width: 700px) {
    #title_bar #title img {
        width: 285px !important;
        max-width: 78vw !important;
    }
}


/* ==================================================
   17 SET - LOGO HERO XXXL
   ================================================== */

#title_bar #title img {
    width: 640px !important;
    max-width: none !important;
    height: auto !important;
}

@media (max-width: 700px) {
    #title_bar #title img {
        width: 320px !important;
        max-width: 84vw !important;
    }
}


/* ==================================================
   17 SET - LOGO HERO ULTRA LARGE
   ================================================== */

#title_bar #title img {
    width: 700px !important;
    max-width: none !important;
    height: auto !important;
}

@media (max-width: 700px) {
    #title_bar #title img {
        width: 340px !important;
        max-width: 86vw !important;
    }
}


/* ==================================================
   17 SET - HERO PIU' CHIARO
   ================================================== */

#title_bar::before {
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.16)
        ) !important;
}


/* ==================================================
   17 SET - HERO ANCORA PIU' CHIARO
   ================================================== */

#title_bar::before {
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.20),
            rgba(255,255,255,0.30)
        ) !important;
}


/* ==================================================
   17 SET - ORA/DATA IN SOVRAIMPRESSIONE SENZA RIQUADRO
   ================================================== */

#title .lastupdate,
#title_bar .lastupdate {
    display: inline-block !important;
    margin: 6px auto 0 auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,0.95),
        0 0 8px rgba(0,0,0,0.65) !important;
}


/* ==================================================
   17 SET - LOGO HERO MAXI
   ================================================== */

#title_bar #title img {
    width: 820px !important;
    max-width: none !important;
    height: auto !important;
}

@media (max-width: 700px) {
    #title_bar #title img {
        width: 380px !important;
        max-width: 90vw !important;
    }
}


/* =========================================================
   GRAFICI MODERNI ROMA MONTEVERDE
   ========================================================= */

#grafici_moderni_test {
    width: 100%;
    box-sizing: border-box;
    margin: 18px 0 24px 0;
}

.modern_chart_card {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(23,107,135,.12);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20,65,85,.10);
    padding: 18px 20px 14px;
    box-sizing: border-box;
    overflow: hidden;
}

.modern_chart_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.modern_chart_title {
    font-size: 20px;
    font-weight: 800;
    color: #163b50;
}

.modern_chart_subtitle {
    margin-top: 2px;
    font-size: 13px;
    color: #78909c;
}

.modern_chart_legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    color: #526975;
}

.modern_chart_legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modern_chart_legend i {
    display: inline-block;
    width: 20px;
    height: 3px;
    border-radius: 3px;
}

.legend_temp {
    background: #1486a8;
}

.legend_dew {
    background: #72a95c;
}

.modern_chart_svgwrap {
    position: relative;
    width: 100%;
    height: 300px;
}

.modern_chart_svgwrap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mc-grid {
    stroke: #dfe9ee;
    stroke-width: 1;
}

.mc-axis {
    fill: #78909c;
    font-size: 12px;
    font-family: Arial, sans-serif;
}

.mc-line-temp,
.mc-line-dew {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.mc-line-temp {
    stroke: #1486a8;
    stroke-width: 3;
}

.mc-line-dew {
    stroke: #72a95c;
    stroke-width: 2.4;
}

.mc-hover-line {
    stroke: #607d8b;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: .7;
    vector-effect: non-scaling-stroke;
}

.mc-dot-temp {
    fill: #ffffff;
    stroke: #1486a8;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.mc-dot-dew {
    fill: #ffffff;
    stroke: #72a95c;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.modern_chart_tooltip {
    display: none;
    position: absolute;
    z-index: 5;
    min-width: 125px;
    background: rgba(18,48,64,.94);
    color: white;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.55;
    pointer-events: none;
    box-shadow: 0 5px 18px rgba(0,0,0,.20);
}

.modern_chart_error {
    padding: 30px;
    text-align: center;
    color: #78909c;
}

@media (max-width: 700px) {
    .modern_chart_card {
        padding: 14px 10px 10px;
        border-radius: 16px;
    }

    .modern_chart_head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 0 6px;
    }

    .modern_chart_svgwrap {
        height: 260px;
    }

    .modern_chart_legend {
        gap: 10px;
    }
}

/* === GRAFICO MODERNO COMPATTO - STILE MOCKUP === */

#grafici_moderni_test {
    margin: 12px 0 18px 0 !important;
}

.modern_chart_card {
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 12px 14px 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(20,65,85,.09) !important;
}

.modern_chart_head {
    margin-bottom: 4px !important;
    gap: 10px !important;
}

.modern_chart_title {
    font-size: 16px !important;
}

.modern_chart_subtitle {
    font-size: 11px !important;
}

.modern_chart_legend {
    gap: 10px !important;
    font-size: 10px !important;
}

.modern_chart_legend i {
    width: 16px !important;
    height: 2px !important;
}

.modern_chart_svgwrap {
    height: 185px !important;
}

.mc-axis {
    font-size: 10px !important;
}

.mc-line-temp {
    stroke-width: 2.4 !important;
}

.mc-line-dew {
    stroke-width: 1.8 !important;
}

.modern_chart_tooltip {
    font-size: 11px !important;
    padding: 7px 9px !important;
}

@media (max-width: 700px) {
    .modern_chart_card {
        max-width: 100% !important;
        padding: 10px 8px 8px !important;
    }

    .modern_chart_svgwrap {
        height: 165px !important;
    }
}

/* === GRAFICI MODERNI ULTRA-COMPATTI === */

.modern_chart_card {
    max-width: 320px !important;
    padding: 8px 9px 7px !important;
    border-radius: 14px !important;
}

.modern_chart_head {
    margin-bottom: 2px !important;
    gap: 6px !important;
}

.modern_chart_title {
    font-size: 13px !important;
}

.modern_chart_subtitle {
    font-size: 9px !important;
}

.modern_chart_legend {
    gap: 7px !important;
    font-size: 8px !important;
}

.modern_chart_legend i {
    width: 12px !important;
}

.modern_chart_svgwrap {
    height: 135px !important;
}

.mc-axis {
    font-size: 8px !important;
}

.modern_chart_tooltip {
    font-size: 9px !important;
    padding: 5px 7px !important;
}

@media (max-width: 700px) {
    .modern_chart_card {
        max-width: 100% !important;
    }

    .modern_chart_svgwrap {
        height: 145px !important;
    }
}

/* === PALETTE GRAFICI MODERNI - STILE BOZZA ROMA MONTEVERDE === */

.modern_chart_card {
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(34,111,145,.10) !important;
    box-shadow: 0 6px 18px rgba(24,74,98,.08) !important;
}

.modern_chart_title {
    color: #174f6b !important;
}

.modern_chart_subtitle,
.modern_chart_legend {
    color: #6f8793 !important;
}

.legend_temp {
    background: #2b8fb3 !important;
}

.legend_dew {
    background: #65a98d !important;
}

.mc-grid {
    stroke: #e6eef2 !important;
}

.mc-axis {
    fill: #7f929d !important;
}

.mc-line-temp {
    stroke: #2b8fb3 !important;
}

.mc-line-dew {
    stroke: #65a98d !important;
}

.mc-hover-line {
    stroke: #6f8793 !important;
    opacity: .55 !important;
}

.mc-dot-temp {
    stroke: #2b8fb3 !important;
}

.mc-dot-dew {
    stroke: #65a98d !important;
}

.modern_chart_tooltip {
    background: rgba(23,79,107,.94) !important;
}

/* === RIMUOVE PANNELLO TRASPARENTE DIETRO LE CARD === */
#current_widget.meteo_main,
#current_widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ======================================================
   NUOVO LOOK MINI-GRAFICI - ROMA MONTEVERDE
   ====================================================== */

.modern_chart_card {
    max-width: 300px !important;
    padding: 0 0 7px 0 !important;
    overflow: hidden !important;

    background: #ffffff !important;
    border: 1px solid #dbe8ee !important;
    border-radius: 13px !important;

    box-shadow:
        0 5px 14px rgba(35,80,100,.08) !important;
}

.modern_chart_head {
    min-height: 31px !important;
    margin: 0 !important;
    padding: 5px 9px !important;

    background: linear-gradient(
        90deg,
        #176b87 0%,
        #2994ad 100%
    ) !important;

    box-sizing: border-box !important;
}

.modern_chart_title {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.modern_chart_subtitle {
    color: rgba(255,255,255,.78) !important;
    font-size: 8px !important;
    margin-top: 0 !important;
}

.modern_chart_legend {
    font-size: 7px !important;
    color: rgba(255,255,255,.90) !important;
    gap: 6px !important;
}

.modern_chart_legend i {
    height: 2px !important;
    width: 10px !important;
}

.modern_chart_svgwrap {
    height: 118px !important;
    margin-top: 4px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

.mc-grid {
    stroke: #edf3f6 !important;
    stroke-width: .7 !important;
}

.mc-axis {
    fill: #8499a4 !important;
    font-size: 7px !important;
}

.mc-line-temp {
    stroke: #168ab3 !important;
    stroke-width: 2.1 !important;
}

.mc-line-dew {
    stroke: #62ae91 !important;
    stroke-width: 1.6 !important;
}

.modern_chart_tooltip {
    background: rgba(15,78,103,.94) !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    padding: 5px 7px !important;
}

@media (max-width:700px) {
    .modern_chart_card {
        max-width: 300px !important;
    }

    .modern_chart_svgwrap {
        height: 125px !important;
    }
}

/* === GRIGLIA 4 MINI-GRAFICI === */

#grafici_moderni_test {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 18px !important;
}

#grafici_moderni_test .modern_chart_card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.legend_primary {
    background: #168ab3 !important;
}

.legend_secondary {
    background: #62ae91 !important;
}

.mc-line-primary {
    fill: none !important;
    stroke: #168ab3 !important;
    stroke-width: 2 !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    vector-effect: non-scaling-stroke !important;
}

.mc-line-secondary {
    fill: none !important;
    stroke: #62ae91 !important;
    stroke-width: 1.5 !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    vector-effect: non-scaling-stroke !important;
}

.mc-dot-primary {
    fill: white !important;
    stroke: #168ab3 !important;
    stroke-width: 2.5 !important;
    vector-effect: non-scaling-stroke !important;
}

.mc-dot-secondary {
    fill: white !important;
    stroke: #62ae91 !important;
    stroke-width: 2.5 !important;
    vector-effect: non-scaling-stroke !important;
}

@media (max-width: 900px) {
    #grafici_moderni_test {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    #grafici_moderni_test {
        grid-template-columns: 1fr !important;
    }
}

/* === MINI-GRAFICI ANCORA PIU' COMPATTI === */

.modern_chart_svgwrap {
    height: 92px !important;
    margin-top: 2px !important;
}

.modern_chart_card {
    padding-bottom: 4px !important;
}

.modern_chart_head {
    min-height: 28px !important;
    padding: 4px 8px !important;
}

.modern_chart_title {
    font-size: 11px !important;
}

.modern_chart_subtitle {
    font-size: 7px !important;
}

.modern_chart_legend {
    font-size: 6.5px !important;
}

@media (max-width:700px) {
    .modern_chart_svgwrap {
        height: 105px !important;
    }
}

/* === SFONDO MINI-GRAFICI COME BOZZA === */

.modern_chart_card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(242,249,252,.98) 45%,
            rgba(232,244,249,.98) 100%
        ) !important;

    border: 1px solid rgba(75,145,170,.16) !important;

    box-shadow:
        0 4px 12px rgba(35,85,105,.07) !important;
}

.modern_chart_svgwrap {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.15),
            rgba(222,241,248,.35)
        ) !important;

    border-radius: 0 0 11px 11px !important;
}

.mc-grid {
    stroke: rgba(115,160,178,.18) !important;
}

/* === MINI-GRAFICI DARK COME BOZZA === */

.modern_chart_card {
    background: #17324a !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 5px 14px rgba(10,35,55,.18) !important;
}

.modern_chart_head {
    background: linear-gradient(
        90deg,
        #176b87 0%,
        #2b8fb3 100%
    ) !important;
}

.modern_chart_svgwrap {
    background: linear-gradient(
        180deg,
        #1a344c 0%,
        #203d56 100%
    ) !important;
}

.mc-grid {
    stroke: rgba(190,215,230,.22) !important;
}

.mc-axis {
    fill: #d7e7ef !important;
}

.modern_chart_title {
    color: #ffffff !important;
}

.modern_chart_subtitle,
.modern_chart_legend {
    color: rgba(255,255,255,.82) !important;
}

.mc-line-primary {
    stroke: #ff554d !important;
}

.mc-line-secondary {
    stroke: #59d0c3 !important;
}

.legend_primary {
    background: #ff554d !important;
}

.legend_secondary {
    background: #59d0c3 !important;
}

.mc-dot-primary {
    fill: #17324a !important;
    stroke: #ff554d !important;
}

.mc-dot-secondary {
    fill: #17324a !important;
    stroke: #59d0c3 !important;
}

.modern_chart_tooltip {
    background: rgba(8,28,42,.96) !important;
    color: #ffffff !important;
}

/* === PULSANTI PERIODO GRAFICI MODERNI === */

.modern_period_buttons {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 9px 0 8px;
}

.modern_period_buttons button {
    border: 1px solid #2b7795;
    background: #17324a;
    color: #dcecf4;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.modern_period_buttons button:hover {
    background: #20516d;
}

.modern_period_buttons button.active {
    background: linear-gradient(90deg,#176b87,#2b8fb3);
    color: white;
    border-color: #2b8fb3;
}

/* === NASCONDE I VECCHI GRAFICI WEEWX === */
#history_widget > .plot_container {
    display: none !important;
}

/* Nasconde i vecchi pulsanti Giorno/Settimana/Mese/Anno WeeWX */
#plot_title a {
    display: none !important;
}

/* ======================================================
   RECORD ASSOLUTI
   ====================================================== */

#record_assoluti {
    margin: 12px 0 18px;
}

.record_section_title {
    margin-bottom: 8px;
    color: #174f6b;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
}

.record_section_title span {
    margin-left: 6px;
    color: #718a96;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
}

#record_assoluti_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
}

.record_card {
    overflow: hidden;
    padding: 0 9px 7px;
    background: linear-gradient(180deg,#1a344c,#203d56);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(10,35,55,.14);
}

.record_title {
    margin: 0 -9px 6px;
    padding: 5px 9px;
    background: linear-gradient(90deg,#176b87,#2b8fb3);
    color: white;
    font-size: 11px;
    font-weight: 800;
}

.record_row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.record_label {
    color: #b8ccd7;
    font-size: 9px;
}

.record_value {
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.record_date {
    margin-top: 1px;
    color: #7fa5b7;
    font-size: 7.5px;
    text-align: right;
}

@media (max-width:900px) {
    #record_assoluti_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px) {
    #record_assoluti_grid {
        grid-template-columns: 1fr;
    }
}

/* === RIFINITURA COMPATTA SEZIONE STORICO === */

.modern_period_buttons {
    margin: 6px 0 6px !important;
    gap: 5px !important;
}

#graficI_moderni_test,
#grafici_moderni_test {
    gap: 7px !important;
    margin: 7px 0 10px !important;
}

.modern_chart_card {
    padding-bottom: 2px !important;
}

.modern_chart_svgwrap {
    margin-top: 0 !important;
}

#record_assoluti {
    margin: 8px 0 12px !important;
}

.record_section_title {
    margin-bottom: 5px !important;
}

#record_assoluti_grid {
    gap: 6px !important;
}

.record_card {
    padding: 0 8px 5px !important;
}

.record_title {
    margin: 0 -8px 4px !important;
    padding: 4px 8px !important;
}

.record_row {
    margin-top: 2px !important;
}

.record_date {
    margin-top: 0 !important;
}

/* ===== MENU HOME SEMPRE VISIBILE - 19 SET ===== */
.monteverde_nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(18,61,90,.98) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.20) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

#current_widget,
#history_widget,
#secondary_widget_group {
    scroll-margin-top: 65px !important;
}

/* ===== WEBCAM SEZIONE AUTONOMA - 19 SET ===== */
#webcam.webcam_section {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 22px !important;
    scroll-margin-top: 70px !important;
}

#webcam .webcam_dashboard {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ===== DUE WEBCAM AFFIANCATE - 19 SET ===== */

#webcam.webcam_section {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 22px !important;
}

#webcam .webcam_dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#webcam .webcam_image_wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 0 0 14px 14px !important;
}

#webcam .webcam_live_video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
}

#webcam .webcam_future_wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    border-radius: 0 0 14px 14px !important;
    background:
        linear-gradient(rgba(12,43,67,.72), rgba(12,43,67,.86)),
        url('/sfondo.webp') center/cover no-repeat !important;
}

@media (max-width: 800px) {
    #webcam.webcam_section {
        grid-template-columns: 1fr !important;
    }
}

/* ===== SCELTA ANNI STORICO - 19 SET ===== */
#modern_year_buttons {
    margin-top: 8px !important;
    justify-content: center !important;
    gap: 7px !important;
}

#modern_year_buttons button {
    min-width: 62px !important;
}

#modern_year_buttons button.active {
    font-weight: 800 !important;
}

/* ===== WEBCAM: NASCONDE CONTROLLI PLAYER AL PASSAGGIO MOUSE ===== */
#webcam_monteverde .webcam_live_video {
    pointer-events: auto !important;
}

/* ===== ZOOM GRAFICI STORICO MODALE - 19 SET ===== */

.grafico_zoomabile {
    cursor: zoom-in !important;
}

.grafico_modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important;

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

    padding: 30px !important;

    background: rgba(3,18,30,.78) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.grafico_modal_finestra {
    position: relative !important;

    width: min(1150px, 94vw) !important;
    height: min(720px, 88vh) !important;

    padding: 22px !important;

    border-radius: 20px !important;

    background: #102b43 !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.55) !important;
}

.grafico_zoom_aperto {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    margin: 0 !important;

    cursor: default !important;
    transform: none !important;
}

.grafico_zoom_aperto .modern_chart_svgwrap {
    height: calc(100% - 70px) !important;
}

.grafico_zoom_aperto svg {
    width: 100% !important;
    height: 100% !important;
}

.grafico_modal_close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;

    z-index: 10 !important;

    width: 34px !important;
    height: 34px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,.15) !important;
    color: white !important;

    font-size: 25px !important;
    line-height: 30px !important;

    cursor: pointer !important;
}

.grafico_modal_close:hover {
    background: rgba(255,255,255,.28) !important;
}

.grafico_zoom_blocco {
    overflow: hidden !important;
}

@media (max-width:700px) {

    .grafico_modal {
        padding: 10px !important;
    }

    .grafico_modal_finestra {
        width: 96vw !important;
        height: 82vh !important;
        padding: 14px !important;
    }
}

/* ===== LEGENDA GRAFICI PIU LEGGIBILE ===== */
.modern_chart_legend {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.modern_chart_legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Zoom: evita deformazioni delle scritte */
.grafico_zoom_aperto svg {
    width: 100% !important;
    height: 100% !important;
}

/* ===== ASSE X COMPLETO GRAFICI STORICO ===== */

.mc-axis-time {
    font-size: 9px !important;
}

.mc-axis-dense {
    font-size: 7px !important;
}

/* Nel grafico ingrandito possiamo leggerle meglio */
.grafico_zoom_aperto .mc-axis-time {
    font-size: 10px !important;
}

.grafico_zoom_aperto .mc-axis-dense {
    font-size: 8px !important;
}

/* ===== SFONDO ROMA FINO IN FONDO PAGINA ===== */

html,
body {
    min-height: 100% !important;
}

body {
    background:
        linear-gradient(
            rgba(238,244,247,.88),
            rgba(238,244,247,.94)
        ),
        url('/sfondo.webp') center top / cover fixed no-repeat !important;
}

/* Evita che i contenitori principali coprano lo sfondo */
#container,
#contents,
main {
    background: transparent !important;
}


/* ===== SFONDO UNICO CONTINUO - 19 SET ===== */

/* Elimina il vecchio fondale/dissolvenza che scorreva con i contenuti */
#contents::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Un solo sfondo per tutta la pagina */
html {
    background: #eef4f7 !important;
}

body {
    min-height: 100vh !important;
    background:
        linear-gradient(
            rgba(238,244,247,.90),
            rgba(238,244,247,.90)
        ),
        url('/sfondo.webp') center center / cover fixed no-repeat !important;
}

/* I grandi contenitori restano trasparenti */
#container,
#contents,
main {
    background: transparent !important;
}

/* ===== SFONDO PIU' COLORATO ===== */
body {
    background:
        linear-gradient(
            rgba(214,230,239,.68),
            rgba(214,230,239,.72)
        ),
        url('/sfondo.webp') center center / cover fixed no-repeat !important;
}

/* ===== WEBCAM SOPRA CONDIZIONI - LARGHEZZA CORRETTA ===== */

#contents > #webcam.webcam_section {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 18px !important;

    margin: 18px 0 24px !important;
    padding: 0 !important;
}

#contents > #webcam .webcam_dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#contents > #webcam .webcam_image_wrap,
#contents > #webcam .webcam_future_wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
}

#contents > #webcam .webcam_live_video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
}

@media (max-width: 800px) {
    #contents > #webcam.webcam_section {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ===== WEBCAM SOPRA CONDIZIONI - OCCUPA TUTTA LA GRIGLIA ===== */

#contents > #webcam.webcam_section {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

#contents > #webcam .webcam_dashboard {
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 800px) {
    #contents > #webcam.webcam_section {
        grid-column: 1 !important;
        grid-template-columns: 1fr !important;
    }
}

/* ===== MOBILE: ORDINE E LARGHEZZE DEFINITIVE ===== */
@media (max-width: 800px) {

    #contents {
        display: block !important;
        width: 100% !important;
    }

    #contents > #webcam.webcam_section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        margin: 16px 0 20px !important;
    }

    #contents > #webcam .webcam_dashboard {
        width: 100% !important;
        max-width: none !important;
    }

    #current_widget,
    #plot_group,
    #history_widget {
        width: 100% !important;
        max-width: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* ===== MOBILE DEFINITIVO 20 SET ===== */
@media (max-width: 800px) {

    #contents {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Webcam per prime */
    #contents > #webcam.webcam_section {
        order: 1 !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;

        width: 100% !important;
        gap: 8px !important;

        margin: 14px 0 18px !important;
    }

    /* Condizioni subito dopo */
    #contents > #current_widget {
        order: 2 !important;
        width: 100% !important;
    }

    /* Il gruppo con lo storico viene dopo */
    #contents > #plot_group {
        order: 3 !important;
        width: 100% !important;
    }

    #history_widget {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===== ORDINE HOME CORRETTO - 20 SET ===== */

@media (max-width: 800px) {

    #contents {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 1 - WEBCAM */
    #contents > #webcam {
        order: 1 !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;

        width: 100% !important;
        max-width: none !important;

        gap: 8px !important;
        margin: 14px 0 18px !important;
    }

    /* 2 - CONDIZIONI ATTUALI */
    #contents > #widget_group {
        order: 2 !important;

        width: 100% !important;
        max-width: none !important;

        display: block !important;
    }

    /* 3 - STORICO */
    #contents > #plot_group {
        order: 3 !important;

        width: 100% !important;
        max-width: none !important;
    }

    /* 4 - STATISTICHE / VOLTA CELESTE */
    #contents > #secondary_widget_group {
        order: 4 !important;

        width: 100% !important;
        max-width: none !important;
    }
}

/* ===== MOBILE IPHONE - WEBCAM GRANDI + MENU COMPLETO ===== */
@media (max-width: 800px) {

    /* Webcam una sopra l'altra e molto più larghe */
    #contents > #webcam.webcam_section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;

        width: calc(100% + 20px) !important;
        max-width: none !important;

        margin-left: -10px !important;
        margin-right: -10px !important;
        margin-top: 14px !important;
        margin-bottom: 20px !important;
    }

    #contents > #webcam .webcam_dashboard {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #contents > #webcam .webcam_image_wrap,
    #contents > #webcam .webcam_future_wrap {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 16 / 9 !important;
    }

    #contents > #webcam .webcam_live_video {
        width: 100% !important;
        height: 100% !important;
    }


    /* Menu mobile: mostra tutte le voci senza trascinare */
    .monteverde_nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;

        overflow-x: visible !important;
        white-space: normal !important;

        gap: 5px !important;
        padding: 7px 5px !important;
    }

    .monteverde_nav a {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        padding: 5px 7px !important;
        line-height: 1.15 !important;
    }
}

/* ===== MOBILE - 11 CARD CONDIZIONI COME GRIGLIA UNICA ===== */
@media (max-width: 800px) {

    #current_widget {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #current_widget > .widget_title {
        grid-column: 1 / -1 !important;
    }

    #current_widget > .meteo_cards,
    #current_widget > .meteo_extras {
        display: contents !important;
    }

    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        grid-column: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    #current_widget .meteo_card:last-child,
    #current_widget .meteo_extra_card:last-child {
        grid-column: auto !important;
    }
}

/* ===== FIX MOBILE CARD CONDIZIONI ===== */
@media (max-width: 800px) {

    #current_widget {
        display: block !important;
    }

    #current_widget > .meteo_cards,
    #current_widget > .meteo_extras {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #current_widget > .meteo_cards {
        margin-bottom: 10px !important;
    }

    #current_widget > .meteo_extras {
        margin-top: 0 !important;
    }

    /* il secondo gruppo parte dalla colonna destra */
    #current_widget > .meteo_extras .meteo_extra_card:first-child {
        grid-column: 2 !important;
    }

    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ===== MOBILE - 11 CARD CONTINUE 2+2+2+2+2+1 ===== */
@media (max-width: 800px) {

    #current_widget {
        display: block !important;
    }

    #current_widget .meteo_cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #current_widget .meteo_cards > .meteo_card,
    #current_widget .meteo_cards > .meteo_extra_card {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    #current_widget .meteo_extras {
        display: none !important;
    }
}

/* ===== PULSANTE SCHERMO INTERO PIU' COMPATTO ===== */
#webcam_monteverde button,
#webcam_monteverde .fullscreen_button,
#webcam_monteverde .webcam_fullscreen {
    font-size: 11px !important;
    padding: 4px 7px !important;
    line-height: 1.1 !important;
}

@media (max-width: 800px) {
    #webcam_monteverde button,
    #webcam_monteverde .fullscreen_button,
    #webcam_monteverde .webcam_fullscreen {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}

/* ===== ORDINE DEFINITIVO SEZIONI HOME ===== */
#contents > #webcam {
    order: 1 !important;
    grid-row: auto !important;
}

#contents > #widget_group {
    order: 2 !important;
    grid-row: auto !important;
}

#contents > #plot_group {
    order: 3 !important;
    grid-row: auto !important;
}

#contents > #secondary_widget_group {
    order: 4 !important;
    grid-row: auto !important;
}

/* ===== DESKTOP - CONTENUTI PIU' GRANDI E PIU' PRESENTI ===== */
@media (min-width: 801px) {

    /* area contenuti più larga */
    #contents {
        width: min(96%, 1480px) !important;
        max-width: 1480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 22px !important;
    }

    /* webcam più grande */
    #contents > #webcam.webcam_section {
        width: 100% !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #webcam_monteverde {
        width: 100% !important;
        max-width: 860px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #webcam_monteverde .webcam_image_wrap,
    #webcam_monteverde .webcam_live_video {
        width: 100% !important;
        max-width: none !important;
    }

    /* condizioni attuali più grandi */
    #current_widget {
        width: 100% !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #current_widget .meteo_cards,
    #current_widget .meteo_extras {
        gap: 12px !important;
    }

    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        min-height: 72px !important;
        padding: 11px 13px !important;
        font-size: 15px !important;
    }

    #current_widget .meteo_label,
    #current_widget .meteo_extra_card span {
        font-size: 13px !important;
    }

    #current_widget strong {
        font-size: 17px !important;
    }

    #current_widget .widget_title {
        font-size: 18px !important;
        padding: 12px 16px !important;
    }

    /* storico e sezioni successive più larghe */
    #plot_group,
    #history_widget,
    #secondary_widget_group {
        width: 100% !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== DESKTOP - BLOCCHI PIU' IMPORTANTI VISIVAMENTE ===== */
@media (min-width: 801px) {

    /* Webcam più grande e protagonista */
    #webcam_monteverde {
        max-width: 1000px !important;
    }

    #webcam_monteverde .webcam_image_wrap {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        min-height: 460px !important;
    }

    #webcam_monteverde .webcam_live_video {
        width: 100% !important;
        height: 100% !important;
        min-height: 460px !important;
    }

    /* Card condizioni più alte */
    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        min-height: 84px !important;
        padding: 15px 16px !important;
    }

    #current_widget .meteo_label,
    #current_widget .meteo_extra_card span {
        font-size: 15px !important;
    }

    #current_widget strong {
        font-size: 20px !important;
    }

    #current_widget .widget_title {
        font-size: 20px !important;
        padding: 14px 18px !important;
    }

    /* un po' più di presenza anche agli altri widget */
    #history_widget .widget_title,
    #secondary_widget_group .widget_title {
        font-size: 19px !important;
    }
}

/* ===== PROPORZIONI HERO DESKTOP ===== */
@media (min-width: 801px) {
    #title_bar {
        min-height: 260px !important;
        height: 260px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        background-position: center center !important;
    }

    #title_bar img {
        max-height: 190px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}

/* ===== RIPRISTINO HERO + BLOCCHI DESKTOP PIU' GRANDI ===== */
@media (min-width: 801px) {

    /* Hero come prima */
    #title_bar {
        min-height: 330px !important;
        height: auto !important;
    }

    #title_bar img {
        max-height: none !important;
    }

    /* area generale molto più larga */
    #contents {
        width: 97% !important;
        max-width: 1750px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* sezione webcam più larga */
    #contents > #webcam.webcam_section {
        width: 100% !important;
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #webcam_monteverde {
        max-width: 1250px !important;
    }

    /* condizioni attuali più larghe */
    #widget_group,
    #current_widget {
        width: 100% !important;
        max-width: 1550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        min-height: 92px !important;
        padding: 17px 18px !important;
    }

    #current_widget .meteo_label,
    #current_widget .meteo_extra_card span {
        font-size: 16px !important;
    }

    #current_widget strong {
        font-size: 22px !important;
    }

    /* storico e resto più larghi */
    #plot_group,
    #history_widget,
    #secondary_widget_group {
        width: 100% !important;
        max-width: 1650px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== DESKTOP - BLOCCCHI ANCORA PIU' GRANDI ===== */
@media (min-width: 801px) {

    #contents {
        width: 98% !important;
        max-width: 1850px !important;
    }

    #contents > #webcam.webcam_section {
        max-width: 1700px !important;
    }

    #webcam_monteverde {
        max-width: 1380px !important;
    }

    #widget_group,
    #current_widget {
        max-width: 1700px !important;
    }

    #current_widget .meteo_card,
    #current_widget .meteo_extra_card {
        min-height: 100px !important;
        padding: 19px 20px !important;
    }

    #current_widget .meteo_label,
    #current_widget .meteo_extra_card span {
        font-size: 17px !important;
    }

    #current_widget strong {
        font-size: 24px !important;
    }

    #current_widget .widget_title {
        font-size: 22px !important;
    }

    #plot_group,
    #history_widget,
    #secondary_widget_group {
        max-width: 1780px !important;
    }
}

/* =====================================================
   DESKTOP - LARGHEZZA UNIFORME COME VECCHIO LAYOUT
   ===================================================== */
@media (min-width: 801px) {

    /* Foto iniziale / Hero */
    #title_bar {
        width: 96% !important;
        max-width: 1850px !important;
        margin-left: auto !important;
        margin-right: auto !important;

        border-radius: 22px !important;
        overflow: hidden !important;

        min-height: 330px !important;
        height: auto !important;
    }

    /* Contenitore principale stessa larghezza della Hero */
    #contents {
        width: 96% !important;
        max-width: 1850px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Tutte le sezioni sotto usano TUTTA la stessa larghezza */
    #contents > #webcam,
    #contents > #widget_group,
    #contents > #plot_group,
    #contents > #secondary_widget_group {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

    /* Condizioni */
    #current_widget {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Storico */
    #history_widget {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* La sezione webcam non viene più ristretta artificialmente */
    #contents > #webcam.webcam_section {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===== HERO DESKTOP PIU' GRANDE E COMPLETAMENTE COPERTA ===== */
@media (min-width: 801px) {

    #title_bar {
        width: 96% !important;
        max-width: 1850px !important;

        min-height: 380px !important;
        height: 380px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        border-radius: 22px !important;
        overflow: hidden !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        box-sizing: border-box !important;
    }
}

/* ===== HERO DESKTOP ANCORA PIU' ALTA + BARRA ARROTONDATA ===== */
@media (min-width: 801px) {

    #title_bar {
        width: 96% !important;
        max-width: 1850px !important;

        min-height: 460px !important;
        height: 460px !important;

        margin: 0 auto 10px auto !important;
        padding: 0 !important;

        border-radius: 24px !important;
        overflow: hidden !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        box-sizing: border-box !important;
    }

    .monteverde_nav {
        width: 96% !important;
        max-width: 1850px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        border-radius: 16px !important;
        overflow: hidden !important;
    }
}

/* ===== FOOTER FINALE LARGO COME IL RESTO DEL SITO ===== */
@media (min-width: 801px) {

    footer {
        width: 96% !important;
        max-width: 1850px !important;
        margin: 18px auto 22px auto !important;
        box-sizing: border-box !important;

        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .footer_legale {
        width: 100% !important;
        box-sizing: border-box !important;

        padding: 18px 28px !important;

        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .footer_legale strong {
        font-size: 15px !important;
    }
}

@media (max-width: 800px) {

    footer {
        width: calc(100% - 16px) !important;
        margin: 14px auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .footer_legale {
        padding: 15px 12px !important;
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .footer_legale strong {
        font-size: 13px !important;
    }
}

/* ===== FOOTER ALLINEATO ALLA LARGHEZZA DEI BLOCCHI ===== */
@media (min-width: 801px) {

    footer,
    #footer,
    .footer,
    footer > div,
    .footer_legale {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    footer {
        width: 96% !important;
        max-width: 1850px !important;
        margin: 18px auto 22px auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .footer_legale {
        padding: 20px 32px !important;
        margin: 0 !important;
    }
}

/* ===== FOOTER STESSA LARGHEZZA DELLA HERO ===== */
@media (min-width: 801px) {

    .monteverde_footer {
        width: 96% !important;
        max-width: 1850px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .monteverde_footer .footer_legale {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* ===== FOOTER DEFINITIVO - LOGO LATERALE ===== */

.monteverde_footer {
    border-radius: 22px !important;
    overflow: hidden !important;
}

.footer_bottom_grid {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 28px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    padding: 24px 34px !important;

    border-radius: 0 0 22px 22px !important;
    overflow: hidden !important;
}

.footer_logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer_logo img {
    width: 260px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

.footer_testi {
    min-width: 0 !important;
    text-align: left !important;
}

.footer_testi .footer_info {
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

.footer_testi .footer_update {
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.footer_testi .footer_legale {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}


/* MOBILE */
@media (max-width: 800px) {

    .footer_bottom_grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 18px 14px !important;
    }

    .footer_logo img {
        width: 180px !important;
    }

    .footer_testi,
    .footer_testi .footer_legale {
        text-align: center !important;
    }
}

/* ===== FOOTER DEFINITIVO: LOGO SINISTRA / TESTO DESTRA ===== */
@media (min-width: 801px) {

    .monteverde_footer {
        width: 96% !important;
        max-width: 1850px !important;
        margin: 18px auto 24px auto !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .footer_layout_def {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 330px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 40px !important;
        padding: 26px 42px !important;
        box-sizing: border-box !important;
    }

    .footer_logo_box_def {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .footer_logo_img_def {
        display: block !important;
        width: 300px !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .footer_texts_def {
        min-width: 0 !important;
        text-align: left !important;
    }

    .footer_texts_def .footer_station {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin-bottom: 7px !important;
    }

    .footer_texts_def .footer_info {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .footer_texts_def .footer_update {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .footer_texts_def .footer_legale {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

/* Mobile resta ordinato */
@media (max-width: 800px) {

    .footer_layout_def {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 18px 14px !important;
    }

    .footer_logo_box_def {
        display: flex !important;
        justify-content: center !important;
    }

    .footer_logo_img_def {
        width: 180px !important;
        height: auto !important;
    }

    .footer_texts_def,
    .footer_texts_def .footer_legale {
        text-align: center !important;
    }
}

/* ===== FOOTER - LOGO PIU' GRANDE E CONTENUTO CENTRATO ===== */
@media (min-width: 801px) {

    .footer_layout_def {
        grid-template-columns: 380px minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 45px !important;
        padding: 28px 55px !important;
    }

    .footer_logo_box_def {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .footer_logo_img_def {
        width: 350px !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .footer_texts_def {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        text-align: center !important;
    }

    .footer_texts_def .footer_station,
    .footer_texts_def .footer_info,
    .footer_texts_def .footer_update,
    .footer_texts_def .footer_legale {
        text-align: center !important;
    }
}

/* ===== FOOTER - TESTI DESTRA CENTRATI DAVVERO ===== */
@media (min-width: 801px) {

    .footer_layout_def {
        grid-template-columns: 380px minmax(0, 1fr) !important;
        gap: 20px !important;
        padding: 28px 40px !important;
    }

    .footer_texts_def {
        width: 100% !important;
        max-width: 980px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    .footer_texts_def .footer_station,
    .footer_texts_def .footer_info,
    .footer_texts_def .footer_update,
    .footer_texts_def .footer_legale {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== FOOTER - BLOCCO TESTI SPOSTATO VERSO IL CENTRO ===== */
@media (min-width: 801px) {

    .footer_texts_def {
        transform: translateX(-190px) !important;
    }
}

/* ===== MOBILE - BORDI E ALLINEAMENTO DEFINITIVI ===== */
@media (max-width: 800px) {

    /* Hero iniziale con margini e bordi arrotondati */
    #title_bar {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Barra sotto la hero */
    .monteverde_nav {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Webcam: niente più sbordamento a sinistra */
    #contents > #webcam.webcam_section {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    #contents > #webcam .webcam_dashboard {
        width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #contents > #webcam .webcam_image_wrap,
    #contents > #webcam .webcam_future_wrap {
        border-radius: 0 0 16px 16px !important;
        overflow: hidden !important;
    }
}


/* ALLERTA PULSANTE MENU */
@keyframes allertaPulseMenu {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255,0,0,0));
    }
    50% {
        transform: scale(1.35);
        filter: drop-shadow(0 0 6px rgba(255,0,0,.9));
    }
}

.allerta-pulse {
    display: inline-block;
    transform-origin: center;
    animation: allertaPulseMenu 1.2s ease-in-out infinite;
}

/* ===== MONTEVERDE ADESSO - LARGHEZZA COMPLETA ===== */
@media (min-width: 801px) {
    #monteverde_adesso.monteverde_adesso {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ===== MONTEVERDE ADESSO - STESSA LARGHEZZA DELLA PAGINA ===== */
@media (min-width: 801px) {
    #contents > #monteverde_adesso {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }
}

/* ===== SPAZIO WEBCAM -> MONTEVERDE ADESSO ===== */
#contents > #webcam.webcam_section {
    margin-bottom: 4px !important;
}

#contents > #monteverde_adesso {
    margin-top: 0 !important;
}

/* ===== AVVICINA MONTEVERDE ADESSO ALLE WEBCAM ===== */
@media (min-width: 801px) {
    #contents > #monteverde_adesso {
        transform: translateY(-14px) !important;
        margin-bottom: -14px !important;
    }
}

/* ===== RIPRISTINO POSIZIONE MONTEVERDE ADESSO ===== */
@media (min-width: 801px) {
    #contents > #monteverde_adesso {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ===== QUALITA DELL'ARIA MONTEVERDE ===== */
#contents > #qualita_aria.qualita_aria {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.94);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(20,60,80,.12);
}

.aria_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.aria_title {
    font-size: 20px;
    font-weight: 800;
    color: #164e63;
    letter-spacing: .3px;
}

.aria_subtitle {
    margin-top: 3px;
    font-size: 13px;
    color: #64748b;
}

.aria_live {
    font-size: 12px;
    font-weight: 800;
    color: #16834b;
    background: #e7f8ee;
    padding: 7px 11px;
    border-radius: 999px;
}

.aria_grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 12px;
}

.aria_item {
    min-width: 0;
    text-align: center;
    background: #f7fafc;
    border: 1px solid rgba(30,90,110,.10);
    border-radius: 14px;
    padding: 15px 8px;
}

.aria_icon {
    display: block;
    font-size: 22px;
    margin-bottom: 5px;
}

.aria_label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.aria_item strong {
    display: block;
    margin-top: 4px;
    font-size: 23px;
    line-height: 1.15;
    color: #123d5a;
}

.aria_unita {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #7b8b96;
}

@media (max-width: 800px) {
    #contents > #qualita_aria.qualita_aria {
        padding: 16px 12px;
    }

    .aria_title {
        font-size: 17px;
    }

    .aria_grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 9px;
    }

    .aria_item:last-child {
        grid-column: 1 / -1;
    }
}

/* ===== QUALITA ARIA INTEGRATA IN MONTEVERDE ADESSO ===== */
#monteverde_adesso #qualita_aria.qualita_aria_integrata {
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0 0 0 !important;
    padding: 18px 0 0 0 !important;
    box-sizing: border-box !important;

    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(30,90,110,.16) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    transform: none !important;
}

#monteverde_adesso #qualita_aria .aria_header {
    margin-bottom: 14px !important;
}

#monteverde_adesso #qualita_aria .aria_title {
    font-size: 17px !important;
    color: #164e63 !important;
}

#monteverde_adesso #qualita_aria .aria_subtitle {
    font-size: 12px !important;
}

#monteverde_adesso #qualita_aria .aria_grid {
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
}

@media (max-width: 800px) {

    #monteverde_adesso #qualita_aria.qualita_aria_integrata {
        margin-top: 16px !important;
        padding: 16px 0 0 0 !important;
    }

    #monteverde_adesso #qualita_aria .aria_grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    #monteverde_adesso #qualita_aria .aria_item:last-child {
        grid-column: 1 / -1 !important;
    }
}

/* Spazio sinistro titolo Qualita Aria integrata */
#monteverde_adesso #qualita_aria .aria_header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

/* ===== MONTEVERDE ADESSO + ARIA - VERSIONE COMPATTA ===== */
@media (min-width: 801px) {
    #monteverde_adesso {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    #monteverde_adesso .adesso_header {
        margin-bottom: 10px !important;
    }

    #monteverde_adesso .adesso_grid {
        gap: 9px !important;
    }

    #monteverde_adesso .adesso_item {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #monteverde_adesso #qualita_aria.qualita_aria_integrata {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    #monteverde_adesso #qualita_aria .aria_header {
        margin-bottom: 9px !important;
    }

    #monteverde_adesso #qualita_aria .aria_grid {
        gap: 9px !important;
    }

    #monteverde_adesso #qualita_aria .aria_item {
        padding: 10px 8px !important;
    }
}

/* ===== LIVE VERDE LAMPEGGIANTE ===== */
@keyframes liveVerdePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(34,197,94,.35);
    }
    50% {
        opacity: .55;
        box-shadow: 0 0 16px rgba(34,197,94,.95);
    }
}

#monteverde_adesso .adesso_live,
#monteverde_adesso .aria_live {
    animation: liveVerdePulse 1.2s ease-in-out infinite !important;
    color: #16834b !important;
}

/* ===== DESCRIZIONI ITALIANE QUALITA ARIA ===== */
#monteverde_adesso #qualita_aria .aria_nome {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 500;
    color: #64748b;
}

@media (max-width: 800px) {
    #monteverde_adesso #qualita_aria .aria_nome {
        font-size: 10px;
    }
}

/* ===== LIVE VERDE PIENO BEN VISIBILE ===== */
@keyframes liveVerdePieno {
    0%, 100% {
        background: #16a34a;
        opacity: 1;
        box-shadow: 0 0 4px rgba(22,163,74,.45);
    }
    50% {
        background: #22c55e;
        opacity: .72;
        box-shadow: 0 0 14px rgba(34,197,94,.95);
    }
}

#monteverde_adesso .adesso_live,
#monteverde_adesso .aria_live {
    background: #16a34a !important;
    color: #ffffff !important;
    border: 0 !important;
    animation: liveVerdePieno 1.2s ease-in-out infinite !important;
}

/* ===== MONTEVERDE ADESSO - ULTERIORE RIDUZIONE ALTEZZA DESKTOP ===== */
@media (min-width: 801px) {

    #monteverde_adesso {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    #monteverde_adesso .adesso_header {
        margin-bottom: 6px !important;
    }

    #monteverde_adesso .adesso_item {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    #monteverde_adesso #qualita_aria.qualita_aria_integrata {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }

    #monteverde_adesso #qualita_aria .aria_header {
        margin-bottom: 5px !important;
    }

    #monteverde_adesso #qualita_aria .aria_item {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    #monteverde_adesso #qualita_aria .aria_icon {
        margin-bottom: 2px !important;
    }

    #monteverde_adesso #qualita_aria .aria_unita {
        margin-top: 1px !important;
    }
}

/* ===== MONTEVERDE ADESSO - MOBILE COMPATTO 3 COLONNE ===== */
@media (max-width: 800px) {

    #monteverde_adesso {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #monteverde_adesso .adesso_header {
        margin-bottom: 8px !important;
    }

    #monteverde_adesso .adesso_grid {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    #monteverde_adesso .adesso_item {
        padding: 8px 4px !important;
        min-width: 0 !important;
    }

    #monteverde_adesso #qualita_aria.qualita_aria_integrata {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    #monteverde_adesso #qualita_aria .aria_header {
        margin-bottom: 7px !important;
    }

    #monteverde_adesso #qualita_aria .aria_grid {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    #monteverde_adesso #qualita_aria .aria_item,
    #monteverde_adesso #qualita_aria .aria_item:last-child {
        grid-column: auto !important;
        padding: 7px 3px !important;
        min-width: 0 !important;
    }

    #monteverde_adesso #qualita_aria .aria_icon {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    #monteverde_adesso #qualita_aria .aria_item strong {
        font-size: 19px !important;
    }

    #monteverde_adesso #qualita_aria .aria_nome {
        font-size: 9px !important;
    }
}

/* ===== MONTEVERDE ADESSO - MOBILE ANCORA PIU COMPATTO ===== */
@media (max-width: 800px) {

    #monteverde_adesso .adesso_grid,
    #monteverde_adesso #qualita_aria .aria_grid {
        gap: 5px !important;
    }

    #monteverde_adesso .adesso_item {
        padding: 6px 3px !important;
    }

    #monteverde_adesso #qualita_aria .aria_item,
    #monteverde_adesso #qualita_aria .aria_item:last-child {
        padding: 5px 3px !important;
    }

    #monteverde_adesso .adesso_icon,
    #monteverde_adesso #qualita_aria .aria_icon {
        font-size: 17px !important;
        margin-bottom: 1px !important;
    }

    #monteverde_adesso #qualita_aria .aria_item strong {
        font-size: 18px !important;
        margin-top: 2px !important;
    }

    #monteverde_adesso #qualita_aria .aria_unita {
        margin-top: 1px !important;
        font-size: 9px !important;
    }
}

/* ===== BORDINO CARD MONTEVERDE ADESSO - MOBILE ===== */
@media (max-width: 800px) {
    #monteverde_adesso .adesso_item,
    #monteverde_adesso #qualita_aria .aria_item {
        border: 1px solid rgba(30,90,110,.16) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
}

/* ===== DUE WEBCAM - POSIZIONE DESKTOP DEFINITIVA ===== */
@media (min-width: 801px) {

    #contents > #webcam.webcam_section {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    #contents > #webcam > .webcam_dashboard_second {
        grid-column: 1 !important;
        grid-row: 1 !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #contents > #webcam > #webcam_monteverde {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #contents > #webcam .webcam_future_wrap,
    #contents > #webcam .webcam_image_wrap {
        position: relative !important;
    }
}

/* ===== BORDINO + SFUMATURA 6 CARD MONTEVERDE ADESSO ===== */
#monteverde_adesso .adesso_item {
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(235,245,249,.72)) !important;
    border: 1px solid rgba(30,90,110,.16) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 7px rgba(20,60,80,.06) !important;
    box-sizing: border-box !important;
}

/* ===== TIMELAPSE MONTEVERDE ===== */
.timelapse_section {
    margin: 20px 0;
    padding: 16px;
    background: rgba(255,255,255,.88);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(20,60,80,.12);
    box-sizing: border-box;
}

.timelapse_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.timelapse_title {
    font-size: 20px;
    font-weight: 700;
    color: #176b87;
}

.timelapse_subtitle {
    margin-top: 3px;
    font-size: 13px;
    color: #55717c;
}

.timelapse_player {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
}

.timelapse_player video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

.timelapse_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.timelapse_buttons button {
    border: 0;
    border-radius: 10px;
    padding: 9px 18px;
    background: #176b87;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.timelapse_buttons button:hover {
    filter: brightness(1.12);
}

@media (max-width: 600px) {
    .timelapse_section {
        margin: 12px 0;
        padding: 10px;
    }

    .timelapse_title {
        font-size: 17px;
    }

    .timelapse_subtitle {
        font-size: 11px;
    }

    .timelapse_buttons {
        gap: 5px;
    }

    .timelapse_buttons button {
        flex: 1;
        padding: 8px 3px;
        font-size: 11px;
    }
}


/* ===== TIMELAPSE SOTTO WEBCAM DESTRA - 22 SET ===== */
@media (min-width: 801px) {

    #contents > #webcam > #timelapse {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-self: start !important;
    }

}

/* MOBILE: webcam 2, webcam Monteverde, poi timelapse */
@media (max-width: 800px) {

    #contents > #webcam > #timelapse {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

}


/* ===== TIMELAPSE - STILE UGUALE ALLE WEBCAM - 22 SET ===== */

#timelapse.timelapse_section {
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(13,99,130,0.14) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 16px rgba(0,0,0,0.10) !important;
}

#timelapse .timelapse_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
    color: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
}

#timelapse .timelapse_title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

#timelapse .timelapse_subtitle {
    margin: 0 !important;
    padding: 7px 12px !important;
    background: #f7fafc !important;
    color: #526f80 !important;
    border-bottom: 1px solid #e1edf3 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}

#timelapse .timelapse_player {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 10px 12px 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

#timelapse .timelapse_buttons {
    margin: 12px 12px 14px !important;
}

#timelapse .timelapse_buttons button {
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
    border-radius: 9px !important;
}

@media (max-width: 600px) {
    #timelapse.timelapse_section {
        padding: 0 !important;
    }

    #timelapse .timelapse_title {
        font-size: 0.92rem !important;
    }

    #timelapse .timelapse_subtitle {
        font-size: 0.82rem !important;
    }
}


/* ===== LOGO SUL TIMELAPSE ===== */

.timelapse_player {
    position: relative;
}

.timelapse_logo_overlay {
    position: absolute;
    right: 14px;
    bottom: 18px;
    width: clamp(80px, 10vw, 145px);
    height: auto;
    opacity: 0.96;
    z-index: 5;
    pointer-events: none;
    padding: 8px 10px;
    background: rgba(255,255,255,.42);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.20));
}

@media (max-width: 700px) {
    .timelapse_logo_overlay {
        right: 10px;
        bottom: 16px;
        width: 82px;
        padding: 6px 8px;
    }
}

/* ===== LIVE QUALITA ARIA UGUALE A MONTEVERDE ADESSO SU MOBILE ===== */
@media (max-width: 800px) {

    #monteverde_adesso .aria_live {
        font-size: 12px !important;
        font-weight: 800 !important;

        padding: 7px 10px !important;
        border-radius: 20px !important;

        background: #16a34a !important;
        color: #ffffff !important;
        border: 0 !important;

        animation: liveVerdePieno 1.2s ease-in-out infinite !important;

        line-height: normal !important;
        white-space: nowrap !important;
    }

}

/* ===== WEBCAM MOBILE: LOGO COME TIMELAPSE ===== */
@media (max-width: 700px) {
    #webcam_monteverde .webcam_logo_overlay {
        width: 82px !important;
        right: 10px !important;
        bottom: 16px !important;
        padding: 6px 8px !important;
        border-radius: 14px !important;
        opacity: 0.96 !important;
        background: rgba(255,255,255,.42) !important;
        border: 1px solid rgba(255,255,255,.45) !important;
    }
}

/* ===== FULLSCREEN WEBCAM IPHONE RIEMPIMENTO SCHERMO ===== */
.webcam_image_wrap.webcam_mobile_fullscreen .webcam_live_video {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    margin: 0 !important;
}

/* Logo piccolo anche in fullscreen */
.webcam_image_wrap.webcam_mobile_fullscreen .webcam_logo_overlay {
    width: 82px !important;
    right: 12px !important;
    bottom: 18px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    z-index: 1000002 !important;
}


/* ===== QUALITA ARIA: CARD CLICCABILI PER GRAFICO ===== */
#monteverde_adesso #qualita_aria .aria_item_grafico {
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}

#monteverde_adesso #qualita_aria .aria_item_grafico:hover {
    transform: translateY(-2px);
}

#monteverde_adesso #qualita_aria .aria_item_grafico:active {
    transform: scale(.98);
}

/* ===== WEBCAM 2 REOLINK - RIEMPIE TUTTO IL RIQUADRO ===== */
#webcam .webcam_future_wrap {
    position: relative !important;
    overflow: hidden !important;
}

#webcam .webcam_future_wrap iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}

/* ===== WEBCAM 2: FULLSCREEN COME WEBCAM PRINCIPALE ===== */
.webcam_future_wrap.webcam_mobile_fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    z-index: 999999 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.webcam_future_wrap.webcam_mobile_fullscreen .webcam_live_video {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
}

.webcam_future_wrap.webcam_mobile_fullscreen .webcam_mobile_close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 2147483647 !important;
}

.webcam_future_wrap.webcam_mobile_fullscreen .webcam_logo_overlay {
    width: 82px !important;
    right: 12px !important;
    bottom: 18px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    z-index: 1000002 !important;
}

@media (max-width: 700px) {
    .webcam_dashboard_second .webcam_logo_overlay {
        width: 82px !important;
        right: 10px !important;
        bottom: 16px !important;
        padding: 6px 8px !important;
        border-radius: 14px !important;
        opacity: 0.96 !important;
        background: rgba(255,255,255,.42) !important;
        border: 1px solid rgba(255,255,255,.45) !important;
    }
}

/* ===== PULSANTI FULLSCREEN IDENTICI SU ENTRAMBE LE WEBCAM ===== */
#webcam .webcam_fullscreen_btn {
    flex: 0 0 auto !important;
    width: 150px !important;
    height: 34px !important;
    padding: 0 8px !important;
    margin-left: 8px !important;
    font-size: 14px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* ===== FULLSCREEN WEBCAM: COMPATTO DESKTOP + MOBILE ===== */
#webcam .webcam_fullscreen_btn {
    width: auto !important;
    height: 30px !important;
    padding: 0 7px !important;
    font-size: 13px !important;
    line-height: 28px !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    #webcam .webcam_fullscreen_btn {
        height: 26px !important;
        padding: 0 5px !important;
        font-size: 11px !important;
        line-height: 24px !important;
        margin-left: 4px !important;
    }

    #webcam .webcam_header {
        gap: 5px !important;
    }
}

/* ===== WEBCAM MOBILE: PULSANTE FULLSCREEN ULTRA COMPATTO ===== */
@media (max-width: 700px) {
    #webcam .webcam_fullscreen_btn {
        width: 42px !important;
        height: 24px !important;
        padding: 0 !important;
        margin-left: 3px !important;
        font-size: 0 !important;
        line-height: 22px !important;
        flex: 0 0 42px !important;
    }

    #webcam .webcam_fullscreen_btn::after {
        content: "⛶";
        font-size: 16px !important;
        line-height: 22px !important;
    }

    #webcam .webcam_header {
        gap: 4px !important;
    }

    #webcam .webcam_header > span:first-child {
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    #webcam .webcam_live {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}

/* ===== TIMELAPSE REOLINK SUD-EST ===== */

#timelapse_reolink.timelapse_section {
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(13,99,130,0.14) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 16px rgba(0,0,0,0.10) !important;
}

#timelapse_reolink .timelapse_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
    color: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
}

#timelapse_reolink .timelapse_title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

#timelapse_reolink .timelapse_subtitle {
    margin: 0 !important;
    padding: 7px 12px !important;
    background: #f7fafc !important;
    color: #526f80 !important;
    border-bottom: 1px solid #e1edf3 !important;
    font-size: 0.88rem !important;
}

#timelapse_reolink .timelapse_buttons {
    margin: 12px 12px 14px !important;
}

#timelapse_reolink .timelapse_buttons button {
    background: linear-gradient(135deg,#0b5275,#167a9b) !important;
    border-radius: 9px !important;
}

@media (min-width: 801px) {
    #contents > #webcam > #timelapse_reolink {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-self: start !important;
    }
}

@media (max-width: 600px) {
    #timelapse_reolink.timelapse_section {
        padding: 0 !important;
    }

    #timelapse_reolink .timelapse_title {
        font-size: 0.92rem !important;
    }

    #timelapse_reolink .timelapse_subtitle {
        font-size: 0.82rem !important;
    }
}

/* ===== LOGO DIRETTE COME TIMELAPSE SU PC ===== */
@media (min-width: 701px) {

    #webcam .webcam_logo_overlay {
        right: 14px !important;
        bottom: 18px !important;
        width: clamp(80px, 10vw, 145px) !important;
        height: auto !important;
        opacity: 0.96 !important;
        z-index: 5 !important;
        pointer-events: none !important;

        padding: 8px 10px !important;
        background: rgba(255,255,255,.42) !important;
        border: 1px solid rgba(255,255,255,.45) !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.18) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        filter: drop-shadow(0 2px 10px rgba(0,0,0,.20)) !important;
        box-sizing: content-box !important;
    }

}

/* ===== STATO QUALITA ARIA ===== */
#monteverde_adesso .aria_badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

#monteverde_adesso .aria_stato {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: normal;
    white-space: nowrap;
    color: #ffffff;
    transition: background-color .3s ease;
}

#monteverde_adesso .aria_stato_attesa {
    background: #64748b;
}

#monteverde_adesso .aria_stato_buona {
    background: #16a34a;
}

#monteverde_adesso .aria_stato_discreta {
    background: #d4a700;
}

#monteverde_adesso .aria_stato_moderata {
    background: #ea7c16;
}

#monteverde_adesso .aria_stato_scarsa {
    background: #dc2626;
}

#monteverde_adesso .aria_stato_molto_scarsa {
    background: #9f1239;
}

#monteverde_adesso .aria_stato_estremamente_scarsa {
    background: #6b21a8;
}

#monteverde_adesso #qualita_aria .aria_title_riga {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

#monteverde_adesso #qualita_aria .aria_title {
    white-space: nowrap !important;
}

@media (max-width: 800px) {
    #monteverde_adesso .aria_stato {
        padding: 7px 9px;
        font-size: 11px;
    }
}

/* Email footer compatta */
.footer_email {
  margin-top: 3px;
  margin-bottom: 3px;
  line-height: 1.15;
  font-size: 0.92rem;
}

.footer_email a {
  text-decoration: none;
}

@media (max-width: 700px) {
  .footer_email {
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 1.1;
    font-size: 0.88rem;
  }
}