/**
 * Statistiche.
 *
 * Il foglio e' piccolo perche' la schermata e' fatta quasi tutta di pezzi del
 * kit: quattro riquadri, due elenchi di righe e una scheda. L'unica cosa sua e'
 * il grafico a barre.
 *
 * `mytap-analytics.css` e `mytap-analytics-mobile.css` **non si caricano piu'**:
 * vestivano il markup vecchio, che era doppio (`#mob-an-wrap` per il telefono e
 * `#dAn-wrap` per il computer) e adesso e' uno solo. Erano diventati due fogli
 * che non agganciavano piu' niente.
 */

/* Stesso cappello delle altre sezioni del giro. */
.stat-sezione { max-width: 1240px; }

/**
 * ⚠ LE SCHEDE DEVONO ESSERE TUTTE DELLA STESSA ALTEZZA.
 *
 * Nel disegno le schede di una fila sono **omogenee**: stessa altezza, stessa
 * base. E' quello che le fa leggere come una fila sola invece che come quattro
 * riquadri capitati li'.
 *
 * Non lo erano per due motivi insieme, e nessuno dei due si vede dal codice:
 *
 * 1. `.nk-g4` del kit e' `repeat(auto-fit, minmax(118px, 1fr))`. Con quattro
 *    schede larghe apriva **cinque** tracce, una da zero, e le schede non
 *    finivano nemmeno tutte sulla stessa riga. E' la stessa trappola di Pagine e
 *    dei Premi: **il numero di colonne si decide**, non si lascia decidere alla
 *    larghezza.
 * 2. Senza `align-items: stretch` ogni scheda si accorcia sul suo contenuto, e
 *    un'etichetta che va a capo alza solo la sua.
 */
.stat-numeri {
    margin-bottom: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

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

/* Il numero in alto e l'etichetta in basso: cosi' le etichette di tutte e
   quattro stanno sulla stessa linea anche quando una va a capo. */
.stat-numeri .nk-card { display: flex; flex-direction: column; }
.stat-numeri .nk-sl { margin-top: auto; padding-top: 6px; }

/* ── Il grafico a barre ────────────────────────────────────────────── */

.stat-grafico { margin-bottom: 14px; }

.stat-barre {
    display: flex; align-items: flex-end; gap: 4px;
    height: 96px;
}

/**
 * Il minimo e' 6px e non il 2% dell'altezza.
 *
 * Su un account vero la maggior parte dei giorni sta a zero, e il 2% di 96px
 * fa due pixel: sei barre invisibili e una sola alta, che sembra un grafico
 * rotto. Sei pixel dicono «questo giorno c'e', ed e' a zero», che e'
 * un'informazione. Visto solo guardando la schermata di un account con pochi
 * dati, non la demo.
 */
.stat-barra {
    flex: 1;
    background: var(--nk-ink-3);
    border-radius: 4px 4px 0 0;
    min-height: 6px;
    transition: background .16s;
}
.stat-barra:hover { background: var(--nk-line-2); }

/* Oggi acceso, come nel disegno: e' il giorno da cui si legge il grafico. */
.stat-barra.oggi { background: var(--nk-accent); }
.stat-barra.oggi:hover { background: var(--nk-accent); filter: brightness(1.08); }

.stat-giorni {
    display: flex; margin-top: 7px;
    font-size: 10.5px; color: var(--nk-muted-2);
}
/* Ogni etichetta larga come la sua barra: con `space-between` la prima e
   l'ultima finiscono ai bordi e le altre non stanno sotto niente. */
.stat-giorni span { flex: 1; text-align: center; }
.stat-giorni .oggi { color: var(--nk-accent); font-weight: 650; }

/* ── I due elenchi in fondo ────────────────────────────────────────── */

/* Due colonne **decise**, e **della stessa altezza**: `align-items: start` le
   faceva accorciare ognuna sul suo contenuto, e con quattro righe da una parte e
   due dall'altra la fila si sfalsava di novanta pixel. Nel disegno sono pari. */
.stat-due { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }

@media (max-width: 820px) {
    .stat-due { grid-template-columns: minmax(0, 1fr); }
}

.stat-due .nk-ra b { color: var(--nk-paper); font-weight: 600; }

/* ── Il foglio vecchio ─────────────────────────────────────────────── */

/**
 * ⚠ `app.css` spegne `#dAn-wrap` sotto i 900px, perche' li' si mostrava
 * `#mob-an-wrap`. Col markup unico quella riga spegnerebbe **tutta la sezione
 * sul telefono**: e' identica alla trappola di Pagine (`#pages-wrap`) e del CRM
 * (`#dCrm-wrap`), ed e' la quarta volta.
 *
 * Ci vuole un identificatore piu' una classe: una classe sola perde contro
 * `#dAn-wrap`, anche con `!important` da tutte e due le parti. Lezione gia'
 * pagata dal CRM, dove `.clienti-wrap` non bastava e serviva
 * `#dCrm-wrap.clienti-wrap`.
 */
.mt-dashboard #dAn-wrap { display: block !important; }