/**
 * MOBILE PAGE LAYOUT - Padrão global para páginas com formulário
 *
 * Resolve problemas de layout no mobile (WebView):
 * - Teclado virtual não quebra layout
 * - Scroll funciona corretamente (controlado pelo body)
 * - Header permanece fixo no topo
 * - Compatível com 100dvh
 *
 * Uso: adicionar classes .page-container, .page-header, .page-main
 */

/* ============================================
   .page-container - Container principal
   ============================================ */

.page-container {
    /* Layout flex para organizar header + main */
    display: flex;
    flex-direction: column;

    /* Background gradiente para o header */
    background: linear-gradient(135deg, #5BA092 0%, #4a9d8e 100%);

    /* Altura mínima da viewport - cresce com conteúdo */
    min-height: 100dvh;
    min-height: 100vh;

    /* SEM overflow - scroll controlado pelo body */
    /* SEM position fixed - permite comportamento nativo */
}

/* Desktop: ajustes */
@media (min-width: 1025px) {
    .page-container {
        /* Sem restrição de altura no desktop */
        min-height: auto;

        /* Background transparente para integrar com layout desktop */
        background: transparent;

        /* Layout normal no desktop */
        display: block;
    }
}

/* ============================================
   .page-header - Header fixo no topo
   ============================================ */

.page-header {
    /* Background gradiente padrão */
    background: linear-gradient(135deg, #5BA092 0%, #4a9d8e 100%);

    /* Padding com safe area para iOS */
    padding: 2.8rem 24px 40px 24px;

    /* Cores e tipografia */
    color: white;

    /* Posicionamento */
    position: relative;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* NÃO encolher quando o teclado abrir */
    flex-shrink: 0;
}

/* Safe area para iOS (notch) */
@supports (padding: max(0px)) {
    .page-header {
        padding-top: max(2.8rem, env(safe-area-inset-top));
    }
}

/* Desktop: esconder header mobile */
@media (min-width: 1025px) {
    .page-header {
        display: none;
    }
}

/* Small mobile: reduzir padding */
@media (max-width: 480px) {
    .page-header {
        padding: 2.8rem 20px 36px 20px;
    }
}

/* ============================================
   .page-title - Título do header
   ============================================ */

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0;
    text-align: center;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
}

@media (max-width: 480px) {
    .page-title {
        font-size: 24px;
    }
}

/* ============================================
   .page-back-button - Botão de voltar
   ============================================ */

.page-back-button {
    background: none;
    border: none;
    color: white;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 24px;
}

.page-back-button:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-2px);
}

@media (max-width: 480px) {
    .page-back-button {
        left: 20px;
    }
}

/* ============================================
   .page-main - Área de conteúdo principal
   ============================================ */

.page-main {
    /* Background branco */
    background: white;

    /* Border radius superior para efeito visual */
    border-radius: 20px 20px 0 0;

    /* SEM margin-top negativo - era uma gambiarra */
    /* O header já está posicionado corretamente pelo flex container */

    /* Padding interno */
    padding: 24px 16px;

    /* Espaço para o bottom bar navigation */
    padding-bottom: 100px;

    /* Crescer para ocupar espaço disponível */
    flex: 1;

    /* SEM overflow: scroll - scroll controlado pelo body */
    /* SEM position fixo - permite comportamento nativo */
}

/* Safe area para iOS (home indicator) */
@supports (padding: max(0px)) {
    .page-main {
        padding-bottom: max(100px, calc(100px + env(safe-area-inset-bottom)));
    }
}

/* Desktop: ajustes */
@media (min-width: 1025px) {
    .page-main {
        /* Resetar estilo mobile */
        background: white;
        border-radius: 12px;
        padding: 32px;

        /* Remover borda arredondada superior */
        border-radius: 12px;

        /* Sombra suave */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        /* Centralizar em desktop */
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Small mobile: reduzir padding */
@media (max-width: 480px) {
    .page-main {
        padding: 24px 20px;
        padding-bottom: 80px;
    }
}

/* ============================================
   .page-back-button-web - Botão voltar desktop
   ============================================ */

.page-back-button-web {
    display: none;
}

@media (min-width: 1025px) {
    .page-back-button-web {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        margin-bottom: 16px;
        background: transparent;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
        width: fit-content;
    }

    .page-back-button-web:hover {
        background: #f8f9fa;
        border-color: #dee2e6;
    }
}

/* ============================================
   INPUTS - Garantir visibilidade ao focar
   ============================================ */

@media (max-width: 1024px) {
    .page-main input:focus,
    .page-main textarea:focus,
    .page-main select:focus {
        position: relative;
        z-index: 10;
    }
}

/* ============================================
   VARIANTE: Sem header (para páginas especiais)
   ============================================ */

.page-container--no-header {
    /* Remove margem negativa do main */
}

.page-container--no-header .page-main {
    margin-top: 0;
    border-radius: 0;
}

/* ============================================
   VARIANTE: Full height (para páginas especiais)
   ============================================ */

.page-container--full {
    min-height: 100dvh;
    min-height: 100vh;
}

/* ============================================
   Helper classes
   ============================================ */

/* Conteúdo do form */
.page-content {
    padding: 0;
}

@media (min-width: 1025px) {
    .page-content {
        padding: 0;
    }
}

/* Sem padding extra no main */
.page-main--compact {
    padding: 0;
}

/* Com grid no desktop */
@media (min-width: 1025px) {
    .page-main--grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}