/* =========================================================
   TABELAS CLEAN — camada visual única das tabelas #grid
   ---------------------------------------------------------
   Páginas: BIA+, Participações, Cedimento e Regularidade.
   Carregar por ÚLTIMO (depois do filtros-mobile.css).
   Especificidade #grid#grid vence biaplus/filtros-premium e o
   CSS injetado pelos JS (participa-heat-css, rec-heat-css).

   1. Números à direita, dígitos de largura fixa (tabular-nums);
      nomes à esquerda. (Few, "Show Me the Numbers")
   2. Cabeçalho único: caixa alta pequena, seta só no hover e
      na coluna ordenada.
   3. Heatmap DIVERGENTE: só os extremos ganham cor
      (c-best = ~18% melhores, c-worst = ~18% piores; o meio
      fica neutro). As classes c-best/c-worst vêm dos JS; as
      antigas c-green/yellow/orange/red continuam existindo,
      mas sem fundo. (Brewer, ColorBrewer — escala divergente)
   Apenas visual: não muda dados, chaves nem ordenação.
   ========================================================= */

#grid#grid {
  --tc-line: rgba(148, 163, 184, 0.07);
  --tc-line-strong: rgba(148, 163, 184, 0.14);
  --tc-head: #66758a;
  --tc-text: #e2e8f0;
  --tc-text-2: #a7b3c4;
  --tc-accent: #38bdf8;
  --tc-accent-text: #7dd3fc;
  --tc-hover: rgba(148, 163, 184, 0.05);
  --tc-best-bg: rgba(34, 197, 94, 0.11);
  --tc-best-text: #bbf7d0;
  --tc-worst-bg: rgba(239, 68, 68, 0.10);
  --tc-worst-text: #fecaca;
  font-variant-numeric: tabular-nums;
}

/* ---------- Cabeçalho ---------- */
#grid#grid thead th {
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border-bottom: 1px solid var(--tc-line-strong);
  color: var(--tc-head);
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: none;
  transition: color 0.15s;
}
#grid#grid thead th > span { text-transform: inherit !important; letter-spacing: inherit !important; font-size: inherit !important; }
#grid#grid thead th:hover { color: var(--tc-text-2); }

/* seta de ordenação: some, aparece no hover e na coluna ordenada */
#grid#grid thead th .sort,
#grid#grid thead th .sort-hint {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.15s;
}
#grid#grid thead th:hover .sort,
#grid#grid thead th:hover .sort-hint { opacity: 0.6; }

/* coluna ordenada */
#grid#grid thead th.sorted,
#grid#grid thead th.is-sorted,
#grid#grid thead th[aria-sort="ascending"],
#grid#grid thead th[aria-sort="descending"] {
  color: var(--tc-accent-text);
  box-shadow: inset 0 -2px 0 var(--tc-accent);
  background: transparent;
}
#grid#grid thead th.sorted .sort,
#grid#grid thead th.is-sorted .sort,
#grid#grid thead th.sorted .sort-hint,
#grid#grid thead th.is-sorted .sort-hint { opacity: 1; }

/* Cedimento: a coluna principal deixa de ter cabeçalho laranja */
#grid#grid thead th.ced-highlight:not(.is-sorted) {
  color: var(--tc-head);
  background: transparent;
}
#grid#grid tbody td.ced-highlight { background-image: none; }

/* Regularidade: faixa MANDANTE / VISITANTE */
#grid#grid thead tr.head-groups th {
  height: 34px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--tc-text-2);
  border-bottom: 1px solid var(--tc-line);
}

/* ---------- Corpo ---------- */
#grid#grid tbody td {
  padding: 0 10px;
  height: 40px;
  border-bottom: 1px solid var(--tc-line);
  color: var(--tc-text);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
#grid#grid tbody tr:last-child td { border-bottom: 0; }
#grid#grid tbody tr:hover td { background-color: var(--tc-hover); }

