/**
 * Login Mobile & iOS - CSS Dedicado
 * Design responsivo e profissional para telas mobile e iOS
 */

/* ==========================================================================
   SPLASH SCREEN (mobile only)
   ========================================================================== */

.splash-screen {
    display: none;
}

@media (max-width: 768px) {
    .splash-screen {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 10001;
        align-items: center;
        justify-content: center;
        background: #000000;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .splash-screen.splash-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .splash-logo {
        width: 310px;
        height: auto;
    }
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ==========================================================================
   iOS & MOBILE - GERAL
   ========================================================================== */

/* App behavior: bloquear pull-to-refresh.
   Scroll fica contido no .login-card, não no body.
   A barra vermelha (position:fixed) funciona com overflow:hidden. */
@media (max-width: 768px) {
    html, body {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
        overscroll-behavior-y: contain !important;
    }
}

@media (max-width: 768px) {
    /* ==========================================================================
       PREFERÊNCIAS / CONFIGURAÇÕES - DENTRO DA BORDA ONDULADA
       ========================================================================== */

    .preferences-controls {
        position: absolute !important;
        top: 2.8rem !important;
        right: 20px !important;
        z-index: 1000 !important;
    }

    .preferences-toggle {
        background-color: transparent !important;
        border: 1px solid #737373 !important;
        border-radius: 50% !important;
        padding: 10px !important;
        cursor: pointer !important;
        color: #737373 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .preferences-toggle svg {
        stroke: #737373 !important;
    }

    .preferences-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: none !important;
        background-color: var(--login-prefs-bg) !important;
        border: 1px solid var(--login-prefs-border) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 1001 !important;
        overflow: hidden !important;
    }

    .preferences-menu *,
    .preferences-menu *::before,
    .preferences-menu *::after {
        box-sizing: border-box !important;
    }

    .preference-group {
        margin-bottom: 16px !important;
    }

    .preference-group:last-child {
        margin-bottom: 0 !important;
    }

    .preference-label {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
    }

    .theme-switch {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .language-switch {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .theme-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        border: none !important;
        width: 100% !important;
    }

    .theme-btn[data-theme="light"] {
        background-color: #e63946 !important;
        color: #ffffff !important;
    }

    .theme-btn[data-theme="dark"] {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    .theme-btn i {
        color: #ffffff !important;
    }

    .lang-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border-width: 2px !important;
        overflow: hidden !important;
    }

    .lang-btn .fi {
        font-size: 28px !important;
        border-radius: 50% !important;
    }

    /* ==========================================================================
       LOGIN CONTAINER
       ========================================================================== */

    .login-container {
        margin-top: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background-color: #1a1a1a !important;
    }

    /* ==========================================================================
       LOGIN CARD - FULLSCREEN NO MOBILE
       ========================================================================== */

    .login-card {
        border-radius: 0 !important;
        padding: 2rem 1.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    .login-form-container {
        position: relative !important;
        width: 100% !important;
        max-width: 400px !important;
    }

    /* ==========================================================================
       LOGO - USA ELEMENTO REAL NO MOBILE (não mais ::before)
       ========================================================================== */

    .logo-container {
        margin-bottom: 50px !important;
    }

    .logo-img {
        width: 280px !important;
        height: auto !important;
    }

    /* ==========================================================================
       TIPOGRAFIA
       ========================================================================== */

    .login-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        letter-spacing: -0.5px !important;
    }

    .login-subtitle {
        font-size: 15px !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
        opacity: 0.8 !important;
    }

    /* ==========================================================================
       ALERTAS
       ========================================================================== */

    .alert-error {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 1.5rem !important;
        font-size: 14px !important;
        border: 1px solid rgba(255, 87, 87, 0.3) !important;
    }

    /* ==========================================================================
       FORMULÁRIO
       ========================================================================== */

    .login-form {
        margin-bottom: 1.5rem !important;
    }

    .form-group {
        margin-bottom: 2rem !important;
    }

    /* Inputs */
    .form-group input {
        width: 100% !important;
        padding: 16px 18px !important;
        font-size: 16px !important;
        background-color: var(--login-input-bg) !important;
        border: 1.5px solid var(--login-input-border) !important;
        border-radius: 50px !important;
        color: var(--login-text-primary) !important;
        transition: all 0.2s !important;
        -webkit-appearance: none !important;
        -webkit-border-radius: 50px !important;
    }

    .form-group input::placeholder {
        color: var(--login-input-placeholder) !important;
    }

    .form-group input:focus {
        outline: none !important;
        background-color: var(--login-input-focus-bg) !important;
        border-color: var(--accent-color) !important;
    }

    /* Input de senha */
    .password-group input {
        padding-right: 54px !important;
    }

    /* Toggle de senha */
    .toggle-password {
        right: 12px !important;
        padding: 4px !important;
        color: var(--login-toggle-color) !important;
        background: transparent !important;
    }

    /* ==========================================================================
       BOTÕES
       ========================================================================== */

    .btn-acelerar {
        width: 100% !important;
        padding: 18px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        border-radius: 50px !important;
        border: none !important;
        cursor: pointer !important;
        transition: background-color 0.2s !important;
    }

    /* ==========================================================================
       LINKS
       ========================================================================== */

    .forgot-password-link {
        text-align: center !important;
        margin-top: 1rem !important;
    }

    .forgot-password-link a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        text-decoration: none !important;
    }

    .register-link {
        text-align: center !important;
        font-size: 14px !important;
    }

    .register-link a {
        font-weight: 600 !important;
        color: #000000 !important;
        text-decoration: none !important;
    }

    /* ==========================================================================
       QUICK LOGIN (se existir)
       ========================================================================== */

    .quick-login-container {
        margin-top: 2rem !important;
    }

    .quick-login-divider {
        font-size: 13px !important;
        margin-bottom: 1rem !important;
        opacity: 0.6 !important;
    }

    .quick-login-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .btn-quick-login {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* ==========================================================================
       SAFE AREA (iPhone X+)
       ========================================================================== */

    @supports (padding: max(0px)) {
        .login-card {
            padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
            padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
            padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
        }

        .preferences-controls {
            margin-top: max(0px, env(safe-area-inset-top)) !important;
            right: max(20px, env(safe-area-inset-right)) !important;
        }
    }
}

/* ==========================================================================
   ORIENTAÇÃO LANDSCAPE
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .login-card {
        padding: 1.5rem !important;
    }

    .logo-container {
        margin-bottom: 1rem !important;
    }

    .login-title {
        font-size: 22px !important;
    }

    .login-subtitle {
        font-size: 14px !important;
        margin-bottom: 1rem !important;
    }

    .form-group {
        margin-bottom: 0.75rem !important;
    }
}

/* ==========================================================================
   DISPOSITIVOS PEQUENOS (< 375px)
   ========================================================================== */

@media (max-width: 374px) {
    .login-card {
        padding: 2rem 1rem 1.5rem !important;
    }

    .login-title {
        font-size: 24px !important;
    }

    .form-group input {
        padding: 14px 16px !important;
        font-size: 16px !important;
    }

    .btn-acelerar {
        padding: 16px !important;
    }
}

/* ==========================================================================
   ANIMAÇÕES SUAVES
   ========================================================================== */

@media (max-width: 768px) {
    .login-form-container {
        animation: slideUp 0.5s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .login-form-container::before,
    .login-title,
    .login-subtitle,
    .form-group,
    .btn-acelerar,
    .forgot-password-link,
    .register-link {
        animation: fadeIn 0.5s ease-out backwards;
    }

    .login-form-container::before { animation-delay: 0.05s; }
    .login-title { animation-delay: 0.1s; }
    .login-subtitle { animation-delay: 0.15s; }
    .form-group:nth-child(1) { animation-delay: 0.2s; }
    .form-group:nth-child(2) { animation-delay: 0.3s; }
    .btn-acelerar { animation-delay: 0.4s; }
    .forgot-password-link { animation-delay: 0.5s; }
    .register-link { animation-delay: 0.6s; }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}