/* ═══════════════════════════════════════════════════════════════════
   STATISTICS — css/modules/statistics.css
   ═══════════════════════════════════════════════════════════════════
   Academic performance statistics: subject/class comparison tables,
   grade distribution bars, and ranking lists. Distinct from
   css/modules/analytics.css (already built), which covers the
   broader dashboard-level analytics charts — this file is specifically
   the tabular/comparative academic stats views reached from the
   Academics hub. Accent stays academics violet since this is
   fundamentally an academics sub-view.
   ═══════════════════════════════════════════════════════════════════ */

.stats-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ── Comparison table (subject-by-class or class-by-term) ── */
.stats-compare-wrap {
  overflow-x: auto;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.07));
}

.stats-compare-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
}

.stats-compare-table th,
.stats-compare-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.06));
  font-size: 0.8rem;
  text-align: center;
}

.stats-compare-table thead th {
  background: rgba(139, 92, 246, 0.08);
  color: var(--card-text, #e2e8f0);
  font-weight: 700;
}

.stats-compare-table td.label-cell {
  text-align: left;
  font-weight: 600;
  color: var(--card-text, #e2e8f0);
}

.stats-compare-table td.best {
  color: var(--success);
  font-weight: 700;
}

.stats-compare-table td.worst {
  color: var(--danger);
  font-weight: 700;
}

/* Inline mini bar inside a table cell, showing relative average */
.stats-inline-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-inline-bar__track {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.stats-inline-bar__fill {
  height: 100%;
  border-radius: 99px;
  background: var(--academics-accent, #8b5cf6);
}

.stats-inline-bar__value {
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 32px;
  text-align: right;
}

/* ── Grade distribution ── */
.grade-distribution {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 180px;
  padding: 10px;
}

.grade-distribution__bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}

.grade-distribution__bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.grade-distribution__count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--card-text, #e2e8f0);
}

.grade-distribution__label {
  font-size: 0.68rem;
  color: var(--card-text-muted, #475569);
}

/* ── Ranking list ── */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.06));
}

.ranking-row__pos {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  color: var(--card-text-muted, #475569);
  flex-shrink: 0;
}

.ranking-row:nth-child(1) .ranking-row__pos {
  background: #f59e0b;
  color: #1e293b;
}

.ranking-row:nth-child(2) .ranking-row__pos {
  background: #94a3b8;
  color: #1e293b;
}

.ranking-row:nth-child(3) .ranking-row__pos {
  background: #b45309;
  color: var(--text-inverse, #f1f5f9);
}

.ranking-row__name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--card-text, #e2e8f0);
}

.ranking-row__score {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  color: var(--academics-accent, #8b5cf6);
}

/* ── Subject performance heatmap cell ── */
.heatmap-cell {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-inverse, #f1f5f9);
  margin: 0 auto;
}

/* ── Summary tiles row ── */
.stats-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stats-summary-tile {
  text-align: center;
  padding: 14px;
  border-radius: var(--radius, 10px);
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.07));
}

.stats-summary-tile__value {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--card-text, #e2e8f0);
}

.stats-summary-tile__label {
  font-size: 0.68rem;
  color: var(--card-text-muted, #475569);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .grade-distribution {
    height: 130px;
  }

  .stats-compare-table th,
  .stats-compare-table td {
    font-size: 0.7rem;
    padding: 6px 8px;
  }
}