/**
 * LAYOUT SHIFT FIX - Prevenção de CLS (Cumulative Layout Shift)
 * Dimensões fixas para reservar espaço antes do carregamento
 * Elite Financial System v10.0
 */

/* ============================================
   🎨 DESIGN #3: DIMENSÕES FIXAS PARA ZERO CLS
   ============================================ */

/* USER CARDS - Login Step 1 */
.elite-user-card-wrapper {
    /* Definir dimensões fixas para reservar espaço */
    min-height: 320px;
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: 400px;
    position: relative;
}

.elite-user-card {
    /* Garantir que card ocupe espaço reservado */
    width: 100%;
    height: 100%;
    min-height: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 2rem;
    box-sizing: border-box;
}

/* Ícone do usuário */
.elite-user-icon {
    width: 80px;
    height: 80px;
    min-height: 80px; /* Prevenir colapso */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    flex-shrink: 0; /* Não permitir que encolha */
}

/* Nome do usuário */
.elite-user-name {
    min-height: 2rem; /* Reservar espaço para o texto */
    line-height: 2rem;
}

/* Descrição do usuário */
.elite-user-desc {
    min-height: 1.5rem;
    line-height: 1.5rem;
}

/* LANGUAGE CARDS - Login Step 2 */
.elite-lang-card-wrapper {
    min-height: 280px;
    aspect-ratio: 5 / 3;
    width: 100%;
    position: relative;
}

.elite-lang-card {
    width: 100%;
    height: 100%;
    min-height: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem 2rem;
    box-sizing: border-box;
}

.elite-lang-icon {
    width: 70px;
    height: 70px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
}

.elite-lang-text {
    min-height: 2rem;
    line-height: 2rem;
}

.elite-lang-desc {
    min-height: 1.5rem;
    line-height: 1.5rem;
}

/* PASSWORD CARD - Login Step 3 */
.elite-password-card-wrapper {
    min-height: 400px;
    aspect-ratio: 3 / 2;
    width: 100%;
    max-width: 600px;
    position: relative;
}

.elite-password-card {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 2.5rem;
    box-sizing: border-box;
}

.elite-password-icon {
    width: 90px;
    height: 90px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    flex-shrink: 0;
}

/* CANVAS PARTICLES - Prevenir layout shift */
.elite-card-particles {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 0;
}

/* ACTION BUTTONS - Dashboard */
.elite-action-btn {
    min-height: 120px; /* Reservar altura mínima */
    aspect-ratio: 16 / 9;
    position: relative;
    contain: layout style paint; /* Otimização de rendering */
}

/* BALANCE CARD */
.elite-balance-card {
    min-height: 250px;
    aspect-ratio: 16 / 9;
}

/* AI COACH CARD */
.elite-ai-coach-card {
    min-height: 300px;
}

/* SUMMARY CARDS */
.elite-summary-card {
    min-height: 180px;
    aspect-ratio: 4 / 3;
}

/* CHART CONTAINERS */
.chart-container,
canvas[id*="chart"] {
    /* Reservar espaço para gráficos */
    min-height: 400px;
    width: 100% !important;
    aspect-ratio: 16 / 9;
}

/* MODALS - Prevenir shift ao abrir */
.modal,
.elite-modal,
[role="dialog"] {
    /* Já posicionados fixos, mas garantir que não causem reflow */
    position: fixed !important;
    inset: 0;
    contain: layout style;
}

/* IMAGES - Sempre com dimensões */
img:not([width]):not([height]) {
    /* Forçar aspect-ratio se não tiver width/height */
    aspect-ratio: attr(width) / attr(height);
}

img[src*="logo"],
img[src*="icon"] {
    /* Ícones e logos sempre com dimensão mínima */
    min-width: 40px;
    min-height: 40px;
}

/* ============================================
   SKELETON LOADING - Prevenir Shift Visual
   ============================================ */

/* Skeleton placeholders enquanto conteúdo carrega */
.skeleton-card {
    min-height: 200px;
    background: linear-gradient(
        90deg,
        rgba(30, 30, 60, 0.4) 25%,
        rgba(40, 40, 70, 0.5) 50%,
        rgba(30, 30, 60, 0.4) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 16px;
}

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

/* ============================================
   FONT LOADING - Prevenir FOIT/FOUT
   ============================================ */

/* Usar font-display: swap para prevenir texto invisível */
@font-face {
    font-family: 'Orbitron';
    font-display: swap; /* Mostra fallback imediatamente */
    /* src declarado no Google Fonts */
}

@font-face {
    font-family: 'Inter';
    font-display: swap;
}

/* Fallback mientras carrega */
body {
    font-synthesis: none; /* Não sintetizar estilos faltantes */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */

@media (max-width: 768px) {
    /* Ajustar proporções no mobile */
    .elite-user-card-wrapper,
    .elite-user-card {
        min-height: 280px;
    }

    .elite-lang-card-wrapper,
    .elite-lang-card {
        min-height: 240px;
    }

    .elite-password-card-wrapper,
    .elite-password-card {
        min-height: 360px;
    }

    .elite-action-btn {
        min-height: 100px;
    }

    .chart-container {
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    /* Ajustes extremos para telas pequenas */
    .elite-user-card-wrapper,
    .elite-user-card {
        min-height: 250px;
    }

    .elite-lang-card-wrapper,
    .elite-lang-card {
        min-height: 220px;
    }

    .chart-container {
        min-height: 250px;
    }
}

/* ============================================
   PERFORMANCE - Contain e Will-Change
   ============================================ */

/* Otimizar rendering de elementos animados */
.elite-user-card,
.elite-lang-card,
.elite-password-card,
.elite-action-btn {
    /* Isolar rendering deste elemento */
    contain: layout style paint;
    /* Preparar GPU para transformações */
    will-change: transform;
}

/* Remover will-change após animação */
.elite-materialize.animated {
    will-change: auto;
}

/* ============================================
   PRELOAD CRITICAL IMAGES
   ============================================ */

/* Dica: Adicionar no <head> do HTML */
/*
<link rel="preload" as="image" href="path/to/logo.png">
<link rel="preload" as="font" href="path/to/font.woff2" type="font/woff2" crossorigin>
*/