// ========================================
// 🎯 ACTIONS STYLES - Data Table
// Ações, checkboxes, seleção e paginação
// ========================================

// ========================================
// ✨ ESTILOS PARA CHECKBOXES E AÇÕES
// ========================================

.actions-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
}

.actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.select-all-checkbox,
.row-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--idt-primary-color);
  
  &:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
  }
}

.select-all-checkbox:indeterminate {
  accent-color: var(--idt-warning, #ff9800);
}

// 🔒 COLUNA DE AÇÕES STICKY - HORIZONTAL E VERTICAL
.actions-column {
  min-width: 120px;
  width: 120px;
  text-align: center;
  
  /* ✅ STICKY: Horizontal */
  position: sticky;
  left: 0;
  z-index: 98; /* ✅ MENOR: que thead mas maior que conteúdo */
  
  /* ✅ BACKGROUND: Variável de tema */
  background: var(--surface);
  
  /* ✅ SOMBRA: Para destacar coluna fixa */
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
  border-right: 1px solid var(--divider);
  
  /* ✅ GARANTIR: Background sólido para sticky */
  background-clip: padding-box;
}

// 🔒 HEADER DA COLUNA DE AÇÕES STICKY
th.actions-column {
  z-index: 103; /* ✅ MAIOR: z-index ainda maior para o header da coluna de ações */
  background: var(--surface-variant);
  
  /* ✅ SOMBRA: Combinada para header de ações */
  box-shadow: 
    2px 0 6px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* ✅ GARANTIR: Background sólido para sticky */
  background-clip: padding-box;
}

// ✨ NOVO: Destaque para linhas selecionadas
tr.data-row.row-selected {
  background: linear-gradient(135deg, 
    rgba(255, 200, 46, 0.15) 0%, 
    rgba(255, 200, 46, 0.08) 100%
  ) !important;
  border-left: 4px solid #FFC82E !important;
  box-shadow: 0 2px 8px rgba(255, 200, 46, 0.2);
  position: relative;
  
  /* ✅ ANIMAÇÃO: Transição suave */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ✅ DESTAQUE: Borda superior sutil */
  border-top: 1px solid rgba(255, 200, 46, 0.3);
  border-bottom: 1px solid rgba(255, 200, 46, 0.3);
  
  td {
    background: transparent !important;
    color: #000000 !important;
    font-weight: 500;
    
    /* ✅ ANIMAÇÃO: Transição para as células */
    transition: all 0.3s ease;
  }
  
  /* ✅ HOVER: Intensificar quando hover na linha selecionada */
  &:hover {
    background: linear-gradient(135deg, 
      rgba(255, 200, 46, 0.25) 0%, 
      rgba(255, 200, 46, 0.15) 100%
    ) !important;
    box-shadow: 0 4px 12px rgba(255, 200, 46, 0.3);
    transform: translateY(-1px);
    
    td {
      color: #000000 !important;
      font-weight: 600;
    }
  }
  
  /* ✅ COLUNA DE AÇÕES: Destaque especial */
  .actions-column {
    background: linear-gradient(135deg, 
      rgba(255, 200, 46, 0.2) 0%, 
      rgba(255, 200, 46, 0.1) 100%
    ) !important;
    border-right: 1px solid rgba(255, 200, 46, 0.4) !important;
    box-shadow: 
      2px 0 6px rgba(255, 200, 46, 0.2),
      inset -1px 0 0 rgba(255, 200, 46, 0.3);
  }
  
  /* ✅ CHECKBOX: Destaque especial */
  .row-checkbox {
    accent-color: #FFC82E;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(255, 200, 46, 0.3);
    border-radius: 2px;
  }
}

.actions-column {
  width: 80px;
  text-align: center;
  vertical-align: middle;
}

td.actions-cell {
  padding: 0;
  vertical-align: middle;
  height: 100%;
  line-height: 24px;
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;

  i {
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    opacity: 0.8;

    &:hover {
      color: var(--primary);
      opacity: 1;
      transform: scale(1.1);
    }
  }
  
  /* ✅ HOVER: Fundo sutil */
  &:hover {
    background: rgba(var(--primary-rgb, 255, 200, 46), 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* ✅ ACTIVE: Feedback visual */
  &:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}

// ========================================
// 📄 PAGINAÇÃO
// ========================================

.pagination {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(255, 200, 46, .02) 100%);
  border-top: 1px solid rgba(255, 200, 46, .2);
}

@media (min-width: 768px) {
  .pagination {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
}

.pagination-info {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  
  strong {
    color: #000000;
    font-weight: 600;
  }
  
  @media (max-width: 767px) {
    text-align: left;
    margin-bottom: 0.25rem;
  }
}

.pagination-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  
  @media (min-width: 768px) {
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    margin-left: auto;
  }
  
  @media (max-width: 767px) {
    width: auto;
    align-self: flex-end;
  }
}

/* Seletor de itens por página no menu superior */
.menu-right .page-size-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  
  label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    min-width: fit-content;
  }
}

