/* ============================================================
   CRESSMA — stats/stats.css
   Styles du panel Statistiques Club
   Variables CSS définies dans app.css (--aqua, --teal, --cyan,
   --text, --text-muted, --surface2, --radius-lg)
   Chargé dans index.php après app.css
   ============================================================ */

/* STATS TABLE */
.stats-kpis{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.stats-kpi{flex:1;min-width:130px;background:rgba(12,30,62,.80);
           border:1px solid rgba(255,255,255,.18);border-radius:12px;
           padding:1rem 1.25rem;text-align:center;
           box-shadow:0 2px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07)}
.stats-kpi-val{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.04em;color:var(--aqua);line-height:1}
.stats-kpi-lbl{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.stats-table-wrap{background:rgba(12,30,62,.80);
                  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
                  overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.stats-table{width:100%;border-collapse:collapse;font-size:.85rem;white-space:nowrap}
.stats-table th{background:rgba(7,24,48,.9);padding:11px 14px;font-size:.7rem;text-transform:uppercase;
                letter-spacing:.1em;color:#b8ccdd;font-weight:600;text-align:left}
.stats-table th.sortable{cursor:pointer;user-select:none}
.stats-table th.sortable:hover{color:var(--aqua)}
.stats-table td{padding:10px 14px;border-top:1px solid rgba(255,255,255,.04)}
.stats-table tr:hover td{background:var(--surface2)}
.stats-num{font-family:'DM Mono',monospace;font-size:.9rem;font-weight:600;text-align:center}
.stats-bar-mini{display:flex;align-items:center;gap:6px}
.stats-bar-track{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.stats-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--cyan))}

/* STATS GLOBALES — layout */
.stats-period-badge{display:inline-block;font-size:.75rem;color:var(--text-muted);
                    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
                    border-radius:20px;padding:3px 12px;margin-bottom:0}
.stats-section-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
                     color:var(--aqua);font-weight:600;margin-bottom:.875rem}
.stats-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:640px){.stats-charts-row{grid-template-columns:1fr}}
.stats-chart-card{background:rgba(12,30,62,.80);border:1px solid rgba(255,255,255,.12);
                  border-radius:var(--radius-lg);padding:1.25rem;
                  box-shadow:0 2px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)}

/* STATS — Répartition niveaux : 2 colonnes effectif / sorties */
.stats-niv-split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:560px){.stats-niv-split{grid-template-columns:1fr;gap:1.1rem}}
.stats-niv-col{min-width:0}
.stats-niv-subtitle{font-size:.72rem;font-weight:700;letter-spacing:.03em;
                    text-transform:uppercase;color:var(--text);
                    padding-bottom:.5rem;margin-bottom:.6rem;
                    border-bottom:1px solid rgba(255,255,255,.10);width:100%}
.stats-niv-subtitle span{font-weight:500;text-transform:none;letter-spacing:0;
                         color:var(--text-muted);font-size:.68rem}

/* STATS — Répartition niveaux */
.stats-niv-bar-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:default}
.stats-niv-label{font-size:.72rem;font-weight:600;color:var(--text);
                 min-width:72px;white-space:nowrap;flex-shrink:0}
.stats-niv-bar-track{flex:1;height:8px;background:rgba(255,255,255,.06);
                     border-radius:4px;overflow:hidden;min-width:0}
.stats-niv-bar-fill{height:100%;border-radius:4px;
                    transition:width .5s cubic-bezier(.4,0,.2,1)}
.stats-niv-pct{font-family:'DM Mono',monospace;font-size:.72rem;
               min-width:34px;text-align:right;flex-shrink:0}
.stats-niv-count{font-size:.7rem;color:var(--text-muted);
                 min-width:28px;text-align:right;flex-shrink:0}
