/* 
Mobile Pages - Authentication
Login page optimization and compact mobile styles
*/

/* ===== LOGIN PAGE MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Mobile-first login container */
    .login-container {
        margin: var(--hh-space-md) !important;
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        max-width: none !important;
        width: calc(100vw - 32px) !important;
        min-height: auto !important;
        border-radius: var(--hh-radius-md) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    /* Optimize logo section for mobile */
    .logo {
        margin-bottom: var(--hh-space-xl) !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .logo img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .logo h1 {
        font-size: var(--hh-type-h2-size) !important;
    }
    
    /* Touch-friendly auth tabs */
    .auth-tab {
        padding: var(--hh-space-md) var(--hh-space-sm) !important;
        font-size: var(--hh-type-body-size) !important;
        min-height: 44px !important; /* Touch target compliance */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Mobile-optimized form groups */
    .form-group {
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .form-group label {
        font-size: var(--hh-type-body-size) !important;
        margin-bottom: var(--hh-space-xs) !important;
    }
    
    /* Critical: Prevent iOS zoom on input focus */
    .form-group input,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"] {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        border-radius: var(--hh-radius-md) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        min-height: 48px !important; /* Touch-friendly height */
        -webkit-appearance: none !important; /* Remove iOS styling */
        appearance: none !important;
    }
    
    .form-group input:focus {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1) !important;
    }
    
    /* Enhanced password toggle for mobile */
    .password-toggle {
        right: var(--hh-space-md) !important;
        width: 44px !important; /* Touch target compliance */
        height: 44px !important;
        font-size: var(--hh-type-lg-size) !important;
        background: none !important;
        border: none !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
    }
    
    .password-toggle:hover,
    .password-toggle:focus {
        background: var(--hh-color-base-cloud) !important;
        color: var(--hh-color-brand-primary) !important;
    }
    
    .password-field-container input[type="password"],
    .password-field-container input[type="text"] {
        padding-right: 60px !important; /* Account for larger touch target */
    }
    
    /* Enhanced mobile auth button */
    .auth-button {
        padding: var(--hh-space-lg) !important;
        font-size: var(--hh-type-lg-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        min-height: 52px !important; /* Generous touch target */
        border-radius: var(--hh-radius-md) !important;
        margin-bottom: var(--hh-space-lg) !important;
        transition: all 0.2s ease !important;
    }
    
    .auth-button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Mobile-optimized divider */
    .auth-divider {
        margin: var(--hh-space-xl) 0 !important;
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Google Sign-in button mobile optimization */
    .google-signin-button {
        width: 100% !important;
        min-height: 52px !important;
        border-radius: var(--hh-radius-md) !important;
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        border: 2px solid var(--hh-color-borders-default) !important;
        background: var(--hh-color-base-white) !important;
        transition: all 0.2s ease !important;
    }
    
    .google-signin-button:hover {
        border-color: var(--hh-color-brand-primary) !important;
        box-shadow: var(--hh-shadow-md) !important;
    }
    
    .google-signin-button:active {
        transform: scale(0.98) !important;
    }
    
    /* Back to home link mobile optimization */
    .back-link {
        font-size: var(--hh-type-body-size) !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
    }
    
    .back-link:hover {
        background: var(--hh-color-base-cloud) !important;
        text-decoration: none !important;
    }
}

/* ===== LOGIN PAGE COMPACT MOBILE (iPhone SE and smaller) ===== */
@media (max-width: 375px) {
    .login-container {
        margin: var(--hh-space-sm) !important;
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
        width: calc(100vw - 16px) !important;
    }
    
    .logo {
        margin-bottom: var(--hh-space-lg) !important;
    }
    
    .logo img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .logo h1 {
        font-size: var(--hh-type-h3-size) !important;
    }
    
    .form-group {
        margin-bottom: var(--hh-space-md) !important;
    }
    
    .form-group input {
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        min-height: 44px !important;
    }
    
    .auth-button {
        min-height: 48px !important;
        font-size: var(--hh-type-body-size) !important;
    }
}