/* ==========================================================================
   GRAFICI DEL PANNELLO - legenda, valori di riferimento e "tippy"
   --------------------------------------------------------------------------
   Segnalato: "con i grafici ... per quanto siano belli ... mancano di label di
   legenda, di valori, hover, tippy". I disegni c'erano, ma erano muti: si
   guardavano senza sapere cosa fosse cosa, e senza poter leggere quanto valeva
   un punto. Qui ci sono le tre cose che mancavano: la striscia di legenda, i
   valori di riferimento sull'asse, e la nuvoletta che al passaggio del mouse
   (o col dito, o da tastiera) dice il numero esatto.
   File separato di proposito: `admin.css` e' lungo e viene toccato anche
   altrove, qui invece c'e' solo roba dei grafici e si legge in un minuto.
   ========================================================================== */

/* --- La nuvoletta dei valori ("tippy") ----------------------------------- */
.adm-tip {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    max-width: 19rem;
    padding: 0.45rem 0.95rem;
    border-radius: 5px;
    background: rgb(50 50 50 / 79%);
    border: 1px solid  #2b2b3d6b;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    color: #f5f5fa;
    backdrop-filter: blur(15px);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: justify;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;      /* non ruba il mouse: si puo' restare fermi sopra */
    text-wrap: wrap;
    text-align: left;
}
.adm-tip.is-on { opacity: 1; transform: translateY(0) scale(1); }

/* Chi ha una nuvoletta lo fa capire al mouse. E dentro non si seleziona niente: sul telefono il
   nome si legge tenendo premuto (`admin-core.js`), e la selezione colla lente coprirebbe la nuvoletta. */
[data-adm-tip] { cursor: help; -webkit-touch-callout: none; user-select: none; }

/* --- Legenda: cosa sono i colori e i numeri ------------------------------- */
.adm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.9rem;
    margin-top: 0.55rem;
    font-size: 0.76rem;
    color: var(--mood-text-muted, #8b8b9e);
}
.adm-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.adm-legend__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: none;
    box-shadow: 0 0 0 2px rgb(205 220 57 / 36%);
}
.adm-legend__val { color: var(--mood-text, #f5f5fa); font-weight: 700; }

/* --- Andamento: tacche dei valori + pallini leggibili --------------------- */
.adm-chart__plot { display: flex; align-items: stretch; gap: 0.4rem; margin-top: 0.25rem; }
.adm-chart__axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 1.7rem;
    padding: 0.1rem 0;
    font-size: 0.66rem;
    color: var(--mood-text-muted, #8b8b9e);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.adm-chart__stage { position: relative; flex: 1 1 auto; min-width: 0; }
.adm-chart__points { position: absolute; inset: 0; }

/* Il bersaglio del mouse e' largo 22px (col dito si prende), il pallino no. */
.adm-pt {
    position: absolute;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    outline: none;
    transform: translate(-50%, 50%);
}
.adm-pt i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--mood-primary, #6c5ce7);
    border: 2px solid rgba(12, 12, 20, 0.85);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.adm-pt:hover i, .adm-pt:focus-visible i { opacity: 1; transform: scale(1.25); }
.adm-pt:focus-visible { box-shadow: 0 0 0 2px var(--mood-primary, #6c5ce7); }

/* --- Barre: il passaggio del mouse si deve vedere ------------------------- */
.adm-bar.adm-has-tip:hover .adm-bar__track,
.adm-bar.adm-has-tip:focus-visible .adm-bar__track { box-shadow: 0 0 0 2px rgba(124, 92, 231, 0.28); }
.adm-bar.adm-has-tip:focus-visible { outline: 2px solid var(--mood-primary, #6c5ce7); outline-offset: 3px; border-radius: 8px; }

/* --- Imbuto: fra un passo e l'altro, quanti restano ---------------------- */
.adm-funnel__arrow { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.adm-funnel__perc {
    padding: 0.05rem 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--mood-text-muted, #8b8b9e);
}
.adm-funnel__freccia { font-size: 1.05rem; line-height: 1; color: var(--mood-text-muted, #8b8b9e); }
.adm-funnel__step.adm-has-tip:hover { border-color: var(--mood-primary, #6c5ce7); }
.adm-funnel__step.adm-has-tip:focus-visible { outline: 2px solid var(--mood-primary, #6c5ce7); outline-offset: 2px; }

/* --- Ciambella a piu' fette ---------------------------------------------- */
.adm-donut--multi { width: 150px; height: 150px; }
.adm-donut__arc { transition: stroke-width 0.12s ease, opacity 0.12s ease; }
.adm-donut__arc:hover, .adm-donut__arc:focus-visible { stroke-width: 4.9; outline: none; }

/* Col dito non c'e' "passaggio": si tocca e la nuvoletta arriva lo stesso. */
@media (hover: none) {
    .adm-bar.adm-has-tip:hover .adm-bar__track,
    .adm-bar.adm-has-tip:focus-visible .adm-bar__track { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .adm-tip, .adm-pt i, .adm-bar__fill, .adm-donut__arc { transition: none; }
}

/* Il punto piu' vicino al puntatore si accende come se ci fossi sopra: si legge
   il grafico senza dover centrare il bersaglio (i giorni distano pochi pixel).
   I bersagli non prendono il mouse: lo prende tutto il riquadro del grafico, che
   sceglie il punto piu' vicino. Col Tab restano raggiungibili lo stesso. */
.adm-pt {pointer-events: none;}
.adm-pt.is-near i { opacity: 1; transform: scale(1.25); }
.adm-legend__item[data-adm-tip] { cursor: help; }
.adm-legend__item[data-adm-tip]:focus-visible {
    outline: 2px solid var(--mood-primary, #6c5ce7);
    outline-offset: 2px;
    border-radius: 6px;
}
/* ==========================================================================
   LA LEGENDA IN FORMA DI NOTA (`adm-legend--nota`)
   --------------------------------------------------------------------------
   La legenda "a voci" (pallino + etichetta + valore) era definita; questa
   variante - una NOTA di testo sotto le barre - no: c'era nel JavaScript e non
   nel foglio (segnalato dal titolare il 13/09/2026: "mancano le classi css").
   Essendo testo, sta meglio in blocco e con un'interlinea leggibile.
   ========================================================================== */
.adm-legend--nota {
    display: block;
    line-height: 1.45;
    margin-top: 0.5rem;
    color: var(--mood-text-muted, #8b8b9e);
}