/* General Trias verification components. Deliberately scoped to .gentri-auth. */
.gentri-auth {
  --gt-auth-surface: var(--gt-surface, #fff);
  --gt-auth-soft: var(--gt-soft, #f6f7fb);
  --gt-auth-ink: var(--gt-ink, #20233b);
  --gt-auth-muted: var(--gt-muted, #62667b);
  --gt-auth-line: var(--gt-line, #e1e3ee);
  --gt-auth-accent: var(--gt-primary, var(--bims-primary, #6d28d9));
  --gt-auth-accent-ink: var(--gt-primary-strong, var(--bims-primary-strong, #5621ab));
  color: var(--gt-auth-ink);
}

html[data-bims-display-scope="staff"] body.auth-page.staff-mfa-page.gentri-auth {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(16px, 4vw, 48px) !important;
  overflow-x: clip;
  background: var(--gt-canvas, #f5f6fa) !important;
}

html[data-bims-display-scope="staff"] body.auth-page.staff-mfa-page.gentri-auth .login-card.gt-auth-card {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: auto !important;
  padding: 0 !important;
  border: 1px solid var(--gt-auth-line) !important;
  border-radius: 24px !important;
  background: var(--gt-auth-surface) !important;
  box-shadow: 0 18px 70px color-mix(in srgb, var(--gt-auth-ink) 10%, transparent) !important;
  overflow: hidden;
}

html[data-bims-display-scope="staff"] body.auth-page.staff-mfa-page.gentri-auth .login-card.gt-auth-card .login-panel.gt-auth-panel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(24px, 4vw, 40px) !important;
  border: 0 !important;
  background: var(--gt-auth-surface) !important;
  box-sizing: border-box;
}

.gentri-auth .gt-auth-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--gt-auth-line);
}

.gentri-auth .gt-auth-brand-row .gt-auth-brand {
  display: flex !important;
  align-items: center !important;
  min-width: 0;
  flex: 1 1 260px;
  width: auto !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gentri-auth .gt-auth-brand-row .gt-auth-brand .city-seal-mark {
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gentri-auth .gt-auth-brand .city-main-logo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.gentri-auth .gt-auth-brand > div:last-child { min-width: 0; }
.gentri-auth .gt-auth-brand strong { display: block; color: var(--gt-auth-ink) !important; font-size: 1.1rem !important; font-weight: 800; letter-spacing: -.02em; }
.gentri-auth .gt-auth-brand span { display: block; margin-top: 3px; color: var(--gt-auth-muted) !important; font-size: .78rem !important; line-height: 1.5 !important; }

.gentri-auth .bims-language-switch.gt-auth-language {
  display: inline-flex !important;
  flex: 0 0 auto;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 3px !important;
  gap: 3px;
  border: 1px solid var(--gt-auth-line) !important;
  border-radius: 12px !important;
  background: var(--gt-auth-soft) !important;
}

.gentri-auth .bims-language-switch.gt-auth-language button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  width: auto !important;
  min-height: 44px !important;
  padding: 8px 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.gentri-auth .gt-auth-heading { margin: 0 0 18px; }
.gentri-auth .gt-auth-eyebrow { margin: 0 0 9px !important; color: var(--gt-auth-accent-ink) !important; font-size: .71rem !important; font-weight: 800; line-height: 1.5 !important; letter-spacing: .1em; text-transform: uppercase; }
.gentri-auth .gt-auth-heading h1 { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; color: var(--gt-auth-ink) !important; font-size: clamp(1.55rem, 3vw, 1.9rem) !important; font-weight: 800; line-height: 1.25 !important; letter-spacing: -.035em; }
.gentri-auth .gt-auth-heading h1 > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.gentri-auth .gt-auth-heading h1 > .bpw-icon { flex: 0 0 1.15em; width: 1.15em !important; height: 1.15em !important; margin: 0 !important; }
.gentri-auth .gt-auth-identity { display: grid; gap: 3px; margin: 0 0 22px !important; padding: 12px 15px; border-left: 3px solid var(--gt-auth-accent); border-radius: 0 10px 10px 0; background: var(--gt-auth-soft); line-height: 1.5 !important; overflow-wrap: anywhere; }
.gentri-auth .gt-auth-identity > span { color: var(--gt-auth-muted); font-size: .76rem; }
.gentri-auth .gt-auth-identity strong { color: var(--gt-auth-ink); font-size: .95rem; }
.gentri-auth .gt-auth-lede, .gentri-auth .auth-recovery-help { color: var(--gt-auth-muted); font-size: .93rem !important; line-height: 1.65 !important; }

.gentri-auth .gt-security {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gentri-auth .gt-security h2, .gentri-auth .gt-security .staff-mfa-subtitle { margin: 0 0 10px !important; color: var(--gt-auth-ink) !important; font-size: 1.05rem !important; font-weight: 750; line-height: 1.4 !important; letter-spacing: -.015em; }
.gentri-auth .gt-security--recovery { background: var(--gt-auth-surface); }
.gentri-auth .gt-security .auth-recovery-help { margin: 0 0 16px !important; }
.gentri-auth .gt-security .staff-mfa-codes.gt-auth-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gentri-auth .gt-security .staff-mfa-codes.gt-auth-codes li { min-width: 0; margin: 0; padding: 10px 8px; border: 0; border-radius: 8px; background: var(--gt-auth-soft); text-align: center; }
.gentri-auth .gt-security .staff-mfa-codes.gt-auth-codes code { color: var(--gt-auth-ink); font: 650 1rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .025em; overflow-wrap: anywhere; user-select: all; }
.gentri-auth .gt-security .staff-mfa-key { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 14px 0; padding: 14px; border: 1px solid var(--gt-auth-line); border-radius: 10px; background: var(--gt-auth-surface); color: var(--gt-auth-accent-ink); font: 650 .98rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.gentri-auth .gt-auth-field-help { margin: 8px 0 0; color: var(--gt-auth-muted); font-size: .8rem !important; font-weight: 400; line-height: 1.6 !important; }
.gentri-auth .gt-auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; margin: 0; }
.gentri-auth .gt-auth-form > label:not(.gt-auth-check) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; color: var(--gt-auth-ink); font-size: .9rem; font-weight: 650; }
.gentri-auth .gt-auth-form .auth-login-field > label { display: block; margin: 0 0 9px !important; }
.gentri-auth .gt-auth-form .field-title { display: inline-flex; align-items: center; gap: 8px; line-height: 1.5; }
.gentri-auth .gt-auth-form :is(input[type="text"], input[type="password"]) { width: 100%; max-width: 100%; min-height: 48px; box-sizing: border-box; }
.gentri-auth .gt-auth-form input[autocomplete="one-time-code"] { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .065em; }

.gentri-auth .gt-auth-form label.staff-mfa-check.gt-auth-check {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 11px !important;
  min-width: 0;
  min-height: 48px;
  margin: 0 !important;
  padding: 10px 0 !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--gt-auth-ink);
  font-size: .88rem !important;
  font-weight: 500;
  line-height: 1.5 !important;
  cursor: pointer;
}

.gentri-auth .gt-auth-form label.staff-mfa-check.gt-auth-check > input[type="checkbox"] {
  display: inline-block !important;
  position: static !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  appearance: auto;
  accent-color: var(--gt-auth-accent);
}

.gentri-auth .gt-auth-form label.staff-mfa-check.gt-auth-check::before { display: none !important; content: none !important; }
.gentri-auth .gt-auth-form label.staff-mfa-check.gt-auth-check > span { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.gentri-auth :is(.gt-auth-submit, .gt-auth-cancel .btn) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 48px !important; max-width: 100%; padding: 12px 18px !important; box-sizing: border-box; font-size: .95rem !important; line-height: 1.4 !important; text-align: center; white-space: normal; }
.gentri-auth :is(.gt-auth-submit, .gt-auth-cancel .btn) > .bpw-icon { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 1.15em; width: 1.15em !important; height: 1.15em !important; margin: 0 !important; vertical-align: middle; }
.gentri-auth :is(.gt-auth-submit, .gt-auth-cancel .btn) > span:last-child { min-width: 0; }
.gentri-auth .gt-auth-cancel { display: block; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--gt-auth-line); }
.gentri-auth .gt-auth-note { margin: 18px 0 !important; padding: 14px 16px; border: 1px solid var(--gt-auth-line); border-radius: 12px; background: var(--gt-auth-soft); }
.gentri-auth .gt-auth-disclosure { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--gt-auth-line); }
.gentri-auth .gt-auth-disclosure > summary { min-height: 44px; color: var(--gt-auth-ink); font-size: .98rem; font-weight: 750; line-height: 1.5; cursor: pointer; }
.gentri-auth .gt-auth-disclosure[open] > summary { margin-bottom: 14px; }
.gentri-auth .gt-auth-disclosure .gt-auth-form { margin-top: 18px; }
.gentri-auth .gt-auth-footer { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 18px clamp(24px, 4vw, 40px); border-top: 1px solid var(--gt-auth-line); background: var(--gt-auth-soft); color: var(--gt-auth-muted); }
.gentri-auth .gt-auth-footer > .bpw-icon { flex: 0 0 18px; width: 18px !important; height: 18px !important; margin-top: 2px; }
.gentri-auth .gt-auth-footer p { margin: 0 !important; font-size: .76rem !important; line-height: 1.6 !important; }
.gentri-auth.gentri-auth--management { width: min(100%, 760px); max-width: 760px; min-width: 0; margin-inline: auto; padding: clamp(20px, 3vw, 32px); box-sizing: border-box; }
.gentri-auth.gentri-auth--management .gt-auth-submit { justify-self: start; width: auto; }
.gentri-auth :is(button, input, summary):focus-visible { outline: 3px solid var(--gt-auth-accent) !important; outline-offset: 3px; }

@media (max-width: 480px) {
  .gentri-auth .gt-auth-brand-row { align-items: flex-start; gap: 16px; }
  .gentri-auth .gt-security { padding-inline: 0; }
  .gentri-auth .gt-security .staff-mfa-codes.gt-auth-codes code { font-size: .9rem; letter-spacing: 0; }
  .gentri-auth.gentri-auth--management .gt-auth-submit { justify-self: stretch; width: 100%; }
}

@media (max-width: 360px) {
  .gentri-auth .gt-security .staff-mfa-codes.gt-auth-codes { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .gentri-auth *, .gentri-auth *::before, .gentri-auth *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}