/* ==== MOBILE LOGIN FIXES - Modifiche minime e conservative ==== */

/* Fix solo per schermi piccoli */
@media (max-width: 480px) {
    /* Riduzione padding per avere più spazio */
    .login-container {
        padding: 1.5rem 0.75rem;
    }
    
    /* Testo hero più piccolo ma leggibile */
    .login-hero h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    .login-hero p {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 1.5rem;
    }
    
    /* Features più compatte */
    .hero-features {
        gap: 0.5rem;
    }
    
    .hero-feature {
        padding: 0.5rem 0;
    }
    
    .hero-feature-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .hero-feature-text {
        font-size: 0.8rem;
    }
    
    /* Login box più compatto */
    .login-box {
        padding: 1.5rem;
    }
    
    .login-header {
        margin-bottom: 1.5rem;
    }
    
    .login-logo {
        height: 40px;
        margin-bottom: 0.75rem;
    }
    
    .login-title {
        font-size: 1.3rem;
    }
    
    .login-subtitle {
        font-size: 0.85rem;
    }
    
    /* Form più compatto */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-label {
        font-size: 0.8rem;
    }
    
    /* Nascondi icone nelle label per risparmiare spazio */
    .form-label i {
        display: none;
    }
    
    .form-input {
        padding: 0.75rem;
        font-size: 16px; /* Importante per iOS */
    }
    
    /* Bottoni più piccoli */
    .btn-primary {
        padding: 0.85rem;
        font-size: 0.9rem;
    }
    
    /* Nascondi icona nel bottone login */
    #loginButton i {
        display: none;
    }
    
    .btn-secondary {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Support section più compatto */
    .login-support {
        margin-top: 1rem;
        padding-top: 1rem;
    }
    
    .support-text {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }
}

/* Fix per schermi molto piccoli (< 360px) */
@media (max-width: 360px) {
    .login-container {
        padding: 1rem 0.5rem;
    }
    
    .login-hero {
        display: none; /* Nascondi completamente hero su schermi piccolissimi */
    }
    
    .login-box {
        padding: 1.25rem;
        margin-top: 2rem;
    }
}

/* Fix per landscape su mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .login-container {
        padding: 1rem;
    }
    
    .login-hero {
        display: none;
    }
    
    .login-box {
        padding: 1rem;
    }
    
    .form-group {
        margin-bottom: 0.5rem;
    }
    
    .login-header {
        margin-bottom: 0.75rem;
    }
    
    .login-logo {
        display: none;
    }
}

/* Ordine mobile semplificato: Titolo → Form → Resto (solo mobile) */
@media (max-width: 600px) {
    /* Metti la box di login prima dell'hero */
    .login-container {
        flex-direction: column;
        align-items: stretch;
    }

    .login-box { order: 1; }
    .login-content { order: 2; }

    /* Dentro la box: titolo → form → avvisi → supporto */
    .login-box { display: flex; flex-direction: column; }
    .login-header { order: 1; }
    #loginForm { order: 2; }
    #alertContainer { order: 3; }
    .login-support { order: 4; }
}