/* ===========================================
   THEME TOGGLE (Dark/Light Mode)
   Bloomberg-grade + Trader Nerd Style 🚀
   =========================================== */

/* ===========================================
   THEME TOGGLE SWITCH (Bloomberg-grade)
   iOS-style toggle con animazioni finance
   =========================================== */

.theme-toggle-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 3.5rem; /* Wider for toggle switch effect */
	height: 2rem; /* Taller for better touch target */
	padding: 0.25rem;
	border-radius: 1rem; /* Full pill shape */
	background: var(--bg-tertiary);
	border: 2px solid var(--border-primary);
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: visible; /* Allow glow to show */
}

/* Background glow effect (changes with theme) */
.theme-toggle-btn::before {
	content: '';
	position: absolute;
	inset: -4px;
	background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2), transparent 70%);
	opacity: 0;
	transition: opacity 0.4s ease;
	border-radius: 1rem;
	z-index: -1;
	pointer-events: none;
}

/* Dark mode: softer amber glow (finance-grade, not too bright) */
html.dark .theme-toggle-btn {
	background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(180, 83, 9, 0.08) 100%);
	border-color: rgba(217, 119, 6, 0.25);
}

html.dark .theme-toggle-btn::before {
	background: radial-gradient(circle at center, rgba(217, 119, 6, 0.18), transparent 70%);
}

/* Light mode: indigo glow (moon theme) */
html:not(.dark) .theme-toggle-btn {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.1) 100%);
	border-color: rgba(99, 102, 241, 0.3);
}

html:not(.dark) .theme-toggle-btn::before {
	background: radial-gradient(circle at center, rgba(99, 102, 241, 0.25), transparent 70%);
}

/* Hover: Show glow + lift */
.theme-toggle-btn:hover::before {
	opacity: 1;
}

.theme-toggle-btn:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

html.dark .theme-toggle-btn:hover {
	border-color: rgba(217, 119, 6, 0.4);
	box-shadow: 0 6px 20px rgba(217, 119, 6, 0.15);
}

html:not(.dark) .theme-toggle-btn:hover {
	border-color: rgba(99, 102, 241, 0.5);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.2);
}

/* Active: Press down */
.theme-toggle-btn:active {
	transform: translateY(0) scale(0.98);
}

/* Focus: Accessibility */
.theme-toggle-btn:focus {
	outline: 2px solid var(--accent-primary);
	outline-offset: 3px;
}

/* ===========================================
   TOGGLE SWITCH SLIDER (Finance-grade)
   =========================================== */

/* Container for the slider circle */
.theme-toggle-slider {
	position: absolute;
	top: 50%;
	left: 0.25rem; /* Start position (left) */
	width: 1.5rem;
	height: 1.5rem;
	background: white;
	border-radius: 50%;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(0, 0, 0, 0.05);
	transform: translateY(-50%);
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy easing */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Dark mode: Slider moves right + softer amber background (finance-grade) */
html.dark .theme-toggle-slider {
	left: calc(100% - 1.75rem); /* Move to right */
	background: linear-gradient(135deg, #d97706, #b45309);
	box-shadow: 
		0 2px 12px rgba(217, 119, 6, 0.4),
		0 0 0 1px rgba(217, 119, 6, 0.15);
}

/* Light mode: Slider stays left + indigo background */
html:not(.dark) .theme-toggle-slider {
	left: 0.25rem; /* Stay on left */
	background: linear-gradient(135deg, #6366f1, #4f46e5);
	box-shadow: 
		0 2px 12px rgba(99, 102, 241, 0.5),
		0 0 0 1px rgba(99, 102, 241, 0.2);
}

/* Hover: Slider grows slightly */
.theme-toggle-btn:hover .theme-toggle-slider {
	transform: translateY(-50%) scale(1.1);
}

/* Active: Slider shrinks */
.theme-toggle-btn:active .theme-toggle-slider {
	transform: translateY(-50%) scale(0.95);
}

/* ===========================================
   THEME ICONS (Inside slider circle)
   =========================================== */

.theme-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem !important; /* Smaller to fit in slider */
	height: 1rem !important;
	z-index: 1;
	transition: 
		opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), /* Bouncy */
		filter 0.3s ease;
	pointer-events: none;
}

/* DEFAULT STATE: Hide both icons initially */
.theme-icon-sun,
.theme-icon-moon {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.3) rotate(-90deg);
}

