/* estatisticas (teams) — versão compacta + accordion centralizado (coerente com pos-match)
   - sem barras
   - valor em badge com cor indicando qualidade
   - headers do accordion menores e centralizados
*/

:root{
  --pm-surface: rgba(30,30,30,0.95);
  --pm-surface-2: rgba(20,20,20,0.95);
  --pm-border: rgba(255,255,255,0.12);
  --pm-border-soft: rgba(255,255,255,0.08);
  --pm-text: #f0f0f0;
  --pm-muted: #a9a9a9;
  --pm-accent: #1f6feb;
  --pm-warning: #ff9800;
}

.stats-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

/* ===== Summary (chips) ===== */
.stats-summary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 14px;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  color: var(--pm-text);
  font-weight: 650;
  font-size: 0.95rem;

  border-radius: 0 !important;
}

.stats-summary .summary-pill{
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--pm-border);
  color: var(--pm-text);
  font-weight: 650;
  letter-spacing: 0.2px;
  border-radius: 0 !important;
}
.stats-summary .summary-sep{ color: var(--pm-muted); }

.stats-summary.aviso-limite{
  background: var(--pm-surface);
  border: 1px solid rgba(255,152,0,0.35);
  border-left: 4px solid var(--pm-warning);
  color: var(--pm-warning);
  border-radius: 0 !important;
}

/* ===== Accordion group ===== */
.accordion-group{
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  box-shadow: 0 0 20px rgba(0,0,0,0.35);
  overflow: hidden;
  border-radius: 0 !important;
}

/* Header compact + centralizado */
.accordion-toggle{
  width: 100%;
  padding: 10px 46px 10px 14px !important; /* reserva p/ seta */
  min-height: 44px;

  background: var(--pm-surface-2);
  color: var(--pm-text);
  border: none;

  display: flex;
  align-items: center;
  justify-content: center !important;

  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: center !important;

  font-weight: 750;
  letter-spacing: 0.06em !important;
  font-size: 0.92rem !important;
  text-transform: uppercase;

  position: relative;
  border-radius: 0 !important;
}

.accordion-toggle:hover{ background: rgba(20,20,20,1); }

.accordion-toggle .accordion-title{
  flex: 0 1 auto !important;
  text-align: center !important;
  margin: 0 auto;
  padding: 0 6px;
}

.accordion-toggle .arrow-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s ease, color 0.25s ease;
  font-size: 0.9rem;
  color: var(--pm-muted);
}

.accordion-toggle.active{
  background: rgba(31,111,235,0.10) !important;
  box-shadow: inset 4px 0 0 var(--pm-accent);
}

.accordion-toggle.active .arrow-icon{
  transform: translateY(-50%) rotate(180deg);
  color: var(--pm-text);
}

.accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  background: var(--pm-surface);
  padding: 0 16px;
  border-radius: 0 !important;
}

.accordion-content.open{
  max-height: 4000px;
  padding: 10px 16px 14px 16px;
}

/* ===== Lista de stats (sem barra) ===== */
.stats-table{
  width: 100%;
  border-collapse: collapse;
}
.stats-table td{ padding: 0; }

.stat{
  padding: 10px 10px;
  border-top: 1px solid var(--pm-border-soft);
}

/* zebra suave */
.stats-table tr:nth-child(even) .stat{
  background: rgba(255,255,255,0.02);
}

.stat-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.stat-name{
  font-weight: 520;
  font-size: 0.92rem;
  color: var(--pm-muted);
  margin: 0;
  min-width: 0;
}

.stat-badge{
  padding: 6px 10px;
  min-width: 92px;
  text-align: center;

  font-weight: 850;
  font-size: 0.92rem;
  color: var(--pm-text);
  font-variant-numeric: tabular-nums;

  background: rgba(255,255,255,0.04);
  border: 1px solid var(--pm-border);
  border-radius: 0 !important;

  white-space: nowrap;
}

.stat-absolute{
  margin-top: 6px;
  color: var(--pm-muted);
  font-size: 0.82rem;
}

/* Cores por qualidade (aplicadas no badge) */
.stat-badge.barra-cor-excelente { border-color: rgba(25,195,125,0.70); color: #19c37d; background: rgba(25,195,125,0.10); }
.stat-badge.barra-cor-muito-bom { border-color: rgba(76,175,80,0.70);  color: #4caf50; background: rgba(76,175,80,0.10); }
.stat-badge.barra-cor-bom       { border-color: rgba(139,195,74,0.70); color: #8bc34a; background: rgba(139,195,74,0.10); }
.stat-badge.barra-cor-regular   { border-color: rgba(255,193,7,0.75);  color: #ffc107; background: rgba(255,193,7,0.10); }
.stat-badge.barra-cor-ruim      { border-color: rgba(255,152,0,0.75);  color: #ff9800; background: rgba(255,152,0,0.10); }
.stat-badge.barra-cor-muito-ruim{ border-color: rgba(244,67,54,0.75);   color: #f44336; background: rgba(244,67,54,0.10); }
.stat-badge.barra-cor-neutro    { border-color: rgba(150,150,150,0.55); color: #d1d1d1; background: rgba(255,255,255,0.05); }

/* Alert (escopo do container) */
.stats-container .alert{
  background: var(--pm-surface) !important;
  color: var(--pm-text) !important;
  border: 1px solid var(--pm-border) !important;
  padding: 12px 14px !important;
  border-radius: 0 !important;
}
.stats-container .alert-danger{ border-color: rgba(244,67,54,0.35) !important; }
.center{ text-align: center; }

/* Mobile */
@media (max-width: 768px){
  .stats-summary{ padding: 10px 12px; font-size: 0.92rem; }
  .accordion-toggle{
    padding: 10px 42px 10px 12px !important;
    min-height: 42px;
    font-size: 0.90rem !important;
  }
  .accordion-toggle .arrow-icon{ right: 12px; }
  .accordion-content.open{ padding: 10px 12px 12px 12px; }

  .stat{ padding: 10px 8px; }
  .stat-row{ grid-template-columns: 1fr; gap: 6px; }
  .stat-badge{ min-width: 0; justify-self: start; }
}


/* ===== Fix seta do accordion (sem depender de FontAwesome/Bootstrap Icons) ===== */
/* Se o ícone não estiver carregando, desenhamos a setinha via CSS */
.stats-container .accordion-toggle .arrow-icon{
  display: none !important; /* evita “vazio” e dependência de fonte de ícones */
}

.stats-container .accordion-toggle::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,0.75);
  border-bottom: 2px solid rgba(255,255,255,0.75);
  transform: translateY(-50%) rotate(45deg); /* aponta para baixo */
  transition: transform 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
  opacity: 0.9;
  pointer-events: none;
}

.stats-container .accordion-toggle:hover::after{
  border-right-color: rgba(255,255,255,0.92);
  border-bottom-color: rgba(255,255,255,0.92);
}

/* aberto: seta para cima */
.stats-container .accordion-toggle.active::after{
  transform: translateY(-50%) rotate(-135deg);
  opacity: 1;
}

@media (max-width: 768px){
  .stats-container .accordion-toggle::after{
    right: 12px;
    width: 10px;
    height: 10px;
  }
}