/**
 * auth-shell — SSO-scoped shared visual primitives (.nstda-auth)
 *
 * LOCKED brand tokens (Bootstrap UI M1 — 2026-09-21):
 *   --sso-brand-logo-max-width:  22.125rem  (354px)
 *   --sso-brand-logo-max-height: 9.375rem   (150px)
 *
 * Namespace new layout/theme rules under .nstda-auth to avoid leaking to other pages.
 * Brand header selectors kept for existing markup parity.
 */

:root {
  --sso-brand-logo-max-width: 22.125rem;
  --sso-brand-logo-max-height: 9.375rem;
  --sso-brand-header-pad-top: 0;
  --sso-brand-header-slot-inset: 0.5rem;
  --sso-brand-header-to-title: 0.5rem;
  --sso-auth-shell-max-width: 30rem;
  --sso-auth-shell-bg: #e8e8e8;
  --sso-auth-shell-bg-dark: #222;
}

/* Header frame — login parity */
.multi-login-header {
  position: relative;
  padding-top: var(--sso-brand-header-pad-top);
  margin-bottom: var(--sso-brand-header-to-title);
}

.multi-login-header .multi-login-control-slot {
  position: absolute;
  top: var(--sso-brand-header-slot-inset);
  width: 2.5rem;
  height: 2.5rem;
  z-index: 2;
}

.multi-login-header .multi-login-control-slot:first-child {
  left: var(--sso-brand-header-slot-inset);
}

.multi-login-header .multi-login-control-slot-end {
  right: var(--sso-brand-header-slot-inset);
}

.multi-login-header .multi-login-control-slot.is-decorative {
  pointer-events: none;
}

.multi-login-logo {
  text-align: center;
}

.multi-login-logo .card-img-top {
  display: block;
  width: auto;
  max-width: min(100%, var(--sso-brand-logo-max-width));
  max-height: var(--sso-brand-logo-max-height);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.multi-login-logo:empty {
  display: none;
}

.mfa-copy-secondary {
  font-weight: normal;
}

#mfa-registration-status {
  white-space: pre-line;
}

/* --- Scoped page shell (.nstda-auth) --- */
.nstda-auth.nstda-auth-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.nstda-auth .nstda-auth-shell {
  width: 100%;
  max-width: var(--sso-auth-shell-max-width);
  min-width: 0;
  background: var(--sso-auth-shell-bg);
}

[data-theme="dark"] .nstda-auth .nstda-auth-shell,
[data-bs-theme="dark"] .nstda-auth .nstda-auth-shell {
  background: var(--sso-auth-shell-bg-dark);
  box-shadow: 0 1rem 3rem rgb(8 8 8) !important;
}

.nstda-auth .nstda-auth-shell > .card {
  background: transparent;
}

.nstda-auth #mfa-method-picker-title {
  font-size: 1rem;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}

.nstda-auth .btn-auth-cta {
  min-height: 44px;
}

/* Theme toggle — single button (reference: one icon, top-right).
 * Light UI shows moon (action: switch to Dark); Dark UI shows sun (switch to Light). */
.nstda-auth .toggle-dark .nstda-theme-toggle {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  line-height: 1;
  border: 0;
  box-shadow: none;
  /* Override btn-link blue — moon matches body text (reference); sun keeps .text-warning */
  color: var(--bs-body-color);
  text-decoration: none;
}

.nstda-auth .toggle-dark .nstda-theme-toggle:hover,
.nstda-auth .toggle-dark .nstda-theme-toggle:focus {
  color: var(--bs-body-color);
  text-decoration: none;
}

.nstda-auth .toggle-dark .nstda-theme-toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.nstda-auth .toggle-dark .nstda-theme-toggle i {
  font-size: 1.2rem;
}

[data-theme="dark"] .nstda-auth .card-img-top,
[data-bs-theme="dark"] .nstda-auth .card-img-top {
  filter: brightness(0) invert(1);
}

/* MFA method picker cards. Light theme uses a white card; dark theme overrides below. */
.nstda-auth .mfa-provider-card {
  --mfa-provider-selected-bg: #cfe2ff;
  --mfa-provider-text: #212529;
  --mfa-provider-text-muted: rgba(33, 37, 41, 0.75);
  --mfa-provider-link: #0a58ca;
  --mfa-provider-selected-color: var(--mfa-provider-text);
  --mfa-provider-border: #dee2e6;
  --mfa-provider-selected-border: #9ec5fe;

  cursor: pointer;
  color: var(--mfa-provider-text);
  background-color: #fff;
  border: 1px solid var(--mfa-provider-border) !important;
  border-radius: 1rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.nstda-auth .mfa-provider-icon {
  flex: 0 0 1.5rem;
  text-align: center;
}

.nstda-auth .mfa-icon-webex {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  color: currentColor;
}

.nstda-auth .mfa-icon-webex svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nstda-auth .mfa-provider-content {
  min-width: 0;
}

.nstda-auth .mfa-provider-content > .d-flex {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  min-width: 0;
}

/* Title keeps its words. The badge uses the leftover width and wraps under the title when it does not fit. */
.nstda-auth .mfa-provider-heading {
  flex: 0 1 auto;
  max-width: 100%;
}

.nstda-auth .mfa-provider-content .fw-semibold {
  overflow-wrap: normal;
}

.nstda-auth .mfa-provider-card .text-body-secondary {
  color: var(--mfa-provider-text-muted) !important;
}

.nstda-auth .mfa-provider-card a {
  color: var(--mfa-provider-link);
}

.nstda-auth .mfa-provider-status {
  flex: 0 0 auto;
  width: max-content;
  margin-inline-start: auto;
  align-self: flex-start;
  white-space: normal;
  text-align: end;
  line-height: 1.25;
}

.nstda-auth .mfa-provider-card[data-selection-color="enrolled"],
.nstda-auth .mfa-provider-card[data-selection-color="not_enrolled"],
.nstda-auth .mfa-provider-card[data-selection-color="primary"] {
  --mfa-provider-selected-bg: #cfe2ff;
  --mfa-provider-selected-color: var(--mfa-provider-text);
}

.nstda-auth .btn-check:checked + .mfa-provider-card {
  background-color: var(--mfa-provider-selected-bg) !important;
  color: var(--mfa-provider-selected-color);
  border-color: var(--mfa-provider-selected-border) !important;
  box-shadow: none;
}

.nstda-auth .btn-check:checked + .mfa-provider-card .text-body-secondary {
  color: var(--mfa-provider-text-muted) !important;
}

.nstda-auth .btn-check:checked + .mfa-provider-card a {
  color: var(--mfa-provider-link) !important;
}

[data-theme="dark"] .nstda-auth .mfa-provider-card,
[data-bs-theme="dark"] .nstda-auth .mfa-provider-card {
  --mfa-provider-selected-bg: #1b3a5c;
  --mfa-provider-text: #f1f3f5;
  --mfa-provider-text-muted: rgba(241, 243, 245, 0.72);
  --mfa-provider-link: #9ec5fe;
  --mfa-provider-selected-color: #f1f3f5;
  --mfa-provider-border: rgba(255, 255, 255, 0.14);
  --mfa-provider-selected-border: #6ea8fe;
  background-color: #2a2f35;
  color: #f1f3f5;
}

.nstda-auth .mfa-provider-selected-marker {
  display: none;
  flex: 0 0 auto;
}

.nstda-auth .btn-check:checked + .mfa-provider-card .mfa-provider-selected-marker {
  display: inline-block;
}

.nstda-auth .btn-check:focus-visible + .mfa-provider-card {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}