/*
 * Accesso backoffice.
 * Layer condiviso per login, recupero password, reset password e accesso negato.
 */

.pagina-accesso {
    --accesso-bordo: var(--bo-border, #dde3ec);
    --accesso-bordo-forte: var(--bo-border-strong, #c8d2df);
    --accesso-superficie: var(--bo-bg-elevated, #ffffff);
    --accesso-superficie-tenue: var(--bo-bg-subtle, #f5f7fa);
    --accesso-testo: var(--bo-text, #0e1726);
    --accesso-testo-tenue: var(--bo-text-soft, #3c485f);
    --accesso-testo-muto: var(--bo-text-muted, #6d7890);
    --accesso-primario: var(--bo-navy-800, #0a2f6c);
    --accesso-primario-hover: var(--bo-navy-700, #143a82);
    --accesso-accento: var(--bo-warning-500, #ffc107);
    --accesso-successo: var(--bo-success-600, #0d8a4a);
    --accesso-pericolo: var(--bo-danger-600, #c1322a);
    --accesso-raggio: var(--bo-radius-md, 8px);
    --accesso-ombra: var(--bo-shadow-lg, 0 20px 46px rgba(14, 23, 38, 0.16));
    position: relative;
    display: grid;
    min-height: 100vh;
    margin: 0;
    padding: 32px 16px;
    place-items: center;
    overflow-x: hidden;
    color: var(--accesso-testo);
    background: #eef2f7;
    font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pagina-accesso::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 38vh;
    background: var(--accesso-primario);
    pointer-events: none;
}

.pagina-accesso *,
.pagina-accesso *::before,
.pagina-accesso *::after,
.pagina-accesso-negato *,
.pagina-accesso-negato *::before,
.pagina-accesso-negato *::after {
    letter-spacing: 0;
}

.accesso-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    animation: accesso-card-ingresso 0.42s ease-out both;
}

.accesso-card {
    padding: 30px 28px 28px;
    border: 1px solid var(--accesso-bordo);
    border-radius: var(--accesso-raggio);
    background: var(--accesso-superficie);
    box-shadow: var(--accesso-ombra);
}

.accesso-marchio {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.accesso-marchio img {
    width: min(200px, 72vw);
    height: auto;
}

.accesso-intestazione {
    margin-bottom: 20px;
    text-align: center;
}

.accesso-titolo {
    margin: 0 0 7px;
    color: var(--accesso-primario);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.accesso-sottotitolo {
    margin: 0;
    color: var(--accesso-testo-tenue);
    font-size: 0.96rem;
    line-height: 1.45;
}

.accesso-form .form-group {
    margin-bottom: 18px;
}

.accesso-form label {
    color: var(--accesso-testo-tenue);
    font-size: 0.9rem;
    font-weight: 700;
}

.accesso-form .form-control {
    min-height: 48px;
    border: 1px solid var(--accesso-bordo-forte);
    border-radius: var(--accesso-raggio);
    background: var(--accesso-superficie);
    color: var(--accesso-testo);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.accesso-form .form-control:focus {
    border-color: var(--accesso-primario);
    box-shadow: 0 0 0 3px rgba(10, 47, 108, 0.14);
}

.accesso-form .input-group {
    border-radius: var(--accesso-raggio);
}

.accesso-form .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.accesso-form .input-group .btn {
    min-width: 48px;
    border-color: var(--accesso-bordo-forte);
    border-left: 0;
    border-radius: 0 var(--accesso-raggio) var(--accesso-raggio) 0;
    color: var(--accesso-primario);
    background: var(--accesso-superficie-tenue);
}

.accesso-form .input-group .btn:hover,
.accesso-form .input-group .btn:focus {
    color: #ffffff;
    background: var(--accesso-primario);
}

.accesso-azioni {
    margin-top: 8px;
}

.accesso-azioni .btn-primary,
.accesso-card .btn-primary {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: var(--accesso-raggio);
    color: #10203f;
    background: var(--accesso-accento);
    box-shadow: 0 12px 22px rgba(255, 193, 7, 0.22);
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.accesso-azioni .btn-primary:hover,
.accesso-card .btn-primary:hover,
.accesso-azioni .btn-primary:focus,
.accesso-card .btn-primary:focus {
    color: #10203f;
    background: #ffcf38;
    box-shadow: 0 14px 26px rgba(255, 193, 7, 0.28);
    transform: translateY(-1px);
}

.accesso-aiuto {
    margin-top: 18px;
    text-align: center;
}

.accesso-aiuto a {
    color: var(--accesso-primario);
    font-weight: 700;
    text-decoration: none;
}

.accesso-aiuto a:hover,
.accesso-aiuto a:focus {
    color: var(--accesso-primario-hover);
    text-decoration: underline;
}

.accesso-alert,
.accesso-alert-successo,
.pagina-accesso .alert,
.accesso-card .alert-success {
    position: relative;
    left: auto;
    right: auto;
    width: 100%;
    border-radius: var(--accesso-raggio);
    margin-bottom: 16px;
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: center;
}

.accesso-alert {
    border: 1px solid rgba(193, 50, 42, 0.35);
    color: var(--accesso-pericolo);
    background: rgba(193, 50, 42, 0.08);
}

.accesso-alert-successo,
.accesso-card .alert-success {
    border: 1px solid rgba(13, 138, 74, 0.3);
    color: var(--accesso-successo);
    background: rgba(13, 138, 74, 0.08);
}

.pagina-accesso-negato {
    max-width: 920px;
}

.accesso-negato-card {
    border: 1px solid var(--bo-border, #dde3ec);
    border-radius: var(--bo-radius-md, 8px);
    background: var(--bo-bg-elevated, #ffffff);
    box-shadow: var(--bo-shadow-sm, 0 1px 2px rgba(14, 23, 38, 0.04));
}

.accesso-negato-card .card-body {
    padding: clamp(28px, 5vw, 48px);
}

.accesso-negato-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: var(--bo-radius-md, 8px);
    color: var(--bo-danger-600, #c1322a);
    background: rgba(193, 50, 42, 0.08);
    font-size: 24px;
}

.accesso-negato-card h1 {
    margin-bottom: 10px;
    color: var(--bo-text, #0e1726);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
}

.accesso-negato-card .lead {
    color: var(--bo-text-soft, #3c485f);
}

.accesso-negato-card p:not(.lead) {
    color: var(--bo-text-muted, #6d7890);
}

@keyframes accesso-card-ingresso {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .pagina-accesso {
        padding: 22px 14px;
    }

    .accesso-card {
        padding: 26px 20px 24px;
    }

    .accesso-titolo {
        font-size: 1.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accesso-shell {
        animation: none;
    }

    .accesso-azioni .btn-primary:hover,
    .accesso-card .btn-primary:hover,
    .accesso-azioni .btn-primary:focus,
    .accesso-card .btn-primary:focus {
        transform: none;
    }
}