/**
 * CONSOLE-OVERRIDES.CSS - Overrides Específicos Console BluePartner
 * 
 * Ajustes finais e overrides para garantir que o design console
 * funcione perfeitamente com todos os componentes existentes
 */

/* ========================================
   🔧 CONSOLE SPECIFIC OVERRIDES
======================================== */

/* Ensure console layout takes precedence */
.dashboard-container.container.visual-flow {
  background: var(--bg-primary) !important;
  min-height: 100vh !important;
  padding: var(--spacing-md) !important;
}

/* Override any conflicting header styles */
.dashboard-header.glass-card {
  position: sticky !important;
  top: var(--spacing-md) !important;
  z-index: 1000 !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
}

/* Ensure sidebar glass effect */
.sidebar.glass-card {
  background: var(--card-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* ❌ DESABILITADO: Conflita com console-layout.css que usa display: grid
.stats-grid {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.stat-card {
  width: 200px !important;
  flex-shrink: 0 !important;
}
*/

/* Service tabs glass integration */
.service-tabs {
  background: rgba(59, 130, 246, 0.05) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* ========================================
   📦 SUMMARY CARDS - Sem movimento hover
======================================== */

/* Garantir que summary-cards NÃO mexe ao passar mouse */
.summary-cards,
.summary-cards.glass-card-premium {
  margin-bottom: var(--space-lg) !important; /* 24px - espaço entre summary e tabela */
  padding-left: var(--space-lg) !important; /* 24px lateral (igual tabela) */
  padding-right: var(--space-lg) !important; /* 24px lateral (igual tabela) */
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.summary-cards:hover,
.summary-cards.glass-card-premium:hover {
  transform: none !important;
  transition: none !important;
  animation: 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;
}

/* Remover ::before se existir */
.summary-cards::before,
.summary-cards.glass-card-premium::before {
  display: none !important;
}

/* ========================================
   📊 TABLE CONTENT - Alinhamento perfeito
======================================== */

/* Garantir que table-content alinha com summary-cards */
.table-content {
  margin-top: 0 !important; /* ✅ Zero gap entre summary e tabela */
  padding-top: 0 !important;
}

/* Premium DataTable Container */
.premium-datatable-container {
  margin-top: 0 !important; /* ✅ Zero gap */
}

/* ========================================
   🎯 ALINHAMENTO PERFEITO Summary + Tabela
======================================== */

/* Garantir que ambos respeitam o mesmo padding lateral */
.summary-cards .neon-card,
.table-content .premium-datatable-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Container pai já tem padding de 24px, filhos devem ser 100% */
.summary-cards,
.table-content {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Table content glass */
.table-container.glass-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  padding: var(--spacing-lg) !important;
  margin-top: var(--spacing-md) !important;
}

.table-title {
  color: var(--text-primary) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
}

.table-content {
  overflow-x: auto !important;
  background: transparent !important;
}

.table-content.loading {
  text-align: center !important;
  padding: var(--spacing-2xl) !important;
  color: var(--text-secondary) !important;
  font-size: 1rem !important;
}

/* Ensure all existing functionality works */
#table-content {
  display: block !important;
  width: 100% !important;
  min-height: 200px !important;
}

#table-content table {
  width: 100% !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

#table-content th {
  background: rgba(59, 130, 246, 0.1) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--card-border) !important;
  padding: 12px 8px !important;
  text-align: left !important;
  font-weight: 600 !important;
}

#table-content td {
  border-bottom: 1px solid rgba(59, 130, 246, 0.05) !important;
  color: var(--text-primary) !important;
  padding: 10px 8px !important;
  vertical-align: top !important;
}

#table-content tr:hover {
  background: rgba(59, 130, 246, 0.05) !important;
}

/* Ensure table is visible even when loading */
.table-content p {
  display: block !important;
  color: var(--text-secondary) !important;
  font-size: 1rem !important;
  text-align: center !important;
  padding: 2rem !important;
}

/* Charts integration */
.chart-container {
  background: var(--card-bg) !important;
  border-radius: var(--border-radius-md) !important;
}

/* Loading states */
.loading {
  color: var(--text-secondary) !important;
}

/* Alerts styling */
.alert {
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .dashboard-container.container.visual-flow {
    padding: var(--spacing-sm) !important;
  }
  
  .dashboard-header.glass-card {
    margin: 0 0 var(--spacing-md) 0 !important;
  }
}

/* Dark theme specific overrides - APLICADO SEMPRE (NEON FORÇADO) */
.glass-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

#table-content th {
  background: rgba(0, 217, 255, 0.1) !important;
}

/* ✅ LIGHT THEME DESABILITADO - NEON PERMANENTE */
[data-theme="light"] .glass-card {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

/* Ensure console branding */
.header-title span::after {
  content: " Console";
  font-weight: 400;
  opacity: 0.8;
}

/* ========================================
   🎯 SIDEBAR SEMPRE VISÍVEL - SEM AUTO-HIDE
======================================== */

.sidebar,
.sidebar.glass-card,
.sidebar.glass-card-premium {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important; /* Remove transições de ocultar */
}

/* Remove qualquer comportamento de hover que oculte */
.dashboard-main:not(:hover) .sidebar,
body:not(:hover) .sidebar {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ========================================
   ✅ CHECKBOX PADRONIZADO - GLASS STYLE
======================================== */

.glass-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  padding: 10px !important;
  border-radius: 8px !important;
  transition: background 0.2s ease !important;
}

.glass-checkbox:hover {
  background: rgba(0, 217, 255, 0.05) !important;
}

.glass-checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid rgba(0, 217, 255, 0.4) !important;
  border-radius: 4px !important;
  background: rgba(0, 217, 255, 0.05) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.glass-checkbox input[type="checkbox"]:hover {
  border-color: rgba(0, 217, 255, 0.6) !important;
  background: rgba(0, 217, 255, 0.1) !important;
}

.glass-checkbox input[type="checkbox"]:checked {
  background: rgba(0, 217, 255, 0.3) !important;
  border-color: #00D9FF !important;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.3) !important;
}

.glass-checkbox input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #00D9FF !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

.glass-checkbox .checkbox-text {
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  user-select: none !important;
}

/* Remove checkmark antigo se existir */
.glass-checkbox .checkmark {
  display: none !important;
}

/* ========================================
   ⚠️ BOTÃO ALERTAS - PADRONIZADO (SEM COR)
======================================== */

.service-tab[data-service="alerts"] {
  /* Garante que use o mesmo estilo dos outros tabs */
  background: rgba(0, 217, 255, 0.05) !important;
}

.service-tab[data-service="alerts"]:hover {
  background: rgba(0, 217, 255, 0.15) !important;
}

.service-tab[data-service="alerts"].active {
  background: rgba(0, 217, 255, 0.25) !important;
  border-left: 3px solid #00D9FF !important;
}

/* Ícone SVG do alerta com cor padrão (não vermelho) */
.service-tab[data-service="alerts"] svg {
  color: currentColor !important; /* Usa a cor do texto padrão */
  stroke: currentColor !important;
}