/* =========================================================
   Componente: Tabela de dados (Bloco B — tabelas e densidade)

   Antes deste bloco a tabela nao tinha regra nenhuma de largura: o
   DataTables media o conteudo da pagina atual e decidia sozinho. Medido em
   17 tabelas do sistema, isso dava:
     - "Nome" de 124px (Alunos) a 324px (Modalidades) — a coluna que
       IDENTIFICA o registro era a mais estreita justamente onde havia mais
       registros;
     - "Status" de 106px a 221px em 14 telas;
     - alturas de 77 / 99 / 118 / 121px DENTRO da mesma tabela, porque nome
       comprido e badge quebravam em varias linhas;
     - 14 colunas numericas, ZERO alinhadas a direita — nao dava para
       comparar dinheiro na vertical.

   As quatro regras deste arquivo, na ordem do bloco:
     B1 larguras declaradas por TIPO de coluna (nao por tela);
     B2 uma altura de linha, sempre a mesma;
     B3 acoes com hierarquia (uma primaria + menu);
     B4 cabecalho e alinhamento numerico.
   ========================================================= */

:root {
  /* ---- B1: largura por tipo de coluna ----
     Fonte unica de verdade. O JS (tableColumns.js) LE estes valores para
     calcular a largura minima da tabela — nao os redeclara. Mexer aqui muda
     os dois lados. */
  --col-selecao:   48px;
  --col-avatar:    64px;
  --col-miniatura: 92px;
  --col-num:      104px;
  --col-dinheiro: 136px;
  --col-data:     124px;
  --col-datahora: 168px;
  /* Faixa de datas ("01/08/2026 até 20/12/2026") e quase duas datas: com a
     largura de dataHora ela cortava. */
  --col-periodo:  204px;
  --col-hora:     128px;
  /* 168 e nao 152: "(11) 93333-6666" e uma string de tamanho conhecido e fixo,
     e com 152px ela cortava em 4 celulas de 2 telas. Uma coluna de tipo bem
     definido nunca deveria cortar o seu conteudo tipico. */
  --col-telefone: 168px;
  --col-status:   136px;
  --col-badge:    152px;
  --col-acoes:    104px;
  /* Colunas de texto nao tem largura fixa: dividem o que sobra. Este e o piso
     abaixo do qual a tabela prefere rolar de lado a espremer o texto.
     132 e nao 150 porque 150 fazia Turmas e Repasses estourarem o container
     por 12 e 10px — rolagem horizontal por causa de uma dezena de pixels e
     justamente o defeito que criou a regressao do bloco C (o Bootstrap le a
     diferenca como barra de rolagem e empurra a pagina inteira ao abrir modal). */
  --col-texto-min: 132px;
  /* A coluna que IDENTIFICA o registro (Nome, Título, Pagador) pesa mais que
     uma coluna de apoio: era o defeito mais visivel em Alunos, onde "Nome"
     tinha 124px — a menor da tabela — e o nome quebrava em duas linhas com
     espaco sobrando a direita. */
  --col-principal-min: 200px;

  /* ---- B2: densidade ----
     36px e a altura do .icon-btn, que e o conteudo mais alto de uma linha
     (mais alto que o texto de 21.75px, que o badge de 28.3px e que o avatar
     de 34px). 36 + 2x10 de respiro = 56px exatos. Foi medido, nao estimado:
     antes o mesmo calculo com 16.8px de respiro dava os 70px de hoje. */
  --tabela-linha-h: 56px;
  --tabela-pad-y: 10px;
  --tabela-pad-x: 14px;
  --tabela-cabecalho-h: 44px;
}

/* =========================================================
   B1 — Larguras declaradas
   ========================================================= */

/* `fixed` e o que faz a largura declarada valer de verdade: no layout `auto`
   o navegador ainda negocia tudo pelo conteudo, e a coluna volta a dancar.
   E opt-in (`--fixa`) porque uma tabela sem tipos declarados ficaria com
   todas as colunas do mesmo tamanho, o que seria pior que hoje. */
table.table-cf--fixa {
  table-layout: fixed;
  width: 100%;
}
/* `box-sizing: border-box` explicito nas celulas, e nao herdado do reset.
   Medido: sem isto a coluna declarada com 48px renderizava com 90px e a linha
   pedida em 56px saia com 76 — em ambos os casos a diferenca era exatamente o
   padding, somado POR FORA. A largura declarada tem de incluir o respiro,
   senao "declarar 136px" nao significa nada previsivel. */
table.table-cf--fixa th,
table.table-cf--fixa td {
  box-sizing: border-box;
}