/* Seletor de itens por página original (agora usado apenas na paginação se necessário) */
.page-size-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  
  label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
  }
  
  // O select usa o estilo padrão global da aplicação
}

/* Controles de navegação */
.navigation-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  
  @media (max-width: 767px) {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Botões de paginação base */
.pagination-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0.5rem;
  border: 1px solid rgba(255, 200, 46, 0.3);
  border-radius: 6px;
  background: white;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  
  &:hover:not(:disabled) {
    background: rgba(255, 200, 46, 0.1);
    border-color: rgba(255, 200, 46, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 200, 46, 0.2);
  }
  
  &:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 200, 46, 0.2);
  }
  
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--text-secondary);
    border-color: var(--divider);
    background: var(--surface-disabled);
    transform: none;
    box-shadow: none;
  }
  
  i {
    font-size: 0.875rem;
  }
}

/* Botões primeira/última página */
.pagination-button.first-last {
  i {
    font-size: 1rem;
  }
}

/* Botões anterior/próxima */
.pagination-button.prev-next {
  min-width: 40px;
  
  i {
    font-size: 0.875rem;
  }
}

/* Números de páginas */
.page-numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0.5rem;
  
  @media (max-width: 480px) {
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5rem 0;
  }
}

.pagination-button.page-number {
  min-width: 36px;
  
  &.active {
    background: linear-gradient(135deg, #FFC82E 0%, #FFB300 100%);
    color: #000000;
    border-color: #FFC82E;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 200, 46, 0.3);
    
    &:hover {
      background: linear-gradient(135deg, #FFD700 0%, #FFC82E 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255, 200, 46, 0.4);
    }
  }
}

.page-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--text-secondary);
  font-weight: 600;
  user-select: none;
}

/* Responsividade extra para telas muito pequenas */
@media (max-width: 480px) {
  .pagination {
    padding: 0.375rem 0.25rem !important; /* ✅ Otimizado */
    gap: 0.25rem !important; /* ✅ Reduzido para máximo espaço */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .pagination-info {
    font-size: 0.75rem !important; /* ✅ Menor para mobile */
    flex-shrink: 0; /* ✅ Evita compressão */
    margin-right: 0.5rem; /* ✅ Espaço mínimo */
  }
  
  .pagination-controls {
    gap: 0.25rem !important; /* ✅ Reduzido */
    flex-direction: row !important;
    flex-shrink: 0; /* ✅ Evita compressão dos controles */
  }
  
  .navigation-controls {
    gap: 0.125rem !important; /* ✅ Botões mais próximos */
  }
  
  .pagination-button {
    min-width: 30px !important; /* ✅ Reduzido de 32px */
    height: 30px !important; /* ✅ Reduzido de 32px */
    font-size: 0.75rem !important; /* ✅ Fonte menor */
    padding: 0.25rem !important; /* ✅ Padding mínimo */
  }
  
  .pagination-button.first-last {
    min-width: 28px !important; /* ✅ Ainda menor para primeira/última */
    
    i {
      font-size: 0.7rem !important; /* ✅ Ícone menor */
    }
  }
  
  .pagination-button.prev-next {
    min-width: 28px !important; /* ✅ Menor para anterior/próxima */
    
    i {
      font-size: 0.65rem !important; /* ✅ Ícone menor */
    }
  }
  
  .page-numbers {
    gap: 0.125rem !important; /* ✅ Números mais próximos */
    margin: 0 0.25rem !important; /* ✅ Margem reduzida */
  }
  
  .page-ellipsis {
    min-width: 20px !important; /* ✅ Elipses menores */
    height: 30px !important;
    font-size: 0.7rem !important;
  }
  
  .page-size-selector {
    font-size: 0.7rem !important; /* ✅ Ainda menor */
    
    select {
      padding: 0.125rem 0.25rem !important; /* ✅ Padding mínimo */
      font-size: 0.7rem !important;
      min-width: 40px !important; /* ✅ Largura mínima */
    }
  }
}

// ========================================
// 🌙 TEMA DARK - AÇÕES E PAGINAÇÃO
// ========================================

/* Tema escuro - Coluna de ações */
:host-context(.dark-theme) .actions-column {
  background: var(--surface);
  border-right-color: var(--divider);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3);
}

:host-context(.dark-theme) th.actions-column {
  background: var(--surface-variant);
  box-shadow: 
    2px 0 6px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ✅ TEMA ESCURO: Melhor visibilidade dos ícones de ação */
:host-context(.dark-theme) .action-button {
  i {
    color: #E0E0E0; /* ✅ Cor mais clara para tema escuro */
    opacity: 0.9;
    
    &:hover {
      color: #FFD700; /* ✅ Dourado vibrante no hover */
      opacity: 1;
      transform: scale(1.15);
      text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
    }
  }
  
  /* ✅ HOVER: Fundo mais visível no tema escuro */
  &:hover {
    background: rgba(255, 215, 0, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
  }
  
  /* ✅ ACTIVE: Feedback no tema escuro */
  &:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 215, 0, 0.15);
    background: rgba(255, 215, 0, 0.2);
  }
}

