/* ============================================
   MOBILE RESET DE LAYOUT 
   Reseta layout para fluxo nativo simples e infalível
   ============================================ */

/* 1. RESETAR BASE DO DOCUMENTO */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
}

body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: visible !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    /* Remover qualquer transform que crie contexto de empilhamento no body */
    transform: none !important;
}

/* 2. CONTAINER DO APP */
#app {
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    /* Padding bottom para o menu */
    padding-bottom: 200px !important;
}

/* 3. AS TELAS (SCREENS) - O mais importante */
.screen {
    /* Estado padrão: Escondido */
    display: none !important;

    /* Quando ativo: Bloco normal, fluxo normal */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;

    /* Scroll visual natural */
    overflow: visible !important;

    /* Garantir ordem */
    z-index: 1 !important;

    /* Padding seguro */
    padding-top: 20px !important;
    padding-bottom: 120px !important;

    /* Remover transforms para evitar bugs de renderização */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Quando ativo, vira bloco visível */
.screen.active {
    display: block !important;
}

/* 4. CONTEÚDO DENTRO DAS TELAS */
.dashboard-content,
.exercises-content,
.history-content,
.container {
    padding-bottom: 50px !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 5. MENU INFERIOR (Único elemento fixo) */
.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    background: var(--bg-primary, #111) !important;
    height: 70px !important;
    display: flex !important;
}

/* 6. CORREÇÃO DE SPLASH/ONBOARDING */
/* Garantir que se escondam de vez quando inativos */
#splash-screen:not(.active),
#login-screen:not(.active),
#onboarding-screen:not(.active),
#js-splash-screen:not(.active),
#js-onboarding-screen:not(.active) {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
}

/* 7. REMOVER EFEITOS DECORATIVOS QUE PODEM BLOQUEAR */
/* Pseudo-elementos muitas vezes criam overlays invisíveis */
body::before,
body::after,
#app::before,
#app::after,
.screen::before,
.screen::after {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
}

/* 8. FORÇAR INTERATIVIDADE */
button,
input,
select,
textarea,
a,
.btn,
.card {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 100 !important;
}

/* 9. PADDING DO TOPO PARA HEADER (Se houver) */
.app-header {
    position: relative !important;
    z-index: 999 !important;
}