/* ==========================================================================
   FONDOPRO — CHARTS.CSS
   Modulo "Analisi comparativa dei Fondi": 12 indicatori numero+colonna
   (Performance Annuale + Rendimenti Medi 3/5/10 anni — non più doughnut,
   vedi nota su .fp-donut-item__bar più sotto) e grafico lineare storico
   (Andamento Valore delle Quote), quest'ultimo ancora gestito da Chart.js
   su canvas (vedi js/charts-config.js). Qui definiamo layout, spaziature,
   tipografia e gli effetti hover richiesti — tutto ciò che i colori dei
   grafici NON gestiscono direttamente resta demandato ai design token di
   style.css (nessun hex hardcoded in questo file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   FASCIA DI STACCO VISIVO — racchiude Performance + Andamento Quote
   Contenitore puramente visivo (nessuna spaziatura propria: la gestiscono
   già le due <section class="home-section"> al suo interno) che dà alla
   macro-area "grafici" un fondo grigio chiarissimo, distinguendola da News
   sopra e dall'area Video sotto, entrambe su sfondo bianco.
   -------------------------------------------------------------------------- */
.fp-charts-band {
  background-color: var(--color-gray-band);
}

.fp-performance {
  /* Sfondo gestito dal contenitore .fp-charts-band che racchiude questa
     sezione insieme a .fp-quote-history: le due formano un'unica fascia
     grigia continua, senza stacco di colore tra doughnut e grafico lineare. */
}

.fp-performance__header {
  margin-bottom: var(--space-6);
}
/* Titolo (.section-heading) e sottotitolo (.section-subtitle) del blocco
   sono ora stili condivisi definiti in style.css, riusati identici anche
   dall'area Andamento Valore delle Quote qui sotto. */

/* --------------------------------------------------------------------------
   GRUPPI DI DOUGHNUT (una "triade" per riga: Scudo / Progressione / Espansione)
   Riga di separazione sottile tra un gruppo e il successivo, su richiesta
   esplicita del cliente per distinguere meglio le righe (in una revisione
   precedente era stata tolta per alleggerire la vista; ora la si
   preferisce di nuovo — non è tra i due un difetto, solo una scelta
   cambiata). Mai sopra il primo gruppo o sotto l'ultimo: solo tra le
   righe, grazie al selettore "+" qui sotto.
   -------------------------------------------------------------------------- */
.fp-donut-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3); /* ridotto da --space-5 (40px): più che dimezzato, su richiesta */
}

.fp-donut-group + .fp-donut-group {
  border-top: 1px solid var(--color-gray-light);
}

@media (min-width: 992px) {
  /* Su desktop il titolo del blocco/triade vive a sinistra, i 3 grafici a
     destra sulla stessa riga (coerente col mockup fornito) */
  .fp-donut-group {
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: var(--space-6);
  }
}

/* Titolo e sottotitolo di questa sezione: lasciati alla dimensione
   precedente l'aumento del 25% applicato al resto del sito (andavano
   già bene secondo il cliente) — valori fissi pre-scala, non i token
   --fs-h2/--fs-h4 (che restano scalati ovunque altrove). */
.fp-performance__title {
  font-size: 2.35rem;
}
.fp-performance .section-subtitle {
  font-size: 1.375rem;
}

.fp-donut-group__title {
  margin: 0;
  font-size: 1.65rem; /* pre-scala 1,25x, sezione lasciata invariata su richiesta */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--color-text-primary);
  transform-origin: left center;
  transition: transform var(--transition-base), color var(--transition-base);
}

/* Attivato via JS (charts-config.js) quando il puntatore/focus è su uno
   qualsiasi dei 3 grafici della triade: "avanzamento visivo" del titolo
   sovrastante richiesto dal brief, fluido grazie alla transition sopra. */
.fp-donut-group__title.is-active {
  transform: scale(1.05);
  color: var(--color-blue-primary);
}

.fp-donut-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 576px) {
  /* flex invece di grid, con align-items:flex-end: le 3 colonne
     condividono una "linea di terra" comune (il testo sotto la colonna —
     valore + nome comparto — ha sempre la stessa altezza, quindi
     allineare i FONDI dei 3 item allinea automaticamente anche i fondi
     delle sole colonne). Cruciale: l'altezza della riga non è più un
     massimo fisso arbitrario — è quella del valore reale più alto tra i
     3 presenti. Se in una tripletta tutti i valori sono piccoli, la riga
     intera resta bassa: nessuno spazio invisibile riservato "per sicurezza". */
  .fp-donut-grid {
    flex-direction: row;
    align-items: flex-end;
  }
  .fp-donut-item {
    flex: 1 1 0;
  }
}