/* Version compacte dans les 2 colonnes (place réduite) */
.stats-niv-split .stats-niv-label{min-width:58px;font-size:.68rem}
.stats-niv-split .stats-niv-pct{min-width:30px;font-size:.68rem}
.stats-niv-split .stats-niv-count{min-width:22px;font-size:.66rem}
.stats-niv-split .stats-niv-bar-row{gap:.4rem}

/* STATS — Évolution mensuelle */
.stats-evo-chart{display:flex;align-items:flex-end;gap:3px;
                 overflow:visible}
.stats-evo-bar-wrap{display:flex;flex-direction:column;align-items:center;
                    flex:1;min-width:0;cursor:default}
.stats-evo-val{font-size:.6rem;font-family:'DM Mono',monospace;
               color:var(--aqua);margin-bottom:2px;line-height:1}
.stats-evo-bar{width:100%;max-width:20px;min-width:6px;border-radius:3px 3px 0 0;
               background:linear-gradient(180deg,var(--cyan),var(--teal));
               flex-shrink:0;transition:height .4s ease;min-height:4px}
.stats-evo-label{font-size:.58rem;color:var(--text-muted);margin-top:3px;
                 white-space:nowrap;line-height:1;text-align:center;
                 overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:480px){
  .stats-evo-chart{gap:2px}
  .stats-evo-val{font-size:.55rem}
  .stats-evo-label{font-size:.5rem}
}

/* STATS — Classements (top membres + encadrants) */
.stats-rank-row{display:flex;align-items:center;gap:.5rem;
                margin-bottom:.5rem;cursor:default}
.stats-rank-row:last-child{margin-bottom:0}
.stats-rank-num{font-size:.7rem;color:var(--text-muted);
                min-width:22px;text-align:center;flex-shrink:0}
.stats-rank-name{font-size:.8rem;color:var(--text);flex:1;
                 min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats-rank-bar-track{width:56px;height:6px;background:rgba(255,255,255,.06);
                      border-radius:3px;overflow:hidden;flex-shrink:0}
.stats-rank-bar-fill{height:100%;border-radius:3px;
                     background:linear-gradient(90deg,var(--teal),var(--cyan));
                     transition:width .4s ease}
.stats-rank-val{font-family:'DM Mono',monospace;font-size:.75rem;
                color:var(--aqua);min-width:24px;text-align:right;flex-shrink:0}
.stats-role-badge{font-size:.6rem;font-weight:700;letter-spacing:.06em;
                  background:rgba(251,191,36,.12);color:#fbbf24;
                  border:1px solid rgba(251,191,36,.25);border-radius:4px;
                  padding:1px 5px;flex-shrink:0;white-space:nowrap}

/* STATS — Carburant : barres par sortie */
.stats-carb-chart{display:flex;flex-direction:column;gap:.4rem;
                  max-height:360px;overflow-y:auto;padding-right:.25rem}
.stats-carb-bar-row{display:flex;align-items:center;gap:.5rem;cursor:default}
.stats-carb-lbl{font-size:.72rem;color:var(--text-muted);width:3.8rem;
                flex-shrink:0;line-height:1.25;text-align:right}
.stats-carb-track{flex:1;height:8px;background:rgba(255,255,255,.06);
                  border-radius:4px;overflow:hidden}
.stats-carb-fill{height:100%;border-radius:4px;
                 transition:width .4s ease}
.stats-carb-val{font-size:.78rem;font-weight:700;width:4.8rem;
                flex-shrink:0;white-space:nowrap}

/* STATS — Séparateur section membres */
.stats-separator{margin-top:1.5rem;padding-top:1.5rem;
                 border-top:1px solid rgba(255,255,255,.06)}

/* STATS MEMBRES — Cartes mobile (≤640px) */
.stats-members-cards{display:none}
.stats-member-card{background:rgba(12,30,62,.80);border:1px solid rgba(255,255,255,.18);
                   border-radius:10px;padding:.75rem;margin-bottom:.5rem}
.stats-member-card:last-child{margin-bottom:0}
.stats-mc-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.stats-mc-name{flex:1;font-size:.88rem;font-weight:600;color:var(--text);
               min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats-mc-nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem;margin-bottom:.5rem}
.stats-mc-num{background:rgba(255,255,255,.04);border-radius:7px;
              padding:.35rem .4rem;text-align:center}
.stats-mc-num-val{font-family:'DM Mono',monospace;font-size:.95rem;font-weight:700;line-height:1}
.stats-mc-num-lbl{font-size:.58rem;color:var(--text-muted);text-transform:uppercase;
                  letter-spacing:.06em;margin-top:2px}
.stats-mc-bar{display:flex;align-items:center;gap:.5rem}
.stats-mc-bar-track{flex:1;height:5px;background:rgba(255,255,255,.08);
                    border-radius:3px;overflow:hidden}
.stats-mc-bar-fill{height:100%;border-radius:3px;
                   background:linear-gradient(90deg,var(--teal),var(--cyan))}
.stats-mc-pct{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--aqua);
              min-width:32px;text-align:right;flex-shrink:0}

