.login-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--white);
}

.login-banner {
    height: 25vh;
    background-color: var(--dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.login-logo {
    font-size: 4rem;
    color: var(--white);
    font-weight: 800;
    letter-spacing: 4px;
}

.login-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form .login-title,
.login-form .login-subtitle {
    text-align: center;
}

.login-title {
    color: var(--dark-blue);
    font-weight: 700;
    margin-bottom: 0;
}

.login-subtitle {
    color: var(--black);
    margin-top: 0;
    margin-bottom: 20px;
}

.login-footer {
    font-size: 0.8rem;
    color: var(--black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
}

.login-footer a {
    color: var(--black);
    text-decoration: none;
    margin-left: 10px;
}

.login-footer a:hover {
    text-decoration: underline;
}

.login-label {
    color: var(--dark-blue);
    font-weight: 700;
}

.login-button:hover {
    background-color: var(--dark-blue);
    color: var(--white);
}
.login-button{
    font-weight: 900;
    background-color: var(--dark-blue);
    color: var(--white);
    border-radius: 30px;
}

/* Personalizzazione dello switch (usa Bootstrap form-switch come base) */
/* Uso flex sul container per allineare verticalmente label e input */
.form-check.form-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* spazio tra switch e label */
    /* se vuoi che lo switch occupi tutta la larghezza del form:
       display:flex; justify-content:flex-start; width:100%; */
}

.form-check.form-switch .form-check-input {
    width: 2.4rem;
    height: 1.35rem;
    margin-top: 0; /* rimosso offset che causava disallineamento */
    cursor: pointer;
    transition: background-color .2s, border-color .2s, box-shadow .15s, transform .15s;
    border-radius: 1.35rem;
    /* assicura che il controllo sia centrato verticalmente all'interno del container */
    align-self: center;
}

    .form-check.form-switch .form-check-input:checked {
        background-color: var(--teal-aqua);
        border-color: var(--teal-aqua);
    }

.form-check.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(11,45,103,0.14);
}

/* Piccola regolazione dell'etichetta vicino allo switch */
.form-check.form-switch .form-check-label {
    margin-left: 0; /* lo spazio è gestito dal gap sul container */
    vertical-align: middle;
    cursor: pointer;
    align-self: center;
    line-height: 1; /* evita disallineamenti dovuti al line-height */
}

.form-control:focus {
    border-color: var(--dark-blue) !important;
    box-shadow: 0 0 6px rgba(37, 140, 251, 0.4), 0 0 12px rgba(37, 140, 251, 0.2) !important;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}