/* Resetta i margini del browser e centra la dashboard nello schermo */
body {
  margin: 0;
  padding: 0;
  background-color: #1a1a1a; /* Colore scuro per lo spazio extra attorno alla dashboard */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden; /* Fa sparire per sempre le fastidiose barre di scorrimento */
}

/* Blocca la base sulle misure esatte di Figma */
.DASBOARD-STATO-BASE {
  background-color: #c2bebd;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  position: relative;
  flex-shrink: 0;
}

/* LIVELLO 1: Sfondi Base */
.DASBOARD-STATO-BASE .sfondo {
  position: absolute;
  top: 157px;
  left: 217px;
  width: 731px;
  height: 923px;
  aspect-ratio: 0.79;
  object-fit: contain;
  z-index: 1;
}

/* NUOVO SFONDO 2 CORRETTO: Forza il rendering assoluto sopra lo sfondo1 */
.DASBOARD-STATO-BASE .sfondo2 {
  position: absolute;
  top: 157px;
  left: 217px;
  width: 731px;
  height: 923px;
  aspect-ratio: 0.79;
  object-fit: contain;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important; /* Sta sopra allo sfondo base */
}

/* Posizionamento e proprietà base del bottone Colori */
.DASBOARD-STATO-BASE .scegli-colore-PAG {
  position: absolute;
  top: 25px;
  left: 1804px;
  width: 84px;
  height: 92px;
  z-index: 15; /* Alzato leggermente per essere sicuri che sia cliccabile sopra tutto */
  
  /* Nuove proprietà per renderlo un bottone */
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease; /* Rende fluide le animazioni */
}

/* Effetto quando passi sopra con il mouse (Hover) */
.DASBOARD-STATO-BASE .scegli-colore-PAG:hover {
  transform: scale(1.1); /* Lo ingrandisce del 10% */
  filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6)) brightness(1.15); /* Crea un alone luminoso bianco e lo schiarisce */
}

/* Effetto fisico di "pressione" quando si clicca (Active) */
.DASBOARD-STATO-BASE .scegli-colore-PAG:active {
  transform: scale(0.95); /* Si rimpicciolisce simulando la pressione meccanica */
}

.DASBOARD-STATO-BASE .RENDER-PENDOLO-PAG {
  position: absolute;
  top: 0;
  left: 931px;
  width: 501px;
  height: 629px;
  z-index: 3;
}

.DASBOARD-STATO-BASE .AIR-STATUS-PAG {
  position: absolute;
  top: 500px;
  left: 1484px;
  width: 311px;
  height: 109px;
  z-index: 3;
}

.DASBOARD-STATO-BASE .GRAFICO-TONDO-PAG {
  position: absolute;
  top: 100px;
  left: 1458px;
  width: 363px;
  height: 363px;
  z-index: 3;
}

/* 📍 IL TUO GRAFICO RESOCONTO (Coordinate Invariate) */
.DASBOARD-STATO-BASE div.GRAFICO-RESOCONTO {
  position: absolute;
  top: 641px;  
  left: 992px; 
  width: 860px;
  height: 410px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* Allinea gli elementi in basso */
}

/* =======================================================
   NUOVO STILE EFFETTO VETRO (uguale a ellipse-2)
   ======================================================= */
