/* ============================================
   RESET E IMPOSTAZIONI GLOBALI
   ============================================ */

/* Reset universale per eliminare margini e padding predefiniti del browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding e bordi nelle dimensioni totali degli elementi */
}

/* ============================================
   BODY E LAYOUT PRINCIPALE
   ============================================ */

/* Contenitore principale della pagina */
body {
    font-family: 'Inter', 'Segoe UI', sans-serif; /* Font moderno e leggibile */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente viola-blu accattivante */
    display: flex; /* Flexbox per centrare il contenuto */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Altezza minima pari all'intera finestra */
    padding: 20px; /* Spazio per dispositivi mobili */
    position: relative; /* Per posizionamento assoluto degli elementi decorativi */
    overflow: hidden; /* Nasconde gli elementi che escono dal viewport */
    transition: all 0.5s ease; /* Transizione fluida per il cambio tema */
}

/* Effetto di sfondo animato con forme geometriche */
body::before {
    content: ''; /* Elemento pseudo per decorazione */
    position: absolute; /* Posizionamento assoluto rispetto al body */
    top: -50%; /* Posiziona fuori dal viewport */
    right: -50%; /* Posiziona fuori dal viewport */
    width: 100%; /* Larghezza completa */
    height: 100%; /* Altezza completa */
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); /* Gradiente radiale trasparente */
    animation: rotate 20s linear infinite; /* Rotazione continua */
    pointer-events: none; /* Non intercetta i click */
}

/* Secondo elemento decorativo per maggiore profondità */
body::after {
    content: ''; /* Elemento pseudo per decorazione */
    position: absolute; /* Posizionamento assoluto */
    bottom: -50%; /* Posiziona fuori dal viewport */
    left: -50%; /* Posiziona fuori dal viewport */
    width: 100%; /* Larghezza completa */
    height: 100%; /* Altezza completa */
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); /* Gradiente più sottile */
    animation: rotate 30s linear infinite reverse; /* Rotazione inversa più lenta */
    pointer-events: none; /* Non intercetta i click */
}

/* ============================================
   TEMA SCURO
   ============================================ */

/* Stili specifici per il tema scuro */
body[data-theme="dark"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); /* Gradiente scuro blu-nero */
}

/* ============================================
   TITOLO PRINCIPALE
   ============================================ */

/* Stile del titolo della pagina */
h2 {
    font-size: 2.5em; /* Dimensione grande e impattante */
    font-weight: 700; /* Grassetto per maggiore enfasi */
    margin-bottom: 30px; /* Spazio sotto il titolo */
    color: #ffffff; /* Testo bianco per contrasto */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Ombra per profondità */
    letter-spacing: 1px; /* Spaziatura tra lettere per eleganza */
    animation: fadeInDown 0.8s ease-out; /* Animazione di entrata dall'alto */
    position: relative; /* Per posizionamento dello z-index */
    z-index: 10; /* Sopra gli elementi decorativi */
    text-align: center; /* allinea la scritta login al centro del form */
}

