/* ============================================================
   Charts — BarChart, DonutChart, LineChart (Components/Charts)
   Nessuna libreria esterna: SVG/CSS puri, animate al mount (si
   rigiocano ogni volta che il componente viene ricreato — es.
   cambio tab o periodo nella pagina Statistiche).
   ============================================================ */

.chart-empty {
  padding: 32px 0;
  text-align: center;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

/* ── BarChart ─────────────────────────────────────────────── */
.chart-bars { display: flex; flex-direction: column; gap: 10px; }

.chart-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: 7px;
  transition: background-color .18s ease-out;
}

.chart-bar-row:hover {
  background: hsl(var(--muted) / 0.55);
}

.chart-bar-label {
  font-size: 12px;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s ease-out, transform .18s ease-out;
  transform-origin: left center;
}

.chart-bar-row:hover .chart-bar-label {
  font-weight: 600;
  transform: translateX(2px);
}

.chart-bar-track {
  height: 10px;
  border-radius: 999px;
  background: hsl(var(--muted) / 0.5);
  transition: box-shadow .18s ease-out;
}

.chart-bar-row:hover .chart-bar-track {
  box-shadow: inset 0 0 0 1px hsl(var(--border));
}

.chart-bar-fill {
  height: 100%;
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: chartBarGrow .65s cubic-bezier(.22, .9, .3, 1) forwards;
  transition: filter .18s ease-out, transform .18s ease-out;
}

@keyframes chartBarGrow {
  to { transform: scaleX(1); }
}

.chart-bar-row:hover .chart-bar-fill {
  filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 5px hsl(var(--foreground) / .22));
}

.chart-bar-value {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--foreground));
  min-width: 40px;
  text-align: right;
  display: inline-block;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.chart-bar-row:hover .chart-bar-value {
  transform: scale(1.12);
}

/* ── DonutChart ───────────────────────────────────────────── */
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.donut-chart {
  position: relative;
  /* width/height/--donut-scale impostati inline dal parametro Size del componente */
  flex-shrink: 0;
}

.donut-svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: donutSpinIn .7s cubic-bezier(.3, 1.4, .4, 1);
}

.donut-segment {
  transition: stroke-width .2s cubic-bezier(.34, 1.56, .64, 1), filter .2s ease-out;
  cursor: default;
  /* stroke-dasharray fa sì che i segmenti si sovrappongano tutti sulla stessa geometria di
     cerchio — l'hit-test SVG dello stroke non sempre rispetta il dasharray in ogni browser,
     quindi niente ":not(:hover)" tra loro (rischia di "spegnere" segmenti a caso): solo il
     segmento realmente sotto al puntatore reagisce, gli altri restano sempre alla loro opacità piena. */
}

.donut-segment:hover {
  stroke-width: 17;
  filter: brightness(1.12) drop-shadow(0 2px 5px hsl(var(--foreground) / .28));
}

/* ── Donut — wedge invisibile (hit area precisa) + tooltip ─── */
.donut-wedge {
  position: absolute;
  inset: 0;
  cursor: default;
  background: transparent;
  /* clip-path passa dalla custom property, mai impostato inline direttamente sulla proprietà —
     altrimenti l'inline vincerebbe sempre e la regola :hover sotto non potrebbe mai sovrascriverlo. */
  clip-path: var(--clip-normal);
  transition: clip-path .22s cubic-bezier(.34, 1.56, .64, 1), background-color .18s ease-out, filter .18s ease-out;
}

/* Il wedge invisibile sta sopra le circle SVG per intercettare l'hover con precisione — quindi
   è lui, non più l'arco sotto, a dare il feedback visivo (tinta colorata + fetta che si allarga). */
.donut-wedge:hover {
  clip-path: var(--clip-hover);
  background: color-mix(in srgb, var(--wedge-color, hsl(var(--foreground))) 28%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wedge-color, hsl(var(--foreground))) 55%, transparent));
}

.donut-tip {
  /* posizione statica (left/top/transform di ancoraggio al quadrante) impostata inline da
     TipPosition() in C# — qui sotto solo l'aspetto e l'animazione di comparsa, su un div
     figlio, per non litigare con quel transform inline (l'inline vince sempre sulla classe). */
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.donut-tip-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 128px;
  padding: 9px 12px;
  border-radius: calc(var(--radius) + 2px);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .28), 0 4px 14px -6px rgba(0, 0, 0, .16);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .16s ease-out, transform .16s cubic-bezier(.34, 1.56, .64, 1);
  white-space: nowrap;
}

/* .donut-tip è fratello (non figlio) di .donut-wedge apposta: il clip-path a forma di fetta del
   wedge ritaglierebbe anche il tooltip se fosse annidato dentro, rendendolo invisibile. */
.donut-wedge:hover + .donut-tip .donut-tip-inner {
  opacity: 1;
  transform: scale(1);
}

.donut-tip-swatch {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  flex-shrink: 0;
}

