/* ============================================================================
 * website/css/mfa-modal.css
 * ============================================================================
 * The ONE look for every two-factor modal: setup (js/mfa-enrollment-modal.js)
 * and sign-in challenge (js/mfa-challenge-modal.js), on every page that loads
 * them (homepage, faculty, faculty admin, superadmin, scenario admin, LTI
 * pages).
 *
 * Both scripts inject <div class="modal-overlay"><div class="modal-content
 * mfa-enrollment-modal|mfa-challenge-modal"> and style their contents with
 * inline var(--brand-primary / --text-muted / ...) references. Until this file
 * existed, each page's own stylesheet (styles.css, faculty.css, admin-base.css)
 * carried a separate copy of the modal rules and supplied its own values for
 * those variables, so the same modal looked different on the homepage than on
 * the dashboards, and the buttons had no style at all on the dashboards.
 *
 * This file is self-contained on purpose: it pins the variables the modal's
 * inline styles read, the fonts, and the element rules that page-level CSS
 * would otherwise leak in (the homepage's global input, heading and focus
 * rules). Do not add MFA modal rules to a page stylesheet; change them here.
 * `.modal-overlay` is used by these two modals only.
 * ========================================================================= */

.modal-overlay {
    --brand-primary: #0f172a;
    --brand-accent: #2563eb;
    --text-main: #1e293b;
    --text-primary: #1e293b;
    --text-muted: #556070;
    --border-subtle: #767f8c;

    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: var(--text-main);
    font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

.modal-overlay > .mfa-enrollment-modal,
.modal-overlay > .mfa-challenge-modal {
    position: relative;
    box-sizing: border-box;
    width: min(500px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    animation: nk-slideup 0.3s ease;
}

@keyframes nk-slideup {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
    .modal-overlay > .mfa-enrollment-modal,
    .modal-overlay > .mfa-challenge-modal { padding: 1.5rem; }
}

/* Type */
.modal-overlay h2,
.modal-overlay h3 {
    font-family: 'Space Grotesk', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    text-wrap: wrap;
}
.modal-overlay h2 { font-size: 1.5rem; line-height: 1.25; margin-top: 0; }
.modal-overlay h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 600; }
.modal-overlay p { font-size: 1rem; }
.modal-overlay label { font-size: 1rem; }

/* Inputs: the code fields set their own mono font inline; the phone field and
   anything else gets the body font. Keeps the homepage's global input rules
   (green focus ring, mono font, 3px radius) out of the modal. */
.modal-overlay input {
    box-sizing: border-box;
    font-family: inherit;
    color: var(--text-main);
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}
.modal-overlay input::placeholder { color: #8a94a3; }
.modal-overlay input:focus,
.modal-overlay input:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
    border-color: var(--border-subtle);
    box-shadow: none;
}
/* The phone number input sits in a bordered wrapper and hides its own outline
   inline, so the wrapper carries the focus ring. */
.modal-overlay div:has(> input[type="tel"]):focus-within {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

/* Method choice cards (SMS / authenticator app) and the Back link */
.modal-overlay .mfa-method-button {
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.modal-overlay .mfa-method-button:hover {
    border-color: var(--brand-accent);
    background: rgba(37, 99, 235, 0.05);
}
.modal-overlay .mfa-back-button {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0;
    margin-bottom: 1rem;
    background: none;
    border: 0;
    cursor: pointer;
}
.modal-overlay .mfa-back-button:hover { text-decoration: underline; }

/* Action buttons: Send Code, Verify & Complete, Verify & Finish, Continue to
   Dashboard, Try Again, and the disabled lockout button. */
.modal-overlay .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-family: 'Space Grotesk', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.modal-overlay .btn-submit:hover:not(:disabled) {
    background: var(--text-main);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.3);
}
.modal-overlay .btn-submit:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}
.modal-overlay .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Recovery codes list (shown after TOTP setup) */
.modal-overlay .mfa-recovery-codes-display { padding: 1.4rem; }
.modal-overlay .mfa-recovery-codes-display > div[style*="font-family"] {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-main);
    user-select: all;
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay > .mfa-enrollment-modal,
    .modal-overlay > .mfa-challenge-modal { animation: none; }
    .modal-overlay .btn-submit,
    .modal-overlay .mfa-method-button { transition: none; }
    .modal-overlay .btn-submit:hover:not(:disabled) { transform: none; }
}