/* clientes.css — versão compatível com colgroup (usar colgroup como fonte de verdade) */
/* -----------------------------------------------------------
   Ajustes feitos:
   - removido background fixo em th/td para permitir efeito zebra
   - zebra aplicada diretamente nas td do tbody
   - hover na linha
   - garantia de que colunas sticky não "quebrem" a zebra
*/

/* OBS: Se desejar rolagem vertical da página, remova/ajuste overflow:hidden em html,body */
html, body {
  /* cuidado: bloquear rolagem global pode esconder conteúdo em telas pequenas */
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}

h1 {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  color: #2c3e50;
}

/* filtros */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}
.filtros input {
  flex: 1;
  min-width: 200px;
}
.controle-linhas { margin-bottom: 1rem; }
.controle-linhas select { margin-left: 10px; }

/* tabela wrapper */
.tabela-container {
  overflow-x: auto; /* importante para largura total da tabela */
  background-color: #fff;
  border: 0px solid #ddd;
  border-radius: 6px;
  padding: 1rem;
  position: relative;
}

/* IMPORTANT: table-layout fixed -> respeita widths do <colgroup> */
.tabela-clientes {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* essencial para colgroup widths serem aplicadas */
  /* Variáveis sincronizadas com o colgroup do HTML */
  --col-id: 60px;
  --col-nome: 240px;
  --col-2-razao: 240px; /* só referência se precisar */
  --col-acoes: 60px;
  --col-ativo: 50px;
}

/* células */
/* Removido background fixo para permitir que a zebra do tbody apareça. */
.tabela-clientes th,
.tabela-clientes td {
  box-sizing: border-box;
  padding: 6px 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  text-align: center;
  border: 0;
  background: transparent; /* <-- alterado para transparente */
}

/* botões dentro da tabela (ajuste estético) */
.tabela-clientes .btn {
  height: 18px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 18px;
}

/* cabeçalho sticky no topo */
.tabela-clientes thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--c-primary);
  color: #fff;
}

/* ----- Colunas fixas (sticky) ----- */
/* 1) ID (1ª coluna) */
.tabela-clientes th:nth-child(1),
.tabela-clientes td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 5;
  width: var(--col-id);
  background-clip: padding-box;
}
.tabela-clientes th:nth-child(1)::after,
.tabela-clientes td:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px; background: #ddd;
}

/* 2) Nome Fantasia (2ª coluna) */
/* left = largura da 1ª coluna */
.tabela-clientes th:nth-child(2),
.tabela-clientes td:nth-child(2) {
  position: sticky;
  left: var(--col-id);
  z-index: 5;
  width: var(--col-nome);
  background-clip: padding-box;
}
.tabela-clientes th:nth-child(2)::after,
.tabela-clientes td:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px; background: #ddd;
}

/* 3) Ativo (penúltima = 22ª) */
/* right = largura da última coluna (ações) */
.tabela-clientes th:nth-child(22),
.tabela-clientes td:nth-child(22) {
  position: sticky;
  right: var(--col-acoes);
  z-index: 5;
  width: var(--col-ativo);
  background-clip: padding-box;
}
.tabela-clientes th:nth-child(22)::before,
.tabela-clientes td:nth-child(22)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px; background: #ddd;
}

/* 4) Ações (última = 23ª) */
.tabela-clientes th:nth-child(23),
.tabela-clientes td:nth-child(23) {
  position: sticky;
  right: 0;
  z-index: 5;
  width: var(--col-acoes);
  background-clip: padding-box;
}
.tabela-clientes th:nth-child(23)::before,
.tabela-clientes td:nth-child(23)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px; background: #ddd;
}

/* garantir que headers sticky das interseções fiquem por cima */
.tabela-clientes thead th:nth-child(1),
.tabela-clientes thead th:nth-child(2),
.tabela-clientes thead th:nth-child(22),
.tabela-clientes thead th:nth-child(23) {
  z-index: 8;
}

/* paginação e ações */
.paginacao { margin-top: 1rem; text-align: center; }
.paginacao .btn { margin: 0 4px; padding: 0 12px; }
.paginacao .btn.ativo { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.acoes { margin-top: 1.5rem; text-align: right; }
.acoes .btn { font-weight: 700; }

/* responsivo básico */
@media (max-width: 768px) {
  .filtros, .controle-linhas { display: flex; flex-direction: column; }
  .filtros input, .filtros .btn { margin-bottom: 10px; width: 100%; }
  .acoes { text-align: center; margin-top: 20px; }
}

/* ---------------- Zebra (aplicada nas células do tbody) ---------------- */
/* Aplicar zebra diretamente nas <td> é mais robusto quando há células sticky */
.tabela-clientes tbody tr:nth-child(odd) td {
  background-color: #f9f9f9; /* cor das linhas ímpares */
}

.tabela-clientes tbody tr:nth-child(even) td {
  background-color: #ffffff; /* cor das linhas pares */
}

/* Hover na linha */
.tabela-clientes tbody tr:hover td {
  background-color: #eaf3ff;
}

/* Garantir que as colunas sticky do tbody não sobrescrevam a zebra.
   Não definimos background fixo aqui; permitimos que as td "herdem" a cor. */
.tabela-clientes tbody td:nth-child(1),
.tabela-clientes tbody td:nth-child(2),
.tabela-clientes tbody td:nth-child(22),
.tabela-clientes tbody td:nth-child(23) {
  /* mantém a mesma pintura de fundo e evita cortes estranhos com ::before/::after */
  background-clip: padding-box;
  background-origin: padding-box;
  /* não definir background-color aqui - herdado das regras acima */
}

/* Caso alguma biblioteca externa force background com maior especificidade,
   você pode reforçar (use com parcimônia). Exemplo comentado:
.tabela-clientes tbody tr:nth-child(odd) td {
  background-color: #f9f9f9 !important;
}
*/

/* fim do arquivo */