/* =====================================================
   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); }
}

/* ── 8. Abas principais + Ranking ZDVAL (compliance Riot) ──
   O Ranking ZDVAL é gratuito por política: nenhum gate de plano aqui.
   O bloco .zdranking-notice é exigência de conformidade — não remover. */

/* O tema escuro legado (style.css) estiliza .ranked-main-tab com !important e
   flex:1 — daí o !important aqui, necessário pra manter o chrome claro. */
#page-ranked .ranked-main-tabs {
  display: flex;
  gap: .5rem;
  padding: 1rem 1rem 0;
  flex-wrap: wrap;
  margin-bottom: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
#page-ranked .ranked-main-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 0 0 auto;
  min-height: var(--zd-tap);
  padding: .6rem 1.1rem;
  border: 1px solid var(--zd-line) !important;
  border-radius: var(--zd-r-md);
  background: var(--zd-surface) !important;
  color: var(--zd-ink-2) !important;
  font-family: var(--zd-font);
  font-size: var(--zd-fs-sm);
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: none;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#page-ranked .ranked-main-tab::after { display: none; }
#page-ranked .ranked-main-tab:hover {
  background: var(--zd-bg-lavender) !important;
  border-color: var(--zd-line) !important;
  color: var(--zd-ink) !important;
}
#page-ranked .ranked-main-tab.active {
  background: var(--zd-accent-deep) !important;
  border-color: var(--zd-accent-deep) !important;
  color: #fff !important;
}
#page-ranked .ranked-main-tab.active i { filter: none !important; }
#page-ranked .ranked-tab-badge {
  padding: .1rem .45rem;
  border-radius: var(--zd-r-sm);
  background: var(--zd-positive);
  color: #fff;
  font-size: var(--zd-fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}
#page-ranked .ranked-main-tab.active .ranked-tab-badge { background: rgba(255, 255, 255, .22); }

#page-ranked .zdranking { padding: 1rem; }
#page-ranked .zdranking-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* h1 global do tema escuro pinta o texto com gradiente vermelho via
   background-clip: text — anula pra manter a tinta do chrome claro. */
#page-ranked .zdranking-header h1 {
  margin: 0;
  color: var(--zd-ink);
  background: none !important;
  -webkit-text-fill-color: var(--zd-ink) !important;
  font-family: var(--zd-font);
  font-size: var(--zd-fs-xl, 22px);
  font-weight: 800;
  letter-spacing: .02em;
}
#page-ranked .zdranking-subtitle { color: var(--zd-ink-2); font-size: var(--zd-fs-xs); }
#page-ranked .zdranking-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 240px;
  flex: 1 1 240px;
  max-width: 380px;
}
#page-ranked .zdranking-search i {
  position: absolute;
  left: .75rem;
  color: var(--zd-ink-3);
  pointer-events: none;
}
#page-ranked .zdranking-search input {
  width: 100%;
  min-height: var(--zd-tap);
  padding: .5rem .75rem .5rem 2.25rem;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-r-md);
  background: var(--zd-surface);
  color: var(--zd-ink);
  font-family: var(--zd-font);
}
#page-ranked .zdranking-search input:focus {
  outline: 2px solid var(--zd-accent);
  outline-offset: 1px;
}

#page-ranked .zdranking-notice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--zd-line);
  border-left: 3px solid var(--zd-accent);
  border-radius: var(--zd-r-md);
  background: var(--zd-bg-lavender);
}
#page-ranked .zdranking-notice i { color: var(--zd-accent-deep); margin-top: .15rem; }
#page-ranked .zdranking-notice p {
  margin: 0;
  color: var(--zd-ink-2);
  font-size: var(--zd-fs-xs);
  line-height: 1.5;
}
#page-ranked .zdranking-notice strong { color: var(--zd-ink); }

#page-ranked .zdranking-list {
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-r-xl);
  background: var(--zd-surface);
  box-shadow: var(--zd-sh-card);
  overflow: hidden;
}
#page-ranked .zdranking-row {
  display: grid;
  grid-template-columns: 2.5rem 2.25rem minmax(0, 1fr) auto auto 4.5rem;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--zd-line);
  cursor: pointer;
  transition: background .15s ease;
}
#page-ranked .zdranking-row:last-child { border-bottom: 0; }
#page-ranked .zdranking-row:hover { background: var(--zd-bg-lavender); }
#page-ranked .zdranking-pos {
  color: var(--zd-ink-3);
  font-weight: 700;
  text-align: center;
}
#page-ranked .zdranking-row--top1 .zdranking-pos,
#page-ranked .zdranking-row--top2 .zdranking-pos,
#page-ranked .zdranking-row--top3 .zdranking-pos { color: var(--zd-accent-deep); }
#page-ranked .zdranking-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--zd-line);
}
#page-ranked .zdranking-identity { display: flex; flex-direction: column; min-width: 0; }
#page-ranked .zdranking-name {
  color: var(--zd-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-ranked .zdranking-riot { color: var(--zd-ink-3); font-size: var(--zd-fs-xs); }
#page-ranked .zdranking-team { color: var(--zd-ink-2); font-size: var(--zd-fs-xs); font-weight: 600; }
#page-ranked .zdranking-live {
  padding: .1rem .4rem;
  border-radius: var(--zd-r-sm);
  background: var(--zd-danger);
  color: #fff;
  font-size: var(--zd-fs-xs);
  font-weight: 700;
}
#page-ranked .zdranking-score {
  color: var(--zd-accent-deep);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#page-ranked .zdranking-loading { padding: 2rem; text-align: center; color: var(--zd-ink-3); }
