/* ========================================
   BLUEFOX - THEMES ADDITIONNELS
   Ne modifie PAS le theme existant !
   ======================================== */

/* ========== THEME PREMIUM ETOILE ========== */

/* Conteneur des étoiles - uniquement visible pour theme premium */
.stars-container {
  display: none;
}

body.theme-premium .stars-container {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* Étoiles */
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration, 2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.star.small {
  width: 1px;
  height: 1px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.star.medium {
  width: 2px;
  height: 2px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.star.large {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Animation de scintillement */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

body.theme-premium {
  --bg-0: #0a1628;
  --bg-1: #0e1c34;
  --bg-2: #132548;
  --text-0: #e6ecff;
  --text-1: #b6c2ff;
  --text-2: #7f8db8;
  --cyan-0: #4fd1ff;
  --cyan-1: #22b3ff;
  --green-0: #32d583;
  --green-1: #4cff9b;
  --red-0: #ff5c5c;
  --red-1: #ff3b3b;
  --orange-0: #ff8a3d;
  --orange-1: #ff6b2c;
  --border: rgba(255,255,255,.08);
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  /* Override existing variables */
  --bg-primary: #0a1628;
  --bg-secondary: #0e1c34;
  --bg-card: #132548;
  --bg-card-solid: #132548;
  --bg-card-hover: #1a2f5a;
  --text-primary: #e6ecff;
  --text-secondary: #b6c2ff;
  --text-muted: #7f8db8;
  --border-color: rgba(255,255,255,.08);
  --border-soft: rgba(255,255,255,.05);
  --border-main: rgba(255,255,255,.12);
  --cyan-main: #4fd1ff;
  --accent-green: #32d583;
  --accent-red: #ff5c5c;
}

body.theme-premium {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Fond avec lueurs */
body.theme-premium::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 50% 18%, rgba(88,120,255,.12), transparent 60%),
    radial-gradient(900px 500px at 15% 65%, rgba(34,179,255,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 75%, rgba(76,255,155,.08), transparent 55%),
    linear-gradient(180deg, #0a1628 0%, #081021 55%, #060b15 100%);
  z-index: -2;
}

/* Grain */
body.theme-premium::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  z-index: -1;
}

/* Vignette for premium theme */
body.theme-premium .app-container::after,
body.theme-premium #app::after {
  content: "";
  position: fixed;
  inset: -1px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
  opacity: .55;
  z-index: 0;
}

/* ========== THEME BLUEFOX NEON ========== */
body.theme-neon {
  --bg-0: #05080f;
  --bg-1: #0a1018;
  --bg-2: #101820;
  --text-0: #ffffff;
  --text-1: #a0e8ff;
  --text-2: #5a8a9a;
  --cyan-0: #00f0ff;
  --cyan-1: #00c8ff;
  --green-0: #00ff88;
  --green-1: #50ffa0;
  --red-0: #ff2060;
  --red-1: #ff4080;
  --orange-0: #ff6a00;
  --orange-1: #ff9500;
  --border: rgba(0,240,255,.15);
  --shadow: 0 20px 60px rgba(0,0,0,.6);

  /* Override existing variables */
  --bg-primary: #05080f;
  --bg-secondary: #0a1018;
  --bg-card: #101820;
  --bg-card-solid: #101820;
  --bg-card-hover: #152028;
  --text-primary: #ffffff;
  --text-secondary: #a0e8ff;
  --text-muted: #5a8a9a;
  --border-color: rgba(0,240,255,.15);
  --border-soft: rgba(0,240,255,.08);
  --border-main: rgba(0,240,255,.20);
  --cyan-main: #00f0ff;
  --accent-green: #00ff88;
  --accent-red: #ff2060;
}

body.theme-neon {
  background: #05080f !important;
  color: var(--text-primary) !important;
}

/* Fond neon */
body.theme-neon::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 30% 20%, rgba(0,240,255,.15), transparent 50%),
    radial-gradient(600px 400px at 70% 80%, rgba(255,106,0,.12), transparent 50%),
    radial-gradient(1000px 600px at 50% 50%, rgba(0,255,136,.05), transparent 60%),
    linear-gradient(180deg, #05080f 0%, #020305 100%);
  z-index: -2;
}

/* Grain neon */
body.theme-neon::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  z-index: -1;
}

/* Glow sur les elements neon */
body.theme-neon .card,
body.theme-neon .stat-card,
body.theme-neon .settings-card,
body.theme-neon .trading-rules-card,
body.theme-neon .quick-access-card {
  box-shadow: 0 0 30px rgba(0,240,255,.08), var(--shadow-soft);
}

/* ========== STYLES COMMUNS AUX NOUVEAUX THEMES ========== */

body.theme-premium .gain,
body.theme-neon .gain,
body.theme-premium .positive,
body.theme-neon .positive {
  color: var(--accent-green) !important;
  text-shadow: 0 0 12px rgba(76,255,155,.3);
}

body.theme-premium .loss,
body.theme-neon .loss,
body.theme-premium .negative,
body.theme-neon .negative {
  color: var(--accent-red) !important;
  text-shadow: 0 0 12px rgba(255,92,92,.3);
}

/* S'assurer que le contenu est au-dessus des pseudo-elements */
body.theme-premium .app-container,
body.theme-premium #app,
body.theme-premium .dashboard,
body.theme-premium .sidebar,
body.theme-premium .main-content,
body.theme-neon .app-container,
body.theme-neon #app,
body.theme-neon .dashboard,
body.theme-neon .sidebar,
body.theme-neon .main-content {
  position: relative;
  z-index: 1;
}

/* ========== SELECTEUR DE THEMES ========== */
.theme-selector-section {
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
  margin-top: 20px;
}

.theme-selector-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  color: inherit;
  font-family: inherit;
  width: 100%;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}

.theme-option.active {
  border-color: var(--cyan-main, #4fd1ff);
  background: rgba(79, 209, 255, 0.1);
}

.theme-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  flex-shrink: 0;
}

.theme-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.theme-name {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.theme-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-weight: 600;
  opacity: 0.7;
}

.theme-desc {
  font-size: 12px;
  opacity: 0.6;
  color: var(--text-secondary);
}

.theme-check {
  font-size: 20px;
  color: var(--cyan-main, #4fd1ff);
  font-weight: bold;
  flex-shrink: 0;
}