/* ============================================================
   stats.css — Styles du panneau statistiques — Epsilon 05
   ============================================================ */

.btn-stats {
  background: #2d7a4f;
  border: none;
  border-radius: 14px;
  padding: 10px 28px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-stats.stats-btn-open { background: #1a4a2e; }
.btn-stats:active { background: #1a4a2e; }

/* Panneau principal */
#statsPanel {
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid #e8d8a0;
  margin: 6px 0 10px;
  overflow: hidden;
}

/* Onglets */
.stats-tabs {
  display: flex;
  background: #f0e6c8;
  padding: 4px;
  gap: 2px;
}
.stats-tab {
  flex: 1;
  text-align: center;
  padding: 7px 2px;
  border-radius: 9px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  color: #777;
  border: none;
  background: transparent;
  font-family: inherit;
  touch-action: manipulation;
  transition: all .18s;
}
.stats-tab:hover { color: #2d7a4f; }
.stats-tab.active {
  background: #fff;
  color: #1a4a2e;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Contenu — pas de padding latéral pour aligner avec les onglets */
.stats-content {
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 4px;
}

/* Pastilles de score */
.stats-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.sdt-untried { background: #b0aca4; }
.sdt-hard    { background: #b91c1c; }
.sdt-work    { background: #d97706; }
.sdt-start   { background: #ca8a04; }
.sdt-good    { background: #16a34a; }
.sdt-master  { background: #15803d; }

/* Score coloré */
.stats-row-score, .stats-verb-score, .stats-group-score {
  font-size: .72rem;
  font-weight: 700;
  text-align: right;
  min-width: 28px;
}
.stats-row-score.sdt-untried,
.stats-verb-score.sdt-untried,
.stats-group-score.sdt-untried { color: #b0aca4; }
.stats-row-score.sdt-hard,
.stats-verb-score.sdt-hard,
.stats-group-score.sdt-hard   { color: #b91c1c; }
.stats-row-score.sdt-work,
.stats-verb-score.sdt-work,
.stats-group-score.sdt-work   { color: #d97706; }
.stats-row-score.sdt-start,
.stats-verb-score.sdt-start,
.stats-group-score.sdt-start  { color: #ca8a04; }
.stats-row-score.sdt-good,
.stats-verb-score.sdt-good,
.stats-group-score.sdt-good   { color: #16a34a; }
.stats-row-score.sdt-master,
.stats-verb-score.sdt-master,
.stats-group-score.sdt-master { color: #15803d; }

/* ── Onglet Verbes — Accordéon ── */
.stats-verb-groups { display: flex; flex-direction: column; gap: 0; }

.stats-group { border-bottom: 1px solid #f0e6c8; }
.stats-group:last-child { border-bottom: none; }

/* En-tête de groupe — bouton cliquable pleine largeur */
.stats-group-header {
  display: grid;
  grid-template-columns: 18px 14px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #fdf6e3;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  transition: background .15s;
}
.stats-group-header:hover { background: #f5eed5; }
.stats-group-arrow {
  font-size: .7rem;
  color: #888;
  width: 12px;
}
.stats-group-label {
  font-size: .83rem;
  font-weight: 600;
  color: #1a4a2e;
}
.stats-group-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-group-count {
  font-size: .7rem;
  color: #aaa;
  font-weight: 400;
}

/* Résumé réguliers (ouvert mais sans détail) */
.stats-reg-summary {
  padding: 6px 12px 8px 50px;
  font-size: .75rem;
  color: #888;
  border-top: 1px solid #f0e6c8;
  background: #fff;
}

/* Lignes de verbes */
.stats-verb-rows {
  padding: 2px 0 6px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #f0e6c8;
}
.stats-verb-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 38px;
  border-bottom: 1px solid rgba(240,230,200,.5);
}
.stats-verb-row:last-child { border-bottom: none; }
.stats-verb-row.untried { opacity: .4; }
.stats-verb-name { min-width: 0; }
.stats-verb-sub {
  display: block;
  font-size: .67rem;
  color: #aaa;
  font-style: normal;
}

/* ── Onglets Temps & Pronoms ── */
.stats-big-rows { display: flex; flex-direction: column; }
.stats-big-row {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0e6c8;
  font-size: .88rem;
}
.stats-big-row:last-child { border-bottom: none; }
.stats-big-row.untried { opacity: .4; }
.stats-row-label { font-weight: 500; min-width: 0; }
.stats-row-right { font-size: .73rem; color: #999; text-align: right; white-space: nowrap; }

/* ── Onglet Erreurs ── */
.stats-no-errors {
  text-align: center;
  padding: 24px 12px;
  font-size: .88rem;
  color: #999;
}
.stats-error-list { display: flex; flex-direction: column; }
.stats-error-row {
  display: grid;
  grid-template-columns: 38px 1fr 1fr;
  align-items: start;
  gap: 4px 8px;
  padding: 6px 12px;
  border-bottom: 1px solid #f0e6c8;
}
.stats-error-row:last-child { border-bottom: none; }
.err-meta {
  display: flex;
  flex-direction: column;
  font-size: .67rem;
  color: #aaa;
  line-height: 1.4;
}
.err-context { font-size: .78rem; }
.err-verb    { font-weight: 700; color: #1a4a2e; }
.err-pron    { color: #aaa; font-size: .7rem; }
.err-tense   { color: #aaa; font-size: .67rem; font-style: italic; }
.err-answers { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.err-given   { color: #b91c1c; text-decoration: line-through; font-size: .78rem; }
.err-correct { color: #15803d; font-weight: 700; font-size: .82rem; }

/* ── Légende ── */
.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 7px 12px;
  font-size: .68rem;
  color: #999;
  border-top: 1.5px solid #e8d8a0;
  background: #fdf6e3;
}
.stats-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ── Footer reset ── */
.stats-footer {
  padding: 6px 12px 8px;
  border-top: 1px solid #e8d8a0;
  text-align: right;
  background: #fdf6e3;
}
.stats-reset-btn {
  font-size: .68rem;
  background: none;
  border: 1px solid rgba(185,28,28,.35);
  color: #b91c1c;
  border-radius: 8px;
  padding: 3px 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.stats-reset-btn:active { background: #b91c1c; color: #fff; }

/* ── Onglet ? (aide scoring) ── */
.stats-help {
  padding: 12px 16px 8px;
}
.stats-help-title {
  font-size: .88rem;
  font-weight: 700;
  color: #1a4a2e;
  margin: 0 0 10px;
}
.stats-help-intro {
  font-size: .78rem;
  color: #555;
  margin: 0 0 6px;
}
.stats-help-points {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stats-help-points li {
  font-size: .82rem;
  font-weight: 600;
}
.stats-help-points li.correct { color: #15803d; }
.stats-help-points li.error   { color: #b91c1c; }
.stats-help-clamp {
  font-size: .72rem;
  color: #999;
  margin: 0 0 12px;
  font-style: italic;
}
.stats-help-scale-title {
  font-size: .78rem;
  font-weight: 700;
  color: #444;
  margin: 0 0 6px;
}
.stats-help-scale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stats-help-scale li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: #444;
}

/* Traduction localisée du verbe */
.stats-verb-tr {
  font-size: .7rem;
  color: #999;
  font-style: normal;
  margin-left: 4px;
}