// ========================================
// 🎯 BASE STYLES - Data Table
// Estilos fundamentais e layout principal
// ========================================

.data-table-container {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--divider);
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  
  /* ✅ NOVO: Permitir expansão horizontal durante resize */
  overflow: visible;
  
  /* ✅ NOVO: Estado de resize ativo */
  &.resizing-active {
    overflow-x: visible;
    overflow-y: auto;
  }
}

// 🔒 SCROLL CONTAINER OTIMIZADO PARA STICKY + RESIZE DINÂMICO
.table-scroll-container {
  overflow: auto;
  flex: 1;
  max-height: calc(100vh - 300px);
  border-radius: 4px;
  
  /* 🔒 POSICIONAMENTO: Criar contexto de stacking */
  position: relative;
  isolation: isolate;
  
  /* ✅ NOVO: Permitir overflow visível quando filtro ativo */
  &.has-active-column-filter {
    overflow: visible;
  }
  
  /* ✅ SCROLL SUAVE */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /* 🔒 PERFORMANCE: Otimizações para sticky */
  transform: translateZ(0);
  will-change: scroll-position;
  contain: layout style;
  
  /* ✅ SCROLL HORIZONTAL: Garantir que funcione + permita expansão */
  overflow-x: auto;
  overflow-y: auto;
  
  /* ✅ NOVO: Durante resize, permitir expansão total */
  &.resizing-mode {
    overflow-x: visible;
    contain: none;
    will-change: width, scroll-position;
  }
}

.table-scroll-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
  background: var(--surface);
  border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

// 🔒 TABELA OTIMIZADA PARA STICKY + RESIZE DINÂMICO
table {
  min-width: 800px; /* ✅ LARGURA MÍNIMA: Para forçar scroll horizontal */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  
  /* ✅ ALTERADO: Layout automático para permitir resize dinâmico */
  table-layout: auto;
  
  position: relative;
  
  /* ✅ CONTEXTO: Para sticky funcionar */
  isolation: isolate;
  
  /* ✅ NOVO: Transição suave para mudanças de largura */
  transition: width 0.1s ease-out;
  
  /* ✅ NOVO: Durante resize, permitir crescimento livre */
  &.resizing-active {
    table-layout: fixed;
    min-width: unset;
    width: max-content;
    transition: none;
  }
}

// Estilos básicos para células
th, td {
  padding: 0;
  white-space: nowrap;
  height: 1.5rem;
  font-size: .875rem;
  line-height: 1.5rem;
  
  /* ✅ NOVO: Comportamento dinâmico durante resize */
  transition: width 0.1s ease-out;
  
  /* ✅ NOVO: Durante resize, largura específica */
  .resizing-active & {
    transition: none;
    width: var(--column-width, auto);
  }
}

td {
  border-bottom: 1px solid var(--divider-light);
  line-height: 1;
  color: var(--text-primary);
  padding-left: 1rem;
}

tr:not(.group-row):nth-child(even) {
  background-color: var(--surface-variant-subtle);
}

tr:not(.group-row):hover td {
  background-color: var(--hover-bg);
}

tr {
  height: 1.5rem;
  transition: background-color 0.2s ease;
}

.table-header {
  padding: 1rem;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
}

.table-footer {
  padding: 1rem;
  border-top: 1px solid var(--divider);
  background: var(--surface);
}

// ✅ LARGURAS DINÂMICAS PARA COLUNAS - PERMITIR CRESCIMENTO
th:not(.actions-column) {
  min-width: 120px; /* ✅ REDUZIDO: mínimo menor para mais flexibilidade */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* ✅ NOVO: Largura máxima flexível */
  max-width: none;
  
  /* ✅ NOVO: Durante resize, comportamento específico */
  &.resizing-active {
    min-width: 80px;
    max-width: none;
    width: var(--column-width);
    overflow: visible;
  }
}

td:not(.actions-column) {
  min-width: 120px; /* ✅ REDUZIDO: mínimo menor para mais flexibilidade */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* ✅ NOVO: Largura máxima flexível */
  max-width: none;
  
  /* ✅ NOVO: Durante resize, comportamento específico */
  .resizing-active & {
    min-width: 80px;
    max-width: none;
    overflow: visible;
  }
}

// ✅ NOVO: Estilos para modo de redimensionamento ativo
.data-table-container.resizing-mode {
  overflow-x: visible;
  
  .table-scroll-container {
    overflow-x: visible;
    contain: none;
  }
  
  table {
    table-layout: fixed;
    width: max-content;
    min-width: 800px;
  }
  
  th, td {
    transition: none;
  }
}

// ✅ NOVO: Indicador visual durante resize
.column-resizing {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary);
    z-index: 1000;
    box-shadow: 0 0 8px rgba(255, 200, 46, 0.6);
  }
}

// Melhorar comportamento do scroll horizontal
.table-scroll-container {
  /* ✅ SCROLL HORIZONTAL: Garantir que funcione */
  overflow-x: auto;
  overflow-y: auto;
  
  /* ✅ COMPORTAMENTO: Scroll suave */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /* ✅ PERFORMANCE: Otimizações para scroll */
  will-change: scroll-position;
  contain: layout style;
  
  /* ✅ NOVO: Durante resize, permitir expansão */
  &.allow-expansion {
    overflow-x: visible;
    contain: none;
  }
  
  /* ✅ INDICADORES: Mostrar quando há scroll */
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: var(--surface);
    border-radius: 4px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--divider);
    border-radius: 4px;
    
    &:hover {
      background: var(--text-secondary);
    }
  }
  
  /* ✅ SCROLLBAR HORIZONTAL: Estilo específico */
  &::-webkit-scrollbar:horizontal {
    height: 8px;
  }
}

// ========================================
// ✨ NOVO: MENSAGEM DE TABELA VAZIA
// ========================================

.empty-table-row {
  .empty-table-cell {
    padding: 0;
    border: none;
    text-align: center;
    
    .empty-table-content {
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      
      .empty-icon {
        font-size: 48px;
        color: var(--text-secondary);
        margin-bottom: 24px;
        opacity: 0.6;
        
        i {
          display: block;
        }
      }
      
      .empty-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 12px 0;
        line-height: 1.4;
      }
      
      .empty-message {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0 0 24px 0;
        line-height: 1.5;
        max-width: 400px;
      }
      
      .empty-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        
        .empty-action-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 10px 20px;
          background: var(--primary);
          color: var(--primary-contrast);
          border: none;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          
          &:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
          }
          
          &:active {
            transform: translateY(0);
          }
          
          i {
            font-size: 12px;
          }
        }
      }
    }
  }
}

// ✅ RESPONSIVO: Ajustes para mobile
@media (max-width: 768px) {
  .empty-table-row {
    .empty-table-cell {
      .empty-table-content {
        padding: 40px 20px;
        min-height: 250px;
        
        .empty-icon {
          font-size: 36px;
          margin-bottom: 20px;
        }
        
        .empty-title {
          font-size: 18px;
        }
        
        .empty-message {
          font-size: 13px;
        }
        
        .empty-actions {
          .empty-action-btn {
            padding: 8px 16px;
            font-size: 13px;
          }
        }
      }
    }
  }
} 