.col-cf--selecao  { width: var(--col-selecao); }
.col-cf--avatar   { width: var(--col-avatar); }
.col-cf--miniatura { width: var(--col-miniatura); }
.col-cf--num      { width: var(--col-num); }
.col-cf--dinheiro { width: var(--col-dinheiro); }
.col-cf--data     { width: var(--col-data); }
.col-cf--datahora { width: var(--col-datahora); }
.col-cf--periodo  { width: var(--col-periodo); }
.col-cf--hora     { width: var(--col-hora); }
.col-cf--telefone { width: var(--col-telefone); }
.col-cf--status   { width: var(--col-status); }
.col-cf--badge    { width: var(--col-badge); }
.col-cf--acoes    { width: var(--col-acoes); }
/* Colunas de largura RELATIVA: a largura em px e calculada e aplicada inline
   por ajustarLarguras() (tableColumns.js), que e quem sabe quanto sobrou no
   container e consegue respeitar o piso de cada uma. Aqui fica so o que e
   puramente visual. */
.col-cf--texto,
.col-cf--textolargo { width: auto; }
.col-cf--principal { width: auto; font-weight: var(--fw-medium); }

/* =========================================================
   B2 — Uma altura de linha
   ========================================================= */

table.table-cf tbody td {
  height: var(--tabela-linha-h);
  padding: var(--tabela-pad-y) var(--tabela-pad-x) !important;
  vertical-align: middle;
  border-bottom: none !important;
  /* O trio que garante a altura unica: nada quebra em duas linhas, o que
     nao cabe vira reticencias. O texto inteiro continua acessivel pelo
     title= (tooltip) e pelo card do mobile, que nao trunca nada. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O conteudo de uma celula tambem nao pode crescer em altura, senao ele — e
   nao o padding — passa a mandar na linha (era o caso do badge de 2 linhas
   em Alugueis: "Semanal · Terca-feira" virava 3 linhas e a linha ia a 121px). */
table.table-cf tbody td > * { vertical-align: middle; }
/* Badge maior que a coluna: ele tem de encolher com reticencias DENTRO da
   pilula. Sem isto quem corta e o `overflow: hidden` da celula, e o resultado
   e a pilula serrada ao meio no meio de uma palavra ("Semanal · Terça-fei"),
   que parece defeito de renderizacao — bem pior que um "…" honesto. */
table.table-cf tbody td .badge-cf {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
}
/* O ::before do badge (o pontinho de status) nao pode encolher junto. */
table.table-cf tbody td .badge-cf::before { flex: none; }

/* Container flex dentro da celula tambem nao empilha. `white-space: nowrap`
   governa TEXTO, nao itens de flex: um `flex-wrap: wrap` numa celula continua
   quebrando em varias faixas e leva a linha junto. Foi o que aconteceu com a
   lista de papeis do CYS Academy — 3 pilulas numa coluna de 152px viraram 3
   faixas e a linha foi de 56px para 113px, na unica tela que o teste de altura
   pegou. A regra fica aqui, e nao so na tela, porque a proxima celula com
   lista de pilulas repetiria o defeito calada.
   Quem PRECISA empilhar usa `.celula-cf--dupla`, logo abaixo. */
table.table-cf tbody td .d-flex:not(.celula-cf--dupla) { flex-wrap: nowrap; }

/* Celula que precisa empilhar (ex: forma de pagamento + valor em Cobrancas)
   pede explicitamente — e mesmo assim dentro da altura da linha. */
table.table-cf tbody td.celula-cf--dupla {
  white-space: normal;
  line-height: 1.25;
  font-size: var(--text-sm);
}

/* =========================================================
   B4 — Cabecalho e alinhamento numerico
   ========================================================= */

table.table-cf thead th {
  height: var(--tabela-cabecalho-h);
  padding: 0 var(--tabela-pad-x) !important;
  border-bottom: 2px solid var(--border-color) !important;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Numero, dinheiro e contagem a DIREITA, com algarismos de largura fixa: e o
   que permite comparar valores lendo a coluna de cima a baixo (os milhares
   ficam alinhados entre si, a virgula tambem). Vale para o cabecalho junto,
   senao o rotulo fica solto sobre a esquerda de uma coluna alinhada a direita. */
.col-cf--num,
.col-cf--dinheiro {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* O DataTables monta o cabecalho ordenavel como flex; sem isto o alinhamento
   a direita do th nao tem efeito e o rotulo fica preso a esquerda. */
table.table-cf thead th.col-cf--num,
table.table-cf thead th.col-cf--dinheiro { text-align: right; }
table.table-cf thead th.col-cf--num .dt-column-title,
table.table-cf thead th.col-cf--dinheiro .dt-column-title { margin-left: auto; }

/* Data e hora tambem ganham algarismo de largura fixa (continuam a esquerda:
   sao rotulos, nao grandezas que se comparam). */
.col-cf--data,
.col-cf--datahora,
.col-cf--hora,
.col-cf--periodo,
.col-cf--telefone { font-variant-numeric: tabular-nums; }

.col-cf--selecao { text-align: center; }
.col-cf--avatar,
.col-cf--miniatura { text-align: center; }
/* A celula do avatar nao pode ter reticencias — o que ela tem e uma imagem. */
table.table-cf tbody td.col-cf--avatar,
table.table-cf tbody td.col-cf--miniatura { overflow: visible; }

/* A miniatura do CYS Academy nasceu com 88x49px (16:9), que sozinha levaria a
   linha a ~70px e quebraria a altura unica. Dentro da tabela ela cabe no
   orcamento de 36px de altura mantendo a proporcao; no resto do sistema
   (grade de videos) continua no tamanho original. */
table.table-cf .academy-thumb-cf { width: 64px; }

/* =========================================================
   B3 — Acoes com hierarquia
   ========================================================= */

table.table-cf .col-cf--acoes { text-align: right; }
/* A celula das acoes precisa deixar o menu escapar; o menu em si e ancorado
   no body (ver menuFlutuante em recordCard.js), mas o foco/outline nao. */
table.table-cf tbody td.col-cf--acoes { overflow: visible; }

.acoes-cf {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* A acao primaria (Editar) e a unica com peso visual: fundo tonal da marca,
   em repouso — nao so no hover. Antes eram 6 icones cinza identicos e nada
   dizia qual era a principal nem qual era destrutiva. */
.acoes-cf .icon-btn--primaria {
  background: var(--pitch-50);
  color: var(--color-primary);
  border-color: transparent;
}
.acoes-cf .icon-btn--primaria:hover {
  background: var(--pitch-100);
  color: var(--pitch-700);
  border-color: transparent;
}
:root[data-theme='dark'] .acoes-cf .icon-btn--primaria {
  background: rgba(79, 191, 132, 0.16);
  color: var(--pitch-300);
}
:root[data-theme='dark'] .acoes-cf .icon-btn--primaria:hover {
  background: rgba(79, 191, 132, 0.26);
  color: var(--pitch-200);
}

/* Menu de acoes ancorado no body (position: fixed). Precisa existir fora do
   .table-responsive e do .table-card: os dois tem overflow proprio e
   recortariam um menu posicionado dentro da celula. */
.menu-flutuante-cf {
  position: fixed;
  /* `right: auto` NAO e redundante: este menu reaproveita as classes do menu do
     card mobile, e la `.record-card-cf__menu` declara `right: 0` (faz sentido
     para um `absolute` ancorado no card). Com `left` (posto pelo JS) E `right`
     ao mesmo tempo, um elemento posicionado nao encolhe no conteudo — ele
     ESTICA de um ao outro. Medido: o menu saia com 1428px numa janela de 1440,
     uma barra atravessando a tela inteira. Vale para `bottom` pelo mesmo motivo. */
  right: auto;
  bottom: auto;
  z-index: 1080;
  min-width: 210px;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Divisoria antes da acao destrutiva: separar Excluir do resto e o que impede
   o clique por engano ao mirar o item de cima. */
.menu-flutuante-cf .rc-menu-item.danger,
.record-card-cf__menu .rc-menu-item.danger {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

/* =========================================================
   Ajustes gerais da tabela
   ========================================================= */

/* Zebra + hover continuam como estavam (aprovados no bloco A). */
table.table-cf {
  color: var(--text-primary);
  border-collapse: separate;
  border-spacing: 0;
}

/* Com a linha em 56px o .icon-btn de 36px ocupa a altura toda e encosta nas
   bordas. 32px devolve o respiro sem virar alvo pequeno demais para o mouse
   (o toque nao usa esta tabela: abaixo de 640px a tela mostra os cards). */
table.table-cf .icon-btn {
  width: 32px;
  height: 32px;
}

/* O DataTables desenha a seta de ordenacao com padding-right proprio, que
   somava ao nosso e empurrava o rotulo para fora da largura declarada. */
table.table-cf thead th.sorting,
table.table-cf thead th.sorting_asc,
table.table-cf thead th.sorting_desc {
  padding-right: calc(var(--tabela-pad-x) + 14px) !important;
  background-position: right var(--tabela-pad-x) center;
}

/* Tabela mais larga que o container: rola de lado em vez de espremer as
   colunas ate o texto virar uma letra por linha. O min-width vem do JS,
   somando as larguras declaradas + o piso das colunas de texto. */
.table-responsive { overflow-x: auto; }