.donut-tip-label { font-size: 12px; font-weight: 600; }
.donut-tip-value { font-size: 12.5px; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); margin-top: 1px; }
.donut-tip-pct { color: hsl(var(--muted-foreground)); }

@keyframes donutSpinIn {
  from { opacity: 0; transform: rotate(-70deg) scale(.55); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: chartFadeIn .5s ease-out .3s both;
}

.donut-total { font-size: calc(19px * var(--donut-scale, 1)); font-weight: 700; letter-spacing: -.01em; }
.donut-total-label { font-size: calc(10px * var(--donut-scale, 1)); color: hsl(var(--muted-foreground)); margin-top: 1px; }

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 160px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  animation: chartSlideIn .4s ease-out both;
  transition: background-color .16s ease-out, transform .16s ease-out;
}

.donut-legend-item:hover {
  background: hsl(var(--muted) / .55);
  transform: translateX(2px);
}

.donut-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1);
}

.donut-legend-item:hover .donut-legend-dot { transform: scale(1.35); }

.donut-legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--foreground)); transition: font-weight .16s; }
.donut-legend-item:hover .donut-legend-label { font-weight: 600; }
.donut-legend-value { font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); transition: color .16s; }
.donut-legend-item:hover .donut-legend-value { color: hsl(var(--foreground)); }

@keyframes chartSlideIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes chartFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── LineChart ────────────────────────────────────────────── */
.line-chart { display: flex; flex-direction: column; gap: 8px; }

.line-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; }
.line-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.line-chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; }

.line-chart-svg { width: 100%; height: 220px; overflow: visible; }

.line-chart-grid { stroke: hsl(var(--border)); stroke-width: 1; }

.line-chart-series {
  transition: opacity .2s ease-out;
}

.line-chart-svg:hover .line-chart-series:not(:hover) {
  opacity: .3;
}

.line-chart-path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: lineDraw 1.1s cubic-bezier(.22, .9, .3, 1) forwards;
  transition: stroke-width .18s ease-out, filter .18s ease-out;
}

.line-chart-series:hover .line-chart-path {
  stroke-width: 3.5;
  filter: drop-shadow(0 2px 6px hsl(var(--foreground) / .3));
}

@keyframes lineDraw {
  to { stroke-dashoffset: 0; }
}

.line-chart-area {
  animation: chartFadeIn .8s ease-out .3s both;
  transition: opacity .18s ease-out;
}

.line-chart-series:hover .line-chart-area {
  opacity: .22;
}

.line-chart-checkpoint { cursor: default; }

.line-chart-dot-halo {
  opacity: 0;
  pointer-events: none;
  animation: chartDotPop .35s ease-out forwards;
  animation-delay: calc(var(--dot-i, 0) * 45ms + .46s);
  transition: r .2s cubic-bezier(.34, 1.56, .64, 1);
}

.line-chart-dot {
  opacity: 0;
  animation: chartDotPop .35s ease-out forwards;
  animation-delay: calc(var(--dot-i, 0) * 45ms + .5s);
  transition: r .2s cubic-bezier(.34, 1.56, .64, 1), filter .18s ease-out;
}

.line-chart-checkpoint:hover .line-chart-dot {
  r: 5;
  filter: drop-shadow(0 0 5px hsl(var(--foreground) / .35));
}

.line-chart-checkpoint:hover .line-chart-dot-halo {
  r: 9;
}

/* ── LineChart — colonna hover per mese + tooltip di confronto ── */
.line-chart-plot {
  position: relative;
}

.line-chart-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: default;
  --anchor-pct: 50%;
}

.line-chart-hit::before {
  content: "";
  position: absolute;
  left: var(--anchor-pct);
  top: 4%;
  bottom: 16%;
  width: 1px;
  background: hsl(var(--border));
  opacity: 0;
  transition: opacity .15s ease-out;
}

.line-chart-hit:hover::before {
  opacity: 1;
}

.line-chart-tip {
  position: absolute;
  left: var(--anchor-pct);
  top: 2px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
  padding: 9px 12px;
  border-radius: calc(var(--radius) + 2px);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .28), 0 4px 14px -6px rgba(0, 0, 0, .16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px) scale(.94);
  transition: opacity .16s ease-out, transform .16s cubic-bezier(.34, 1.56, .64, 1);
}

.line-chart-hit:hover .line-chart-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.line-chart-tip-start { left: 0; transform: translateX(0) translateY(-4px) scale(.94); }
.line-chart-hit:hover .line-chart-tip-start { transform: translateX(0) translateY(0) scale(1); }

.line-chart-tip-end { left: auto; right: 0; transform: translateX(0) translateY(-4px) scale(.94); }
.line-chart-hit:hover .line-chart-tip-end { transform: translateX(0) translateY(0) scale(1); }

.line-chart-tip-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1px;
}

.line-chart-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  white-space: nowrap;
}

.line-chart-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.line-chart-tip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.line-chart-tip-value { font-weight: 700; font-variant-numeric: tabular-nums; }

@keyframes chartDotPop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

.line-chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: hsl(var(--muted-foreground));
  padding: 0 2px;
}