/* Correções de Layout - Gabaritos Suelbe */

/* Garantir que o container principal tenha espaçamento adequado */
main.container {
    position: relative;
    z-index: 1;
    margin-top: 2rem !important;
    padding-top: 1rem !important;
}

/* Corrigir problemas de sobreposição na seção de padrões estatísticos */
.bg-white.rounded-xl.shadow-lg {
    position: relative;
    z-index: 2;
    margin-bottom: 2rem;
    overflow: visible !important;
}

/* Garantir que os cards não sejam cortados */
.grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Corrigir z-index dos modais para não interferirem */
.modal-overlay {
    z-index: 10050 !important;
}

.mobile-overlay {
    z-index: 9998 !important;
}

.mobile-sidebar {
    z-index: 9999 !important;
}

/* Garantir que dropdowns tenham z-index adequado */
.mobile-user-dropdown,
#user-menu-dropdown {
    z-index: 1000 !important;
}

/* Corrigir problemas de overflow no mobile */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .bg-white.rounded-xl.shadow-lg {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0.75rem !important;
    }
    
    /* Garantir que os cards de padrões estatísticos sejam visíveis */
    .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* Corrigir problemas de posicionamento absoluto */
.absolute {
    position: absolute !important;
}

.relative {
    position: relative !important;
}

/* Garantir que elementos com transform não causem problemas */
.transform {
    transform-style: preserve-3d;
}

/* Corrigir problemas de altura mínima */
.content-section {
    min-height: calc(100vh - 200px);
    padding-bottom: 2rem;
}

/* Garantir que o banner promocional não interfira */
.relative.isolate {
    z-index: 10 !important;
    position: relative !important;
}

/* Corrigir problemas de scroll */
body {
    overflow-x: hidden;
}

/* Estabilizar área do botão 'Entrar' para evitar layout shift */
#login-button,
#mobile-login-btn {
    display: inline-block;
    min-width: 120px;
    min-height: 40px;
}

/* Reduzir animações que podem causar deslocamento perceptível */
@media (prefers-reduced-motion: reduce) {
    #login-button,
    #mobile-login-btn {
        transition: none !important;
    }
}

/* Garantir que os cards tenham altura adequada */
.bg-white.rounded-xl.shadow-lg.p-6 {
    min-height: auto;
    height: auto !important;
}

/* Corrigir problemas de flexbox */
.flex.flex-col.lg\\:flex-row {
    align-items: flex-start !important;
}

/* Garantir que os elementos não sejam cortados */
.space-y-8 > * {
    margin-bottom: 2rem !important;
}

/* Corrigir problemas de grid responsivo */
.grid.grid-cols-1.md\\:grid-cols-3 {
    gap: 1.5rem !important;
    margin-top: 2rem !important;
}

/* Garantir visibilidade dos elementos */
.opacity-0 {
    visibility: hidden !important;
}

.opacity-100 {
    visibility: visible !important;
}

/* Corrigir problemas de backdrop */
.backdrop-blur-sm {
    backdrop-filter: blur(4px) !important;
}

/* Garantir que os elementos interativos funcionem */
.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/* Corrigir problemas de transição */
.transition-all {
    transition: all 0.3s ease !important;
}

/* Garantir que os elementos sejam clicáveis */
button, a, .cursor-pointer {
    cursor: pointer !important;
}

/* Corrigir problemas de texto */
.text-ellipsis {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Garantir que os elementos não sejam cortados em telas pequenas */
@media (max-width: 640px) {
    .text-3xl {
        font-size: 1.5rem !important;
    }
    
    .text-2xl {
        font-size: 1.25rem !important;
    }
    
    .text-xl {
        font-size: 1.125rem !important;
    }
    
    .p-8 {
        padding: 1rem !important;
    }
    
    .p-6 {
        padding: 1rem !important;
    }
    
    .gap-8 {
        gap: 1rem !important;
    }
    
    .gap-6 {
        gap: 0.75rem !important;
    }
}