/* Effetto sottile animato sotto il titolo */
h2::after {
    content: ''; /* Linea decorativa */
    position: absolute; /* Posizionamento relativo al titolo */
    bottom: -10px; /* Sotto il testo */
    left: 50%; /* Centrato orizzontalmente */
    transform: translateX(-50%); /* Centra perfettamente */
    width: 60px; /* Larghezza della linea */
    height: 3px; /* Altezza della linea */
    background: linear-gradient(90deg, transparent, #fff, transparent); /* Gradiente bianco con sfumature */
    animation: expandWidth 2s ease-in-out infinite; /* Animazione di espansione */
}

/* ============================================
   FORM DI LOGIN
   ============================================ */

/* Contenitore del form con effetto glassmorphism */
form {
    background: rgba(255, 255, 255, 0.95); /* Bianco semi-trasparente */
    backdrop-filter: blur(20px); /* Effetto sfocatura dello sfondo (glassmorphism) */
    -webkit-backdrop-filter: blur(20px); /* Supporto Safari */
    padding: 50px 40px; /* Padding generoso per ariosità */
    border-radius: 20px; /* Angoli molto arrotondati */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), /* Ombra principale */
                0 0 0 1px rgba(255, 255, 255, 0.2); /* Bordo sottile luminoso */
    width: 100%; /* Larghezza completa del contenitore */
    max-width: 420px; /* Larghezza massima per leggibilità */
    position: relative; /* Per posizionamento z-index */
    z-index: 10; /* Sopra gli elementi decorativi */
    animation: fadeInUp 0.8s ease-out, floatAnimation 6s ease-in-out infinite; /* Animazioni di entrata e fluttuazione */
    display: flex; /* Flexbox per allineamento interno */
    flex-direction: column; /* Disposizione verticale */
    gap: 25px; /* Spazio uniforme tra gli elementi */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transizioni per interattività */
}

/* Effetto hover sul form per interattività */
form:hover {
    transform: translateY(-5px); /* Sollevamento leggero */
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4), /* Ombra più intensa */
                0 0 0 1px rgba(255, 255, 255, 0.3); /* Bordo più luminoso */
}

/* Tema scuro - Form con effetto glass scuro */
body[data-theme="dark"] form {
    background: rgba(30, 30, 45, 0.9); /* Sfondo scuro semi-trasparente */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), /* Ombra più scura */
                0 0 0 1px rgba(255, 255, 255, 0.1); /* Bordo sottile */
}

/* ============================================
   GRUPPI DI INPUT
   ============================================ */

/* Contenitore per label e input */
.input-group {
    display: flex; /* Flexbox per disposizione */
    flex-direction: column; /* Disposizione verticale */
    width: 100%; /* Larghezza completa */
    gap: 8px; /* Spazio tra label e input */
    position: relative; /* Per posizionamento del toggle password */
}

/* ============================================
   CONTENITORE PASSWORD CON TOGGLE
   ============================================ */

/* Wrapper per input password e icona toggle */
.password-wrapper {
    position: relative; /* Per posizionare l'icona */
    width: 100%; /* Larghezza completa */
}


/* Icona toggle per mostrare/nascondere password */
.password-toggle {
    position: absolute; /* Posizionamento assoluto */
    right: 15px; /* Distanza dal bordo destro */
    top: 50%; /* Centro verticale */
    transform: translateY(-50%); /* Centra perfettamente */
    cursor: pointer; /* Cursore pointer */
    width: 24px; /* Larghezza dell'icona */
    height: 24px; /* Altezza dell'icona */
    display: flex; /* Flexbox per centrare SVG */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra orizzontalmente */
    opacity: 0.5; /* Semi-trasparente */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transizione fluida */
    z-index: 2; /* Sopra l'input */
}

/* Hover sull'icona toggle */
.password-toggle:hover {
    opacity: 0.8; /* Più opaca */
    transform: translateY(-50%) scale(1.1); /* Leggero ingrandimento */
}

/* Click sull'icona toggle */
.password-toggle:active {
    transform: translateY(-50%) scale(0.95); /* Leggera compressione */
}

/* SVG dell'icona occhio */
.password-toggle svg {
    width: 100%; /* Larghezza completa */
    height: 100%; /* Altezza completa */
    stroke: #667eea; /* Colore del tratto */
    stroke-width: 2; /* Spessore del tratto */
    fill: none; /* Nessun riempimento */
    transition: stroke 0.3s ease; /* Transizione del colore */
}

/* Animazione quando si mostra la password */
.password-toggle.active svg {
    stroke: #764ba2; /* Colore diverso quando attivo */
}

/* Icona occhio aperto (visibile) */
.eye-open {
    display: block; /* Mostra di default */
}

/* Icona occhio chiuso (nascosto) */
.eye-closed {
    display: none; /* Nascosto di default */
}

