/* ============================================================
   style-charts.css — design system dei grafici Aspasia
   Usato da: /osservatorio, /statistiche (aziende), /sympota/statistiche (enti).
   Nessuna dipendenza: i grafici sono SVG generati da /js/charts.js.

   I colori NON sono scelti a occhio: le due palette categoriche (blu e viola)
   e le due rampe sequenziali sono state verificate con il validatore del
   design system su tutti e sei i controlli — banda di luminosità OKLCH,
   croma minimo, separazione per daltonismo (protan/deutan/tritan) sulle
   coppie adiacenti, soglia a visione normale e contrasto ≥ 3:1 sulla
   superficie — in entrambi i temi. Non riordinare né sostituire i valori
   senza rieseguire la validazione: l'ordine è parte della correttezza.
   ============================================================ */

/* ── Token: scope blu (sito pubblico + area aziende) ── */
:root {
  --ch-1: #2563eb;  --ch-2: #e11d48;  --ch-3: #0d9488;
  --ch-4: #9333ea;  --ch-5: #d97706;  --ch-6: #0891b2;
  --ch-accent: var(--ch-1);

  /* rampa sequenziale (magnitudine): una sola tinta, chiaro → scuro */
  --ch-s1: #82b4f0; --ch-s2: #5b9bf5; --ch-s3: #3b82f6; --ch-s4: #2563eb; --ch-s5: #1e3a8a;

  /* superficie: colore dei distanziatori (gap 2px) e degli anelli sui punti */
  --ch-surface: #ffffff;
  --ch-grid:  rgba(15, 23, 42, .07);
  --ch-axis:  rgba(15, 23, 42, .14);
  --ch-track: rgba(15, 23, 42, .06);

  /* inchiostro: il testo non indossa MAI il colore della serie */
  --ch-ink:   #0f172a;
  --ch-ink-2: #475569;
  --ch-muted: #94a3b8;
}

.dark {
  --ch-1: #3b82f6;  --ch-2: #f43f5e;  --ch-3: #0d9488;
  --ch-4: #a855f7;  --ch-5: #d97706;  --ch-6: #0891b2;

  --ch-s1: #2563eb; --ch-s2: #3b82f6; --ch-s3: #60a5fa; --ch-s4: #93c5fd; --ch-s5: #bfdbfe;

  --ch-surface: #161e2e;
  --ch-grid:  rgba(255, 255, 255, .07);
  --ch-axis:  rgba(255, 255, 255, .14);
  --ch-track: rgba(255, 255, 255, .07);

  --ch-ink:   #f1f5f9;
  --ch-ink-2: #cbd5e1;
  --ch-muted: #94a3b8;
}

/* ── Token: scope viola (area enti / sympota) ──
   Stesse sei tinte, ordine diverso: il viola guida perché è il colore
   identitario dell'area enti. Anche questo ordine è validato. */
body.sympota {
  --ch-1: #7c3aed;  --ch-2: #0d9488;  --ch-3: #e11d48;
  --ch-4: #2563eb;  --ch-5: #d97706;  --ch-6: #0891b2;
  --ch-s1: #b09ef8; --ch-s2: #9a86f4; --ch-s3: #8b5cf6; --ch-s4: #7c3aed; --ch-s5: #5b21b6;
}
.dark body.sympota {
  --ch-1: #8b5cf6;  --ch-2: #0d9488;  --ch-3: #f43f5e;
  --ch-4: #3b82f6;  --ch-5: #d97706;  --ch-6: #0891b2;
  --ch-s1: #6d28d9; --ch-s2: #8b5cf6; --ch-s3: #a78bfa; --ch-s4: #c4b5fd; --ch-s5: #ddd6fe;
}

/* ============================================================
   Card contenitore — stesso vetro delle stat-card del sito
   ============================================================ */
.ch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1.25rem;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.25rem 1.35rem 1.1rem;
}
.dark .ch-card {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
}
@media (min-width: 768px) { .ch-card { padding: 1.5rem 1.6rem 1.25rem; } }

.ch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.ch-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--ch-ink); }
.ch-sub   { margin-top: .3rem; font-size: .78rem; line-height: 1.45; color: var(--ch-ink-2); }
.ch-note  { margin-top: .75rem; font-size: .72rem; color: var(--ch-muted); }

