/* ============================================================
   STATS CHARTS - grafice interactive/animate pt. modalul
   "Statistici detaliate" din Testare (biologie + chimie).
   Vezi stats-charts.js pentru randare; fisier CSS comun ambelor
   materii, ca sa ramana identic vizual pe cele 2 pagini.
   ============================================================ */

.stats-charts-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}
@media (max-width: 780px){
  .stats-charts-grid{ grid-template-columns: 1fr; }
}

.stats-chart-card{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px 16px;
  background: var(--surface-2);
  min-width: 0;
}

/* cardul Nex Coins e elementul central al paginii - pe toata latimea, mai
   mare, cu accent vizual, restul cardurilor raman detaliu secundar dedesubt */
.stats-chart-card--hero{
  grid-column: 1 / -1;
  padding: 28px 20px 26px;
  border-color: rgba(var(--cyan-rgb, 0,229,255), .35);
  background: linear-gradient(180deg, rgba(var(--cyan-rgb, 0,229,255), .06), var(--surface-2) 60%);
  text-align: center;
}
.stats-chart-title--hero{ font-size: 1.15rem; }
.stat-gauge-wrap--hero{ margin-top: 6px; }
.stat-gauge--hero{ width: 176px; height: 176px; }
.stat-gauge-value--hero{ font-size: 2.2rem; }

.stats-chart-title{
  font-weight: 700;
  font-family: var(--font-display);
  font-size: .92rem;
  margin-bottom: 2px;
}
.stats-chart-sub{
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ---- gauge (progres) ---- */
.stat-gauge-wrap{ display: flex; flex-direction: column; align-items: center; }
.stat-gauge{ position: relative; width: 128px; height: 128px; }
.stat-gauge-svg{ width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.stat-gauge-track{ fill: none; stroke: var(--border); stroke-width: 10; }
.stat-gauge-fill{
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1);
}
.stat-gauge-center{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.stat-gauge-value{ font-size: 1.6rem; font-weight: 800; font-family: var(--font-display); line-height: 1; color: var(--text); }
.stat-gauge-center .stat-gauge-sub{ font-size: .7rem; color: var(--muted); margin: 4px 0 0; }
.stat-gauge-breakdown{
  display: flex; gap: 16px; margin-top: 14px; font-size: .8rem; color: var(--text);
  flex-wrap: wrap; justify-content: center;
}
.stat-gauge-breakdown strong{ font-variant-numeric: tabular-nums; }

/* ---- randuri orizontale (defalcare cartonase pe nivel de auto-evaluare) ---- */
.stat-cartonase-rows{ display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.stat-cartonase-row{ display: flex; align-items: center; gap: 10px; }
.stat-cartonase-eticheta{ flex: 0 0 110px; font-size: .8rem; color: var(--text); }
.stat-cartonase-bar-track{ flex: 1 1 auto; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.stat-cartonase-bar-fill{ height: 100%; width: 0; border-radius: 999px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.stat-cartonase-n{ flex: 0 0 24px; text-align: right; font-size: .8rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- grafic cu bare (timp) ---- */
.stats-chart-card-wide{ grid-column: span 1; }
.stat-bars{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 108px;
  gap: 3px;
  padding-top: 22px;
}
.stat-bar-col{
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  position: relative;
}
.stat-bar{
  width: 100%;
  max-width: 20px;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--tint);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .15s ease;
  cursor: pointer;
}
.stat-bar.is-today{ box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--tint); }
.stat-bar-col:hover .stat-bar,
.stat-bar-col:focus-within .stat-bar{ filter: brightness(1.2); }
.stat-bar-label{ font-size: .6rem; color: var(--muted); }

.stat-bar-tooltip{
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px) scale(.92);
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: .72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.stat-bar-col:hover .stat-bar-tooltip,
.stat-bar-col:focus-within .stat-bar-tooltip{
  opacity: 1;
  transform: translate(-50%, -10px) scale(1);
}

/* ---- comutator "vezi ca tabel" (fallback de accesibilitate) ---- */
.stats-chart-table-toggle{
  background: none;
  border: none;
  color: var(--muted);
  font-size: .72rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
  margin-top: 12px;
}
.stats-chart-table-toggle:hover{ color: var(--text); }
.stats-chart-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .74rem;
}
.stats-chart-table th, .stats-chart-table td{
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.stats-chart-table th{ color: var(--muted); font-weight: 600; }

@media (max-width: 420px){
  .stat-bar-label{ display: none; }
}