/* Toggle delle icone quando attivo */
.password-toggle.active .eye-open {
    display: none; /* Nasconde occhio aperto */
}

.password-toggle.active .eye-closed {
    display: block; /* Mostra occhio chiuso */
}

/* Animazione morphing tra le icone */
.password-toggle svg path {
    transition: d 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transizione del path SVG */
}

/* Tema scuro - Toggle password */
body[data-theme="dark"] .password-toggle svg {
    stroke: #8b9dff; /* Colore blu chiaro */
}

body[data-theme="dark"] .password-toggle.active svg {
    stroke: #a5b3ff; /* Colore più chiaro quando attivo */
}

/* Input password con spazio per l'icona */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    padding-right: 50px; /* Spazio extra a destra per l'icona */
}

/* ============================================
   LABEL
   ============================================ */

/* Stile delle etichette dei campi */
label {
    color: #333; /* Grigio scuro per leggibilità */
    font-size: 0.95em; /* Dimensione leggermente ridotta */
    font-weight: 600; /* Semi-grassetto per enfasi */
    letter-spacing: 0.5px; /* Spaziatura per eleganza */
    text-transform: uppercase; /* Maiuscolo per stile moderno */
    transition: color 0.3s ease; /* Transizione fluida del colore */
}

/* Tema scuro - Label */
body[data-theme="dark"] label {
    color: #b0b0c0; /* Grigio chiaro per contrasto */
}

/* ============================================
   INPUT
   ============================================ */

/* Stile dei campi di input */
input {
    width: 100%; /* Larghezza completa */
    padding: 15px 18px; /* Padding generoso per comfort */
    border: 2px solid rgba(0, 0, 0, 0.1); /* Bordo sottile trasparente */
    border-radius: 12px; /* Angoli arrotondati */
    font-size: 1em; /* Dimensione standard */
    font-family: inherit; /* Eredita il font del body */
    background: rgba(255, 255, 255, 0.8); /* Sfondo bianco semi-trasparente */
    color: #333; /* Testo scuro */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transizione fluida con easing */
    outline: none; /* Rimuove outline predefinito */
}

/* Stile del placeholder */
input::placeholder {
    color: #999; /* Grigio chiaro */
    opacity: 1; /* Opacità completa */
    transition: opacity 0.3s ease; /* Transizione per fade out */
}

/* Nasconde placeholder quando l'input è in focus */
input:focus::placeholder {
    opacity: 0; /* Scompare gradualmente */
}

/* Input in focus - Effetto di evidenziazione */
input:focus {
    border-color: #667eea; /* Bordo colorato che richiama il gradiente */
    background: rgba(255, 255, 255, 1); /* Sfondo completamente bianco */
    transform: translateY(-2px); /* Leggero sollevamento */
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2), /* Ombra colorata */
                0 0 0 3px rgba(102, 126, 234, 0.1); /* Alone luminoso */
}

/* Tema scuro - Input */
body[data-theme="dark"] input {
    background: rgba(40, 40, 55, 0.6); /* Sfondo scuro semi-trasparente */
    color: #e0e0e0; /* Testo chiaro */
    border-color: rgba(255, 255, 255, 0.1); /* Bordo sottile chiaro */
}

/* Tema scuro - Input in focus */
body[data-theme="dark"] input:focus {
    border-color: #8b9dff; /* Bordo blu chiaro */
    background: rgba(50, 50, 70, 0.8); /* Sfondo più opaco */
    box-shadow: 0 8px 20px rgba(139, 157, 255, 0.3), /* Ombra blu */
                0 0 0 3px rgba(139, 157, 255, 0.15); /* Alone luminoso */
}

/* ============================================
   PULSANTE
   ============================================ */

