/* =====================================================
   ZDVAL — /tactics (SP1 design refactor §4.3) — HÍBRIDO
   Chrome (painel, abas, cabeçalhos, listas, pastas, modais) → claro.
   Canvas (minimapa + detalhe da tática) → petrol, intocado.
   #page-tactics já tem o gradiente petrol (mesa de mapa).
   Carrega DEPOIS de style.css. Override-first.
   ===================================================== */

/* ── 0. Fundo geral: petrol (como /lineups), não preto legado ──
   style.css:27525 força #000 !important em todo [id^="page-"] — vence
   sem !important aqui. */
#page-tactics,
#page-antitactic {
  background: var(--zd-canvas) !important;
}
#page-tactics .tactics-side-card,
#page-tactics .tactics-side-card-body,
#page-tactics .tactics-side-list {
  background: var(--zd-canvas) !important;
}
/* 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-tactics tem width:100% explícito (style.css:8842) — margin negativa
     sozinha só desloca a caixa, não estica; width:calc soma a diferença. */
  #page-tactics, #page-antitactic { margin: -1rem; width: calc(100% + 2rem); }
}

/* ── 1. Abas Táticas / Antitático → pílula clara ── */
#page-tactics .tc-section-tabs {
  background: var(--zd-surface-sub) !important;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-r-md);
}
#page-tactics .tc-section-tab {
  color: var(--zd-ink-2) !important;
  min-height: var(--zd-tap);
  font-family: var(--zd-font);
}
#page-tactics .tc-section-tab.active {
  background: var(--zd-surface) !important;
  color: var(--zd-ink) !important;
  box-shadow: var(--zd-sh-card);
  border-radius: var(--zd-r-sm);
}

/* ── 2. Cabeçalhos das colunas ATAQUE / DEFESA → chip claro ── */
/* Diferenciam-se por ÍCONE, não por vermelho vs azul. */
#page-tactics .tactics-side-card-header {
  background: var(--zd-surface) !important;
  color: var(--zd-ink) !important;
  border: 1px solid var(--zd-line);
  border-radius: var(--zd-r-md);
  min-height: var(--zd-tap);
  font-family: var(--zd-font);
}
#page-tactics .tactics-side-card-header i { color: var(--zd-accent) !important; }
#page-tactics .tactics-side-card-header.attack,
#page-tactics .tactics-side-card-header.defense {
  background: var(--zd-surface) !important;
  border-color: var(--zd-line) !important;
}

/* Tabs inline Ataque/Defesa dentro do header → pílula clara, ícone índigo */
#page-tactics .tc-side-tabs,
#page-tactics .tc-side-tabs-inline {
  background: var(--zd-surface-sub) !important;
  border: 1px solid var(--zd-line);
  border-radius: 999px;
}
#page-tactics .tc-side-tab {
  color: var(--zd-ink-2) !important;
  background: transparent !important;
}
#page-tactics .tc-side-tab.active {
  color: var(--zd-ink) !important;
  background: var(--zd-surface) !important;
  box-shadow: var(--zd-sh-card);
}
#page-tactics .tc-side-tab i { color: var(--zd-accent) !important; }

/* ── 3. Corpo da coluna → deixa ver a mesa petrol, texto claro ── */
#page-tactics .tactics-side-card-body { color: var(--zd-ink-inv); }

/* Pastas (DEFAULT) → cartão claro ── */
#page-tactics .tactics-side-folder-group,
#page-tactics .folder-card,
#page-tactics [class*="folder-header"] {
  background: var(--zd-surface) !important;
  color: var(--zd-ink) !important;
  border: 1px solid var(--zd-line) !important;
  border-radius: var(--zd-r-md);
}
#page-tactics [class*="folder"] i { color: var(--zd-accent); }
#page-tactics .tactics-folder-row-wrap { background: transparent !important; }
#page-tactics .tactics-side-folder-toggle {
  background: transparent !important;
  color: var(--zd-ink) !important;
}
#page-tactics .tactics-side-folder-toggle:hover { background: var(--zd-surface-sub) !important; }
#page-tactics .tactics-side-item-title { color: var(--zd-ink) !important; }
#page-tactics .tactics-folder-meta,
#page-tactics .tactics-folder-badge { color: var(--zd-ink-3) !important; }