/* Controllo segmentato (es. "cumulato / nuovi al mese") */
.ch-seg { display: inline-flex; padding: 2px; border-radius: .55rem; background: var(--ch-track); flex-shrink: 0; }
.ch-seg button {
  padding: .3rem .6rem; font-size: .72rem; font-weight: 600; line-height: 1.1;
  border: 0; border-radius: .4rem; background: transparent; color: var(--ch-ink-2);
  cursor: pointer; transition: background-color .15s, color .15s;
}
.ch-seg button:hover { color: var(--ch-ink); }
.ch-seg button[aria-pressed="true"] {
  background: var(--ch-surface); color: var(--ch-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.dark .ch-seg button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* ============================================================
   Area di disegno + tooltip
   ============================================================ */
.ch-plot { position: relative; width: 100%; margin-top: .9rem; }
.ch-plot svg { display: block; width: 100%; height: auto; overflow: visible; }

.ch-tip {
  position: absolute; z-index: 5; top: 0; left: 0;
  min-width: 8rem; max-width: 15rem;
  padding: .5rem .65rem;
  border-radius: .6rem;
  border: 1px solid rgba(15, 23, 42, .1);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .35);
  font-size: .75rem; line-height: 1.4; color: var(--ch-ink);
  pointer-events: none; opacity: 0;
  transition: opacity .12s ease;
  will-change: transform;
}
.dark .ch-tip {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(22, 30, 46, .97);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
}
.ch-tip[data-show="1"] { opacity: 1; }
.ch-tip-t { font-weight: 700; margin-bottom: .3rem; }
.ch-tip-r { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ch-tip-r + .ch-tip-r { margin-top: .15rem; }
.ch-tip-v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-tip-l { color: var(--ch-ink-2); }

/* ============================================================
   Legenda — sempre presente da 2 serie in su (identità mai solo-colore)
   ============================================================ */
.ch-legend { display: flex; flex-wrap: wrap; gap: .35rem .95rem; margin-top: .85rem; }
.ch-legend-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--ch-ink-2); }
.ch-dot { width: .55rem; height: .55rem; border-radius: 2px; flex-shrink: 0; }
.ch-dot--round { border-radius: 9999px; }

/* ============================================================
   Scala della rampa sequenziale — mostra il verso del colore invece di
   descriverlo, perché il verso si INVERTE fra tema chiaro e scuro.
   ============================================================ */
.ch-ramp { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.ch-ramp-l { font-size: .7rem; color: var(--ch-muted); }
.ch-ramp-cells { display: inline-flex; gap: 2px; }
.ch-ramp-cell { display: block; width: 1.4rem; height: .5rem; border-radius: 2px; }

/* ============================================================
   Vista tabellare — l'alternativa non visiva, sempre disponibile
   ============================================================ */
.ch-table { margin-top: .9rem; }
.ch-table > summary {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; color: var(--ch-muted);
  cursor: pointer; list-style: none; user-select: none;
}
.ch-table > summary::-webkit-details-marker { display: none; }
.ch-table > summary::before { content: "▸"; font-size: .65rem; transition: transform .15s; }
.ch-table[open] > summary::before { transform: rotate(90deg); }
.ch-table > summary:hover { color: var(--ch-ink-2); }
.ch-table-wrap { margin-top: .5rem; max-height: 15rem; overflow: auto; }
.ch-table table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.ch-table th, .ch-table td { padding: .3rem .5rem; text-align: left; border-bottom: 1px solid var(--ch-grid); }
.ch-table th { font-weight: 600; color: var(--ch-muted); position: sticky; top: 0; background: var(--ch-surface); }
.ch-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; color: var(--ch-ink); }
.ch-table td:first-child { color: var(--ch-ink-2); }

/* ============================================================
   Stati: vuoto, errore, scheletro
   ============================================================ */
.ch-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 2.5rem 1rem; text-align: center;
}
.ch-empty svg { width: 2rem; height: 2rem; color: var(--ch-muted); opacity: .55; }
.ch-empty p { font-size: .8rem; color: var(--ch-muted); max-width: 22rem; }
.ch-skel { border-radius: .75rem; background: var(--ch-track); animation: ch-pulse 1.5s ease-in-out infinite; }
@keyframes ch-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* ============================================================
   KPI / stat tile — la forma giusta quando il dato è UN numero
   ============================================================ */
.ch-kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 8.5rem; padding: 1.1rem 1.2rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dark .ch-kpi { border-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .045); }
.ch-kpi::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ch-kpi > * { position: relative; z-index: 1; }
.ch-kpi-label { font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--ch-ink); }
.ch-kpi-foot  { margin-top: auto; padding-top: 1.25rem; }
/* Figure proporzionali: a questa dimensione tabular-nums fa sembrare il numero slegato */
.ch-kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ch-ink); }
.ch-kpi-unit  { margin-top: .6rem; font-size: .72rem; font-weight: 600; color: var(--ch-ink-2); }
.ch-kpi-spark { margin-top: .55rem; height: 1.6rem; }
.ch-kpi-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (min-width: 768px) { .ch-kpi-value { font-size: 2.2rem; } }

/* Card larga del numero-guida (solo mobile, in testa alla griglia KPI).
   Stessa card delle altre — cambia solo la velatura, che parte da destra
   perché la card è larga il doppio e un velo in alto a sinistra come le
   altre lascerebbe metà scheda spenta. Niente tinta 1-4: non deve leggersi
   come il doppione della card che le sta sotto. */
.ch-kpi--lead::before {
  background: radial-gradient(110% 170% at 92% 0%, color-mix(in srgb, var(--ch-1) 17%, transparent), transparent 64%);
}
.dark .ch-kpi--lead::before {
  background: radial-gradient(110% 170% at 92% 0%, color-mix(in srgb, var(--ch-1) 13%, transparent), transparent 64%);
}
/* Resta il numero-guida della pagina: nella card larga tiene la taglia da
   protagonista, non quella delle quattro tile. La regola vince comunque sul
   `@media (min-width: 768px)` di .ch-kpi-value, che ha specificità più bassa.
   (La card esiste solo sotto lg: da lì in su il numero torna nell'hero.) */
