/**
 * THEME ENHANCEMENTS - DARK & LIGHT MODE
 * Elite Financial System v10.0 - Enhanced Edition
 *
 * Este arquivo contém os estilos para:
 * - Dark Mode / Light Mode
 * - Transições suaves de tema
 * - Componentes novos (Voice, Toast, etc)
 */

/* ============================================
   🌓 THEME TRANSITIONS
   ============================================ */

/* Transição suave ao mudar tema */
body.theme-transitioning,
body.theme-transitioning * {
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   🌞 LIGHT MODE STYLES
   ============================================ */

body.theme-light {
    background-color: var(--bg-primary);
}

/* Background animado em Light Mode */
body.theme-light #elegant-background > div:first-child {
    background: linear-gradient(135deg,
        #f8f9fa 0%,
        #ffffff 25%,
        #e9ecef 50%,
        #ffffff 75%,
        #f8f9fa 100%
    ) !important;
}

/* Partículas mais sutis em Light Mode */
body.theme-light #elegant-particles {
    opacity: 0.2 !important;
}

/* Orbs em Light Mode (cores mais suaves) */
body.theme-light #elegant-background > div:nth-child(3) {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%) !important;
}

body.theme-light #elegant-background > div:nth-child(4) {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%) !important;
}

body.theme-light #elegant-background > div:nth-child(5) {
    background: radial-gradient(circle, rgba(219, 39, 119, 0.05) 0%, transparent 70%) !important;
}

/* Cards em Light Mode */
body.theme-light .elite-balance-card,
body.theme-light #ai-coach-card,
body.theme-light .elite-financial-banner {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Textos em Light Mode */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light p,
body.theme-light span,
body.theme-light div {
    color: var(--text-primary);
}

/* Inputs em Light Mode */
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.theme-light input::placeholder {
    color: var(--text-tertiary) !important;
}

/* Botões em Light Mode */
body.theme-light button:not([class*="bg-"]) {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

/* Navegação em Light Mode */
body.theme-light .elite-navbar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Modais em Light Mode */
body.theme-light [class*="modal"],
body.theme-light [class*="panel"] {
    background-color: var(--bg-card) !important;
}

/* ============================================
   🎤 VOICE RECOGNITION COMPONENTS
   ============================================ */

/* Modal de Voz */
#voice-recognition-modal {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animação do microfone pulsando */
@keyframes micPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 40px rgba(34, 211, 238, 0.6);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 60px rgba(34, 211, 238, 0.9);
    }
}

#voice-listening-state .animate-pulse {
    animation: micPulse 2s ease-in-out infinite;
}