/* ── 3b. Painel lateral esquerdo (map hero + composições) → chrome claro ── */
#page-tactics .tc-map-hero-content {
  background: var(--zd-bg-page) !important;
}

/* ── 4. Painel de composições (esquerda) ── */
#page-tactics .tc-comp-section-label,
#page-tactics [class*="comp-section"] > span,
#page-tactics [class*="composicoes"] { color: var(--zd-ink-inv); }
#page-tactics .tc-comp-toggle,
#page-tactics .tc-comp-dropdown {
  background: var(--zd-surface) !important;
  border: 1px solid var(--zd-line) !important;
  border-radius: var(--zd-r-lg) !important;
}
/* Seleção da composição por borda índigo + check, não glow vermelho */
#page-tactics .tc-comp-toggle.selected,
#page-tactics .tc-comp-toggle.active,
#page-tactics .tc-comp-dropdown.selected {
  border: 2px solid var(--zd-accent) !important;
  box-shadow: none !important;
}
/* Card de composição real (.wizard-comp-card) — o <style> injetado pelo
   tactics.js carrega depois deste arquivo e usa #ff4655 (glow vermelho legado);
   !important garante que o índigo vence independente da ordem. */
#page-tactics .wizard-comp-card.selected {
  border: 2px solid var(--zd-accent) !important;
  border-radius: var(--zd-r-md) !important;
}
#page-tactics .wizard-comp-card.selected .comp-agent {
  border-color: var(--zd-accent) !important;
}
#page-tactics .tc-comp-current-check {
  background: var(--zd-accent-grad) !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45) !important;
}
/* Strip de avatares no toggle da composição atual — glow vermelho legado */
#page-tactics .tc-comp-toggle-agents {
  border: 1px solid var(--zd-accent) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 0 18px 0 rgba(99, 102, 241, 0.30) !important;
}
#page-tactics .tc-agent-frame { border-color: var(--zd-line); }

/* ── 5. Botões "+" de criar → círculo índigo ── */
#page-tactics .tc-comp-section-add,
#page-tactics .tactics-side-card-header [class*="add"],
#page-tactics [class*="create-btn"],
#page-tactics .tc-add-tactic-btn {
  background: var(--zd-accent-grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--zd-accent-lift);
}
#page-tactics .tc-comp-section-add i,
#page-tactics .tactics-side-card-header [class*="add"] i { color: #fff !important; }

/* ── 6. Mapa selecionado (card ASCENT) mantém splash, texto claro sobre foto ── */
/* tc-map-hero é foto do mapa; não mexer no fundo, só garantir contraste. */

/* ── 7. Estado vazio ("Nenhuma tática de defesa ainda") ── */
#page-tactics [class*="empty"] {
  color: var(--zd-ink-inv-2);
}
#page-tactics [class*="empty"] i { color: var(--zd-ink-inv-2); }
#page-tactics .tc-empty-title { color: var(--zd-ink-inv); }
#page-tactics .tc-side-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0 18px;
  min-height: var(--zd-tap);
  background: var(--zd-accent-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--zd-r-md);
  font-family: var(--zd-font);
  font-weight: 600;
  font-size: var(--zd-fs-sm, 13px);
  cursor: pointer;
  box-shadow: var(--zd-accent-lift);
}
#page-tactics .tc-side-empty-cta i { color: #fff !important; }
#page-tactics .tc-side-empty-cta:hover { filter: brightness(1.08); }

/* ── 8. Modais → claro ── */
#page-tactics [class*="modal-content"],
#page-tactics [class*="modal-card"],
#page-tactics [class*="modal-body"] {
  background: var(--zd-surface) !important;
  color: var(--zd-ink) !important;
  border-radius: var(--zd-r-xl);
}

/* ── 9. NÃO tocar no canvas: minimapa/detalhe da tática ficam petrol ──
   (.tc-map-hero, .tactic-detail, minimaps ficam com o tema escuro herdado) */