/* Global Green Theme for AURA */
:root {
  /* Primary Green Colors */
  --primary-green: #10b981;
  --primary-green-dark: #059669;
  --primary-green-darker: #047857;
  --primary-green-light: #34d399;
  --primary-green-lighter: #86efac;
  
  /* Background Greens */
  --bg-dark-green: #0a1f1a;
  --bg-medium-green: #0f2922;
  --bg-light-green: #1a3b32;
  
  /* Accent Colors */
  --accent-green: #86efac;
  --accent-yellow: #fde047;
  --accent-emerald: #10b981;
  
  /* Text Colors */
  --text-on-green: #ffffff;
  --text-on-green-muted: rgba(255, 255, 255, 0.8);
  
  /* Gradients */
  --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-green-reverse: linear-gradient(135deg, #059669 0%, #047857 100%);
  --gradient-green-vibrant: linear-gradient(135deg, #10b981 0%, #059669 25%, #86efac 50%, #fde047 75%, #10b981 100%);
  
  /* Shadows */
  --shadow-green: 0 10px 30px rgba(16, 185, 129, 0.2);
  --shadow-green-lg: 0 20px 40px rgba(16, 185, 129, 0.3);
  --glow-green: 0 0 40px rgba(134, 239, 172, 0.5);
}

/* Override default theme colors */
body {
  --primary: var(--primary-green);
  --primary-hover: var(--primary-green-dark);
  --accent: var(--accent-green);
  --gradient-primary: var(--gradient-green);
  --gradient-secondary: var(--gradient-green-reverse);
}

/* Dark mode specific overrides */
body.dark {
  background: var(--bg-dark-green);
  --bg-primary: var(--bg-dark-green);
  --bg-secondary: var(--bg-medium-green);
  --bg-tertiary: var(--bg-light-green);
}

/* Button Styles with Green Theme */
.btn, button, .cta-btn, .project-btn {
  background: var(--gradient-green) !important;
  border-color: var(--primary-green) !important;
  color: white !important;
  transition: all 0.3s ease;
}

.btn:hover, button:hover, .cta-btn:hover, .project-btn:hover {
  background: var(--gradient-green-reverse) !important;
  box-shadow: var(--shadow-green-lg) !important;
  transform: translateY(-2px);
}

/* Card hover effects */
.card:hover, .project-card:hover {
  border-color: var(--primary-green) !important;
  box-shadow: var(--shadow-green) !important;
}

/* Input focus styles */
input:focus, textarea:focus, select:focus {
  border-color: var(--primary-green) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  outline: none;
}

/* Links */
a {
  color: var(--primary-green);
}

a:hover {
  color: var(--primary-green-dark);
}

/* Status indicators */
.status-ready, .success {
  background: var(--primary-green) !important;
  color: white !important;
}

.status-processing, .warning {
  background: var(--accent-yellow) !important;
  color: var(--bg-dark-green) !important;
}

.status-error, .error {
  background: #ef4444 !important;
  color: white !important;
}

/* Progress bars */
.progress-bar {
  background: var(--gradient-green) !important;
}

/* Loading spinners */
.spinner, .loader {
  border-color: var(--primary-green-lighter) !important;
  border-top-color: var(--primary-green) !important;
}

/* Badges and tags */
.badge, .tag {
  background: var(--primary-green) !important;
  color: white !important;
}

/* Navigation active states */
.nav-link.active, .nav-item.active {
  color: var(--primary-green) !important;
  border-bottom-color: var(--primary-green) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar-thumb {
  background: var(--primary-green);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-green-dark);
}

/* Selection color */
::selection {
  background: var(--primary-green);
  color: white;
}

/* Header and navigation overrides */
.navbar {
  background: var(--bg-medium-green) !important;
  border-bottom: 1px solid var(--primary-green-dark) !important;
}

.nav-link:hover {
  background: rgba(16, 185, 129, 0.1) !important;
}

/* Form elements */
.form-control, .form-select {
  background: var(--bg-light-green) !important;
  border-color: var(--primary-green-dark) !important;
  color: white !important;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Modals and dialogs */
.modal-content, .dialog {
  background: var(--bg-medium-green) !important;
  border: 1px solid var(--primary-green-dark) !important;
}

/* Tooltips */
.tooltip {
  background: var(--primary-green) !important;
}

/* Toggle switches */
.toggle-switch {
  background: var(--primary-green-dark) !important;
}

.toggle-switch.active {
  background: var(--primary-green) !important;
}

/* Audio visualizations */
.waveform path {
  stroke: var(--primary-green) !important;
}

.spectrogram {
  border-color: var(--primary-green) !important;
}

/* Recording button */
.record-btn {
  background: var(--gradient-green) !important;
}

.record-btn.recording {
  background: var(--gradient-green-reverse) !important;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Feature cards */
.feature-icon {
  color: var(--primary-green) !important;
}

.feature-card:hover {
  background: rgba(16, 185, 129, 0.05) !important;
  border-color: var(--primary-green) !important;
}

/* Code blocks */
pre, code {
  background: var(--bg-light-green) !important;
  border-color: var(--primary-green-dark) !important;
}

/* Tables */
table thead {
  background: var(--primary-green) !important;
  color: white !important;
}

table tbody tr:hover {
  background: rgba(16, 185, 129, 0.05) !important;
}

/* Alerts */
.alert-success {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: var(--primary-green) !important;
  color: var(--primary-green-dark) !important;
}

/* Pagination */
.pagination .page-link {
  color: var(--primary-green) !important;
}

.pagination .page-item.active .page-link {
  background: var(--primary-green) !important;
  border-color: var(--primary-green) !important;
}

/* Logo glow effect */
.logo-glow {
  filter: drop-shadow(0 0 20px rgba(134, 239, 172, 0.5));
}

/* Glowing text effect */
.text-glow-green {
  text-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

/* Gradient text */
.text-gradient-green {
  background: var(--gradient-green-vibrant);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 8s ease infinite;
}

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