/*
 * Desktop Alignment Fix CSS
 * Corrige problemas de alinhamento específicos do desktop
 * Mantém a responsividade perfeita do mobile
 * Adiciona estilos para header e rodapé de fora-a-fora
 * Novo layout otimizado com Market Data e Gráfico Bitcoin
 * Header agora rola junto com o conteúdo
 */

/* Header e Rodapé de fora-a-fora */
.main-header,
footer {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

.main-header {
    /* REMOVIDO: position: fixed; para que role junto com o conteúdo */
    padding: 0.5rem 0;
    min-height: 120px;
}

footer {
    margin-top: 3rem;
}

/* Ajustar o conteúdo principal - sem padding-top pois header não é mais fixo */
#main-content {
    padding-top: 2rem;
}

@media (min-width: 640px) {
    #main-content {
        padding-top: 2rem;
    }
}

/* Estilos específicos para o novo header */
.main-header .flex-1 {
    flex: 1;
}

.main-header .max-w-sm {
    max-width: 20rem;
}

/* Responsividade para Market Data e Gráfico Bitcoin */
@media (max-width: 639px) {
    /* Apenas ocultar em mobile muito pequeno */
    .main-header .flex-1.max-w-sm {
        display: none;
    }

    .main-header .flex-1:nth-child(2) {
        flex: none;
    }

    #main-content {
        padding-top: 2rem;
    }
}

/* Para tablets e telas médias - mostrar os elementos mas menores */
@media (min-width: 640px) and (max-width: 1023px) {
    .main-header .flex-1.max-w-sm {
        max-width: 15rem;
        padding: 0 0.5rem;
    }

    .main-header .flex-1.max-w-sm .bg-gray-800 {
        padding: 0.5rem;
    }

    .main-header .flex-1.max-w-sm h3 {
        font-size: 0.75rem;
    }

    #main-content {
        padding-top: 2rem;
    }
}

/* Correção específica para desktop - Configurações de Análise */
@media (min-width: 1024px) {
    .filter-section,
    .results-section,
    .specific-analysis-section {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }
    
    .filter-controls {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
        align-items: end;
        justify-items: stretch;
    }
    
    .filter-controls > div {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Ajuste específico para o botão que estava desalinhado */
    .filter-controls .lg\:col-span-2 {
        grid-column: span 3;
        margin-top: 1rem;
    }
    
    .filter-controls .action-btn {
        max-width: 300px;
        margin: 0 auto;
        padding: 0.75rem 2rem;
    }
}

/* Melhorias adicionais para desktop */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
    
    /* Centralizar melhor o conteúdo principal */
    #main-content {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* Ajustar espaçamento das seções */
    .filter-section,
    .results-section,
    .specific-analysis-section {
        margin-bottom: 2rem;
    }
}

/* Correção para telas muito grandes */
@media (min-width: 1536px) {
    .container {
        max-width: 1400px;
    }
    
    #main-content {
        max-width: 1400px;
    }
    
    .filter-section,
    .results-section,
    .specific-analysis-section {
        max-width: 1400px;
    }
}

/* Garantir que o mobile continue perfeito */
@media (max-width: 1023px) {
    .filter-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .filter-controls .lg\:col-span-2 {
        grid-column: span 1;
        margin-top: 1rem;
    }
    
    .filter-controls .action-btn {
        width: 100%;
    }
}

/* Ajustes específicos para tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .filter-controls {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .filter-controls .lg\:col-span-2 {
        grid-column: span 2;
    }
}

/* Garantir visibilidade dos elementos do header */
.user-info-area,
.version-badge-independent,
.login-btn-header,
#fear-greed-container,
.tradingview-widget-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ajustar z-index para garantir que os elementos apareçam */
.user-info-area {
    z-index: 50;
    position: relative;
}

/* Corrigir posicionamento absoluto que pode esconder elementos */
.main-header .absolute {
    position: absolute !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Garantir que o header tenha altura suficiente para mostrar tudo */
.main-header {
    min-height: 160px;
    overflow: visible !important;
}

/* Garantir que o Fear & Greed seja visível */
#fearGreedGauge,
#fearGreedValue,
#fearGreedStatus {
    display: block !important;
    visibility: visible !important;
}

/* Garantir que o gráfico do Bitcoin seja visível */
.tradingview-widget-container__widget {
    min-height: 120px;
    display: block !important;
}