/* ✅ LINHA SELECIONADA: Ícones ainda mais destacados */
tr.data-row.row-selected .action-button {
  i {
    color: #000000;
    opacity: 1;
    font-weight: 600;
    
    &:hover {
      color: #B8860B; /* ✅ Tom mais escuro do dourado */
      transform: scale(1.2);
    }
  }
  
  &:hover {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

/* ✅ TEMA ESCURO + LINHA SELECIONADA: Combinação perfeita */
:host-context(.dark-theme) tr.data-row.row-selected .action-button {
  i {
    color: #FFFF00; /* ✅ Amarelo brilhante para máximo contraste */
    opacity: 1;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    
    &:hover {
      color: #FFFFFF; /* ✅ Branco no hover para máximo destaque */
      transform: scale(1.25);
      text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    }
  }
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
  }
}

/* ✨ TEMA ESCURO: Destaque para linhas selecionadas */
:host-context(.dark-theme) tr.data-row.row-selected {
  background: linear-gradient(135deg, 
    rgba(255, 200, 46, 0.25) 0%, 
    rgba(255, 200, 46, 0.12) 100%
  ) !important;
  border-left: 4px solid #FFD700 !important;
  box-shadow: 0 2px 12px rgba(255, 200, 46, 0.3);
  
  /* ✅ DESTAQUE: Bordas mais visíveis no tema escuro */
  border-top: 1px solid rgba(255, 215, 0, 0.4);
  border-bottom: 1px solid rgba(255, 215, 0, 0.4);
  
  td {
    background: transparent !important;
    color: #FFD700 !important;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  /* ✅ HOVER: Mais intenso no tema escuro */
  &:hover {
    background: linear-gradient(135deg, 
      rgba(255, 200, 46, 0.35) 0%, 
      rgba(255, 200, 46, 0.2) 100%
    ) !important;
    box-shadow: 0 4px 16px rgba(255, 200, 46, 0.4);
    transform: translateY(-1px);
    
    td {
      color: #FFFF00 !important;
      font-weight: 600;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
  }
  
  /* ✅ COLUNA DE AÇÕES: Tema escuro */
  .actions-column {
    background: linear-gradient(135deg, 
      rgba(255, 200, 46, 0.3) 0%, 
      rgba(255, 200, 46, 0.15) 100%
    ) !important;
    border-right: 1px solid rgba(255, 215, 0, 0.5) !important;
    box-shadow: 
      2px 0 8px rgba(255, 200, 46, 0.3),
      inset -1px 0 0 rgba(255, 215, 0, 0.4);
  }
  
  /* ✅ CHECKBOX: Tema escuro */
  .row-checkbox {
    accent-color: #FFD700;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.4);
    border-radius: 2px;
  }
}

/* Tema escuro - paginação */
:host-context(.dark-theme) .pagination {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(255, 200, 46, 0.05) 100%
  );
  border-top-color: rgba(255, 200, 46, 0.3);
}

:host-context(.dark-theme) .pagination-info strong {
  color: #FFC82E;
}

:host-context(.dark-theme) .pagination-button {
  background: rgba(0, 0, 0, 0.5);
  color: #FFC82E;
  border-color: rgba(255, 200, 46, 0.4);
  
  &:hover:not(:disabled) {
    background: rgba(255, 200, 46, 0.2);
    border-color: rgba(255, 200, 46, 0.6);
    color: #FFD700;
  }
  
  &.active {
    background: linear-gradient(135deg, #FFC82E 0%, #FFB300 100%);
    color: #000000;
    
    &:hover {
      background: linear-gradient(135deg, #FFD700 0%, #FFC82E 100%);
    }
  }
}

// ========================================
// ✨ CORREÇÃO: Coluna de ações sempre opaca em linhas selecionadas
// ========================================

/* Coluna de ações opaca em linhas selecionadas */
tr.data-row.row-selected td.actions-column,
tr.data-row.row-selected .actions-column {
  background: var(--surface) !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15) !important;
  border-right: 1px solid var(--divider) !important;
}

/* Coluna de ações opaca no hover de linhas selecionadas */  
tr.data-row.row-selected:hover td.actions-column,
tr.data-row.row-selected:hover .actions-column {
  background: var(--surface) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2) !important;
  border-right: 1px solid var(--divider) !important;
}

/* Tema escuro - Coluna de ações opaca em linhas selecionadas */
:host-context(.dark-theme) tr.data-row.row-selected td.actions-column,
:host-context(.dark-theme) tr.data-row.row-selected .actions-column {
  background: var(--surface) !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3) !important;
  border-right: 1px solid var(--divider) !important;
}

/* Tema escuro - Coluna de ações opaca no hover de linhas selecionadas */
:host-context(.dark-theme) tr.data-row.row-selected:hover td.actions-column,
:host-context(.dark-theme) tr.data-row.row-selected:hover .actions-column {
  background: var(--surface) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4) !important;
  border-right: 1px solid var(--divider) !important;
} 