/* intent: scoped Okta Sign-In Widget style overrides to match Vitas brand palette */
/* Vitas Okta Sign-In Widget overrides.
   Scoped to .vitas-okta-host so they cannot leak into the rest of the app.

   Color fallbacks use Vitas Primary (#4E288E from EmrTheme.App.PaletteLight) rather than Okta's
   default blue, so the widget stays on-brand even if MudBlazor's CSS variables haven't
   been injected by the time the widget renders. */

/* Force every element inside the host onto the system font stack (Roboto is already
   loaded via index.html's Google Fonts link). The vendored okta-sign-in.min.css
   declares @font-face rules for Inter, montserrat-okta, and okticon with src URLs
   pointing at ../font/* files we don't ship — when the widget references those
   families, the browser issues 404 requests that surface in Dynatrace as errors.
   This override never references the missing families, so no font fetch fires.
   Cost: the widget's okticon icon glyphs (eye-toggle, validation marks) render as
   missing-glyph boxes — acceptable for a sign-in surface; the form still works. */
.vitas-okta-host,
.vitas-okta-host *,
.vitas-okta-host *::before,
.vitas-okta-host *::after {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}

.vitas-okta-host {
  --vitas-okta-radius: 8px;
  --vitas-okta-primary: var(--mud-palette-primary, #4E288E);
  --vitas-okta-primary-darken: var(--mud-palette-primary-darken, #331864);
  --vitas-okta-text-primary: var(--mud-palette-text-primary, #484847);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px env(safe-area-inset-right, 16px)
           env(safe-area-inset-bottom, 16px) env(safe-area-inset-left, 16px);
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  /* Exact same gradient as .emr-splash in app.css — login screen is a visual
     continuation of the boot splash, not a new surface. */
  background: radial-gradient(ellipse at 65% 35%, #5a32a3 0%, #3b1a7a 35%, #1c0a24 100%);
  background-size: 100% 100%;
}

/* ============================================================
   Ambient depth orbs — mirrors .emr-splash-orb in app.css.
   Keyframe emr-orb-drift is defined there and available here
   since both stylesheets are loaded in the same page context.
   ============================================================ */
.vitas-login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  animation: emr-orb-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.vitas-login-orb-1 { width: 480px; height: 480px; background: #9c6af0; top: -120px; right: -80px; animation-delay: 0s; }
.vitas-login-orb-2 { width: 320px; height: 320px; background: #4fc3f7; bottom: -80px; left: -60px; animation-delay: -3s; }
.vitas-login-orb-3 { width: 200px; height: 200px; background: #ce93d8; bottom: 10%; right: 15%; animation-delay: -5s; }

/* Corner frame accents — mirrors .emr-splash-corner in app.css. */
.vitas-login-corner {
  position: absolute;
  width: 44px;
  height: 44px;
  border-color: rgba(255, 255, 255, 0.1);
  border-style: solid;
  pointer-events: none;
  z-index: 0;
}
.vitas-login-corner-tl { top: 24px; left: 24px; border-width: 1px 0 0 1px; }
.vitas-login-corner-br { bottom: 24px; right: 24px; border-width: 0 1px 1px 0; }

/* ============================================================
   VITAS wordmark — floats above the sign-in card on the gradient,
   mirrors the splash screen branding.
   ============================================================ */
.vitas-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
  z-index: 1;
  animation: vitas-login-brand-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vitas-login-logo {
  width: 160px;
}

.vitas-login-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.vitas-login-sub {
  margin: 14px 0 0;
  font-size: 0.72rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.16rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

@keyframes vitas-login-brand-enter {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "Vitas Healthcare Corporation" footer — matches .emr-splash-footer. */
.vitas-login-footer {
  position: absolute;
  bottom: 18px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.14);
  font-size: 0.66rem !important;
  letter-spacing: 0.07rem;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Sign-in card — frosted panel, z-index above the orbs.
   Semi-transparent so the gradient shows through subtly.
   Card entrance is delayed 200ms so the wordmark lands first.
   ============================================================ */
.vitas-okta-host .vitas-okta-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 16px 48px -16px rgba(28, 10, 36, 0.55),
              0 4px 16px -4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1;
  animation: vitas-okta-card-enter 480ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

/* Gradient accent line at the card top — echoes the progress bar gradient. */
.vitas-okta-host .vitas-okta-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #b39ddb, #e040fb);
}

@keyframes vitas-okta-card-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Belt-and-braces: hide the old purple header strip if it ever renders. */
.vitas-okta-host .vitas-okta-header {
  display: none !important;
}

/* Strip the border and shadow Okta's minified CSS injects on its root container. */
.vitas-okta-host #okta-sign-in,
.vitas-okta-host .okta-container,
.vitas-okta-host .auth-container {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Hide the widget's default outer header — the Razor brand section replaces it. */
.vitas-okta-host .okta-sign-in-header {
  display: none;
}

/* Style the widget's form-level title ("Sign In"). */
.vitas-okta-host .okta-form-title {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: var(--vitas-okta-text-primary) !important;
  letter-spacing: 0.01em;
  text-align: left !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

/* Hide the widget's "Need help signing in?" footer entirely. forgotPassword and
   selfServiceUnlock are disabled in mount(), but the help-section wrapper still
   renders an empty toggle. Belt-and-braces selectors below cover the variants the
   widget uses across versions. */
.vitas-okta-host .auth-footer,
.vitas-okta-host .help-links,
.vitas-okta-host .js-help,
.vitas-okta-host a.js-help,
.vitas-okta-host .okta-form-controls + .auth-footer {
  display: none !important;
}

/* iOS Safari auto-zooms inputs whose font-size is < 16px on focus.
   Force 16px on every widget input to suppress the zoom. */
.vitas-okta-host .okta-form-input-field input,
.vitas-okta-host input.password-with-toggle,
.vitas-okta-host input.button {
  font-size: 16px !important;
  min-height: 44px;
}

/* Form content — 16px horizontal to match the button bar inset. !important
   needed because Okta's minified CSS sets padding on this class too. */
.vitas-okta-host .o-form-content {
  padding: 24px 16px 16px !important;
}

.vitas-okta-host .o-form-fieldset {
  margin-bottom: 20px;
}

.vitas-okta-host .okta-form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vitas-okta-text-primary);
  margin-bottom: 6px;
  display: block;
}

/* Outlined-Material input styling — matches MudBlazor's Outlined variant. */
.vitas-okta-host .okta-form-input-field {
  border-radius: var(--vitas-okta-radius);
  border: none !important;
  background-color: #EEF2FF;
  transition: box-shadow 150ms ease;
  overflow: hidden;
  height: auto;
}

.vitas-okta-host .okta-form-input-field.focused-input,
.vitas-okta-host .okta-form-input-field:focus-within {
  box-shadow: inset 0 0 0 2px var(--vitas-okta-primary);
}

.vitas-okta-host .okta-form-input-field input,
.vitas-okta-host .okta-form-input-field input.password-with-toggle {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  color: var(--vitas-okta-text-primary);
}

.vitas-okta-host .okta-form-input-field input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Error state on invalid input. */
.vitas-okta-host .okta-form-has-errors .okta-form-input-field {
  box-shadow: inset 0 0 0 2px var(--mud-palette-error, #E04B20);
}

.vitas-okta-host .okta-form-input-error {
  font-size: 0.8rem;
  margin-top: 6px;
  color: var(--mud-palette-error, #E04B20);
}

/* Show-password toggle button. */
.vitas-okta-host .okta-form-input-field .button-show {
  background: transparent !important;
  border: none !important;
  color: var(--vitas-okta-primary);
}

/* Zero out every Okta wrapper — including form.o-form — that adds horizontal
   space inside the card. .o-form-content and .o-form-button-bar own the 16px inset. */
.vitas-okta-host #okta-sign-in.auth-container,
.vitas-okta-host .auth-container.main-container,
.vitas-okta-host .auth-content,
.vitas-okta-host .auth-content-inner,
.vitas-okta-host .auth-content-wrapper,
.vitas-okta-host .main-container-inner,
.vitas-okta-host .primary-auth,
.vitas-okta-host .primary-auth-form,
.vitas-okta-host .o-form,
.vitas-okta-host .auth-footer-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* .margin-btm-30 on the password fieldset creates the gap before the button bar. */
.vitas-okta-host .margin-btm-30 {
  margin-bottom: 8px !important;
}

/* Button bar: 16px horizontal inset on both sides. */
.vitas-okta-host .o-form-button-bar {
  padding: 0 16px !important;
  margin: 0 !important;
}

/* Collapse any empty fieldsets Okta renders between the last input and the button. */
.vitas-okta-host .o-form-fieldset:empty,
.vitas-okta-host .o-form-fieldset-container > .o-form-fieldset:last-child:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Primary action button — solid Vitas purple. */
.vitas-okta-host .button-primary {
  width: 100% !important;
  min-height: 48px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 12px !important;
  background-color: var(--vitas-okta-primary);
  border-color: var(--vitas-okta-primary);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.vitas-okta-host .button-primary:hover,
.vitas-okta-host .button-primary:focus {
  background-color: var(--vitas-okta-primary-darken);
  border-color: var(--vitas-okta-primary-darken);
}

/* Impersonate panel (dev-only) — delayed 360ms so it drifts in after the card.
   No horizontal padding: labels carry their own 32px inset and the button uses
   display:block + margin so native block-stretch math matches the Sign In button. */
.vitas-okta-host .vitas-okta-impersonate {
  width: 100%;
  max-width: 420px;
  margin-top: 16px;
  padding: 16px 0 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 24px -12px rgba(28, 10, 36, 0.3);
  z-index: 1;
  animation: vitas-okta-card-enter 480ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

/* Text section — 16px horizontal to match the button inset. */
.vitas-okta-host .vitas-okta-impersonate-text {
  padding: 0 16px 14px;
}

.vitas-okta-host .vitas-okta-impersonate-title {
  margin: 0 0 2px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vitas-okta-text-primary);
}

.vitas-okta-host .vitas-okta-impersonate-label {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--vitas-okta-text-primary);
  opacity: 0.72;
}

/* Action wrapper: same 16px horizontal inset as the Sign In button bar. */
.vitas-okta-host .vitas-okta-impersonate-action {
  padding: 0 16px 20px;
}

.vitas-okta-host .vitas-okta-impersonate-btn.mud-button-root,
.vitas-okta-host .vitas-okta-impersonate .mud-button-root {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  text-transform: none !important;
}

/* Inline error block rendered by LoginPage.razor when MountAsync throws. */
.vitas-okta-host .vitas-okta-error {
  width: 100%;
  max-width: 420px;
  margin-top: 16px;
  padding: 16px;
  background: var(--mud-palette-surface, #FFFFFF);
  border: 1px solid var(--mud-palette-error, #E04B20);
  border-radius: var(--vitas-okta-radius);
  color: var(--mud-palette-error, #E04B20);
  z-index: 1;
}

/* Desktop SSO status line — the only content in the card while the hidden-frame sign-in runs
   (up to several seconds), so it takes the widget's own content padding and title typography
   instead of rendering as a bare paragraph flush against the card edge. A small spinner under
   the text says "working" without a second element in the markup. */
.vitas-okta-host .vitas-okta-status {
  margin: 0;
  padding: 32px 42px 28px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--vitas-okta-text-primary);
  text-align: center;
}

.vitas-okta-host .vitas-okta-status::after {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 20px auto 0;
  border-radius: 50%;
  border: 3px solid rgba(78, 40, 142, 0.18);
  border-top-color: var(--vitas-okta-primary, #4E288E);
  animation: vitas-okta-status-spin 900ms linear infinite;
}

@keyframes vitas-okta-status-spin {
  to { transform: rotate(360deg); }
}

/* Respect the OS-level "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
  .vitas-login-brand,
  .vitas-okta-host .vitas-okta-card,
  .vitas-okta-host .vitas-okta-impersonate {
    animation: none;
  }
  .vitas-login-orb {
    animation: none;
  }
  .vitas-okta-host .vitas-okta-status::after {
    animation: none;
  }
  .vitas-okta-host .button-primary {
    transition: none;
  }
}