/**
 * PREMIUM-COLOR-SYSTEM.CSS
 * 
 * Sistema de Cores Premium - Nível Profissional
 * Cores refinadas seguindo as especificações do prompt
 * Implementa gradientes, transições e harmonias cromáticas
 * 
 * Baseado nas referências de tema claro/escuro
 */

/* ========================================
   🎨 PALETA DE CORES PREMIUM REFINADA
======================================== */

:root {
  /* 🌅 TEMA CLARO PREMIUM - CORES APRIMORADAS */
  --primary-blue-light: #3B82F6;
  --primary-blue-dark: #1D4ED8;
  --secondary-blue-light: #60A5FA;
  --secondary-blue-dark: #2563EB;
  
  /* Gradientes Direcionais Premium */
  --gradient-primary-light: linear-gradient(135deg, #3B82F6 0%, #1E40AF 50%, #1D4ED8 100%);
  --gradient-secondary-light: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%);
  --gradient-accent-light: linear-gradient(135deg, #06B6D4 0%, #0891B2 50%, #0E7490 100%);
  
  /* Background Gradientes Sutis */
  --bg-gradient-light: linear-gradient(135deg, 
    #FFFFFF 0%, 
    #F8FAFC 30%, 
    #F1F5F9 70%, 
    #E2E8F0 100%
  );
  
  --card-gradient-light: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(248, 250, 252, 0.95) 100%
  );
  
  /* 🌙 TEMA ESCURO PREMIUM - CORES APRIMORADAS */
  --gradient-primary-dark: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%);
  --gradient-secondary-dark: linear-gradient(135deg, #93C5FD 0%, #60A5FA 50%, #3B82F6 100%);
  --gradient-accent-dark: linear-gradient(135deg, #22D3EE 0%, #06B6D4 50%, #0891B2 100%);
  
  /* Background Gradientes Escuros */
  --bg-gradient-dark: linear-gradient(135deg,
    #0F172A 0%,
    #1E293B 30%,
    #334155 70%,
    #475569 100%
  );
  
  --card-gradient-dark: linear-gradient(135deg,
    rgba(30, 58, 138, 0.2) 0%,
    rgba(30, 58, 138, 0.15) 50%,
    rgba(59, 130, 246, 0.1) 100%
  );
  
  /* 🌈 STATUS COLORS PREMIUM */
  --success-gradient: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
  --warning-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
  --error-gradient: linear-gradient(135deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%);
  --info-gradient: linear-gradient(135deg, #06B6D4 0%, #0891B2 50%, #0E7490 100%);
  
  /* 💫 GLOW & SHADOW COLORS */
  --glow-primary: rgba(59, 130, 246, 0.4);
  --glow-secondary: rgba(139, 92, 246, 0.3);
  --glow-accent: rgba(6, 182, 212, 0.3);
  --glow-success: rgba(16, 185, 129, 0.3);
  --glow-warning: rgba(245, 158, 11, 0.3);
  --glow-error: rgba(239, 68, 68, 0.3);
  
  /* 🌟 BORDER COLORS PREMIUM */
  --border-light-primary: rgba(59, 130, 246, 0.3);
  --border-light-secondary: rgba(139, 92, 246, 0.2);
  --border-dark-primary: rgba(60, 165, 250, 0.4);
  --border-dark-secondary: rgba(147, 197, 253, 0.3);
}

/* ========================================
   🎯 APLICAÇÃO DE CORES POR TEMA
======================================== */

[data-theme="light"] {
  /* Backgrounds Premium */
  --bg-primary: var(--bg-gradient-light);
  --bg-secondary: var(--bg-secondary-light);
  --card-bg: var(--card-gradient-light);
  
  /* Gradientes Ativos */
  --gradient-primary: var(--gradient-primary-light);
  --gradient-secondary: var(--gradient-secondary-light);
  --gradient-accent: var(--gradient-accent-light);
  
  /* Bordas Premium */
  --border-primary: var(--border-light-primary);
  --border-secondary: var(--border-light-secondary);
  
  /* Textos com Melhor Contraste */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-accent: var(--primary-blue-dark);
}

[data-theme="dark"] {
  /* Backgrounds Premium */
  --bg-primary: var(--bg-gradient-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --card-bg: var(--card-gradient-dark);
  
  /* Gradientes Ativos */
  --gradient-primary: var(--gradient-primary-dark);
  --gradient-secondary: var(--gradient-secondary-dark);
  --gradient-accent: var(--gradient-accent-dark);
  
  /* Bordas Premium */
  --border-primary: var(--border-dark-primary);
  --border-secondary: var(--border-dark-secondary);
  
  /* Textos com Melhor Contraste */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-accent: var(--secondary-blue-light);
}

/* ========================================
   🎨 COMPONENTES COM CORES PREMIUM
======================================== */

/* Header com Gradiente */
.dashboard-header {
  background: var(--card-bg);
  border: 2px solid var(--border-primary);
  position: relative;
}

.dashboard-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: inherit;
}

/* Theme Toggle com Gradiente Ativo */
.theme-toggle:hover {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
}

/* Stats Cards com Gradientes Individuais */
.stat-card.empresas:hover {
  background: var(--gradient-primary);
  color: white;
}

.stat-card.data:hover {
  background: var(--gradient-secondary);
  color: white;
}

.stat-card.conexao:hover {
  background: var(--gradient-accent);
  color: white;
}

.stat-card.registros:hover {
  background: var(--success-gradient);
  color: white;
}

/* Ícones dos Stats com Cores Temáticas */
.stat-card.empresas .stat-icon {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1) 0%, 
    rgba(29, 78, 216, 0.1) 100%
  );
  border-color: var(--primary-blue-light);
  color: var(--primary-blue-light);
}