.ch-kpi--lead .ch-kpi-value { font-size: 4rem; line-height: 1; }

/* Numero-guida: uno solo per pagina */
.ch-hero-value { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ch-ink); }
@media (min-width: 768px) { .ch-hero-value { font-size: 3.75rem; } }

/* Velature — le stesse di stats-cards.css, per non introdurre un secondo linguaggio */
.ch-tint-1::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-1) 16%, transparent), transparent 65%); }
.ch-tint-2::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-2) 14%, transparent), transparent 65%); }
.ch-tint-3::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-3) 16%, transparent), transparent 65%); }
.ch-tint-4::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-4) 16%, transparent), transparent 65%); }
.dark .ch-tint-1::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-1) 12%, transparent), transparent 65%); }
.dark .ch-tint-2::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-2) 10%, transparent), transparent 65%); }
.dark .ch-tint-3::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-3) 12%, transparent), transparent 65%); }
.dark .ch-tint-4::before { background: radial-gradient(130% 105% at 18% -8%, color-mix(in srgb, var(--ch-4) 12%, transparent), transparent 65%); }

/* ============================================================
   Meter — barra singola con soglia (riempimento delle edizioni).
   Il binario è uno step più chiaro della STESSA rampa del riempimento:
   così lo stato si legge lungo tutta la barra, non solo nella parte piena.
   ============================================================ */
.ch-meter-row { display: flex; align-items: center; gap: .85rem; padding: .6rem 0; }
.ch-meter-row + .ch-meter-row { border-top: 1px solid var(--ch-grid); }
.ch-meter-main { min-width: 0; flex: 1; }
.ch-meter-name { font-size: .82rem; font-weight: 600; color: var(--ch-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-meter-meta { margin-top: .15rem; font-size: .72rem; color: var(--ch-muted); }
.ch-meter-track { position: relative; height: .5rem; margin-top: .45rem; border-radius: 9999px; background: var(--ch-s1); opacity: .95; overflow: hidden; }
.dark .ch-meter-track { background: var(--ch-track); }
.ch-meter-fill { height: 100%; border-radius: 9999px; background: var(--ch-s4); width: 0; transition: width .8s cubic-bezier(.22, 1, .36, 1); }
.ch-meter-fill[data-state="full"] { background: #0d9488; }
.ch-meter-val { flex-shrink: 0; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ch-ink); }

/* ============================================================
   Badge di stato — colore + icona + parola, mai colore da solo
   ============================================================ */
.ch-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem; border-radius: 9999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid currentColor;
}
.ch-badge--good  { color: #0f766e; background: rgba(13, 148, 136, .09); }
.ch-badge--warn  { color: #b45309; background: rgba(217, 119, 6, .09); }
.ch-badge--muted { color: var(--ch-muted); background: var(--ch-track); border-color: var(--ch-grid); }
.dark .ch-badge--good { color: #5eead4; background: rgba(13, 148, 136, .14); }
.dark .ch-badge--warn { color: #fcd34d; background: rgba(217, 119, 6, .16); }

/* ============================================================
   Testi dentro l'SVG — sempre token di inchiostro, mai il colore serie
   ============================================================ */
.ch-ax   { font-size: 11px; fill: var(--ch-muted); }
.ch-ax--v { font-variant-numeric: tabular-nums; }
.ch-lbl  { font-size: 11.5px; font-weight: 600; fill: var(--ch-ink-2); }
.ch-val  { font-size: 11.5px; font-weight: 700; fill: var(--ch-ink); font-variant-numeric: tabular-nums; }

/* ============================================================
   Animazione d'ingresso: una sola tendina di clip per grafico.
   Scala il rettangolo di clip, non i segni → nessuna deformazione
   dei raggi degli angoli durante la corsa.
   ============================================================ */
.ch-reveal { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.ch-reveal--y { transform: scaleY(0); transform-origin: bottom center; }
.ch-in .ch-reveal { transition: transform 1s cubic-bezier(.22, 1, .36, 1); transform: scale(1); }
.ch-fade { opacity: 0; transform: scale(.97); transform-box: fill-box; transform-origin: center; }
.ch-in .ch-fade { transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .ch-reveal, .ch-in .ch-reveal { transition: none; transform: scale(1); }
  .ch-fade, .ch-in .ch-fade { transition: none; opacity: 1; transform: none; }
  .ch-meter-fill { transition: none; }
}

/* ============================================================
   Stampa e forced-colors: il colore non è più un canale affidabile,
   restano tabella e etichette.
   ============================================================ */
@media print {
  .ch-card { break-inside: avoid; border-color: #ccc; background: #fff; }
  .ch-table { display: block; }
  .ch-table > summary { display: none; }
  .ch-table-wrap { max-height: none; }
}
@media (forced-colors: active) {
  .ch-card, .ch-kpi { border: 1px solid CanvasText; background: Canvas; }
  .ch-tip { border: 1px solid CanvasText; background: Canvas; }
}