/* =====================================================
   DASHBOARD FV - CSS PULITO E ORDINATO
   Struttura:
   1) Reset & Base
   2) Layout generale (desktop)
   3) Componenti (card, mappe, contatori, thumbnails, modal, back button)
   4) Override colori contatori
   5) Layout Mobile (≤768px): colonna singola + grafici più alti
   ===================================================== */

/* ========== 1) RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: #222;
  color: #EEE;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}

/* ========== 2) LAYOUT GENERALE (DESKTOP) ========== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 2fr 1fr;
  gap: 1rem;
  width: calc(100% - 40px);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.logo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column: span 3;
  height: 80px;
  padding: 0 20px;
}

#logo { width: 200px; height: auto; }

#title {
  font-size: 1.1rem;
  color: #fff;
  text-align: left;
  grid-column: span 3;
  margin-left: 0;
  padding: 0;
  line-height: 1.2;
}

/* Card base */
.dashboard-card {
  background: #2f2f2f;
  border: 1px solid #444;
  height: 50vh;
  border-radius: 4px;
  padding: 1rem;
  margin: 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dashboard-card.maps-col { overflow: visible; }

/* Wrapper dei grafici (contenitori highcharts) */
#chart-day, #chart-month, #chart-year {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 350px;
}

.maps-col { grid-column: span 2; height: 50vh; }
.counter-col { grid-column: span 1; }

/* ========== 3) COMPONENTI ========== */
/* 3.1 Loading ellissi */
.loading .dots {
  display: inline-block;
  width: 1em;
  text-align: left;
  position: relative;
  color: inherit;
}
.loading .dots::after {
  content: '';
  position: absolute;
  animation: ellipsis steps(4,end) 1s infinite;
  color: inherit;
}
@keyframes ellipsis {
  0%   { content: '';    }
  25%  { content: '.';   }
  50%  { content: '..';  }
  75%  { content: '...'; }
  100% { content: '';    }
}

/* 3.2 Mappe (anteprime + legenda) */
.maps-wrapper {
  display: flex;
  align-items: flex-start;
  height: 100%;
  overflow: visible;
}

.map-item {
  flex: 0 0 auto;
  height: 100%;
  position: relative;
  margin-right: 2px;
}
.map-item img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}

.map-item.map-with-legend {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.map-item.map-with-legend img {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  object-fit: contain;
}
.map-item.map-with-legend .map-legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  margin-left: 1rem;
  padding: 0;
  font-size: 0.5rem;
  max-width: 40%;
  color: #ffc107;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
.map-item.map-with-legend .map-legend .nominal-capacity {
  margin-top: 0.25em;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

/* 3.3 Contatori */
.counter-col > div { margin: auto; text-align: center; }

.day-counter-text-big {
  color: #ffc107;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.battery-gif-big { max-width: 80%; width: 150px; height: auto; margin: 0 auto 1rem; }

.chart-container { position: relative; width: 100%; height: 700px; }

.chart-container .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;  
  color: #fff;
}

#kwh-counter {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

#installed-power-counter,
#toinstall-power-counter {
  font-size: 2rem;
  font-weight: bold;
  color: #ffc107;
  display: block;
  margin: 0 auto 2rem;
  text-align: center;
}

/* Solo l’etichetta "da installare" in grigio */
#toinstall-label { color: #ccc; }

/* 3.4 Thumbnails (anteprime sedi) */
.thumbs-grid {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  row-gap: 1rem;
  column-gap: 6rem;
  justify-items: center;
  justify-content: center;
}
.thumb-item { display: flex; flex-direction: column; align-items: center; }
.thumb-item img {
  display: block;
  width: 150%;
  height: auto;
  max-height: 150px;
  border-radius: 4px;
  transition: transform 0.2s;
}
.thumb-item img:hover { transform: scale(1.05); }
.thumb-title { text-align: center; margin-top: 0.25rem; font-size: 0.9rem; color: #ffc107; }
.thumbs-section-title { text-align: center; }

/* 3.5 Modal immagini */
#image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
}
#modal-img {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  margin: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
#image-modal .modal-close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}
#image-modal .modal-close:hover { color: orange; }

/* 3.6 Back button */
.back-button-icon img {
  width: 64px;        /* desktop */
  height: auto;
  vertical-align: middle;
  margin-right: 5px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.back-button-icon img:hover { transform: scale(1.1); }

.left-header { display: flex; align-items: center; gap: 10px; }

/* ========== 4) OVERRIDE COLORI CONTATORI ========== */
/* Tutto default bianco (testi principali) */
.day-counter-text-big { color: #ffffff !important; font-weight: bold !important; }
/* Contatore MWh: etichetta + numero */
#kwh-counter, #kwh-counter::before { color: #ffffff !important; font-weight: bold !important; }
/* Potenza installata: etichetta + numero */
#installed-power-counter, #installed-power-counter::before { color: #ffffff !important; font-weight: bold !important; }
/* Potenza da installare: etichetta + numero GRIGIO */
#toinstall-label, #toinstall-power-counter { color: #797979 !important; font-weight: bold !important; font-size: 1.2rem !important;}
/* Potenza installata degli impianti NON monitorati: etichetta + numero BLU */
#unmonitored-label, #unmonitored-power-counter { color: #00aaff !important; font-weight: bold !important; font-size: 1.2rem !important;}

/* ========== 5) LAYOUT MOBILE (≤768px) ========== */
@media (max-width: 768px) {
  .dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;  /* singola colonna */
    grid-auto-rows: auto !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  /* ogni elemento figlio occupa tutta la riga */
  .dashboard-grid > * { grid-column: 1 / -1 !important; }

  /* card a dimensione naturale in verticale */
  .dashboard-card, .maps-col, .counter-col {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  /* grafici più alti e leggibili */
    #chart-day, #chart-month, #chart-year {
      width: 100% !important;
      /* MODIFICATO: l'altezza della card esterna si adatta al contenuto. */
      height: auto !important; 
      max-height: none !important;
    }
    .chart-container {
      width: 100% !important;
      /* MODIFICATO: è il contenitore interno a forzare l'altezza minima di 400px. */
      height: 400px !important; 
      min-height: 300px !important;
      max-height: none !important;
    }

  /* thumbnails anch'esse in colonna singola */
  .thumbs-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: stretch !important;
  }
  .thumb-item { width: 100% !important; max-width: 100% !important; }
  .thumb-item img { width: 100% !important; max-height: 180px !important; object-fit: cover !important; }

  /* back button più piccolo su mobile (fix: aggiunta unità px) */
  .back-button-icon img { width: 50px !important; margin-right: 6px !important; }

  /* modal ottimizzata */
  #modal-img { max-width: 95vw !important; max-height: 80vh !important; }
  #image-modal .modal-close { font-size: 30px; top: 10px; right: 15px; }


  #logo {
    width: 100px;   /* più piccolo su mobile */
    height: auto;
  }

  .logo-row {
    height: 60px;   /* abbasso un po' la fascia in alto */
    padding: 0 10px;
  }

  #title {
    font-size: 0.9rem;  /* testo più compatto */
    margin-left: 10px;
  }
}

/* Contatore MWh e Potenza monitorata in giallo */
#kwh-counter,
#kwh-counter::before,
#installed-power-counter,
#installed-power-counter::before,
.day-counter-text-big:first-of-type, /* etichetta Contatore */
.day-counter-text-big:nth-of-type(3) /* etichetta Potenza monitorata */ {
    color: #ffc107 !important;
}


.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: 50px;
}