/* Singolo grafico: nessun bordo/sfondo. L'hover (ombra + sollevamento) è
   lo standard condiviso .fp-hover-lift (style.css), applicato via classe
   direttamente nel markup insieme a questa. */
.fp-donut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-4); /* verticale rimosso su richiesta, per far spazio a colonne più alte */
  border-radius: var(--radius-md);
}

/* TASSATIVO (revisione post-colloquio cliente): eliminato il doughnut/
   torta con "100% come fondo scala" — per percentuali contenute (es.
   2,55%) il confronto visivo contro un cerchio intero risultava
   fuorviante, quasi "nullo". Al suo posto: la colonna a istogramma
   (cresce verso l'alto), il numero, il nome del comparto sotto. La
   colonna NON è più scalata su un riferimento 100%, ma su un riferimento
   20% (vedi resolveBarHeightPx in charts-config.js): un valore reale
   come 7,11% riempie quindi oltre un terzo della colonna invece di
   un'ombra sottile su un intero cerchio — proporzione reale, calcolata a
   runtime dal data-value, mai un numero fisso ricalcolato a mano se le
   cifre cambiassero in futuro.

   Un solo elemento, non più un binario/traccia con un riempimento
   interno: la sua altezza REALE in pixel è il valore stesso (calcolato
   in charts-config.js), non una percentuale di un contenitore a
   dimensione fissa — un valore piccolo produce quindi una colonna
   realmente piccola, senza alcuno spazio "invisibile" riservato sopra
   di essa che spingerebbe giù numero ed etichetta. */
.fp-donut-item__bar {
  width: 96px; /* raddoppiata su richiesta (era 48px) */
  height: 0; /* animata via JS fino all'altezza reale in px (charts-config.js) */
  margin-bottom: var(--space-2); /* ridotto da --space-3: spazio recuperato per l'altezza tripla della colonna */
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .fp-donut-item__bar {
    transition: none !important;
  }
}

.fp-donut-item__value {
  margin: 0 0 var(--space-2); /* ridotto da --space-3: spazio recuperato per l'altezza tripla della colonna */
  font-size: 2.35rem; /* pre-scala 1,25x, sezione lasciata invariata su richiesta */
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-text-primary);
}

.fp-donut-item__label {
  margin: 0;
  font-size: 0.9625rem; /* pre-scala 1,25x, sezione lasciata invariata su richiesta */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   GRAFICO STORICO — ANDAMENTO VALORE DELLE QUOTE (lineare)
   Area autonoma (<section class="fp-quote-history home-section">): la
   spaziatura verticale viene da .home-section, qui restano solo sfondo e
   contenuto specifico. Titolo (.section-heading) e sottotitolo
   (.section-subtitle) sono gli stessi stili condivisi usati sopra per
   "Performance e rendimenti percentuali", per coerenza tra le due aree.
   -------------------------------------------------------------------------- */
.fp-quote-history {
  /* Sfondo gestito da .fp-charts-band, vedi nota sopra su .fp-performance */
}

.fp-quote-history__desc {
  max-width: 68ch;
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
}

/* Filtro anno: deliberatamente "vistoso" (bordo blu pieno, non un select
   di sistema anonimo) per rispettare la richiesta "estremamente visibile
   ed elegante", posizionato subito sopra il grafico. */
.fp-quote-history__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fp-quote-history__filter-label {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.fp-year-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23005191' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 14px;
  border: 1.5px solid var(--color-blue-primary);
  color: var(--color-blue-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fp-year-select:hover {
  background-color: var(--color-blue-primary-light);
}

/* Il focus-visible globale (style.css) si applica già: qui manteniamo
   il doppio anello e aggiungiamo in coda l'ombra "vistosa" richiesta
   (prima questa regola sostituiva l'anello bianco con la sola ombra). */
.fp-year-select:focus-visible {
  box-shadow: var(--focus-ring), var(--shadow-sm);
}

.fp-quote-history__chart-wrap {
  position: relative;
  height: 380px;
}

@media (max-width: 576px) {
  .fp-quote-history__chart-wrap {
    height: 300px;
  }
}