/* DARK MODE: Show SUN icon inside slider (yellow) */
html.dark .theme-icon-sun {
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
	color: white !important; /* White on yellow background */
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
	animation: sunRotate 20s linear infinite; /* Slow rotation */
}

html.dark .theme-icon-moon {
	opacity: 0 !important;
	transform: translate(-50%, -50%) scale(0.3) rotate(-90deg) !important;
}

/* LIGHT MODE: Show MOON icon inside slider (indigo) */
html:not(.dark) .theme-icon-sun {
	opacity: 0 !important;
	transform: translate(-50%, -50%) scale(0.3) rotate(90deg) !important;
}

html:not(.dark) .theme-icon-moon {
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
	color: white !important; /* White on indigo background */
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
	animation: moonPulse 4s ease-in-out infinite; /* Gentle pulse */
}

/* Sun pulse animation (trader nerd style) */
@keyframes sunPulse {
	0%, 100% {
		filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
	}
	50% {
		filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
		transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
	}
}

/* Moon glow animation (crypto vibes) */
@keyframes moonGlow {
	0%, 100% {
		filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
	}
	50% {
		filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.8));
		transform: translate(-50%, -50%) rotate(0deg) scale(1.05);
	}
}

/* Hover: intensify glow effect */
.theme-toggle-btn:hover .theme-icon-sun {
	filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.9)) !important;
}

.theme-toggle-btn:hover .theme-icon-moon {
	filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.9)) !important;
}

/* Click: dramatic flash effect */
.theme-toggle-btn:active .theme-icon {
	transform: translate(-50%, -50%) rotate(0deg) scale(1.2) !important;
	filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) !important;
}

/* Smooth theme transition */
html {
	transition: background-color 0.3s ease, color 0.3s ease;
}

body {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode colors (Tailwind-like, Bloomberg-inspired) */
:root:not(.dark) {
	/* Background layers */
	--bg-primary: #FFFFFF;
	--bg-secondary: #F9FAFB;
	--bg-tertiary: #F3F4F6;
	--bg-elevated: #FFFFFF;
	--bg-hover: rgba(59, 130, 246, 0.04);
	
	/* Text hierarchy */
	--text-primary: #111827;
	--text-secondary: #6B7280;
	--text-tertiary: #9CA3AF;
	--text-quaternary: #D1D5DB;
	--text-muted: #E5E7EB;
	
	/* Borders */
	--border-primary: #E5E7EB;
	--border-secondary: #D1D5DB;
	--border-accent: rgba(59, 130, 246, 0.3);
	
	/* Financial colors remain the same */
	--gain: #10B981;
	--gain-bright: #34D399;
	--gain-subtle: rgba(16, 185, 129, 0.08);
	--gain-glow: rgba(16, 185, 129, 0.15);
	
	--loss: #EF4444;
	--loss-bright: #F87171;
	--loss-subtle: rgba(239, 68, 68, 0.08);
	--loss-glow: rgba(239, 68, 68, 0.15);
	
	/* Signals */
	--signal-long: #10B981;
	--signal-buy: #34D399;
	--signal-sell: #EF4444;
	--signal-hold: #F59E0B;
	--signal-neutral: #6B7280;
	
	/* Accent colors */
	--accent-primary: #3B82F6;
	--accent-secondary: #6366F1;
	--accent-hover: #2563EB;
	--accent-glow: rgba(59, 130, 246, 0.1);
	
	/* Warning & Info */
	--warning: #F59E0B;
	--warning-glow: rgba(245, 158, 11, 0.1);
	--info: #06B6D4;
	--info-glow: rgba(6, 182, 212, 0.1);
	
	/* Shadows - Lighter for light mode */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
	--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.08);
}

/* Dark mode colors (default, already defined in tailwind.config.js) */
:root.dark {
	--bg-primary: #0A0E14;
	--bg-secondary: #131720;
	--bg-tertiary: #1A1F2E;
	
	--text-primary: #E5E7EB;
	--text-secondary: #9CA3AF;
	--text-tertiary: #6B7280;
	
	--border-primary: #1F2937;
	--border-secondary: #374151;
	
	/* Financial & accent colors remain consistent */
}

/* Mobile: hide text, show only icon */
@media (max-width: 768px) {
	.theme-toggle-btn {
		padding: 0.4rem;
	}
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	html,
	body,
	.theme-icon,
	.theme-toggle-btn,
	.theme-toggle-btn::before {
		animation: none !important;
		transition: none !important;
	}
}