.DASBOARD-STATO-BASE .box-vetro {
  background-color: #ffffff1a;
  border-radius: 999px; /* Rende il rettangolo una "pillola" perfetta */
  backdrop-filter: blur(2.1px) brightness(100.0%) saturate(100.0%);
  -webkit-backdrop-filter: blur(2.1px) brightness(100.0%) saturate(100.0%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 1px rgba(0, 0, 0, 0.14),
    inset -1px 0 1px rgba(0, 0, 0, 0.11);
}

/* Container specifico per il menu a tendina */
.DASBOARD-STATO-BASE .select-container {
  position: absolute;
  top: 30px;
  left: 76px;
  padding: 10px 20px;
  z-index: 10;
}

/* Area sinistra (Grafico) */
.DASBOARD-STATO-BASE .area-grafico {
  width: 680px;
  height: 360px; /* Lascia spazio sopra per il menu a tendina */
  position: relative;
}

/* Area destra (Pannello Average) */
.DASBOARD-STATO-BASE .area-average {
  width: 147px;
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  padding: 20px 10px; /* Evita che i testi tocchino i bordi della pillola */
  box-sizing: border-box;
}

.DASBOARD-STATO-BASE .titolo-avg {
  color: black;
  font-size: 24px;
  margin-bottom: 40px;
  letter-spacing: 0.5px;
}

.DASBOARD-STATO-BASE .box-avg {
  text-align: center;
  margin-bottom: 30px;
}

.DASBOARD-STATO-BASE .valore-avg {
  font-size: 42px;
  line-height: 1;
}

/* Colori specifici richiesti */
.DASBOARD-STATO-BASE .co2-color { color: #EB4034; }
.DASBOARD-STATO-BASE .hum-color { color: #1E2574; }

.DASBOARD-STATO-BASE .label-avg {
  color: black;
  font-size: 18px;
  margin-top: 5px;
}

.DASBOARD-STATO-BASE .SFONDO-DATI {
  position: absolute;
  top: calc(50.00% - 319px);
  left: -49px;
  width: 695px;
  height: 637px;
  z-index: 3;
}

/* LIVELLO 3: Testi, Messaggi e Contenuti sopra i pannelli */
.DASBOARD-STATO-BASE .MESSAGGIO-HI-PAG {
  position: absolute;
  top: 194px;
  left: 168px;
  width: 189px;
  height: 62px;
  object-fit: contain;
  z-index: 4;
}

.DASBOARD-STATO-BASE .AVVISO-PAG {
  position: absolute;
  top: 68px;
  left: 542px;
  width: 444px;
  height: 142px;
  object-fit: contain;
  z-index: 4;
}

.DASBOARD-STATO-BASE .DATI {
  position: absolute;
  top: calc(50.00% - 307px);
  left: 277px;
  width: 599px;
  height: 540px;
  object-fit: contain;
  z-index: 4;
}

.DASBOARD-STATO-BASE .div {
  position: absolute;
  top: 256px;
  left: 76px;
  width: 216px;
  height: 212px;
  z-index: 4;
}

.DASBOARD-STATO-BASE .co {
  position: absolute;
  top: 256px;
  left: 313px;
  width: 216px;
  height: 212px;
  z-index: 4;
}

.DASBOARD-STATO-BASE .temperatura {
  position: absolute;
  top: 34px;
  left: 190px;
  width: 266px;
  text-shadow: 0px 10.64px 9.04px #0000004a;
  font-family: "Roboto-Black", Helvetica;
  font-weight: 900;
  color: #ffffff;
  font-size: 170px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  z-index: 4;
}

/* Sotto-proprietà dei grafici e vettori */
.DASBOARD-STATO-BASE .grafico { position: absolute; width: 88.05%; height: 88.05%; top: 11.95%; left: 11.95%; }
.DASBOARD-STATO-BASE .umidit { position: absolute; width: 82.08%; height: 82.51%; top: 17.49%; left: 17.92%; }
.DASBOARD-STATO-BASE .ellipse { position: absolute; top: 34px; left: 34px; width: 296px; height: 296px; }
.DASBOARD-STATO-BASE .img { position: absolute; top: 0; left: 0; width: 363px; height: 363px; }
.DASBOARD-STATO-BASE .vector-2 { position: absolute; width: 72.59%; height: 72.59%; top: 27.41%; left: 27.41%; }
.DASBOARD-STATO-BASE .vector { position: absolute; top: -9608px; left: -382px; width: 21px; height: 1px; }
.DASBOARD-STATO-BASE .vector-3 { position: absolute; width: 43.88px; height: 54.11px; top: 20px; left: 87px; object-fit: contain; }
.DASBOARD-STATO-BASE .text-wrapper { position: absolute; top: 76px; left: 64px; font-family: "Roboto-Medium", Helvetica; font-weight: 500; color: #ffffff; font-size: 74px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.DASBOARD-STATO-BASE .umidit-2 { position: absolute; top: 157px; left: 96px; font-family: "Roboto-Medium", Helvetica; font-weight: 500; color: #ffffff; font-size: 26px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.DASBOARD-STATO-BASE .subtract { position: absolute; top: 29px; left: 65px; width: 83px; height: 43px; object-fit: contain; }
.DASBOARD-STATO-BASE .co-2 { position: absolute; top: 76px; left: 42px; font-family: "Roboto-Medium", Helvetica; font-weight: 500; color: #ffffff; font-size: 74px; text-align: center; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.DASBOARD-STATO-BASE .text-wrapper-2 { position: absolute; top: 157px; left: 80px; font-family: "Roboto-Medium", Helvetica; font-weight: 500; color: #ffffff; font-size: 26px; letter-spacing: 0; line-height: normal; white-space: nowrap; }
.DASBOARD-STATO-BASE .ellipse-2 { position: absolute; top: 1px; left: 1px; width: 212px; height: 212px; background-color: #ffffff1a; border-radius: 105.76px; transform: rotate(89.98deg); backdrop-filter: blur(2.1px) brightness(100.0%) saturate(100.0%); -webkit-backdrop-filter: blur(2.1px) brightness(100.0%) saturate(100.0%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.32), inset 0 -1px 1px rgba(0, 0, 0, 0.14), inset -1px 0 1px rgba(0, 0, 0, 0.11); }

/* LIVELLO OVERLAY MAX: Barra laterale e Navigazione (Sempre visibili sopra a tutto) */
.DASBOARD-STATO-BASE .BARRA-LATERALE-PAG {
  position: absolute;
  top: 0;
  left: 0;
  width: 134px;
  height: 1080px;
  background-color: #7165676b;
  backdrop-filter: blur(2px) brightness(100.0%) saturate(105.0%);
  -webkit-backdrop-filter: blur(2px) brightness(100.0%) saturate(105.0%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.32), inset 0 -1px 1px rgba(0, 0, 0, 0.2), inset -1px 0 1px rgba(0, 0, 0, 0.16);
  z-index: 10;
}

.DASBOARD-STATO-BASE .LOG-IN-MENU-PAG { position: absolute; top: 191px; left: 42px; width: 50px; height: 50px; z-index: 11; }
.DASBOARD-STATO-BASE .LOGO { position: absolute; top: 30px; left: 24px; width: 88px; height: 82px; z-index: 11; }
.DASBOARD-STATO-BASE .text-wrapper-3 { position: absolute; top: 0; left: 0; font-family: "Jaro-Regular", Helvetica; font-weight: 400; color: #ffffff; font-size: 65.5px; letter-spacing: -3.27px; line-height: normal; }
.DASBOARD-STATO-BASE .group { position: absolute; top: 35px; right: 11px; width: 19px; height: 25px; display: flex; justify-content: flex-end; gap: 3px; }
.DASBOARD-STATO-BASE .ellipse-3 { margin-top: 16px; width: 7.35px; height: 7.35px; background-color: #716567; border-radius: 3.67px; transform: rotate(33.85deg); }
.DASBOARD-STATO-BASE .rectangle { margin-top: -1.3px; width: 1.43px; height: 19.64px; margin-right: 5.3px; background-color: #716567; transform: rotate(33.85deg); }
.DASBOARD-STATO-BASE .vector-4 { position: absolute; top: 7px; left: 65px; width: 21px; height: 17px; z-index: 12; }
.DASBOARD-STATO-BASE .vector-5 { position: absolute; top: 30px; left: 65px; width: 21px; height: 36px; z-index: 12; }
.DASBOARD-STATO-BASE .IMPOSTAZIONI { position: absolute; top: 579px; left: 42px; width: 50px; height: 50px; z-index: 11; }
.DASBOARD-STATO-BASE .STORICO-AVVISI { top: 452px; display: flex; background-color: #ffffff; border-radius: 24.98px; position: absolute; left: 42px; width: 50px; height: 50px; z-index: 11; }
.DASBOARD-STATO-BASE .group-2 { flex: 1; width: 30px; }
.DASBOARD-STATO-BASE .STORICO-GRAFICO { top: 515px; position: absolute; left: 42px; width: 50px; height: 50px; z-index: 11; }
/* Container posizionato dentro la barra laterale (larga 134px) */
.DASBOARD-STATO-BASE .BOX-INFO { 
    position: absolute; 
    bottom: 30px; /* Ancorato in basso, puoi alzare o abbassare questo valore */
    left: 0;      
    width: 134px; /* Esattamente la larghezza della barra laterale */
    display: flex; 
    flex-direction: column; /* Impila l'immagine e i testi in verticale */
    align-items: center;    /* Centra tutto orizzontalmente */
    gap: 15px; 
    color: #ffffff; 
    z-index: 12;  /* Sopra la barra laterale (che ha z-index: 10) */
}

/* Regola le dimensioni dell'immagine casa+studio (Ingrandita) */
.DASBOARD-STATO-BASE .icona-studio { 
    width: 110px; /* Portata da 60 a 90px, occupando bene lo spazio della barra */
    height: auto; 
    object-fit: contain; 
}

/* Container animato con la tipografia base */
.DASBOARD-STATO-BASE .sezione-sync { 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* Giustifica i testi al centro */
    font-family: 'Roboto', sans-serif;
    text-align: center;
    line-height: 1.2;
}

/* Scritta fissa "Ultimo sync" (Bold, 22px) */
.DASBOARD-STATO-BASE .sync-label {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 4px;
}

/* Scritta dinamica "x secondi/ore fa" (Regular, 18px) */
.DASBOARD-STATO-BASE .sync-value {
    font-weight: normal; /* Forza la versione Regular */
    font-size: 16px;
}

/* ==========================================================================
   ⚙️ GESTIONE NASCONDERE/MOSTRARE WARNING CO2
   ========================================================================== */

/* 1. REGOLA DI SICUREZZA (Spegne tutto all'avvio su stato normale) */
.DASBOARD-STATO-BASE .warning-banner-co2,
.DASBOARD-STATO-BASE .warning-avviso-co2,
.DASBOARD-STATO-BASE .warning-pendolo,
.DASBOARD-STATO-BASE .warning-ringled-co2,
.DASBOARD-STATO-BASE .warning-airquality-co2,
.DASBOARD-STATO-BASE .warning-mandala-co2 {
  display: none; 
  position: absolute;
  z-index: 99;             
  object-fit: contain;
}

/* 2. COORDINATE WARNING DA FIGMA (X = left, Y = top) */
.DASBOARD-STATO-BASE .warning-banner-co2 { top: 157px; left: 217px; width: 731px; height: 923px; }
.DASBOARD-STATO-BASE .warning-avviso-co2 { top: 68px; left: 542px; width: 444px; height: 142px; }
.DASBOARD-STATO-BASE .warning-pendolo { top: 0px; left: 907px; width: 348px; height: 525px; }
.DASBOARD-STATO-BASE .warning-ringled-co2 { top: 0px; left: 1008px; }
.DASBOARD-STATO-BASE .warning-airquality-co2 { top: 528px; left: 1484px; }

/* 3. ATTIVAZIONE AUTOMATICA DEGLI OVERLAY IN STATO WARNING */
.DASBOARD-STATO-BASE.stato-warning .warning-banner-co2,
.DASBOARD-STATO-BASE.stato-warning .warning-avviso-co2,
.DASBOARD-STATO-BASE.stato-warning .warning-pendolo,
.DASBOARD-STATO-BASE.stato-warning .warning-ringled-co2,
.DASBOARD-STATO-BASE.stato-warning .warning-airquality-co2,
.DASBOARD-STATO-BASE.stato-warning .warning-mandala-co2,
.DASBOARD-STATO-BASE.stato-warning-co2 .warning-banner-co2,
.DASBOARD-STATO-BASE.stato-warning-co2 .warning-avviso-co2,
.DASBOARD-STATO-BASE.stato-warning-co2 .warning-pendolo,
.DASBOARD-STATO-BASE.stato-warning-co2 .warning-ringled-co2,
.DASBOARD-STATO-BASE.stato-warning-co2 .warning-airquality-co2,
.DASBOARD-STATO-BASE.stato-warning-co2 .warning-mandala-co2 {
  display: block !important;
}

/* Nasconde gli elementi base corrispondenti nello stato warning */
.DASBOARD-STATO-BASE.stato-warning .AVVISO-PAG,
.DASBOARD-STATO-BASE.stato-warning .AIR-STATUS-PAG,
.DASBOARD-STATO-BASE.stato-warning-co2 .AVVISO-PAG,
.DASBOARD-STATO-BASE.stato-warning-co2 .RENDER-PENDOLO-PAG,
.DASBOARD-STATO-BASE.stato-warning-co2 .AIR-STATUS-PAG {
  display: none !important;
}
/* ==========================================================================
   📊 TIPOGRAFIA DINAMICA PER AIR QUALITY (SOSTITUISCE LE VECCHIE SVG)
   ========================================================================== */
.DASBOARD-STATO-BASE .AIR-STATUS-DYNAMIC {
  position: absolute;
  top: 510px; /* Regolato leggermente per accogliere i font più grandi */
  left: 1484px;
  width: 311px;
  z-index: 999 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Allinea i box al centro orizzontalmente */
  text-align: center;  /* Centra il testo internamente */
  font-family: "Roboto-Black", "Roboto", Helvetica, Arial, sans-serif; /* Assicurati di avere il Roboto Black o un weight alto */
}

/* Scritta fissa piccola superiore "AIR QUALITY" */
.DASBOARD-STATO-BASE .AIR-STATUS-DYNAMIC .air-label {
  font-size: 24px;
  font-weight: 900;
  color: #998E8D; /* Il colore fisso richiesto */
  text-transform: uppercase;
  margin-bottom: -5px; /* Avvicina la scritta al testo grande */
}

/* Valore Principale (GOOD, BAD) */
.DASBOARD-STATO-BASE .AIR-STATUS-DYNAMIC .air-value {
  font-size: 90px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0px;
}

/* Sotto-scritta (WARNING!, ALERT!) */
.DASBOARD-STATO-BASE .AIR-STATUS-DYNAMIC .air-subtext {
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
}
/* ==========================================================================
   ✨ EFFETTO ALONE SFUMATO E PULSANTE PER CO2 E UMIDITÀ (PANNELLO DATI)
   ========================================================================== */

/* Animazione di pulsazione: mantiene la rotazione base e si ingrandisce fluidamente */
@keyframes pulseGlow {
    0% {
        transform: rotate(89.98deg) scale(1.05);
        opacity: 0.75;
    }
    50% {
        transform: rotate(89.98deg) scale(1.25); /* Diventa leggermente più grande del cerchio base */
        opacity: 1;
    }
    100% {
        transform: rotate(89.98deg) scale(1.05);
        opacity: 0.75;
    }
}

/* Trasformazione cerchio CO2 in Alone Rosso (#EB4034) */
.DASBOARD-STATO-BASE .halo-pulsante-co2 {
    background: radial-gradient(circle, rgba(235, 64, 52, 0.8) 0%, rgba(235, 64, 52, 0.3) 45%, rgba(235, 64, 52, 0) 70%) !important;
    box-shadow: 0 0 50px 15px rgba(235, 64, 52, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    animation: pulseGlow 2s infinite ease-in-out !important;
}

/* Trasformazione cerchio Umidità in Alone Blu (#1E2574) */
.DASBOARD-STATO-BASE .halo-pulsante-umidita {
    background: radial-gradient(circle, rgba(30, 37, 116, 0.8) 0%, rgba(30, 37, 116, 0.3) 45%, rgba(30, 37, 116, 0) 70%) !important;
    box-shadow: 0 0 50px 15px rgba(30, 37, 116, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    animation: pulseGlow 2s infinite ease-in-out !important;
}
/* ==========================================================================
   💬 BOX AVVISO DINAMICO (FUMETTO ADATTIVO LIQUID GLASS)
   ========================================================================== */

.DASBOARD-STATO-BASE .DYNAMIC-AVVISO-BOX {
    position: absolute;
    top: 33px; /* Stessa altezza della vecchia immagine */
    left: 565px; /* Posizione base orizzontale */
    z-index: 999;
    /* Struttura flex per impilare il box e la coda del fumetto */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Rettangolo principale "Pillola" */
.DASBOARD-STATO-BASE .avviso-content {
    background-color: rgba(153, 142, 141, 0.3); /* #998e8d al 30% di opacità */
    border-radius: 999px; /* Angoli stondati al massimo per l'effetto pillola */
    padding: 15px 40px; /* Spazio interno adattivo (Verticale, Orizzontale) */
    text-align: center;
    
    /* Effetto Liquid Glass */
    backdrop-filter: blur(4px) brightness(100%) saturate(100%);
    -webkit-backdrop-filter: blur(4px) brightness(100%) saturate(100%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3), /* Riflesso superiore */
        0 4px 15px rgba(0, 0, 0, 0.1);          /* Ombra leggera */
        
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: center;
}

/* ================== TIPOGRAFIA AVVISI ================== */
.DASBOARD-STATO-BASE .testo-light {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 14px;
    color: #595150;
    margin-top: 2px;
    margin-bottom: 2px;
}

.DASBOARD-STATO-BASE .testo-black {
    font-family: 'Roboto-Black', 'Roboto', sans-serif;
    font-weight: 900; /* Black */
    font-size: 24px;
    color: #595150;
    text-transform: uppercase;
    line-height: 1.1; /* Testo compatto */
}