/**
 * THEME-PREMIUM-GLASSMORPHISM.CSS
 * 
 * Sistema Premium de Glassmorphism - Nível Profissional
 * Baseado nas especificações do prompt de modernização
 * Implementa efeitos visuais de alto impacto
 * 
 * Versão: 2.0 Premium - UX OTIMIZADO
 * Target: Nível das imagens de referência + Melhorias de UX
 */

/* ========================================
   🎨 VARIÁVEIS CSS PREMIUM - DESIGN TOKENS
======================================== */

:root {
  /* 🌅 TEMA CLARO PREMIUM (Light Blue Theme) - DESABILITADO PARA NEON */
  --bg-primary-light: linear-gradient(135deg, #0F1B2A 0%, #1A2332 100%);
  --bg-secondary-light: linear-gradient(135deg, #1A2332 0%, #1E293B 100%);
  --card-bg-light: rgba(15, 27, 42, 0.6);
  --card-border-light: rgba(0, 217, 255, 0.15);
  --text-primary-light: #F8FAFC;
  --text-secondary-light: #94A3B8;
  --accent-light: linear-gradient(135deg, #00D9FF 0%, #0099CC 100%);
  --accent-solid-light: #00D9FF;
  --shadow-light: rgba(0, 217, 255, 0.15);
  --glow-light: rgba(0, 217, 255, 0.3);
  
  /* Status Colors - Light */
  --success-light: linear-gradient(135deg, #00FFA3 0%, #00CC82 100%);
  --warning-light: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  --error-light: linear-gradient(135deg, #FF4D4D 0%, #CC0000 100%);
  --info-light: linear-gradient(135deg, #00D9FF 0%, #0099CC 100%);
  
  /* 🌙 TEMA ESCURO PREMIUM (Dark Blue Theme) - NEON SCI-FI */
  --bg-primary-dark: linear-gradient(135deg, #0F1B2A 0%, #1A2332 100%);
  --bg-secondary-dark: linear-gradient(135deg, #1A2332 0%, #1E293B 100%);
  --card-bg-dark: rgba(15, 27, 42, 0.6);
  --card-border-dark: rgba(0, 217, 255, 0.15);
  --text-primary-dark: #F8FAFC;
  --text-secondary-dark: #94A3B8;
  --accent-dark: linear-gradient(135deg, #00D9FF 0%, #0099CC 100%);
  --accent-solid-dark: #00D9FF;
  --shadow-dark: rgba(0, 0, 0, 0.5);
  --glow-dark: rgba(0, 217, 255, 0.4);
  
  /* Status Colors - Dark */
  --success-dark: linear-gradient(135deg, #00FFA3 0%, #00CC82 100%);
  --warning-dark: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  --error-dark: linear-gradient(135deg, #FF4D4D 0%, #CC0000 100%);
  --info-dark: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%);
  
  /* 🎯 GLASSMORPHISM PREMIUM PROPERTIES */
  --glass-blur-premium: blur(30px);
  --glass-blur-strong: blur(40px);
  --glass-blur-mobile: blur(15px);
  --glass-border-radius: 20px;
  --glass-border-radius-sm: 12px;
  --glass-border-radius-lg: 28px;
  
  /* 🎭 TRANSIÇÕES PREMIUM SUAVIZADAS */
  --transition-premium: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-hover: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: all 0.3s ease-out;
  --transition-bounce: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  
  /* 🌈 GRADIENTES PREMIUM */
  --gradient-primary: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --gradient-secondary: linear-gradient(135deg, #F093FB 0%, #F5576C 100%);
  --gradient-success: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
  --gradient-warning: linear-gradient(135deg, #FDBB2D 0%, #22C1C3 100%);
  
  /* 🎯 SISTEMA DE ESPAÇAMENTO PREMIUM */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 5rem;    /* 80px */
  
  /* 🎯 HEADER PREMIUM VARIABLES */
  --header-height-premium: 120px;
      /* 🎯 HEADER */
    --header-height: 80px;
    --header-logo-size: 165px; /* ✅ Aumentado mais 50% (110px → 165px) */
    --header-padding: var(--spacing-lg);
    --header-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  --header-spacing: var(--space-xl);
  --space-3xl: 4rem;    /* 64px */
}

/* Configuração automática dos temas */
[data-theme="light"] {
  --bg-primary: var(--bg-primary-light);
  --bg-secondary: var(--bg-secondary-light);
  --card-bg: var(--card-bg-light);
  --card-border: var(--card-border-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --accent: var(--accent-light);
  --accent-solid: var(--accent-solid-light);
  --shadow: var(--shadow-light);
  --glow: var(--glow-light);
  --success: var(--success-light);
  --warning: var(--warning-light);
  --danger: var(--error-light);
  --info: var(--info-light);
}

[data-theme="dark"] {
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --card-bg: var(--card-bg-dark);
  --card-border: var(--card-border-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --accent: var(--accent-dark);
  --accent-solid: var(--accent-solid-dark);
  --shadow: var(--shadow-dark);
  --glow: var(--glow-dark);
  --success: var(--success-dark);
  --warning: var(--warning-dark);
  --danger: var(--error-dark);
  --info: var(--info-dark);
}

/* ========================================
   🏗️ LAYOUT PREMIUM OTIMIZADO
======================================== */

/* Container principal - LAYOUT MAIS LARGO E EXPANSIVO */
.dashboard-main {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-xs);
  height: 100vh;
  padding: 0 var(--space-xs);
  background: var(--bg-primary);
  overflow: hidden;
  max-width: 100vw;
}

.main-content {
  padding: var(--space-xs) var(--space-sm);
  max-width: none;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  min-height: calc(100vh - 80px);
  
  /* Uso máximo da largura disponível */
  flex: 1;
  box-sizing: border-box;
}

/* Stats Grid - EXPANSIVO E RESPONSIVO */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  width: 100%;
  
  /* Garantir que use todo o espaço disponível */
  grid-auto-rows: minmax(auto, max-content);
}

/* ========================================
   💎 GLASSMORPHISM CARDS PREMIUM
======================================== */

.glass-card-premium {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-premium);
  -webkit-backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--card-border);
  border-radius: var(--glass-border-radius);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  position: relative;
  overflow: hidden;
  transition: var(--transition-hover);
  
  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);
}

.glass-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0.8;
  transition: var(--transition-smooth);
}

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

.glass-card-premium:hover {
  transform: translateY(-1px);
  transition: var(--transition-hover);
  box-shadow: 
    0 16px 48px var(--shadow),
    0 6px 28px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ❌ DESATIVAR :hover no summary-cards */
.summary-cards.glass-card-premium:hover {
  transform: none !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;
}

/* ========================================
   📊 STAT CARDS PREMIUM
======================================== */

.stat-card {
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-premium);
  -webkit-backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--card-border);
  border-radius: var(--glass-border-radius);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
  transition: var(--transition-hover);
  cursor: pointer;
  
  box-shadow: 
    0 4px 24px var(--shadow),
    0 2px 12px rgba(59, 130, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
  transform: translateY(-2px) scale(1.01);
  transition: var(--transition-hover);
  box-shadow: 
    0 16px 48px var(--shadow),
    0 6px 32px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.stat-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 8px var(--glow));
}

.stat-value {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  text-shadow: 0 2px 4px var(--shadow);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ========================================
   🎛️ DASHBOARD HEADER PREMIUM
======================================== */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-premium);
  -webkit-backdrop-filter: var(--glass-blur-premium);
  border: 1px solid var(--card-border);
  border-radius: var(--glass-border-radius-lg);
  margin-bottom: var(--space-lg);
  position: sticky;
  top: var(--space-sm);
  z-index: 100;
  
  box-shadow: 
    0 4px 24px var(--shadow),
    0 2px 16px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-family-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

.header-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 8px var(--glow));
}

/* ========================================
   🎛️ THEME TOGGLE PREMIUM
======================================== */

.theme-toggle {
  width: 56px;
  height: 56px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-premium);
  -webkit-backdrop-filter: var(--glass-blur-premium);
  border-radius: var(--glass-border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-hover);
  position: relative;
  overflow: hidden;
  
  box-shadow: 
    0 4px 16px var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-toggle:hover {
  transform: scale(1.05) rotate(8deg);
  transition: var(--transition-hover);
  box-shadow: 
    0 12px 32px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ========================================
   🚀 UX OPTIMIZATION IMPROVEMENTS
======================================== */

/* Esconder visão geral por padrão até aba específica ser clicada */
.overview-card {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease-out;
}

.overview-card.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Otimizar transições para evitar "pulos" nas tabelas */
.table-container,
.licenses-section,
.summary-cards {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: auto;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   📱 RESPONSIVIDADE OTIMIZADA
======================================== */

/* Telas grandes - Máximo aproveitamento */
@media (min-width: 1401px) {
  .dashboard-main {
    grid-template-columns: 220px 1fr;
    gap: var(--space-xs);
    padding: 0 var(--space-xs);
  }
  
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1400px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }
  
  .dashboard-main {
    grid-template-columns: 220px 1fr;
    gap: var(--space-xs);
  }
}

@media (max-width: 1024px) {
  .dashboard-main {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: 0 var(--space-xs);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
  
  .sidebar {
    order: 2;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  
  .dashboard-header {
    padding: var(--space-md);
    position: relative;
    top: auto;
  }
  
  .dashboard-header,
  .main-content {
    margin: var(--space-sm);
    border-radius: var(--glass-border-radius-sm);
  }
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
  
  .stat-card {
    padding: var(--space-md);
  }
}

@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  
  .main-content {
    padding: var(--space-xs) var(--space-sm);
  }
}

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

.status-connected {
  color: var(--success) !important;
}

.status-warning {
  color: var(--warning) !important;
}

.status-error {
  color: var(--danger) !important;
}

/* Reduce Motion para Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --card-border-light: rgba(59, 130, 246, 0.5);
    --card-border-dark: rgba(59, 130, 246, 0.6);
  }
}