/* =======================================================
   1. CONTAINER DA TABELA
   - Isola a tabela, aplica sombra, cantos arredondados e controla o scroll.
   - É o elemento-chave para a responsividade e a scrollbar.
   ======================================================= */
.table-container {
  border-radius: 12px;
  background-color: var(--gk-card-background);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden; /* Essencial para a tabela respeitar os cantos arredondados */
}

/* =======================================================
   2. SCROLLBAR PERSONALIZADA (SOLUÇÃO PRINCIPAL)
   - Estiliza a barra de rolagem para ser consistente com o tema.
   ======================================================= */

/* Para Firefox */
.table-container {
  scrollbar-width: thin;
  scrollbar-color: var(--gk-gray-400) transparent;
}

/* Para Chrome, Safari, Edge e outros baseados em WebKit */
.table-container::-webkit-scrollbar {
  width: 8px; /* Largura da barra vertical */
  height: 8px; /* Altura da barra horizontal */
}

.table-container::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: var(--gk-gray-400);
  border-radius: 10px;
  border: 2px solid var(--gk-card-background); /* Cria um preenchimento em volta */
  background-clip: padding-box;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--gk-gray-500);
}

/* =======================================================
   3. ESTRUTURA E CABEÇALHO DA TABELA
   - Z-index no thead para corrigir o bug de sobreposição no hover.
   ======================================================= */
.table-refined {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.table-refined thead {
  position: relative; /* Contexto de empilhamento para o z-index */
  z-index: 2;        /* Garante que o cabeçalho fique ACIMA das linhas */
}

.table-refined thead th {
  padding: 1rem 1.5rem;
  vertical-align: middle;
  text-align: start;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--gk-border-color);
  background-color: var(--gk-gray-100); /* Fundo sutil para o modo claro */
  color: var(--gk-gray-700);
}

/* =======================================================
   4. CORPO DA TABELA E ESTADOS
   ======================================================= */
.table-refined tbody tr {
  transition: all 0.2s ease-in-out;
}

.table-refined tbody td {
  padding: 1.25rem 1.5rem;
  vertical-align: middle;
  border-top: 1px solid var(--gk-border-color);
  background-color: var(--gk-card-background);
  color: var(--gk-body-color);
}

/* Remove borda da primeira linha */
.table-refined tbody tr:first-child td {
  border-top: none;
}

/* Estilo para a mensagem de "Nenhum item encontrado" */
.table-refined tbody tr.tr-empty td {
  text-align: center;
  color: var(--gk-gray-500);
  padding: 3rem 1.5rem;
  background-color: transparent !important; /* Garante que não tenha zebra-striping */
  border-top: 1px solid var(--gk-border-color);
}

/* =======================================================
   5. INTERATIVIDADE (HOVER)
   - Efeito refinado que não se aplica à linha vazia.
   ======================================================= */
.table-hover tbody tr:not(.tr-empty):hover {
  transform: translateY(-2px);
  position: relative;
  z-index: 1;
}

.table-hover tbody tr:not(.tr-empty):hover td {
  background-color: var(--gk-white);
  border-top-color: transparent;
}

/* =======================================================
   6. AJUSTES PARA O TEMA ESCURO
   ======================================================= */
[data-bs-theme=dark] .table-container {
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
  scrollbar-color: var(--gk-gray-700) transparent;
}

[data-bs-theme=dark] .table-container::-webkit-scrollbar-thumb {
  background-color: var(--gk-gray-700);
  border-color: var(--gk-secondary-bg);
}

[data-bs-theme=dark] .table-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--gk-gray-600);
}

[data-bs-theme=dark] .table-refined thead th {
  background-color: #161e31; /* Um tom ligeiramente diferente do card para destaque */
  color: var(--gk-gray-600);
  border-bottom-color: var(--gk-border-color);
}

[data-bs-theme=dark] .table-refined tbody td {
  background-color: var(--gk-secondary-bg);
}


[data-bs-theme=dark] .table-refined tbody tr.tr-empty td {
  border-top-color: var(--gk-border-color);
}

[data-bs-theme=dark] .table-hover tbody tr:not(.tr-empty):hover td {
  background-color: var(--gk-gray-300);
}

/* =======================================================
   7. TIPOGRAFIA E ELEMENTOS INTERNOS
   ======================================================= */
.table-refined .avatar-md {
  width: 40px;
  height: 40px;
}

.table-refined .d-flex.align-items-center h5 {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0;
  color: var(--gk-heading-color);
}