/**
 * BUGFIXES CSS
 * Correções cirúrgicas dos bugs identificados
 * Elite Financial System v10.0
 */

/* ============================================
   🐛 BUG #1: PAINEL LATERAL SOBE AO ROLAR
   ============================================

   PROBLEMA: Painel lateral não fica fixo durante scroll
   SOLUÇÃO: Garantir position fixed + bloquear scroll do body
   ============================================ */

/* Garantir que painel seja fixed e não role com a página */
.elite-panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;

    /* FIX: Usar flexbox para que content ocupe espaço restante */
    display: flex !important;
    flex-direction: column !important;
}

/* Header do painel - fixo no topo */
.elite-panel-header {
    flex-shrink: 0 !important; /* Não encolher */
}

/* Conteúdo do painel deve ser rolável internamente */
.elite-panel-content {
    flex: 1 !important; /* Ocupar todo espaço restante */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scroll no iOS */
}

/* Quando painel está aberto, bloquear scroll do body */
body.panel-open {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Overlay também deve ser fixed */
.elite-panel-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* ============================================
   📱 RESPONSIVE: Mobile fullscreen
   ============================================ */

@media (max-width: 768px) {
    .elite-panel {
        width: 100% !important;
        right: -100% !important;
    }

    .elite-panel.active {
        right: 0 !important;
    }
}

/* ============================================
   🎨 MELHORIAS VISUAIS (OPCIONAL)
   ============================================ */

/* Adicionar fade suave no topo do conteúdo ao rolar */
.elite-panel-content::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom,
        rgba(15, 15, 30, 1) 0%,
        rgba(15, 15, 30, 0) 100%
    );
    z-index: 10;
    pointer-events: none;
}

/* Adicionar fade suave no fundo do conteúdo */
.elite-panel-content::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top,
        rgba(15, 15, 30, 1) 0%,
        rgba(15, 15, 30, 0) 100%
    );
    z-index: 10;
    pointer-events: none;
}

/* Smooth scroll no conteúdo do painel */
.elite-panel-content {
    scroll-behavior: smooth;
}

/* Melhorar scrollbar para indicar melhor a rolagem */
.elite-panel-content::-webkit-scrollbar {
    width: 10px !important;
}

.elite-panel-content::-webkit-scrollbar-track {
    background: rgba(10, 10, 20, 0.8) !important;
    border-radius: 5px;
    margin: 10px 0;
}

.elite-panel-content::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #8b5cf6, #22d3ee) !important;
    border-radius: 5px;
    border: 2px solid rgba(15, 15, 30, 1);
}

.elite-panel-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #a78bfa, #38bdf8) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* ============================================
   🐛 BUG #2 PREPARAÇÃO: MODAL DE IDIOMA
   ============================================ */

/* Ocultar modal antigo de idioma (será removido depois) */
#language-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Garantir que painel de idioma funcione corretamente */
#lang-panel .elite-panel-section {
    cursor: pointer;
    transition: all 0.3s ease;
}

#lang-panel .elite-panel-section:hover {
    transform: translateX(-5px);
    border-color: rgba(34, 211, 238, 0.5) !important;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.2) !important;
}

/* Indicador visual de idioma selecionado */
#lang-panel .elite-panel-section.selected {
    background: rgba(34, 211, 238, 0.15) !important;
    border-color: rgba(34, 211, 238, 0.6) !important;
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.3) !important;
}

#lang-panel .elite-panel-section.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #22d3ee;
    font-weight: bold;
}

/* ============================================
   🐛 BUG #3 PREPARAÇÃO: ESTATÍSTICAS DO PERFIL
   ============================================ */

/* Adicionar animação de atualização */
#profile-transactions-count,
#profile-balance-value {
    transition: all 0.3s ease;
}

#profile-transactions-count.updating,
#profile-balance-value.updating {
    animation: statsUpdate 0.6s ease;
}

@keyframes statsUpdate {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

/* Container de estatísticas mais visual */
.elite-panel-section .grid > div {
    position: relative;
    overflow: hidden;
}

.elite-panel-section .grid > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.1) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

.elite-panel-section .grid > div:hover::before {
    left: 100%;
}

/* ============================================
   🎬 ANIMAÇÕES ADICIONAIS
   ============================================ */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ============================================
   🎬 ELITE INSIGHTS ANIMATIONS - DELICATE
   ============================================ */

/* Suave slide-in da esquerda */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animação extra suave para cards minimalistas */
.elite-insight-card-minimal {
    will-change: transform, box-shadow;
}

/* Remove qualquer animação de brilho excessiva */
.elite-insight-card-minimal:hover {
    /* Apenas translação suave sem efeitos exagerados */
}