.stat-card.data .stat-icon {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.1) 0%, 
    rgba(124, 58, 237, 0.1) 100%
  );
  border-color: #8B5CF6;
  color: #8B5CF6;
}

.stat-card.conexao .stat-icon {
  background: linear-gradient(135deg, 
    rgba(6, 182, 212, 0.1) 0%, 
    rgba(8, 145, 178, 0.1) 100%
  );
  border-color: #06B6D4;
  color: #06B6D4;
}

.stat-card.registros .stat-icon {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.1) 0%, 
    rgba(5, 150, 105, 0.1) 100%
  );
  border-color: #10B981;
  color: #10B981;
}

/* Service Tabs com Cores Premium */
.service-tab:hover {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.1) 0%, 
    rgba(139, 92, 246, 0.1) 100%
  );
  border-color: var(--border-primary);
}

.service-tab.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 15px var(--glow-primary);
}

/* Buttons Premium */
.btn:hover {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: 0 6px 20px var(--glow-primary);
}

.btn-primary {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
}

.btn-primary:hover {
  background: var(--gradient-secondary);
  box-shadow: 0 8px 25px var(--glow-secondary);
  transform: translateY(-2px) scale(1.02);
}

/* ========================================
   🌟 STATUS INDICATORS PREMIUM
======================================== */

.status-connected {
  background: var(--success-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

[data-theme="dark"] .status-connected {
  color: #34D399 !important;
  -webkit-text-fill-color: #34D399;
}

.connection-status .status-indicator {
  background: var(--success-gradient);
  box-shadow: 0 0 10px var(--glow-success);
}

/* ========================================
   💫 ANIMAÇÕES DE COR
======================================== */

/* Transição Suave de Cores entre Temas */
* {
  transition: 
    background 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Color Transitions */
.glass-card-premium:hover {
  border-color: var(--border-primary);
  box-shadow: 
    0 20px 64px var(--shadow),
    0 8px 32px var(--glow-primary),
    0 4px 16px var(--glow-secondary);
}

/* ❌ DESATIVAR hover no summary-cards */
.summary-cards.glass-card-premium:hover {
  border-color: var(--card-border) !important;
  box-shadow: 
    0 8px 32px var(--shadow),
    0 2px 16px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   🎯 TEMA-SPECIFIC OVERRIDES
======================================== */

/* Garantir Textos Legíveis no Tema Claro */
[data-theme="light"] .stat-value,
[data-theme="light"] .card-title,
[data-theme="light"] .table-title {
  color: var(--text-primary) !important;
}

[data-theme="light"] .stat-label,
[data-theme="light"] .text-secondary {
  color: var(--text-secondary) !important;
}

/* Melhorar Contraste no Tema Escuro */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .card-title,
[data-theme="dark"] .table-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .text-secondary {
  color: var(--text-secondary) !important;
}

/* ========================================
   🌈 GRADIENT ANIMATIONS
======================================== */

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Loading States com Gradientes */
.loading-premium {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--glow-primary) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s ease-in-out infinite;
}

@keyframes loading-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}