/* ---------- Alinhamento ---------- */
/* números à direita (td e th da mesma coluna) */
#grid#grid tbody td.num,
#grid#grid tbody td[data-num],
#grid#grid tbody td[data-v],
#grid#grid thead th.num,
#grid#grid thead th.center-num,
#grid#grid thead th.col-head:not(.col-equipe):not(.col-nome),
#grid#grid thead th[data-key]:not([data-key="P"]):not([data-key="jogador"]):not([data-key="clube"]):not([data-key="mando"]):not([data-key="adv"]):not([data-key="status_id"]) {
  text-align: right;
}
#grid#grid tbody td.num,
#grid#grid tbody td[data-num],
#grid#grid tbody td[data-v] { padding-right: 12px; }
#grid#grid thead th.num,
#grid#grid thead th.center-num,
#grid#grid thead th.col-head:not(.col-equipe):not(.col-nome),
#grid#grid thead th[data-key]:not([data-key="P"]):not([data-key="jogador"]):not([data-key="clube"]):not([data-key="mando"]):not([data-key="adv"]):not([data-key="status_id"]) {
  padding-right: 12px;
}

/* nomes à esquerda */
#grid#grid thead th[data-k="Nome"],
#grid#grid tbody td[data-k="Nome"],
#bia-ranking #grid#grid tbody td:nth-child(3),
#table-panel #grid#grid:not(:has(td.ced-jogador, td.col-nome)) tbody td:nth-child(3),
#table-panel #grid#grid:not(:has(td.ced-jogador, td.col-nome)) thead th:nth-child(3),
#grid#grid thead th.col-nome,
#grid#grid tbody td.col-nome,
#grid#grid thead th[data-key="jogador"],
#grid#grid tbody td.ced-jogador {
  text-align: left !important;
  padding-left: 14px;
}
/* clube: escudo e rótulo centralizados na mesma coluna */
#grid#grid thead th.col-equipe,
#grid#grid thead th[data-k="abreviacao"],
#grid#grid tbody td.col-equipe,
#grid#grid tbody td.club { text-align: center !important; }
#grid#grid tbody td.col-equipe .club { justify-content: center; }
/* nome sem "pílula" de fundo: texto limpo */
#grid#grid tbody td .link-like {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: var(--tc-text);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
}
#grid#grid tbody td .link-like:hover {
  color: var(--tc-accent-text);
  text-decoration: none;
}

/* colunas curtas e de contexto mais discretas */
#grid#grid tbody td[data-k="PosAbbr"] { color: var(--tc-text-2); font-weight: 500; }

/* ---------- Heatmap divergente ---------- */
/* o meio da distribuição fica neutro */
#grid#grid tbody td.c-green,
#grid#grid tbody td.c-yellow,
#grid#grid tbody td.c-orange,
#grid#grid tbody td.c-red {
  background: transparent !important;
  color: var(--tc-text) !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* topo e base: verde / vermelho */
#grid#grid tbody td.c-best {
  background: var(--tc-best-bg) !important;
  color: var(--tc-best-text) !important;
  font-weight: 600 !important;
}
#grid#grid tbody td.c-worst {
  background: var(--tc-worst-bg) !important;
  color: var(--tc-worst-text) !important;
}
#grid#grid tbody tr:hover td.c-green:not(.c-best):not(.c-worst),
#grid#grid tbody tr:hover td.c-yellow:not(.c-best):not(.c-worst),
#grid#grid tbody tr:hover td.c-orange:not(.c-best):not(.c-worst),
#grid#grid tbody tr:hover td.c-red:not(.c-best):not(.c-worst) { background: var(--tc-hover) !important; }
#grid#grid tbody tr:hover td.c-best { background: rgba(34, 197, 94, 0.17) !important; }
#grid#grid tbody tr:hover td.c-worst { background: rgba(239, 68, 68, 0.17) !important; }

/* Regularidade: % já tem microbarra → sem fundo, a barra é a informação */
#grid#grid tbody td.rec-pct-cell.c-best,
#grid#grid tbody td.rec-pct-cell.c-worst { background: transparent !important; }
#grid#grid tbody td.rec-pct-cell.c-best { color: var(--tc-best-text) !important; }
#grid#grid tbody td.rec-pct-cell.c-worst { color: var(--tc-worst-text) !important; }
#grid#grid tbody td.rec-pct-cell .rec-pct-bar {
  margin-left: auto !important;
  width: 64px !important;
  max-width: 100% !important;
}

/* ---------- Celular ---------- */
@media (max-width: 720px) {
  #grid#grid thead th { height: 36px; padding: 0 8px; font-size: 10px; }
  #grid#grid tbody td { height: 38px; padding: 0 8px; font-size: 12px; }
  #grid#grid tbody td.num,
  #grid#grid tbody td[data-num],
  #grid#grid tbody td[data-v] { padding-right: 10px; }
}