/* Ondas sonoras visuais */
.voice-sound-waves {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.voice-sound-wave-bar {
    width: 4px;
    background: linear-gradient(to top, #22d3ee, #06b6d4);
    border-radius: 2px;
    animation: waveAnimation 1s ease-in-out infinite;
}

.voice-sound-wave-bar:nth-child(1) { animation-delay: 0s; height: 20px; }
.voice-sound-wave-bar:nth-child(2) { animation-delay: 0.1s; height: 30px; }
.voice-sound-wave-bar:nth-child(3) { animation-delay: 0.2s; height: 40px; }
.voice-sound-wave-bar:nth-child(4) { animation-delay: 0.3s; height: 30px; }
.voice-sound-wave-bar:nth-child(5) { animation-delay: 0.4s; height: 20px; }

@keyframes waveAnimation {
    0%, 100% {
        transform: scaleY(0.5);
        opacity: 0.5;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* ============================================
   🔔 TOAST NOTIFICATIONS
   ============================================ */

.toast-notification {
    will-change: transform;
}

.toast-notification > div {
    animation: toastBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes toastBounce {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hover em toast */
.toast-notification:hover {
    transform: translateX(0) scale(1.02) !important;
}

/* ============================================
   🌓 THEME TOGGLE BUTTON
   ============================================ */

#theme-toggle-btn {
    will-change: transform;
    animation: floatButton 3s ease-in-out infinite;
}

@keyframes floatButton {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

#theme-toggle-btn:hover {
    animation: floatButton 3s ease-in-out infinite, rotateButton 0.6s ease-out;
}

@keyframes rotateButton {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animação de transição do ícone */
#theme-toggle-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ============================================
   🎤 VOICE BUTTON
   ============================================ */

#voice-recognition-btn {
    will-change: transform;
    animation: floatButton 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

#voice-recognition-btn:hover {
    animation: none;
    transform: scale(1.15);
}

#voice-recognition-btn:active {
    transform: scale(0.95);
}

/* Indicador de "escutando" */
#voice-recognition-btn.listening {
    animation: pulseVoice 1.5s ease-in-out infinite;
}

@keyframes pulseVoice {
    0%, 100% {
        box-shadow: 0 8px 30px rgba(34, 211, 238, 0.4);
    }
    50% {
        box-shadow: 0 8px 50px rgba(34, 211, 238, 0.8),
                    0 0 80px rgba(34, 211, 238, 0.6);
    }
}

/* ============================================
   💎 GLASSMORPHISM EFFECTS
   ============================================ */

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.theme-light .glass-effect {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   ⚡ PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Sugerir ao navegador que essas propriedades vão mudar */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Hardware acceleration para animações */
.gpu-accelerated {
    /* transform: translateZ(0); */ /* BUG FIX: Removido para não quebrar o contexto de posicionamento de elementos 'fixed' */
    /* -webkit-transform: translateZ(0); */ /* BUG FIX: Removido para não quebrar o contexto de posicionamento de elementos 'fixed' */
}

/* ============================================
   📱 RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile */
@media (max-width: 768px) {
    /* Botões flutuantes menores em mobile */
    #theme-toggle-btn,
    #voice-recognition-btn {
        width: 52px;
        height: 52px;
        bottom: 20px;
        right: 20px;
    }

    #voice-recognition-btn {
        bottom: 90px;
    }

    /* Toast menor em mobile */
    #toast-container {
        top: 20px;
        right: 20px;
        left: 20px;
    }

    .toast-notification > div {
        min-width: auto !important;
        width: 100%;
    }

    /* Modal de voz fullscreen em mobile */
    #voice-recognition-modal > div {
        max-width: 90%;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    #theme-toggle-btn,
    #voice-recognition-btn {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   🎨 THEME SPECIFIC ENHANCEMENTS
   ============================================ */

/* Dark Mode - Sombras intensas */
body.theme-dark {
    --glow-intensity: 1;
}

/* Light Mode - Sombras sutis */
body.theme-light {
    --glow-intensity: 0.5;
}

/* Aplicar intensidade de brilho */
[style*="box-shadow"] {
    box-shadow: var(--shadow-glow) !important;
}

/* ============================================
   ✨ SUBTLE ANIMATIONS
   ============================================ */

/* Fade in ao carregar página */
@keyframes pageF adeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    animation: pageFadeIn 0.6s ease-out;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ============================================
   🎯 ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visível para navegação por teclado */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reduzir animações para quem prefere */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #theme-toggle-btn,
    #voice-recognition-btn {
        animation: none !important;
    }
}

/* ============================================
   🔮 CUSTOM SCROLLBAR (Dark/Light)
   ============================================ */

/* Dark Mode Scrollbar */
body.theme-dark::-webkit-scrollbar {
    width: 12px;
}

body.theme-dark::-webkit-scrollbar-track {
    background: #0a0a1a;
}

body.theme-dark::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #22d3ee, #8b5cf6);
    border-radius: 6px;
}

body.theme-dark::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #67e8f9, #a78bfa);
}

/* Light Mode Scrollbar */
body.theme-light::-webkit-scrollbar {
    width: 12px;
}

body.theme-light::-webkit-scrollbar-track {
    background: #f8f9fa;
}

body.theme-light::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0ea5e9, #7c3aed);
    border-radius: 6px;
}

body.theme-light::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #38bdf8, #9333ea);
}

/* ============================================
   💫 LOADING STATES
   ============================================ */

.skeleton-loading {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s ease-in-out infinite;
}

body.theme-light .skeleton-loading {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    background-size: 200% 100%;
}

@keyframes skeletonLoading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   🎊 SUCCESS ANIMATIONS
   ============================================ */

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

.success-animation {
    animation: successPulse 0.6s ease-out;
}

/* ============================================
   ⚠️ ERROR SHAKE ANIMATION
   ============================================ */

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.error-animation {
    animation: errorShake 0.5s ease-out;
}