#page-ranked .zdranking-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}
#page-ranked .zdranking-pager-info { color: var(--zd-ink-2); font-size: var(--zd-fs-xs); }

@media (max-width: 640px) {
  #page-ranked .zdranking-row {
    grid-template-columns: 2rem 2rem minmax(0, 1fr) 3.5rem;
  }
  #page-ranked .zdranking-team,
  #page-ranked .zdranking-live { display: none; }
}

/* ── 9. Aba "Ranqueadas" — texto herdado do tema escuro ──
   A análise inline (.ia-*, .rmc-*) nasceu no tema escuro: texto
   var(--text-primary) = #e8e8e8 e rgba(255,255,255,.4–.55). O app roda com
   data-theme="dark", então esses tokens continuam claros e o texto sumia
   sobre as superfícies claras do refactor SP1. Repinta com a tinta do tema
   claro. Os !important acompanham as regras originais, que também usam. */

#page-ranked .ia-section-header h3,
#page-ranked .ia-gs-top3-name,
#page-ranked .rmc-agent-name,
#page-ranked .btn-show-more-matches span {
  color: var(--zd-ink) !important;
  -webkit-text-fill-color: var(--zd-ink) !important;
}

#page-ranked .ia-match-count,
#page-ranked .rmc-map-badge,
#page-ranked .premium-empty-state p {
  color: var(--zd-ink-2) !important;
  -webkit-text-fill-color: var(--zd-ink-2) !important;
}

/* ink-3 mantém a escolha já feita no §2 pros rótulos de métrica. */
#page-ranked .ia-gs-metric-label,
#page-ranked .ia-gs-top3-map,
#page-ranked .rmc-score-sep {
  color: var(--zd-ink-3) !important;
  -webkit-text-fill-color: var(--zd-ink-3) !important;
}

/* Escala de desempenho: alto = positivo, médio = tinta neutra, baixo =
   vermelho. Antes eram tons de branco, indistinguíveis entre si. */
#page-ranked .ia-gs-elo-wr-value,
#page-ranked .stat-med {
  color: var(--zd-ink) !important;
  -webkit-text-fill-color: var(--zd-ink) !important;
}

#page-ranked .stat-high,
#page-ranked .ia-gs-elo-wr-value.stat-high {
  color: var(--zd-positive) !important;
  -webkit-text-fill-color: var(--zd-positive) !important;
}

#page-ranked .stat-low,
#page-ranked .ia-gs-elo-wr-value.stat-low {
  color: var(--zd-danger) !important;
  -webkit-text-fill-color: var(--zd-danger) !important;
}

/* .ia-section usava um véu rgba(0,0,0,.25) que existia pra escurecer o tema
   antigo; sobre fundo claro vira uma moldura cinza em volta do card. */
#page-ranked .ia-section,
#page-ranked .ia-general-stats {
  background: transparent !important;
}

/* ── 10. Estados vazios / gate de RSO ──
   .empty-state global ainda pinta título em #ff4c4c e texto em #e8e8e8 (tema
   escuro). Sobre o fundo claro de /ranked o parágrafo some. */
#page-ranked .empty-state h3 {
  color: var(--zd-ink) !important;
  -webkit-text-fill-color: var(--zd-ink) !important;
}
#page-ranked .empty-state p {
  color: var(--zd-ink-2) !important;
  -webkit-text-fill-color: var(--zd-ink-2) !important;
  max-width: 52ch;
  margin-inline: auto;
}
#page-ranked .empty-state .empty-icon,
#page-ranked .empty-state .empty-icon i {
  color: var(--zd-accent) !important;
  -webkit-text-fill-color: var(--zd-accent) !important;
}
#page-ranked .empty-state .btn-primary {
  background: var(--zd-accent-deep) !important;
  border-color: var(--zd-accent-deep) !important;
  color: #fff !important;
}
#page-ranked .empty-state .btn-secondary {
  background: var(--zd-surface) !important;
  border: 1px solid var(--zd-line) !important;
  color: var(--zd-ink) !important;
}
#page-ranked .empty-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* h1 global pinta o texto com gradiente vermelho via background-clip: text —
   mesmo caso do perfil. Anula pra manter a tinta do chrome claro. */
#page-ranked .ranked-page-header h1,
#page-ranked .zdranking-header h1 {
  background: none !important;
  -webkit-text-fill-color: var(--zd-ink) !important;
  color: var(--zd-ink) !important;
}