/* SuperAdmin security pages (stream S8): sign-in extras, My account, Superadmins lockout.
   Page-specific only; tokens and shared components live in sa.css. */

/* ---------- small type ---------- */
.sa-sec-small { font-size: 12.5px; color: var(--sa-ink-2); }
.sa-sec-meta { font-size: 12px; color: var(--sa-muted); margin-top: 2px; }
.sa-sec-err { color: var(--sa-crit); font-size: 12px; font-weight: 500; }
.sa-sec-big { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--sa-ink); }
.sa-sec-center { text-align: center; }
.sa-sec-linkbtn {
  border: 0; background: none; padding: 0; color: var(--sa-accent-strong); font-weight: 500; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sa-sec-linkbtn:hover { color: var(--sa-accent); }
.sa-sec-callout {
  font-size: 12.5px; color: var(--sa-ink-2); background: var(--sa-card-2); border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius-sm); padding: 10px 12px; margin-top: 14px;
}

/* ---------- recovery codes ---------- */
.sa-sec-codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0;
  font-family: var(--sa-mono); font-size: 14px; color: var(--sa-ink); list-style: none;
  background: var(--sa-card-2); border: 1px solid var(--sa-line); border-radius: 10px; padding: 12px 16px;
}
.sa-sec-codes li { display: flex; gap: 10px; align-items: baseline; }
.sa-sec-codes small { color: var(--sa-muted); font-size: 11px; width: 16px; text-align: right; }
.sa-sec-pips { display: flex; gap: 4px; margin-top: 8px; }
.sa-sec-pips i { width: 20px; height: 8px; border-radius: 3px; background: var(--sa-line-soft); }
.sa-sec-pips i.on { background: var(--sa-good); }
.sa-sec-pips.low i.on { background: var(--sa-warn); }
.sa-sec-code-in { text-transform: uppercase; letter-spacing: .08em; font-family: var(--sa-mono); }

/* ---------- password strength ---------- */
.sa-sec-meter { display: flex; gap: 4px; margin-top: 6px; }
.sa-sec-meter i { flex: 1; height: 4px; border-radius: 99px; background: var(--sa-line-soft); }
.sa-sec-meter[data-level="1"] i:nth-child(-n+1) { background: var(--sa-crit); }
.sa-sec-meter[data-level="2"] i:nth-child(-n+2) { background: var(--sa-warn); }
.sa-sec-meter[data-level="3"] i:nth-child(-n+3),
.sa-sec-meter[data-level="4"] i { background: var(--sa-good); }

/* ---------- key/value + authenticator ---------- */
.sa-sec-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 16px; font-size: 13px; margin: 4px 0 14px; }
.sa-sec-kv dt { color: var(--sa-muted); font-weight: 400; }
.sa-sec-kv dd { margin: 0; color: var(--sa-ink); min-width: 0; overflow-wrap: anywhere; }
.sa-sec-qr-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sa-sec-qr-wrap .sa-qr { margin: 0; flex: none; }
.sa-sec-steps { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sa-sec-key {
  font-family: var(--sa-mono); font-size: 13px; letter-spacing: .05em; background: var(--sa-card-2);
  border: 1px solid var(--sa-line); border-radius: 8px; padding: 6px 10px; word-break: break-all; color: var(--sa-ink);
}

/* ---------- My account layout ---------- */
.sa-sec-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sa-sec-form { display: flex; flex-direction: column; gap: 12px; }
.sa-sec-form .form-label { margin-bottom: 4px; }
.sa-sec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- security status list ---------- */
.sa-sec-checks { display: flex; flex-direction: column; }
.sa-sec-check-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--sa-line-soft); }
.sa-sec-check-row:first-child { border-top: 0; padding-top: 2px; }
.sa-sec-check-row .grow { flex: 1 1 auto; min-width: 0; }
.sa-sec-check-row b { font-size: 13.5px; color: var(--sa-ink); }
.sa-sec-check-row .sa-pill { flex: none; }
.sa-sec-check {
  flex: none; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 14px;
}
.sa-sec-check.ok { background: var(--sa-good-soft); color: var(--sa-good); }
.sa-sec-check.warn { background: var(--sa-warn-soft); color: var(--sa-warn); }
.sa-sec-ips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sa-sec-ip {
  font-family: var(--sa-mono); font-size: 12px; background: var(--sa-card-2); border: 1px solid var(--sa-line);
  border-radius: 6px; padding: 1px 7px; color: var(--sa-ink);
}

/* ---------- Superadmins grid ---------- */
.sa-sec-sub { display: block; font-size: 11.5px; color: var(--sa-muted); margin-top: 1px; }

/* ---------- stacking ----------
   The re-link dialog stays open while its requests run. If the session needs a fresh code, the shell's
   step-up dialog (earlier in the DOM, same z-index) must open above it, not behind it. */
.sa-shell #sa-stepup { z-index: 1065; }

/* ---------- sign-in card extras ---------- */
.sa-auth .sa-sec-codes { margin-bottom: 12px; }
.sa-auth .sa-sec-row .btn-primary { flex: 1 1 auto; }

@media (max-width: 520px) {
  .sa-sec-codes { grid-template-columns: minmax(0, 1fr); }
  .sa-sec-check-row { flex-wrap: wrap; }
}

/* "Confirm it's you to open this page" placeholder (Views/Shared/StepUpRequired.cshtml, sa-console.js). */
.sa-stepup-page { max-width: 560px; margin: 24px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sa-stepup-page-icon { font-size: 40px; color: var(--sa-accent); }
.sa-stepup-page p { max-width: 60ch; font-size: 13px; }
.sa-stepup-page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }