/*-------------------------------------------------------------------*\
    Double authentification : login-config-totp.ftl, login-otp.ftl,
    delete-credential.ftl et mfa-choice.ftl
\*-------------------------------------------------------------------*/

.otp-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-pop-medium);
}

/*
 * Formulaires purement techniques, remplis et soumis par les scripts WebAuthn de Keycloak.
 * Comme ils n'affichent rien on les masques
 */
.otp-hidden-form {
    display: none;
}

.otp-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacer-pop-small);

    .otp-header-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 50%;
        background-color: var(--yellow);
        color: var(--black);
    }
}

.otp-title {
    margin: 0 0 .4rem;
    font-size: var(--font-size-large);
    font-weight: 800;
    line-height: 1.2;
}

.otp-intro {
    margin: 0;
    color: var(--transparent-black);
    font-size: var(--font-size-base-mobile);
    line-height: 1.5;
}

.otp-notice {
    margin: 0;
    padding: var(--spacer-pop-tiny) var(--spacer-pop-small);
    border-radius: var(--border-radius);
    background-color: var(--gray-025);
    font-size: var(--font-size-base-mobile);

    &.error {
        color: var(--red);
        background-color: var(--transparent-red);
    }

    &.warning {
        color: var(--orange);
        background-color: var(--transparent-orange);
    }

    &.success {
        color: var(--green);
        background-color: var(--transparent-green);
    }
}

.otp-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-pop-small);
    margin: 0;
    padding: 0;
    list-style: none;
}

.otp-step {
    display: flex;
    gap: var(--spacer-pop-small);
    padding: var(--spacer-pop-small);
    border: 1px solid var(--transparent-gray);
    border-radius: var(--border-radius-large);
    background-color: var(--white);

    .otp-step-number {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
        background-color: var(--black);
        color: var(--white);
        font-size: var(--font-size-base-mobile);
        font-weight: 700;
    }

    .otp-step-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacer-pop-tiny);
        min-width: 0;
    }
}

.otp-step-title {
    margin: .2rem 0 0;
    padding: 0;
    font-size: var(--font-size-base-mobile);
    font-weight: 700;
}

.otp-help {
    margin: 0;
    color: var(--gray-600);
    font-size: var(--font-size-small-mobile);
    line-height: 1.5;
}

.otp-apps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-pop-tiny);
    margin: 0;
    padding: 0;
    list-style: none;

    .otp-app {
        padding: .4rem var(--spacer-pop-small);
        border-radius: var(--radius-rad-xl);
        background-color: var(--light-gray);
        font-size: var(--font-size-small-mobile);
        font-weight: 600;
    }
}

.otp-qr {
    padding: var(--spacer-pop-tiny);
    border: 1px solid var(--transparent-gray);
    border-radius: var(--border-radius);
    background-color: var(--white);
    line-height: 0;

    img {
        width: 18rem;
        height: 18rem;
        image-rendering: pixelated;
    }
}

.otp-secret {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacer-pop-tiny);

    .otp-secret-key {
        padding: var(--spacer-pop-tiny) var(--spacer-pop-small);
        border-radius: var(--border-radius);
        background-color: var(--light-gray);
        font-family: var(--font-family-monospace);
        font-size: var(--font-size-base-mobile);
        letter-spacing: .08em;
        overflow-wrap: anywhere;
    }
}

.otp-settings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-pop-tiny);
    width: 100%;
    margin: 0;

    div {
        flex: 1 1 auto;
        padding: .6rem 1rem;
        border-radius: var(--border-radius-small);
        background-color: var(--gray-025);
    }

    dt {
        color: var(--gray-600);
        font-size: var(--font-size-small-mobile);
    }

    dd {
        margin: 0;
        font-size: var(--font-size-base-mobile);
        font-weight: 700;
    }
}

.form-input .input.otp-code {
    font-size: var(--font-size-large);
    font-weight: 700;
    letter-spacing: .5em;
    font-variant-numeric: tabular-nums;
}

