/* =====================================================
   ZDVAL — /ranked (SP1 design refactor §4.2)
   Lavanda claro integral. Carrega DEPOIS de style.css.
   Override-first (sem remover blocos legados ainda).
   Legado usa !important em vários pontos → aqui também.
   ===================================================== */

/* ── 1. Fundo da página + tipografia ── */
/* !important necessário: style.css:27525 força #000 !important em [id^="page-"] */
#page-ranked {
  background: var(--zd-bg-page) !important;
  font-family: var(--zd-font);
  color: var(--zd-ink);
  min-height: calc(100vh - var(--topbar-height) - var(--horizontal-nav-height));
}
/* style.css:2431 dá padding:1rem em .page-container abaixo de 480px —
   sangra de volta até a borda pra não sobrar preto visível nas laterais. */
@media (max-width: 480px) {
  #page-ranked { margin: -1rem; }
}
#page-ranked .ranked-title-block h1,
#page-ranked .ranked-title-row,
#page-ranked .ranked-subtitle { color: var(--zd-ink); }
#page-ranked .ranked-subtitle { color: var(--zd-ink-2); }

/* ── 2. Card "Estatísticas Gerais" → branco ── */
#page-ranked .ia-gs-card {
  background: var(--zd-surface) !important;
  border: 1px solid var(--zd-line) !important;
  border-radius: var(--zd-r-xl) !important;
  box-shadow: var(--zd-sh-card) !important;
}
#page-ranked .ia-gs-card::before { display: none !important; }  /* some a linha vermelha */
#page-ranked .ia-gs-elo {
  background: var(--zd-bg-lavender) !important;
  border-bottom: 1px solid var(--zd-line) !important;
}
#page-ranked .ia-gs-elo-label { -webkit-text-fill-color: var(--zd-ink); color: var(--zd-ink); }
#page-ranked .ia-gs-elo-rr { color: var(--zd-accent-deep) !important; }
#page-ranked .ia-gs-elo-wr { border-left-color: var(--zd-line) !important; }
#page-ranked .ia-gs-elo-wr-sub { color: var(--zd-ink-3) !important; }
#page-ranked .ia-gs-top3-label { border-right-color: var(--zd-line) !important; }
#page-ranked .ia-gs-top3-label i { color: var(--zd-accent) !important; }
#page-ranked .ia-gs-top3-label span { color: var(--zd-ink-3) !important; }

/* Métricas: cor só onde carrega significado. Some o arco-íris. */
#page-ranked .ia-gs-metric-value,
#page-ranked .ia-gs-metric-value.stat-high,
#page-ranked .ia-gs-metric-value.stat-med,
#page-ranked .ia-gs-metric-value.stat-low { color: var(--zd-ink); }
#page-ranked .ia-gs-metric-fk .ia-gs-metric-value { color: var(--zd-positive); }
#page-ranked .ia-gs-metric-fd .ia-gs-metric-value { color: var(--zd-danger); }
#page-ranked .ia-gs-metric-label { color: var(--zd-ink-3); }
#page-ranked .ia-gs-metric-sub { color: var(--zd-ink-3); }
#page-ranked .ia-gs-metric::after { background: var(--zd-line) !important; }

/* Top3 agentes: fundo do bg de mapa mais suave sobre claro */
#page-ranked .ia-gs-top3-bg { opacity: 0.14; }

/* ── 3. Abas (pílula clara, ativa branca com sombra) ── */
#page-ranked .ranked-section-panel,
#page-ranked .ranked-nav {
  background: var(--zd-surface-sub) !important;
  border: 1px solid var(--zd-line) !important;
  border-radius: var(--zd-r-md);
}
#page-ranked .ranked-nav-btn {
  color: var(--zd-ink-2);
  min-height: var(--zd-tap);
}
#page-ranked .ranked-nav-btn:hover { background: transparent; color: var(--zd-ink); }
#page-ranked .ranked-nav-btn.active {
  background: var(--zd-surface);
  color: var(--zd-ink);
  border-color: transparent;
  box-shadow: var(--zd-sh-card);
}
#page-ranked .ranked-nav-btn span { color: inherit; }
#page-ranked .ranked-nav-btn.active span { color: var(--zd-ink); }

/* ── 4. Cards de partida → brancos, mapa vira faixa lateral ── */
#page-ranked .rmm-card {
  background: var(--zd-surface) !important;
  border: 1px solid var(--zd-line);
  backdrop-filter: none;
  color: var(--zd-ink);
}
#page-ranked .rmm-card.victory { border-left: 4px solid var(--zd-positive); }
#page-ranked .rmm-card.defeat  { border-left: 4px solid var(--zd-danger); }
#page-ranked .rmm-card.draw    { border-left: 4px solid #f59e0b; }

/* Arte do mapa: faixa de 120px à esquerda, não fundo atrás do texto */
#page-ranked .rmm-map-bg {
  right: auto;
  width: 130px;
  opacity: 1;
  filter: none;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
}
#page-ranked .rmm-map-shade { background: transparent !important; }