@media(max-width:640px){
  .stats-table-wrap{display:none}
  .stats-members-cards{display:block}
}
/* ── Sélecteur de métrique — évolution mensuelle carburant ── */
/* Boutons tactiles (pas de <select> natif : rendu iOS/Safari/Edge instable) */
.stats-carb-metric-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.25rem}
.stats-carb-metric-btn{appearance:none;-webkit-appearance:none;cursor:pointer;
  font-size:.72rem;font-weight:600;line-height:1;padding:.4rem .7rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);color:var(--text-muted);
  transition:background .15s,color .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  min-height:32px}
.stats-carb-metric-btn:hover{background:rgba(255,255,255,.09);color:var(--text)}
.stats-carb-metric-btn.active{background:rgba(244,114,182,.18);
  border-color:rgba(244,114,182,.55);color:#f9a8d4}
/* Mois sans donnée pour la métrique courante (ex. €/plongeur sans plongee_id) */
.stats-evo-empty{opacity:.5}
.stats-evo-empty .stats-evo-bar{min-height:0}
@media(max-width:640px){
  .stats-carb-metric-tabs{gap:.3rem}
  .stats-carb-metric-btn{font-size:.68rem;padding:.4rem .6rem;flex:1;min-width:64px;text-align:center}
}
/* ── Filtre période / saison (12 mois glissants ou saison club) ── */
/* <select> natif volontairement peu stylé : le rendu du menu déroulant   */
/* reste géré par l'OS (fiable Android Chrome / iOS Safari / Edge mobile). */
/* On n'habille que le contrôle fermé, pas la liste ouverte.               */
.stats-saison-bar{display:flex;align-items:center;gap:.55rem;
  flex-wrap:wrap;margin-bottom:1rem}
.stats-saison-label{font-size:.75rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em}
.stats-saison-select{
  font-size:.82rem;font-weight:600;line-height:1.2;
  padding:.45rem 2rem .45rem .8rem;min-height:38px;
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  /* Flèche custom : appearance none seulement sur le contrôle fermé */
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
  max-width:100%}
.stats-saison-select:focus{outline:none;
  border-color:var(--aqua,#22d3ee);
  box-shadow:0 0 0 2px rgba(34,211,238,.25)}
/* Les <option> héritent des couleurs système du menu natif : on force */
/* un fond lisible sur les OS qui respectent la couleur des options.    */
.stats-saison-select option{color:#0b1e3e;background:#fff}
/* Thème clair : contrôle adapté */
body.theme-clair .stats-saison-select{
  color:var(--text);
  background-color:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.15)}
body.theme-rose .stats-saison-select{
  background-color:rgba(255,255,255,.06)}
@media(max-width:640px){
  .stats-saison-bar{gap:.4rem}
  .stats-saison-select{flex:1;min-width:0}
}