/**
 * UX-OPTIMIZATIONS.CSS
 * 
 * Estilos específicos para otimizações de UX
 * Corrige problemas reportados pelo usuário
 */

/* ========================================
   🚀 CORREÇÕES DE UX ESPECÍFICAS
======================================== */

/* Classe para loading otimizado - evita pulos */
.loading-optimized {
  opacity: 0.7;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity 0.2s ease-out !important;
}

.loading-optimized::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid var(--card-border);
  border-top: 2px solid var(--accent-solid);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========================================
   📊 OTIMIZAÇÕES DE TABELA
======================================== */

/* Container de tabela otimizado */
.table-container.glass-card-premium {
  /* Otimizações para evitar pulos */
  contain: layout style paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: auto;
  
  /* Layout mais compacto */
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-sm);
  
  /* Transição suave */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Título da tabela otimizado */
.table-title {
  margin-bottom: var(--space-sm) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Conteúdo da tabela */
.table-content {
  /* Prevent layout shift */
  min-height: 200px;
  
  /* Smooth transitions */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Performance optimization */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========================================
   📱 RESPONSIVIDADE MELHORADA
======================================== */

/* Ajustes para telas pequenas */
@media (max-width: 768px) {
  .table-container.glass-card-premium {
    padding: var(--space-sm);
    margin: var(--space-xs) 0;
  }
  
  .table-title {
    font-size: 0.9rem !important;
  }
}

/* ========================================
   🎯 OTIMIZAÇÕES DE LAYOUT
======================================== */

/* Main content otimizado */
.main-content {
  /* Melhor uso do espaço */
  padding: var(--space-xs) var(--space-sm);
  
  /* Performance */
  contain: layout style;
  
  /* Evitar overflow horizontal */
  max-width: 100%;
  overflow-x: hidden;
}

/* Cards de estatística mais compactos */
.stat-card {
  padding: var(--space-md) !important;
  
  /* Evitar pulos */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========================================
   🌟 ANIMAÇÕES OTIMIZADAS
======================================== */

/* Animações de entrada mais suaves */
.overview-card.show {
  animation: slideInUp 0.3s ease-out forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover otimizado para cards - Transições suaves */
.glass-card-premium:hover {
  transform: translateY(-1px) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ❌ DESATIVAR hover no summary-cards */
.summary-cards.glass-card-premium:hover {
  transform: none !important;
}

.stat-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ========================================
   🔧 CORREÇÕES ESPECÍFICAS
======================================== */

/* Service tabs otimizadas */
.service-tabs {
  /* Melhor aproveitamento do espaço */
  gap: var(--space-xs) !important;
  padding: var(--space-sm) !important;
  
  /* Evitar overflow */
  overflow-x: auto;
  flex-wrap: nowrap;
}

.service-tab {
  /* Compactar abas */
  padding: var(--space-sm) var(--space-md) !important;
  white-space: nowrap;
  
  /* Transição suave */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ========================================
   📐 AJUSTES DE ESPAÇAMENTO
======================================== */

/* Reduzir margens excessivas globalmente */
.glass-card-premium {
  margin: var(--space-sm) 0 !important;
}

/* Stats grid mais compacto */
.stats-grid {
  margin-bottom: var(--space-md) !important;
  gap: var(--space-sm) !important;
}

/* Alerts container otimizado */
.alerts-container {
  margin: var(--space-sm) 0 !important;
}

/* ========================================
   ⚡ PERFORMANCE OPTIMIZATIONS
======================================== */

/* GPU acceleration para elementos principais */
.dashboard-main,
.main-content,
.table-container,
.stats-grid,
.glass-card-premium {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Otimizar scroll */
.main-content {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .overview-card,
  .table-container,
  .stat-card,
  .glass-card-premium {
    transition: none !important;
    animation: none !important;
  }
}