/* =============== PAGINA DI LOGIN =============== 
   Stili per l'interfaccia di autenticazione utente */

/* Stile base per il corpo della pagina */
body {
  font-family: Arial, sans-serif; /* Font semplice e leggibile */
  background-color: #f4f4f4; /* Sfondo grigio chiaro per contrasto */
  display: flex; /* Abilita Flexbox per centratura */
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  height: 100vh; /* Altezza pari al 100% della viewport */
}
/* =============== ICONA LOGIN =============== */
.login-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: block;
    /* Rimosso border-radius per icona quadrata */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Aggiunte transizioni per interazioni */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Effetto hover sottile */
.login-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Contenitore principale del form di login */
.login-container {
  background: white; /* Sfondo bianco per il form */
  padding: 20px; /* Spaziatura interna generosa */
  border-radius: 10px; /* Bordi arrotondati per un look moderno */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombra leggera per effetto 3D */
  text-align: center; /* Allineamento centrale del contenuto */
}

/* Stile per tutti gli input (campi di testo) */
input {
  width: 100%; /* Occupa tutta la larghezza disponibile */
  padding: 10px; /* Spaziatura interna comoda */
  margin: 10px 0; /* Margine sopra/sotto per separazione */
  border: 1px solid #ccc; /* Bordo grigio chiaro */
  border-radius: 5px; /* Bordi leggermente arrotondati */
}

/* Stile base per tutti i pulsanti */
button {
  width: 100%; /* Larghezza piena come gli input */
  padding: 10px; /* Stessa spaziatura degli input */
  border: none; /* Rimuove il bordo predefinito */
  color: white; /* Testo bianco per contrasto */
  cursor: pointer; /* Cursore a manina per indicare cliccabilità */
  border-radius: 5px; /* Arrotondamento coerente con gli input */
}

/* Pulsante di login (tipo submit) */
button[type="submit"] {
  background-color: green; /* Verde positivo per azione principale */
}

/* Effetto hover per il pulsante di login */
button[type="submit"]:hover {
  background-color: darkgreen; /* Verde più scuro al passaggio del mouse */
}

/* Pulsante secondario (es. logout, annulla) */
button[type="button"] {
  background-color: red; /* Rosso per azioni distruttive/secondarie */
}

/* Effetto hover per il pulsante secondario */
button[type="button"]:hover {
  background-color: darkred; /* Rosso più intenso al passaggio del mouse */
}

/* Messaggio di stato del login */
#loginMessage {
  margin-top: 10px; /* Spazio dal contenuto superiore */
  font-weight: bold; /* Testo in grassetto per evidenziarlo */
}

/* Messaggio di countdown (es. per reindirizzamento) */
#countdownMessage {
  margin-top: 5px; /* Spazio ridotto rispetto al messaggio principale */
  font-size: 0.9em; /* Dimensione leggermente ridotta */
}

/* Spinner per pulsante di caricamento */
.button-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
        .login-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            display: block;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        /* Mobile ottimizzazione */
        @media (max-width: 480px) {
            .login-icon {
                width: 60px;
                height: 60px;
                margin-bottom: 15px;
            }
            
            /* Riduci padding su mobile */
            .login-container {
                padding: 15px;
                width: 90%;
            }
        }

        /* =============== PULSANTE ACCEDI =============== */
        button[type="submit"] {
          background-color: green;
          transition: background-color 0.2s ease, transform 0.1s ease; /* Aggiungi transform alla transizione */
        }

        /* Effetto click controllato */
        button[type="submit"]:active {
          transform: scale(0.98); /* Leggera riduzione (2%) invece di espansione */
          background-color: #006400; /* Verde più scuro al click */
        }
        button:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
}

button:disabled:hover {
    background-color: #cccccc !important;
}

        /* Stile specifico per il link di ritorno al sito pubblico */
        .return-to-site-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: #ff0404ff;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s;
            padding: 8px 0;
        }
        .return-to-site-link:hover {
            color: #574949ff;
            text-decoration: underline;
        }
        .return-to-site-icon {
            margin-right: 5px;
        }