/* Stile del pulsante di submit */
button {
    width: 100%; /* Larghezza completa */
    padding: 16px; /* Padding per area cliccabile ampia */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradiente che richiama lo sfondo */
    color: white; /* Testo bianco */
    border: none; /* Nessun bordo */
    border-radius: 12px; /* Angoli arrotondati */
    font-size: 1.1em; /* Dimensione leggermente maggiore */
    font-weight: 600; /* Semi-grassetto per enfasi */
    letter-spacing: 1px; /* Spaziatura tra lettere */
    text-transform: uppercase; /* Maiuscolo per impatto */
    cursor: pointer; /* Cursore pointer per indicare interattività */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transizione fluida */
    position: relative; /* Per overflow dell'effetto ripple */
    overflow: hidden; /* Nasconde l'effetto ripple fuori dai bordi */
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3); /* Ombra colorata */
}

/* Effetto ripple animato sul pulsante */
button::before {
    content: ''; /* Elemento per l'effetto */
    position: absolute; /* Posizionamento assoluto */
    top: 50%; /* Centro verticale */
    left: 50%; /* Centro orizzontale */
    width: 0; /* Inizia da dimensione zero */
    height: 0; /* Inizia da dimensione zero */
    border-radius: 50%; /* Forma circolare */
    background: rgba(255, 255, 255, 0.3); /* Bianco semi-trasparente */
    transform: translate(-50%, -50%); /* Centra perfettamente */
    transition: width 0.6s ease, height 0.6s ease; /* Transizione per espansione */
}

/* Attiva l'effetto ripple al click */
button:active::before {
    width: 300px; /* Espansione del cerchio */
    height: 300px; /* Espansione del cerchio */
}

/* Hover sul pulsante - Effetto di sollevamento */
button:hover {
    transform: translateY(-3px) scale(1.02); /* Sollevamento e ingrandimento */
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4); /* Ombra più intensa */
}

/* Effetto al click del pulsante */
button:active {
    transform: translateY(-1px) scale(0.98); /* Leggera compressione */
}

/* Tema scuro - Pulsante */
body[data-theme="dark"] button {
    background: linear-gradient(135deg, #4a5ebd 0%, #5d3a7a 100%); /* Gradiente scuro */
    box-shadow: 0 10px 25px rgba(74, 94, 189, 0.4); /* Ombra adattata */
}

/* Tema scuro - Hover sul pulsante */
body[data-theme="dark"] button:hover {
    box-shadow: 0 15px 35px rgba(74, 94, 189, 0.6); /* Ombra più intensa */
}

/* ============================================
   MESSAGGIO DI ERRORE
   ============================================ */

/* Stile del messaggio di errore */
.error-message {
    color: #ff4757; /* Rosso vibrante per allarme */
    background: rgba(255, 71, 87, 0.1); /* Sfondo rosso semi-trasparente */
    font-size: 0.95em; /* Dimensione leggermente ridotta */
    font-weight: 600; /* Semi-grassetto per enfasi */
    text-align: center; /* Testo centrato */
    padding: 12px 20px; /* Padding per evidenziare il messaggio */
    border-radius: 10px; /* Angoli arrotondati */
    border-left: 4px solid #ff4757; /* Bordo sinistro colorato per accento */
    animation: slideDown 1.2s ease-out; /* Animazione di discesa fluida */
    margin-top: -10px; /* Riduce spazio superiore */
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.2); /* Ombra colorata */
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tema scuro - Messaggio di errore */
body[data-theme="dark"] .error-message {
    color: #ff6b7a; /* Rosso più chiaro per contrasto */
    background: rgba(255, 71, 87, 0.15); /* Sfondo leggermente più opaco */
    border-left-color: #ff6b7a; /* Bordo adattato */
}

/* ============================================
   ANIMAZIONI
   ============================================ */

/* Animazione fade in dall'alto per il titolo */
@keyframes fadeInDown {
    from {
        opacity: 0; /* Inizia invisibile */
        transform: translateY(-30px); /* Parte da sopra */
    }
    to {
        opacity: 1; /* Diventa completamente visibile */
        transform: translateY(0); /* Posizione finale */
    }
}

/* Animazione fade in dal basso per il form */
@keyframes fadeInUp {
    from {
        opacity: 0; /* Inizia invisibile */
        transform: translateY(30px); /* Parte da sotto */
    }
    to {
        opacity: 1; /* Diventa completamente visibile */
        transform: translateY(0); /* Posizione finale */
    }
}

/* Animazione fade in semplice */
@keyframes fadeIn {
    from {
        opacity: 0; /* Inizia invisibile */
    }
    to {
        opacity: 1; /* Diventa completamente visibile */
    }
}

/* Animazione di rotazione per gli elementi decorativi */
@keyframes rotate {
    from {
        transform: rotate(0deg); /* Inizia senza rotazione */
    }
    to {
        transform: rotate(360deg); /* Rotazione completa */
    }
}

/* Animazione di fluttuazione per il form */
@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0); /* Posizione iniziale e finale */
    }
    50% {
        transform: translateY(-10px); /* Sollevamento a metà animazione */
    }
}

