/* login.css */

/* Reset di base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9fafb; /* Colore di sfondo chiaro */
    color: #374151; /* Testo scuro per contrasto */
    display: flex;
    justify-content: center; /* Centratura orizzontale */
    align-items: center; /* Centratura verticale */
    height: 100vh; /* Altezza del viewport */
    overflow-x: hidden; /* Evita lo scroll orizzontale */
}

.login-container {
    background-color: #ffffff; /* Sfondo bianco per il contenitore */
    padding: 30px; /* Spaziatura interna */
    border-radius: 12px; /* Bordo arrotondato */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Ombra leggera */
    width: 100%; /* Larghezza dinamica */
    max-width: 400px; /* Larghezza massima */
    text-align: center; /* Allineamento centrato */
    overflow: hidden; /* Evita overflow interno */
}

h2 {
    font-size: 1.8rem; /* Titolo grande ma non troppo */
    color: #1e3a8a; /* Blu scuro per il titolo */
    margin-bottom: 20px; /* Spazio sotto il titolo */
}

label {
    display: block; /* Ogni label occupa una riga */
    margin-top: 15px; /* Spazio sopra ogni label */
    color: #4b5563; /* Grigio scuro per le label */
    font-size: 1rem; /* Dimensione del testo delle label */
}

input[type="text"],
input[type="password"] {
    width: 100%; /* Larghezza piena */
    padding: 12px; /* Padding interno */
    margin-top: 5px; /* Spazio sopra gli input */
    border: 1px solid #e5e7eb; /* Bordo leggero */
    border-radius: 8px; /* Bordo arrotondato */
    font-size: 1rem; /* Dimensione del testo degli input */
    transition: border-color 0.3s ease; /* Effetto hover */
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: #3b82f6; /* Cambia colore del bordo al focus */
    outline: none; /* Rimuove l'outline predefinito */
}

button {
    margin-top: 20px; /* Spazio sopra il pulsante */
    padding: 12px 20px; /* Padding interno del pulsante */
    background-color: #3b82f6; /* Blu per il pulsante */
    color: #ffffff; /* Testo bianco */
    border: none; /* Nessun bordo */
    border-radius: 8px; /* Bordo arrotondato */
    cursor: pointer; /* Cursore a mano */
    font-size: 1rem; /* Dimensione del testo del pulsante */
    transition: background-color 0.3s ease; /* Effetto hover */
    width: 100%; /* Larghezza piena */
}

button:hover {
    background-color: #2563eb; /* Blu pił scuro al passaggio del mouse */
}

.error {
    color: #b91c1c; /* Rosso per i messaggi di errore */
    margin-bottom: 15px; /* Spazio sotto il messaggio di errore */
}

/* Media Queries per dispositivi mobili */
@media (max-width: 480px) {
    h2 {
        font-size: 1.6rem; /* Riduce il titolo su schermi piccoli */
    }

    .login-container {
        padding: 20px; /* Riduce il padding su schermi piccoli */
    }

    input[type="text"],
    input[type="password"] {
        font-size: 0.9rem; /* Riduce la dimensione del testo degli input */
    }

    button {
        font-size: 0.9rem; /* Riduce la dimensione del testo del pulsante */
    }
}