.otp-error {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .4rem;
    color: var(--red);
    font-size: var(--font-size-small-mobile);
    font-weight: 600;
}

.otp-devices {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-pop-tiny);
    margin: 0;
    padding: 0;
    border: 0;

    legend {
        margin-bottom: var(--spacer-pop-tiny);
    }

    .otp-device {
        display: flex;
        align-items: center;
        gap: var(--spacer-pop-small);
        padding: var(--spacer-pop-small);
        border: 1px solid var(--transparent-gray);
        border-radius: var(--border-radius);
        background-color: var(--white);
        cursor: pointer;
        transition: border-color .2s, background-color .2s;

        &:has(.otp-device-radio:checked) {
            border-color: var(--black);
            background-color: var(--gray-025);
            box-shadow: inset 0 0 0 1px var(--black);
        }
    }

    .otp-device-radio {
        flex-shrink: 0;
        width: 1.8rem;
        height: 1.8rem;
        margin: 0;
        border-radius: 50%;
        appearance: none;
        box-shadow: inset 0 0 0 2px var(--gray-600);

        &:checked {
            background-color: var(--black);
            box-shadow: inset 0 0 0 2px var(--black), inset 0 0 0 4px var(--cyan);
        }

        &:focus-visible {
            outline: 2px solid var(--black);
            outline-offset: 2px;
        }
    }

    .otp-device-name {
        font-size: var(--font-size-base-mobile);
        font-weight: 600;
    }
}

.otp-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer-pop-tiny);

    .submit {
        width: 100%;
    }
}

.otp-summary {
    display: flex;
    align-items: center;
    gap: var(--spacer-pop-small);
    padding: var(--spacer-pop-small);
    border: 1px solid var(--transparent-gray);
    border-radius: var(--border-radius-large);
    background-color: var(--white);

    .otp-summary-icon {
        display: flex;
        flex-shrink: 0;
        color: var(--black);
    }

    .otp-summary-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .otp-summary-label {
        color: var(--gray-600);
        font-size: var(--font-size-small-mobile);
    }

    .otp-summary-name {
        font-size: var(--font-size-base-mobile);
        font-weight: 600;
        overflow-wrap: anywhere;
    }
}

.otp-consequences {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-pop-tiny);
    margin: 0;
    padding-left: 1.8rem;
    color: var(--transparent-black);
    font-size: var(--font-size-base-mobile);
    line-height: 1.5;
}

.mfa-choice {
    display: flex;
    align-items: center;
    gap: var(--spacer-pop-small);
    width: 100%;
    padding: var(--spacer-pop-small);
    border: 1px solid var(--transparent-gray);
    border-radius: var(--border-radius-large);
    background-color: var(--white);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;

    &:hover:not([disabled]),
    &:focus-visible:not([disabled]) {
        border-color: var(--black);
        background-color: var(--gray-025);
    }

    &[disabled] {
        cursor: not-allowed;
    }

    .mfa-choice-icon {
        display: flex;
        flex-shrink: 0;
        color: var(--black);
    }

    .mfa-choice-body {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        min-width: 0;
    }

    .mfa-choice-name {
        font-size: var(--font-size-base-mobile);
        font-weight: 600;
    }
}

.otp-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacer-pop-tiny);
    padding-top: var(--spacer-pop-small);
    border-top: 1px solid var(--transparent-gray);

    .otp-link {
        color: var(--black);
        font-weight: 600;
        text-decoration: underline;
    }

}

/* Bascule de méthode, juste sous l'action principale : un envoi de formulaire, présenté en lien */
.otp-try-another-way {
    display: flex;
    justify-content: center;
    margin-top: var(--spacer-pop-tiny);

    button {
        padding: 0;
        border: 0;
        background: none;
        color: var(--black);
        font-size: var(--font-size-small-mobile);
        font-weight: 600;
        line-height: 1.5;
        text-decoration: underline;
        cursor: pointer;
    }
}