/**
 * 🍎 APPLE LAYOUT - TÉCNICA REAL DA APPLE.COM
 *
 * Técnica simples e robusta:
 * - Containers full-width (100%)
 * - Conteúdo interno centralizado
 * - SEM truques de margin negativo
 * - SEM position relative/left/right
 */

/* ===================================
   🎯 BASE: Container pai sem limitações
=================================== */

#app-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;

    /* FIX: Não adicionar scroll próprio - deixar body rolar */
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    overflow-y: visible !important;

    /* Compensação do menu fixo do topo */
    padding-top: 48px !important;
    padding-bottom: 0 !important; /* Footer agora é relativo, não precisa compensação */
}

body, html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/**
 * FIX: Prevenir scroll duplo
 * - Apenas o body deve ter scroll vertical
 * - HTML NÃO deve ter overflow (causava scroll duplo)
 */
html {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    height: 100% !important;
}

body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    min-height: 100vh !important;
}

#elite-dashboard-header {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================================
   🍎 MENU APPLE - RECRIADO IDENTICAMENTE
   Baseado na análise visual do apple.com
=================================== */

/**
 * Container principal do menu
 * - Background: Preto translúcido com blur (efeito glassmorphism)
 * - Altura: 48px (padrão Apple)
 * - Full-width com conteúdo centralizado
 * - Position FIXED: Sempre visível ao rolar
 */
.apple-nav {
    /* Posicionamento - FIXO no topo */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;

    /* Dimensões */
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;

    /* Background Apple exato */
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;

    /* Borda inferior sutil */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    /* Reset */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* Transição suave */
    transition: background-color 0.3s ease !important;
}

/* Light mode */
[data-theme="light"] .apple-nav {
    background-color: rgba(251, 251, 253, 0.72) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/**
 * Compensação do menu fixo
 * - REMOVIDO: padding-top duplicado (app-wrapper já tem padding-top: 48px)
 * - Header não precisa de padding extra
 */
#elite-dashboard-header {
    padding-top: 0 !important;
}

/* Ajuste no primeiro elemento após o menu */
.apple-nav + * {
    margin-top: 0 !important;
}

/**
 * Container de conteúdo centralizado
 * - Max-width: 1000px (padrão Apple)
 * - Flexbox para alinhar logo, links e ações
 */
.apple-nav-content {
    max-width: 1000px;
    height: 48px;
    margin: 0 auto;
    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

/**
 * Logo (esquerda)
 * - Tamanho: 16px x 16px
 * - Cor branca com opacity
 */
.apple-nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 48px;
    padding: 0 8px;
    color: rgba(245, 245, 247, 0.92);
    text-decoration: none;
    transition: color 0.1s ease;
    flex-shrink: 0;
}

.apple-nav-logo:hover {
    color: rgba(245, 245, 247, 1);
}

[data-theme="light"] .apple-nav-logo {
    color: rgba(29, 29, 31, 0.92);
}

[data-theme="light"] .apple-nav-logo:hover {
    color: rgba(29, 29, 31, 1);
}

.apple-nav-logo i {
    font-size: 16px;
}

/**
 * Links centrais
 * - Apenas texto (SEM ícones)
 * - Espaçamento uniforme
 */
.apple-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    justify-content: center;
    margin: 0 40px;
}

/**
 * Link individual
 * - Font: SF Pro Text, 12px
 * - Cor: rgba(245, 245, 247, 0.92) no dark
 * - Hover: Opacity aumenta para 1
 */
.apple-nav-link {
    /* Reset */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;

    /* Typography Apple */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1;

    /* Cor */
    color: rgba(245, 245, 247, 0.92);

    /* Altura para click area */
    height: 48px;
    display: flex;
    align-items: center;

    /* Transição suave */
    transition: color 0.1s linear;

    /* Remove efeitos */
    box-shadow: none;
    text-shadow: none;
    white-space: nowrap;
}

.apple-nav-link:hover {
    color: rgba(245, 245, 247, 1);
}

[data-theme="light"] .apple-nav-link {
    color: rgba(29, 29, 31, 0.8);
}

[data-theme="light"] .apple-nav-link:hover {
    color: rgba(29, 29, 31, 1);
}

/**
 * Ações direita (idioma, etc)
 * - Ícones pequenos
 * - Mesmo estilo dos links
 */
.apple-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    position: relative;
}

.apple-nav-icon {
    /* Reset */
    background: transparent;
    border: none;
    padding: 0 8px;
    margin: 0;
    cursor: pointer;

    /* Dimensões */
    width: 32px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Cor */
    color: rgba(245, 245, 247, 0.92);

    /* Transição */
    transition: color 0.1s ease;
}

.apple-nav-icon:hover {
    color: rgba(245, 245, 247, 1);
}

[data-theme="light"] .apple-nav-icon {
    color: rgba(29, 29, 31, 0.92);
}

[data-theme="light"] .apple-nav-icon:hover {
    color: rgba(29, 29, 31, 1);
}

.apple-nav-icon i {
    font-size: 14px;
}

/**
 * Dropdown de idioma
 * - Aparece ao clicar no globo
 * - Estilo Apple minimalista
 */
