/* ==========================================================================
   Pagina Analytics: quattro cruscotti d'esempio (stile Grafana, dati fittizi)
   dentro la pagina chiara del sito. Estende grafana.css senza toccarlo.
   ========================================================================== */

/* ---------- hero: cruscotto standard come "schermata" ---------- */
.hero__media--gf{display:grid;justify-items:center}
.gf--mini{width:min(100%,520px);font-size:12px}
.gf--mini .gf-stat{min-height:60px}
.gf--mini .gf-stat__v{font-size:clamp(24px,2.4vw,32px)}
.hero--page .checks{margin-bottom:6px}

/* ---------- un cruscotto = titolo + a chi serve + schermata + tabella ---------- */
.dash{margin-top:var(--space-head)}
.dash + .dash{margin-top:calc(var(--space-head) * 1.25)}
.dash__head{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:start;margin-bottom:18px}
.dash__head h3{font-size:clamp(1.25rem,1rem + .8vw,1.75rem);margin:0 0 6px}
.dash__who{margin:0;color:var(--muted);max-width:70ch}
.dash__who b{color:var(--ink)}
.dash__head .pill{margin-top:6px;white-space:nowrap}
@media (max-width:640px){.dash__head{grid-template-columns:1fr}.dash__head .pill{justify-self:start;margin-top:0}}

/* vista tabellare accessibile (fuori dalla schermata, nello stile del sito) */
.dash__data{margin-top:14px}
.dash__data summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);color:var(--red);padding:6px 0}
.dash__data summary::-webkit-details-marker{display:none}
.dash__data summary::after{content:"+";font-size:1.25rem;line-height:1}
.dash__data[open] summary::after{content:"−"}
.dash__tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:8px 32px;margin-top:6px}
.dash__note{font-size:var(--fs-small);color:var(--muted);margin:10px 0 0}
.dtable{width:100%;border-collapse:collapse;font-size:var(--fs-small);margin:8px 0 12px;align-self:start}
.dtable caption{text-align:left;font-family:var(--font-d);color:var(--ink);padding:8px 0;caption-side:top}
.dtable th,.dtable td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dtable thead th{font-family:var(--font-d);font-size:.8125rem;color:var(--muted)}
.dtable .n{text-align:right;font-variant-numeric:tabular-nums}
.dtable tfoot th{font-family:var(--font-d);color:var(--ink);border-bottom:0}
.dtable td:first-child{color:var(--ink)}
@media (max-width:480px){.dtable{font-size:.8125rem}.dtable th,.dtable td{padding:6px 5px}}
@media (max-width:430px){.dtable{font-size:.75rem}.dtable th,.dtable td{padding:5px 4px}}
@media (max-width:380px){.dtable th,.dtable td{padding:5px 2px}}

/* ---------- dentro la schermata ---------- */
/* il testo non veste il colore della serie: intestazioni in tono testo (grafana.css le mette in --s1) */
.gf .gf-table th{color:var(--gf-muted)}
.gf-caption{font-size:11px;color:var(--gf-muted);margin:8px 0 0}
.gf-legend{margin-top:8px}

/* stato con etichetta: il colore sta nel punto, il testo resta in tono testo */
.gf-state{display:inline-flex;align-items:center;gap:6px;color:var(--gf-text);white-space:nowrap;margin:0}
.gf-state i{width:8px;height:8px;border-radius:50%;background:var(--gf-muted);flex:none}
.gf-state--ok i{background:var(--ok)}
.gf-state--warn i{background:var(--warn)}
.gf-gauge .gf-state{margin-top:2px;font-size:11px;white-space:normal;text-align:center}
.gf-gauge{gap:2px;align-content:center}

/* mappa giorno × ora: una tinta sola (serie 1), più registrazioni = più piena */
.heat{grid-template-columns:auto repeat(10,minmax(0,1fr));align-items:center}
.heat i{opacity:var(--v,.1);cursor:default}
.heat__row,.heat__corner{font-size:10px;color:var(--gf-muted);padding-right:8px;text-align:right}
.heat .gf-heat__lbl{padding-bottom:2px}
.heat__scale{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--gf-muted)}
.heat__scale i{flex:1;max-width:160px;height:8px;border-radius:2px;background:linear-gradient(90deg,rgba(87,148,242,.1),#5794F2)}

/* Le serie temporali sono SVG con viewBox 520: il testo e i tratti scalano con la larghezza del
   pannello. Qui si compensa per span (c8 ≈ 1,5×, c12 ≈ 2,3× a 1240 px) per riportare i tick a ~10 px
   e le linee a ~2 px sullo schermo. */
@media (min-width:761px){
  .dash .gf-panel.c8 .gf-ts .axis text{font-size:6.5px}
  .dash .gf-panel.c8 .gf-ts .line{stroke-width:1.3}
  .dash .gf-panel.c8 .gf-ts .dot{r:3px}
  .dash .gf-panel.c7 .gf-ts .axis text{font-size:7.5px}
  .dash .gf-panel.c7 .gf-ts .line{stroke-width:1.5}
  .dash .gf-panel.c12 .gf-ts .axis text{font-size:4.5px}
  .dash .gf-panel.c12 .gf-ts .line{stroke-width:.9}
  .dash .gf-panel.c12 .gf-ts .dot{r:2px}
  .dash .heat i{aspect-ratio:2.6}
}

/* tabelle nella schermata: i numeri restano leggibili sul telefono */
@media (max-width:760px){
  .gf-table{font-size:11px}
  .gf-table th,.gf-table td{padding:5px 5px}
  .gf-bg__row{grid-template-columns:minmax(72px,40%) 1fr auto;font-size:11px}
  .gf-ts .axis text{font-size:9px}
  .gf-ts .line{stroke-width:1.6}
}
@media (max-width:560px){
  .gf-ts .axis text{font-size:12px}
  .gf-ts .line{stroke-width:2.2}
  /* serie fitta (40 punti): sul telefono si mostra un'etichetta dell'asse x ogni due (le prime 5 sono i tick y) */
  .ts-dense .axis text:nth-child(n+6):nth-child(odd){display:none}
  .gf-state{white-space:normal}
  .hide-m{display:none}
}
@media (max-width:430px){
  .gf-ts .axis text{font-size:16px}
  .gf-ts .line{stroke-width:2.8}
  .gf-stat__v{font-size:30px}
  .gf-stat__v--text{font-size:22px}
}