/* Animazione shake per il messaggio di errore */
@keyframes shakeError {
    0%, 100% {
        transform: translateX(0); /* Posizione iniziale e finale */
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-8px); /* Movimento a sinistra */
    }
    20%, 40%, 60%, 80% {
        transform: translateX(8px); /* Movimento a destra */
    }
}

/* Animazione di espansione della linea sotto il titolo */
@keyframes expandWidth {
    0%, 100% {
        width: 60px; /* Larghezza iniziale e finale */
        opacity: 1; /* Opacità completa */
    }
    50% {
        width: 100px; /* Espansione a metà animazione */
        opacity: 0.7; /* Leggera riduzione opacità */
    }
}

/* Animazione pulse per l'icona password */
@keyframes pulseIcon {
    0% {
        transform: translateY(-50%) scale(1); /* Scala normale */
    }
    50% {
        transform: translateY(-50%) scale(1.2); /* Ingrandimento */
    }
    100% {
        transform: translateY(-50%) scale(1); /* Ritorno alla scala normale */
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* ============================================
   FIX PER MOBILE - ALTEZZA VIEWPORT CORRETTA
   ============================================ */
@media screen and (max-width: 768px) {
    html, body {
        height: 100%;
        min-height: 100vh;
        overflow: auto;
    }

    /* Quando la tastiera si apre, assicura che il form si adatti */
    body {
        display: block;
        padding-top: 10vh;
        padding-bottom: 10vh;
        transition: padding 0.3s ease;
    }

    /* Corregge eventuale “sollevamento” del form dopo chiusura tastiera */
    input, textarea, select {
        font-size: 16px; /* Evita zoom automatico su iOS */
    }

    /* Quando l’input non è più in focus, ripristina layout */
    input:focus, textarea:focus, select:focus {
        scroll-margin-top: 15vh;
    }
}

/* Adattamento per schermi piccoli (mobile) */
@media (max-width: 480px) {
    h2 {
        font-size: 2em; /* Riduce dimensione titolo */
    }
    
    form {
        padding: 40px 30px; /* Riduce padding del form */
    }
    
    button {
        font-size: 1em; /* Riduce dimensione testo pulsante */
    }
    
    .password-toggle {
        right: 12px; /* Riduce distanza dal bordo */
        width: 20px; /* Riduce dimensione icona */
        height: 20px; /* Riduce dimensione icona */
    }
    
    .password-wrapper input[type="password"],
    .password-wrapper input[type="text"] {
        padding-right: 45px; /* Meno spazio per l'icona */
    }
}

/* Supporto per motion ridotto (accessibilità) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important; /* Riduce drasticamente le animazioni */
        animation-iteration-count: 1 !important; /* Una sola iterazione */
        transition-duration: 0.01ms !important; /* Transizioni istantanee */
    }
}