/* ── Admin 2FA ──────────────────────────────────────────────────────────
 *
 * Two surfaces, one feature:
 *   .sec2fa     — Settings → Security panel. Lives inside `.main`, so every
 *                 var(--color-*) here resolves to the LIGHT content palette.
 *   .login-totp — step 2 of the sign-in flow. Lives at body level inside
 *                 .login-card, where the same token names resolve DARK
 *                 (lesson: body-level surfaces inherit the :root dark theme).
 *
 * Both consume tokens only — no hardcoded colours — so a white-label retheme
 * carries through. admin.css is already past the 1500-LOC Envato cap, hence
 * this dedicated file.
 */

/* ───────────────────────── Settings → Security ─────────────────────────── */

.sec2fa__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-base);
    margin-top: var(--space-base);
}

.sec2fa__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.sec2fa__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-base);
}

.sec2fa__card-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
}

.sec2fa__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-base);
}

.sec2fa__hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Username row */
.sec2fa__kv {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin: 0;
}
.sec2fa__kv dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.sec2fa__kv dd { margin: 0; }
.sec2fa__username {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
}

.sec2fa__form { margin: 0; }
.sec2fa__form .field { margin: 0; }

.sec2fa__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-base);
}
/* `.btn { display: inline-flex }` is an author rule and beats the UA
 * `[hidden] { display: none }`, so a hidden button would still paint. */
.sec2fa .btn[hidden] { display: none; }
.sec2fa .badge[hidden] { display: none; }

/* Enrolment — QR + manual key */
.sec2fa__steps {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.sec2fa__steps li + li { margin-top: 4px; }

.sec2fa__enroll {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-base);
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
}

/* The QR must stay on a white plate whatever the surrounding theme —
 * scanners need the quiet zone and the light/dark contrast intact. */
.sec2fa__qr {
    display: block;
    width: 180px;
    height: 180px;
    background: #FFFFFF;
    border-radius: var(--radius-sm);
    padding: 6px;
    box-shadow: var(--shadow-sm);
}

.sec2fa__manual {
    flex: 1 1 220px;
    min-width: 0;
}
.sec2fa__manual-label {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.sec2fa__secret-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.sec2fa__secret {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    /* A base32 secret has no spaces — let it wrap instead of overflowing. */
    overflow-wrap: anywhere;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

.sec2fa__code-input {
    max-width: 180px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-lg);
    letter-spacing: 0.35em;
    text-align: center;
}

/* Recovery codes — the one-time reveal */
.sec2fa__warning {
    display: block;
    padding: var(--space-base);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.sec2fa__codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-sm);
}
.sec2fa__codes code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--color-text);
    background: var(--surface-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: 10px 6px;
    /* Tabular figures keep the ten cells optically aligned. */
    font-variant-numeric: tabular-nums;
}

.sec2fa__ack {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    /* 44px touch target for the acknowledgement that unlocks Done. */
    min-height: 44px;
    color: var(--color-text);
    font-size: var(--text-sm);
    cursor: pointer;
}
.sec2fa__ack-box {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Disable / regenerate blocks */
.sec2fa__panel {
    padding-top: var(--space-base);
    border-top: 1px solid var(--hairline);
}
.sec2fa__panel-title {
    margin: 0 0 4px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.sec2fa__panel .sec2fa__form { margin-top: var(--space-base); }

/* Env-admin empty state */
.sec2fa__notice {
    padding: var(--space-lg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.sec2fa__notice-title {
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
}
.sec2fa__notice-hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

@media (max-width: 560px) {
    .sec2fa__card { padding: var(--space-base); }
    .sec2fa__enroll { justify-content: center; }
    .sec2fa__qr { margin: 0 auto; }
    .sec2fa__codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sec2fa__actions .btn { flex: 1 1 auto; }
}

/* ─────────────────── Sign-in step 2 (TOTP challenge) ───────────────────── */

.login-totp__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-lg);
    letter-spacing: 0.35em;
    text-align: center;
}
/* Same `[hidden]` trap as above: the submit is hidden once the 5-minute
 * challenge expires, and `.btn` would otherwise keep it on screen. */
.login-card .btn[hidden] { display: none; }

.login-totp__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.login-totp__link {
    background: none;
    border: 0;
    padding: 6px 4px;
    color: var(--color-accent);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.login-totp__link:hover { text-decoration: underline; }
.login-totp__link:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}
.login-totp__link:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    text-decoration: none;
}