.apple-lang-dropdown {
    position: absolute;
    top: 48px;
    right: 0;

    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;

    padding: 8px 0;
    min-width: 180px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.apple-lang-dropdown.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

[data-theme="light"] .apple-lang-dropdown {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.apple-lang-option {
    width: 100%;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;

    background: transparent;
    border: none;
    cursor: pointer;

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 13px;
    color: rgba(245, 245, 247, 0.92);

    transition: background-color 0.1s ease;
}

.apple-lang-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .apple-lang-option {
    color: rgba(29, 29, 31, 0.92);
}

[data-theme="light"] .apple-lang-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.apple-lang-check {
    margin-left: auto;
    font-size: 12px;
    opacity: 0;
}

.apple-lang-option.active .apple-lang-check {
    opacity: 1;
}

/**
 * Mobile hamburger
 * - Aparece em telas pequenas
 */
.apple-hamburger {
    display: none;
    background: transparent;
    border: none;
    color: rgba(245, 245, 247, 0.92);
    font-size: 18px;
    padding: 0 16px;
    height: 48px;
    cursor: pointer;
}

[data-theme="light"] .apple-hamburger {
    color: rgba(29, 29, 31, 0.92);
}

/**
 * Responsive - Mobile
 */
@media (max-width: 768px) {
    .apple-nav-content {
        padding: 0 16px;
    }

    .apple-nav-links {
        display: none;
    }

    .apple-hamburger {
        display: flex;
        align-items: center;
        margin-left: auto;
    }
}

/* ===================================
   🎯 SEÇÕES - TÉCNICA REAL DA APPLE
=================================== */

.elite-section-container,
.apple-zen-banner,
.elite-balance-redesign,
.elite-insights-redesign,
.elite-resumo-redesign,
.elite-categorias-redesign,
.elite-forecast-card-apple {
    /* Full width SIMPLES - Técnica Apple */
    width: 100% !important;
    max-width: 100% !important;

    /* Remove bordas arredondadas */
    border-radius: 0 !important;

    /* Remove margens (conectar seções) */
    margin: 0 !important;

    /* Padding vertical */
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* Remove shadows */
    box-shadow: none !important;

    /* Posição normal */
    position: relative !important;

    /* Reset position hacks */
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Wrapper interno - Centraliza conteúdo (Técnica Apple) */
.elite-section-container > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
.apple-zen-banner > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
.elite-balance-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
.elite-insights-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
.elite-resumo-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
.elite-categorias-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
.elite-forecast-card-apple > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Bordas sutis entre seções */
.elite-balance-redesign,
.elite-insights-redesign,
.elite-resumo-redesign,
.elite-categorias-redesign,
.elite-forecast-card-apple {
    border-top: 1px solid var(--apple-border) !important;
}

/* Primeira seção sem borda */
.apple-zen-banner {
    border-top: none !important;
}

/* Backgrounds alternados */
.apple-zen-banner {
    background: var(--apple-bg-primary) !important;
}

.elite-balance-redesign {
    background: var(--apple-bg-secondary) !important;
}

.elite-insights-redesign {
    background: var(--apple-bg-primary) !important;
}

.elite-resumo-redesign {
    background: var(--apple-bg-secondary) !important;
}

.elite-forecast-card-apple {
    background: var(--apple-bg-primary) !important;
}

.elite-categorias-redesign {
    background: var(--apple-bg-secondary) !important;
}

/* Blobs - Ajustados */
.section-blob-container,
.apple-blob-container,
.forecast-blob-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Remove hover transforms */
.elite-section-container:hover,
.apple-zen-banner:hover,
.elite-balance-redesign:hover,
.elite-insights-redesign:hover,
.elite-resumo-redesign:hover,
.elite-categorias-redesign:hover,
.elite-forecast-card-apple:hover {
    transform: none !important;
}

/* Cards internos mantêm bordas */
.inner-card-redesign,
.country-stat,
.forecast-stat-card {
    border-radius: 18px !important;
}

/* Country sections */
#brazil-section,
#usa-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    border-radius: 0 !important;
}

/* USA Section (última antes do footer) - remover espaço inferior */
#usa-section {
    padding-bottom: 0 !important; /* Remove espaço para footer colar */
    margin-bottom: 0 !important;
}

/* Main grid */
main.grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
}

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

@media (max-width: 768px) {
    /* Menu mobile */
    .elite-nav-desktop {
        max-width: 100% !important;
        padding: 0 16px !important;
        gap: 16px !important;
    }

    .elite-nav-btn {
        font-size: 11px !important;
        padding: 0 6px !important;
    }

    /* Seções mobile */
    .elite-section-container,
    .apple-zen-banner,
    .elite-balance-redesign,
    .elite-insights-redesign,
    .elite-resumo-redesign,
    .elite-categorias-redesign,
    .elite-forecast-card-apple,
    #brazil-section,
    #usa-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .elite-section-container > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
    .apple-zen-banner > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
    .elite-balance-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
    .elite-insights-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
    .elite-resumo-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
    .elite-categorias-redesign > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container),
    .elite-forecast-card-apple > *:not(.section-blob-container):not(.apple-blob-container):not(.forecast-blob-container) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    main.grid {
        padding: 0 16px !important;
    }
}

/* ===================================
   📱 RESPONSIVE - PADDING DO APP-WRAPPER
=================================== */

@media (max-width: 768px) {
    #app-wrapper {
        padding-bottom: 0 !important; /* Footer relativo, sem necessidade de padding */
    }
}

/* Transições suaves */
.elite-section-container,
.apple-zen-banner,
.elite-balance-redesign,
.elite-insights-redesign,
.elite-resumo-redesign,
.elite-categorias-redesign,
.elite-forecast-card-apple {
    transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}