/* ASPEKT Gateway Theme Override */
:root {
  /* ASPEKT Brand Colors */
  --aspekt-deep-cove: #051040;
  --aspekt-aurora-green: #6adc99;
  --aspekt-catalina-blue: #062a78;
  --aspekt-bright-gray: #f5f6f9;
  --aspekt-cobalt-flame: #4e719d;
  
  /* Primary Colors */
  --bg: var(--aspekt-deep-cove) !important;
  --bg-accent: #0a1656 !important;
  --bg-elevated: #0f1d6b !important;
  --bg-hover: #142475 !important;
  --bg-muted: #162b80 !important;
  --card: #0a1656 !important;
  --card-foreground: var(--aspekt-bright-gray) !important;
  --panel: var(--aspekt-deep-cove) !important;
  --panel-strong: #0a1656 !important;
  --panel-hover: #142475 !important;
  
  /* Text Colors */
  --text: var(--aspekt-bright-gray) !important;
  --text-strong: #ffffff !important;
  --chat-text: var(--aspekt-bright-gray) !important;
  --muted: var(--aspekt-cobalt-flame) !important;
  --muted-strong: #6b82a8 !important;
  --muted-foreground: var(--aspekt-cobalt-flame) !important;
  
  /* Borders */
  --border: rgba(106, 220, 153, 0.15) !important;
  --border-strong: rgba(106, 220, 153, 0.25) !important;
  --border-hover: rgba(106, 220, 153, 0.35) !important;
  --input: rgba(106, 220, 153, 0.15) !important;
  
  /* Accent Colors */
  --accent: var(--aspekt-aurora-green) !important;
  --accent-hover: #7ee0a8 !important;
  --accent-muted: var(--aspekt-aurora-green) !important;
  --accent-subtle: rgba(106, 220, 153, 0.15) !important;
  --accent-foreground: var(--aspekt-deep-cove) !important;
  --accent-glow: rgba(106, 220, 153, 0.25) !important;
  
  /* Primary Button */
  --primary: var(--aspekt-aurora-green) !important;
  --primary-foreground: var(--aspekt-deep-cove) !important;
  
  /* Secondary Colors */
  --secondary: var(--aspekt-catalina-blue) !important;
  --secondary-foreground: var(--aspekt-bright-gray) !important;
  
  /* Status Colors */
  --ok: #22c55e !important;
  --ok-muted: rgba(34, 197, 94, 0.75) !important;
  --ok-subtle: rgba(34, 197, 94, 0.12) !important;
  
  --warn: #f59e0b !important;
  --warn-muted: rgba(245, 158, 11, 0.75) !important;
  --warn-subtle: rgba(245, 158, 11, 0.12) !important;
  
  --danger: #ef4444 !important;
  --destructive: #ef4444 !important;
  --destructive-foreground: var(--aspekt-bright-gray) !important;
  --danger-muted: rgba(239, 68, 68, 0.75) !important;
  --danger-subtle: rgba(239, 68, 68, 0.12) !important;
  
  --info: var(--aspekt-cobalt-flame) !important;
  
  /* Focus States */
  --ring: var(--aspekt-aurora-green) !important;
  --focus: rgba(106, 220, 153, 0.25) !important;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring) !important;
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 0 20px var(--accent-glow) !important;
  
  /* Chrome/Navigation */
  --chrome: rgba(5, 16, 64, 0.95) !important;
  --chrome-strong: rgba(5, 16, 64, 0.98) !important;
  
  /* Card highlighting */
  --card-highlight: rgba(106, 220, 153, 0.05) !important;
  
  /* Popover */
  --popover: #0a1656 !important;
  --popover-foreground: var(--aspekt-bright-gray) !important;
}

/* Light theme overrides for ASPEKT */
:root[data-theme=light] {
  --bg: var(--aspekt-bright-gray) !important;
  --bg-accent: #eff1f7 !important;
  --bg-elevated: #ffffff !important;
  --bg-hover: #e8eaf2 !important;
  --bg-muted: #e8eaf2 !important;
  --bg-content: #eff1f7 !important;
  --card: #ffffff !important;
  --card-foreground: var(--aspekt-deep-cove) !important;
  --panel: var(--aspekt-bright-gray) !important;
  --panel-strong: #eff1f7 !important;
  --panel-hover: #e8eaf2 !important;
  
  --text: var(--aspekt-deep-cove) !important;
  --text-strong: #000000 !important;
  --chat-text: var(--aspekt-deep-cove) !important;
  --muted: var(--aspekt-cobalt-flame) !important;
  --muted-strong: #3d5a85 !important;
  --muted-foreground: var(--aspekt-cobalt-flame) !important;
  
  --border: rgba(6, 42, 120, 0.15) !important;
  --border-strong: rgba(6, 42, 120, 0.25) !important;
  --border-hover: rgba(6, 42, 120, 0.35) !important;
  --input: rgba(6, 42, 120, 0.15) !important;
  
  --accent: var(--aspekt-aurora-green) !important;
  --accent-hover: #5dd687 !important;
  --accent-subtle: rgba(106, 220, 153, 0.12) !important;
  --accent-foreground: var(--aspekt-deep-cove) !important;
  --accent-glow: rgba(106, 220, 153, 0.15) !important;
  
  --primary: var(--aspekt-aurora-green) !important;
  --primary-foreground: var(--aspekt-deep-cove) !important;
  
  --secondary: #eff1f7 !important;
  --secondary-foreground: var(--aspekt-deep-cove) !important;
  
  --chrome: rgba(245, 246, 249, 0.95) !important;
  --chrome-strong: rgba(245, 246, 249, 0.98) !important;
  
  --card-highlight: rgba(106, 220, 153, 0.03) !important;
  
  --popover: #ffffff !important;
  --popover-foreground: var(--aspekt-deep-cove) !important;
}

/* ASPEKT Branding */
.brand-title {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.brand-sub {
  color: var(--muted) !important;
}

/* Ensure proper contrast for navigation */
.nav-item.active {
  color: var(--aspekt-bright-gray) !important;
  background: var(--accent-subtle) !important;
}

.nav-item.active .nav-item__icon {
  color: var(--accent) !important;
}

/* Status indicators with ASPEKT colors */
.statusDot.ok {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(106, 220, 153, 0.5) !important;
}

/* Button styling */
.btn.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--primary-foreground) !important;
}

.btn.primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Chat bubble improvements */
.chat-group.user .chat-bubble {
  background: var(--accent-subtle) !important;
  border-color: transparent !important;
}

/* Focus improvements */
.btn:focus-visible,
input:focus,
textarea:focus,
select:focus {
  box-shadow: var(--focus-ring) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar-thumb {
  background: var(--accent) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover) !important;
}