// ========================================
// 🎯 COLUMN DIRECT FILTERS - Filtros Diretos das Colunas
// Estilos para filtros tipo Excel nas colunas
// ========================================

// 🎨 HEADER: Ações das colunas
.column-actions {
  display: flex;
  align-items: center;
  gap: 2px; // ✅ REDUZIDO: Menor espaçamento entre ícones
  margin-left: auto; // ✅ NOVO: Empurra ícones para a direita
  flex-shrink: 0; // ✅ NOVO: Evita que os ícones encolham

  .sort-icon {
    color: var(--text-secondary);
    font-size: 12px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;

    &:hover {
      color: var(--primary);
    }
  }

  .column-filter-btn {
    background: transparent;
    border: none;
    padding: 2px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 10px;
    min-width: 14px;
    height: 14px;

    &:hover {
      background: var(--surface-hover);
      color: var(--primary);
    }

    &.active {
      color: var(--primary);
      background: var(--primary-light);
    }

    &.open {
      background: var(--primary);
      color: white;
    }

    i {
      font-size: inherit;
      line-height: 1;
    }
  }
}

// ✨ NOVO: Melhorias no layout do cabeçalho das colunas
th[data-field] .th-content {
  justify-content: space-between; // ✅ Distribui texto à esquerda e ícones à direita
  
  .header-text {
    padding-right: 8px; // ✅ Espaçamento entre texto e ícones
  }
}

// 🎨 OVERLAY: Container do filtro da coluna
.column-filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000; // ✅ CORRIGIDO: Z-index maior que o modal-overlay (9999)
  pointer-events: none; // Permite clicks através do overlay
  
  .column-filter-panel {
    position: absolute;
    z-index: 10001;
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 280px;
    max-height: 400px;
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
    pointer-events: auto; // Reabilita clicks no painel
    
    // ✅ CORRIGIDO: Garantir que aparece acima de tudo
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

// 🎨 PAINEL: Estilos de fallback para posicionamento relativo
.column-filter-panel-relative {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 280px;
  max-height: 400px;
  overflow: hidden;
  animation: slideDown 0.2s ease-out;
  
  // ✅ CORRIGIDO: Garantir que aparece acima de tudo
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// 🎨 HEADER: Cabeçalho do painel
.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--divider);

  .filter-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;

    i {
      color: var(--primary);
      font-size: 12px;
    }
  }

  .close-filter-btn {
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;

    &:hover {
      background: var(--surface-hover);
      color: var(--error);
    }

    i {
      font-size: 12px;
    }
  }
}

// 🎨 CONTENT: Conteúdo do painel
.filter-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 320px; // Altura máxima total do conteúdo
}

// ✨ NOVO: Área scrollável do conteúdo
.filter-panel-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  min-height: 0; // Permite flex shrink
}

// 🎨 NOTICE: Aviso de filtros cumulativos
.cumulative-filter-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--warning-light);
  border: 1px solid var(--warning);
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--warning-dark);

  i {
    color: var(--warning);
    font-size: 11px;
  }

  span {
    font-weight: 500;
  }
}

// 🎨 SEARCH: Input de pesquisa
.filter-search {
  position: relative;
  margin-bottom: 16px;

  .filter-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--divider);
    border-radius: 6px;
    font-size: 14px;
    background: var(--surface);
    color: var(--text-primary);
    transition: border-color 0.2s ease;

    &:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px var(--primary-light);
    }

    &::placeholder {
      color: var(--text-secondary);
    }
  }

  .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 12px;
    pointer-events: none;
  }
}

// 🎨 CONTROLS: Controles de seleção
.filter-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);

  .filter-control-btn {
    background: transparent;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    transition: background-color 0.2s ease;

    &:hover {
      background: var(--surface-hover);
    }

    i {
      color: var(--primary);
      font-size: 12px;
    }
  }

  .selection-count {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--surface-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;

    .filtered-indicator {
      color: var(--warning);
      font-weight: 500;
      font-size: 11px;
      
      &:hover {
        color: var(--warning-dark);
      }
    }
  }
}

// 🎨 VALUES: Lista de valores
.filter-values-list {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 16px;

  // ✅ CUSTOM SCROLLBAR
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--surface-secondary);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--divider);
    border-radius: 3px;

    &:hover {
      background: var(--text-secondary);
    }
  }

  .filter-value-item {
    padding: 2px 0;

    .filter-value-label {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s ease;
      font-size: 13px;

      &:hover {
        background: var(--surface-hover);
      }

      .filter-value-checkbox {
        display: none;
      }

      .checkbox-custom {
        width: 16px;
        height: 16px;
        border: 2px solid var(--divider);
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        flex-shrink: 0;

        i {
          font-size: 10px;
          color: white;
          opacity: 0;
          transition: opacity 0.2s ease;
        }
      }

      .value-text {
        color: var(--text-primary);
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .value-preview {
        margin-left: 8px;
        display: flex;
        align-items: center;
        font-size: 11px;
        opacity: 0.8;
        
        // ✅ Replicar estilos dos badges/status originais
        .status-badge, .badge {
          font-size: 10px;
          padding: 1px 6px;
          border-radius: 4px;
          transform: scale(0.85);
          transform-origin: center;
        }
      }

      // ✅ ESTADO CHECKED
      .filter-value-checkbox:checked + .checkbox-custom {
        background: var(--primary);
        border-color: var(--primary);

        i {
          opacity: 1;
        }
      }
    }
  }
}

// 🎨 ACTIONS: Ações do painel (footer fixo)
.filter-panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--divider);
  background: var(--surface);
  flex-shrink: 0; // Não permitir que encolha
  position: sticky;
  bottom: 0;

  .filter-action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;

    i {
      font-size: 11px;
    }

    &.secondary {
      background: var(--surface-secondary);
      color: var(--text-primary);
      border: 1px solid var(--divider);

      &:hover {
        background: var(--surface-hover);
        border-color: var(--text-secondary);
      }
    }

    &.primary {
      background: var(--primary);
      color: white;

      &:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
      }
    }
  }
}

// 🎨 RESPONSIVE: Mobile
@media (max-width: 768px) {
  .column-filter-panel {
    width: 260px;
    max-height: 350px;
  }

  .filter-panel-content {
    max-height: 280px;
  }

  .filter-panel-body {
    padding: 12px;
  }

  .filter-values-list {
    max-height: 140px; // Reduzido para dar espaço ao footer fixo
  }

  .filter-panel-actions {
    padding: 10px 12px;
  }
}

// 🎨 HEADER: Configuração dos headers para posicionamento
th {
  position: relative; // ✅ CORRIGIDO: Todos os headers precisam de position relative
}

// 🎨 INDICADOR: Coluna com filtro ativo
th[data-field] {
  position: relative;

  &.has-active-filter {
    .column-filter-btn {
      color: var(--primary) !important;
      background: var(--primary-light) !important;
    }

    .header-text::after {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      width: 6px;
      height: 6px;
      background: var(--primary);
      border-radius: 50%;
    }
  }
}

// 🎨 DARK MODE: Ajustes para tema escuro
[data-theme="dark"] {
  .column-filter-panel {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  .filter-search-input {
    &:focus {
      box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
    }
  }

  .filter-action-btn.primary:hover {
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
  }
}

// ✨ NOVO: Estilos para indicador de ações sempre disponíveis
.bulk-actions-container {
  .available-indicator {
    font-size: 10px;
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    
    i {
      font-size: 8px;
    }
  }

  .selection-count {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--surface-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
  }
} 