/* Textos do card em ink */
#page-ranked .rmc-map,
#page-ranked .rmc-agent-name,
#page-ranked .rmc-kd-value,
#page-ranked .rmc-kd-big,
#page-ranked .rmc-rank-name { color: var(--zd-ink); }
#page-ranked .rmc-kd-label,
#page-ranked .rmc-date,
#page-ranked .rmc-map-label { color: var(--zd-ink-3); }
#page-ranked .rmc-agent-name { text-shadow: none; }

/* Bloco de placar */
#page-ranked .rmc-score-block { background: var(--zd-surface-sub); border-color: var(--zd-line); }
#page-ranked .rmc-score-block.victory { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.25); }
#page-ranked .rmc-score-block.defeat  { background: rgba(255,70,85,0.10);  border-color: rgba(255,70,85,0.25); }
#page-ranked .rmc-score-value { color: var(--zd-ink); }

/* Chips de stat: fundo claro, rótulo ink-3, valor ink (some o arco-íris) */
#page-ranked .rmc-stat {
  background: var(--zd-surface-sub);
  border: 1px solid var(--zd-line);
  color: var(--zd-ink);
  font-size: var(--zd-fs-xs);
  border-radius: var(--zd-r-sm);
}
#page-ranked .rmc-stat strong { color: var(--zd-ink-3); font-weight: 600; }
#page-ranked .rmc-stat em { color: var(--zd-ink) !important; font-style: normal; }
/* Só o delta +/- carrega cor semântica */
#page-ranked .rmc-stat.entry-pm em.stat-high { color: var(--zd-positive) !important; }
#page-ranked .rmc-stat.entry-pm em.stat-low  { color: var(--zd-danger) !important; }

/* Painel de detalhes expandido → claro */
#page-ranked .rmc-details-panel {
  background: var(--zd-surface) !important;
  border-color: var(--zd-line);
}

/* Botão "Ver mais" */
#page-ranked .ranked-load-more,
#page-ranked .rmm-load-more {
  background: var(--zd-surface);
  border: 1px solid var(--zd-line);
  color: var(--zd-ink);
}

/* ── 5. Estados de carregamento em tema claro ── */
#page-ranked .ranked-loading, #page-ranked .az-spinner,
#page-ranked [class*="spinner"] { border-top-color: var(--zd-accent); }

/* ── 6. Scoreboard tables (sb-*) ── */
#page-ranked .sb-team, #page-ranked .scoreboard-container { color: var(--zd-ink); }
#page-ranked .sb-row:nth-child(even) { background: var(--zd-surface-sub); }
#page-ranked table.sb-table td, #page-ranked table.sb-table th {
  font-variant-numeric: tabular-nums;
}

/* ── 6b. Aba "Análise Individual" (ia-agent-*): tudo claro ── */
#page-ranked [class*="ia-agent"] { color: var(--zd-ink); }
#page-ranked .ia-agent-row,
#page-ranked .ia-agent-card,
#page-ranked .ia-agent-card-dropdown,
#page-ranked .ia-agent-row-dropdown-inner {
  background: var(--zd-surface) !important;
  border-color: var(--zd-line) !important;
}
#page-ranked .ia-agent-tab-meta,
#page-ranked .ia-agent-wr-meta,
#page-ranked .ia-agent-header-stats,
#page-ranked .ia-agent-stat,
#page-ranked .ia-agent-stats-grid,
#page-ranked .ia-agent-rmc-stats-row {
  background: var(--zd-surface-sub) !important;
  color: var(--zd-ink) !important;
  border-color: var(--zd-line) !important;
}
#page-ranked .ia-agent-tab-meta,
#page-ranked .ia-agent-wr-meta { color: var(--zd-ink-2) !important; }
/* pílulas de breakdown (KDA / FK-FD / CORPO-PERNA) e métricas grandes */
#page-ranked .ia-agent-kda-breakdown,
#page-ranked .ia-agent-fkfd-breakdown,
#page-ranked .ia-agent-hs-breakdown,
#page-ranked .ia-agent-metric-big {
  background: var(--zd-surface-sub) !important;
  border-color: var(--zd-line) !important;
}
#page-ranked .ia-agent-fkfd-item,
#page-ranked .ia-agent-hs-item { border-color: var(--zd-line) !important; }
#page-ranked .ia-agent-fkfd-item strong,
#page-ranked .ia-agent-hs-item strong,
#page-ranked .ia-agent-kda-breakdown strong { color: var(--zd-ink-3) !important; }
#page-ranked .ia-agent-hs-item em,
#page-ranked .ia-agent-kda-breakdown em { color: var(--zd-ink) !important; }
#page-ranked .ia-overview-bar-track { background: var(--zd-line) !important; }

#page-ranked [class*="ia-agent"] .stat-high { color: var(--zd-positive) !important; }
#page-ranked [class*="ia-agent"] .stat-low  { color: var(--zd-danger) !important; }
#page-ranked [class*="ia-agent"] .stat-med  { color: var(--zd-ink) !important; }

/* ── 7. Responsivo: chips não somem abaixo de 12px ── */
@media (max-width: 768px) {
  #page-ranked .rmc-stat { font-size: var(--zd-fs-xs); }
}