/* ============================================================
   mfa-modal.css — Shared TOTP/OTP modal styles
   Styles the markup injected into #totp-view by /Mfa/TotpStep
   (_TotpSetup.cshtml). Used on any page that can trigger MFA
   setup/verification: Logon, Settings (Reset MFA tab), etc.
   ============================================================ */

#totp-view {
    display: none;
}

    /* Overlay layout — only applied when visible (JS sets display) */
    #totp-view .totp-overlay {
        position: fixed !important;
        inset: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0,0,0,0.35) !important;
        z-index: 999999 !important;
        padding: 1rem !important;
    }

    /* JS controls display — we just set the initial states */
    #totp-view #totp-container {
        display: flex;
    }

    #totp-view #otp-container {
        display: none;
    }

    #totp-view .totp-card {
        position: relative !important;
        background: #fff !important;
        border-radius: 1rem !important;
        padding: 2rem !important;
        width: 100% !important;
        max-width: 400px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.18) !important;
        text-align: center !important;
        font-family: inherit !important;
    }

    #totp-view .mfaTitle {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
        color: #111 !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }

    #totp-view p {
        font-size: 0.875rem !important;
        color: #666 !important;
        text-transform: none !important;
    }

    #totp-view .verification-code-container {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin: 1.25rem 0 0 !important;
    }

    #totp-view #totp-result,
    #totp-view #otp-error-message {
        color: var(--destructive) !important;
        text-align: center !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin: 1.25rem 0 !important;
        padding: 0 !important;
    }

    #totp-view .mt-3 {
        margin-top: 1.25rem !important;
    }

    #totp-view .code-input {
        width: 2.75rem !important;
        height: 3.25rem !important;
        font-size: 1.375rem !important;
        text-align: center !important;
        border: 2px solid #ddd !important;
        border-radius: 0.625rem !important;
        background: #fff !important;
        color: #111 !important;
        outline: none !important;
        padding: 0 !important;
    }

        #totp-view .code-input:focus {
            border-color: var(--primary) !important;
        }

    #totp-view select {
        width: 100% !important;
        padding: 0.5rem 0.75rem !important;
        border: 1px solid #ddd !important;
        border-radius: 0.5rem !important;
        font-size: 0.875rem !important;
        background: #fff !important;
        color: #111 !important;
        height: auto !important;
        text-transform: none !important;
        appearance: auto !important;
    }

    #totp-view button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        margin-top: 0.75rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        border-radius: 0.75rem !important;
        cursor: pointer !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        line-height: 1.5 !important;
        border: none !important;
        box-shadow: none !important;
        transition: opacity 0.15s !important;
    }

    #totp-view #verifyCodeBtn,
    #totp-view .btn-primary {
        background: var(--primary) !important;
        color: #fff !important;
    }

        #totp-view #verifyCodeBtn:disabled {
            opacity: 0.4 !important;
            cursor: not-allowed !important;
        }

    #totp-view .btn-outline-secondary {
        background: transparent !important;
        color: #111 !important;
        border: 1px solid #ddd !important;
    }

    #totp-view .btn-close {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        padding: 0.25rem !important;
        background: transparent !important;
        font-size: 1.5rem !important;
        color: #666 !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

        #totp-view .btn-close::before {
            content: '×' !important;
        }

    #totp-view hr {
        border: none !important;
        border-top: 1px solid #eee !important;
        margin: 1rem 0 !important;
    }

    #totp-view #logo img {
        height: 3rem !important;
        width: auto !important;
        margin-bottom: 1rem !important;
    }

    /* JS controls all container visibility — no CSS overrides */
    #totp-view #totp-container,
    #totp-view #otp-container {
        position: fixed !important;
        inset: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0,0,0,0.35) !important;
        z-index: 999999 !important;
        padding: 1rem !important;
    }

    /* QR code centering fix (targets markup injected by /Mfa/TotpStep) */
    #totp-view .qr-code-wrapper,
    #totp-view .d-flex.flex-column.align-items-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1rem;
    }

    #totp-view .qr-img {
        display: block;
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }

    #totp-view .manual-code {
        font-family: monospace;
        font-size: 0.8125rem;
        color: #444;
        text-align: center;
        word-break: break-all;
        margin-top: 0.25rem;
    }

.rc-anchor-error-msg-container,
.rc-anchor-error-message {
    display: none !important;
}

.label-red-small {
    color: red;
    font-size: smaller;
    font-weight: bold;
}

.resend-otp-link {
    color: blue;
    font-size: 18px;
}