/* Synthwave Cyberpunk Theme for RapidAI */

:root {
  --synthwave-pink: #ff006e;
  --synthwave-purple: #8338ec;
  --synthwave-blue: #3a86ff;
  --synthwave-cyan: #06ffa5;
  --synthwave-yellow: #ffbe0b;
  --synthwave-dark: #0a0e27;
  --synthwave-darker: #050816;
  --neon-glow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor;
}

/* Dark mode backgrounds */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--synthwave-darker);
  --md-default-fg-color: #e0e0e0;
  --md-code-bg-color: rgba(10, 14, 39, 0.8);
  --md-primary-fg-color: var(--synthwave-purple);
  --md-accent-fg-color: var(--synthwave-pink);
}

/* Neon glow effects */
.md-header {
  background: linear-gradient(135deg, var(--synthwave-purple) 0%, var(--synthwave-pink) 100%);
  box-shadow: 0 2px 20px rgba(255, 0, 110, 0.3);
}

.md-tabs {
  background: linear-gradient(90deg, var(--synthwave-dark) 0%, rgba(131, 56, 236, 0.2) 100%);
  border-bottom: 2px solid var(--synthwave-pink);
}

/* Neon text effects */
h1, h2 {
  color: var(--synthwave-cyan);
  text-shadow: var(--neon-glow);
  font-weight: 700;
  letter-spacing: 0.05em;
}

h3, h4 {
  color: var(--synthwave-pink);
  font-weight: 600;
}

/* Code blocks with neon border */
.md-typeset code {
  background-color: rgba(131, 56, 236, 0.15);
  border: 1px solid var(--synthwave-purple);
  border-radius: 4px;
  color: var(--synthwave-cyan);
}

.md-typeset pre > code {
  background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(58, 134, 255, 0.1) 100%);
  border: 2px solid var(--synthwave-purple);
  box-shadow: 0 0 20px rgba(131, 56, 236, 0.3), inset 0 0 20px rgba(6, 255, 165, 0.05);
  border-radius: 8px;
}

/* Syntax highlighting overrides */
.highlight .k, .highlight .kd { color: var(--synthwave-pink) !important; font-weight: bold; }
.highlight .s, .highlight .s1, .highlight .s2 { color: var(--synthwave-cyan) !important; }
.highlight .n, .highlight .nf { color: var(--synthwave-yellow) !important; }
.highlight .nc { color: var(--synthwave-pink) !important; font-weight: bold; }
.highlight .c1, .highlight .cm { color: #666; font-style: italic; }

/* Buttons with neon glow */
.md-button {
  background: linear-gradient(135deg, var(--synthwave-pink) 0%, var(--synthwave-purple) 100%);
  border: none;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.5);
  transition: all 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.md-button:hover {
  box-shadow: 0 0 30px rgba(255, 0, 110, 0.8), 0 0 60px rgba(131, 56, 236, 0.6);
  transform: translateY(-2px);
}

.md-button--primary {
  background: linear-gradient(135deg, var(--synthwave-cyan) 0%, var(--synthwave-blue) 100%);
  color: var(--synthwave-dark);
  box-shadow: 0 0 20px rgba(6, 255, 165, 0.5);
}

/* Admonitions with neon styling */
.md-typeset .admonition {
  border-left: 4px solid var(--synthwave-cyan);
  background: linear-gradient(90deg, rgba(6, 255, 165, 0.1) 0%, rgba(10, 14, 39, 0.5) 100%);
  box-shadow: 0 0 15px rgba(6, 255, 165, 0.2);
}

.md-typeset .admonition.warning {
  border-left-color: var(--synthwave-yellow);
  background: linear-gradient(90deg, rgba(255, 190, 11, 0.1) 0%, rgba(10, 14, 39, 0.5) 100%);
}

.md-typeset .admonition.danger {
  border-left-color: var(--synthwave-pink);
  background: linear-gradient(90deg, rgba(255, 0, 110, 0.1) 0%, rgba(10, 14, 39, 0.5) 100%);
}

/* Navigation with glow */
.md-nav__link--active {
  color: var(--synthwave-cyan);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(6, 255, 165, 0.8);
}

.md-nav__link:hover {
  color: var(--synthwave-pink);
  text-shadow: 0 0 10px rgba(255, 0, 110, 0.6);
}

/* Search bar */
.md-search__input {
  background: rgba(10, 14, 39, 0.8);
  border: 2px solid var(--synthwave-purple);
  box-shadow: inset 0 0 10px rgba(131, 56, 236, 0.3);
  color: var(--synthwave-cyan);
}

.md-search__input:focus {
  border-color: var(--synthwave-cyan);
  box-shadow: 0 0 20px rgba(6, 255, 165, 0.5);
}

/* Tables */
.md-typeset table:not([class]) {
  border: 2px solid var(--synthwave-purple);
  background: rgba(10, 14, 39, 0.5);
}

.md-typeset table:not([class]) th {
  background: linear-gradient(135deg, var(--synthwave-purple) 0%, var(--synthwave-pink) 100%);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.md-typeset table:not([class]) tr:hover {
  background: rgba(131, 56, 236, 0.1);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--synthwave-darker);
  border-left: 1px solid var(--synthwave-purple);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--synthwave-pink) 0%, var(--synthwave-purple) 100%);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--synthwave-cyan) 0%, var(--synthwave-blue) 100%);
  box-shadow: 0 0 15px rgba(6, 255, 165, 0.8);
}

/* Hero section */
.hero {
  background: linear-gradient(135deg, var(--synthwave-darker) 0%, rgba(131, 56, 236, 0.2) 100%);
  padding: 4rem 2rem;
  text-align: center;
  border-bottom: 3px solid var(--synthwave-pink);
  box-shadow: 0 10px 40px rgba(255, 0, 110, 0.3);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(131, 56, 236, 0.1) 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
  50% { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor, 0 0 60px currentColor; }
}

/* Feature cards */
.feature-card {
  background: linear-gradient(135deg, rgba(10, 14, 39, 0.9) 0%, rgba(58, 134, 255, 0.1) 100%);
  border: 2px solid var(--synthwave-purple);
  border-radius: 12px;
  padding: 2rem;
  margin: 1rem;
  box-shadow: 0 0 20px rgba(131, 56, 236, 0.3);
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 30px rgba(255, 0, 110, 0.5), 0 0 60px rgba(6, 255, 165, 0.3);
  border-color: var(--synthwave-cyan);
}

/* Links */
a {
  color: var(--synthwave-cyan);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--synthwave-pink);
  text-shadow: 0 0 8px currentColor;
}

/* Inline code */
.md-typeset :not(pre) > code {
  background: rgba(131, 56, 236, 0.2);
  color: var(--synthwave-cyan);
  border: 1px solid var(--synthwave-purple);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-weight: 600;
}

/* Footer */
.md-footer {
  background: linear-gradient(135deg, var(--synthwave-darker) 0%, var(--synthwave-dark) 100%);
  border-top: 2px solid var(--synthwave-purple);
  box-shadow: 0 -2px 20px rgba(131, 56, 236, 0.3);
}