/* stylelint-disable unit-allowed-list -- Responsive viewport, grid, character and image-density units are intentional. */

/* AMACCUL authentication brand layer — institutional redesign, 27 September 2026.
 * Presentation only: the Angular form, auth, OTP, renewal and routing are unchanged.
 * Local assets are mounted at assets/login. EN/FR copy remains in translations.
 * !important overrides Angular's later, attribute-scoped component styles.
 * Scope all tokens and selectors to this route; do not recolour the banking app.
 */
.login-wrapper {
  /* Deep institutional navy for type and the primary action; the crest's
     own blue for the brand name; one restrained gold. White on --p-navy is
     14.5:1, --p-ink on --p-card 16:1, --p-muted on --p-card 5.9:1. */
  --p-navy: #0a2a52;
  --p-blue: #1074b9;
  --p-deep: #071f3d;
  --p-gold: #d9ac4f;
  --p-gold-soft: #eed08c;
  --p-ivory: #f5f2ea;
  --p-card: #fff;
  --p-ink: #101a3d;
  --p-muted: #4f5f73;
  --p-border: #d7dce6;
  --p-ok: #1d6f47;
  --p-danger: #a52330;
  --p-font:
    system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --p-serif: georgia, "Times New Roman", serif;
  --md-sys-color-primary: var(--p-navy);
  --md-sys-color-on-primary: #fff;

  display: flex !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--p-ivory) !important;
  color: var(--p-ink);
  font-family: var(--p-font);
}

/* ─────────────────────────── The photograph ─────────────────────────────
 * The dominant element, about two thirds of the width. It is a CSS
 * background, so the form renders at once and never waits for it; the colour
 * underneath is what shows while it loads, so there is no layout shift.
 */
.login-wrapper .hero-panel.hide-lt-lg {
  position: relative;
  display: block !important;
  flex: 0 0 66% !important;
  min-width: 0;
  background-color: var(--p-deep) !important;
  background-image: url("login/community-bright-hd.webp") !important;
  background-size: cover !important;
  background-position: 62% 26% !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
}

/* Navy from the left, where the words are, and from below, where the
   indicators sit; the faces in the middle keep their light. */
.login-wrapper .hero-panel .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgb(7 31 61 / 76%) 0%,
      rgb(7 31 61 / 38%) 28%,
      rgb(7 31 61 / 4%) 54%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      rgb(7 31 61 / 34%) 0%,
      transparent 25%,
      transparent 46%,
      rgb(7 31 61 / 52%) 100%
    ) !important;
}

.login-wrapper .hero-panel.production-mode .hero-content {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  height: 100%;
  padding: clamp(28px, 3.4vw, 64px) clamp(28px, 4vw, 80px) !important;
  color: #fff;
}

/* Brand row: crest, name, then the motto behind a hairline. */
.login-wrapper .hero-brand-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.login-wrapper .hero-crest {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 25%);
}

.login-wrapper .hero-brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 22px;
  border-right: 1px solid rgb(255 255 255 / 35%);
}

.login-wrapper .hero-brand-row .hero-title-minimal {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font: 700 24px / 1.1 var(--p-font) !important;
  letter-spacing: 0.02em !important;
  border: 0 !important;
  background: none !important;
  text-shadow: none !important;
}

.login-wrapper .hero-brand-row .hero-institution {
  display: block !important;
  max-width: 27ch;
  margin: 0 !important;
  color: rgb(255 255 255 / 86%) !important;
  font: 500 11px / 1.45 var(--p-font) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-wrapper .hero-motto {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: rgb(255 255 255 / 90%);
  font: 500 12px / 1.7 var(--p-font);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.login-wrapper .hero-motto::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 8px;
  background: var(--p-gold);
}

/* The headline block, low on the left. */
.login-wrapper .hero-branding-bottom {
  display: block !important;
  width: 100%;
  max-width: 620px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.login-wrapper .hero-assurances,
.login-wrapper .hero-platform {
  display: none !important;
}

.login-wrapper .hero-heading {
  margin: 0;
}

.login-wrapper .hero-name,
.login-wrapper .hero-kicker,
.login-wrapper .hero-tagline {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font: 700 clamp(48px, 4.8vw, 92px) / 1.04 var(--p-serif) !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  text-shadow: 0 2px 18px rgb(7 31 61 / 45%) !important;
}

.login-wrapper .hero-name {
  color: #fff !important;
}

.login-wrapper .hero-name::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: 22px;
  background: var(--p-gold);
}

.login-wrapper .hero-kicker {
  display: block !important;
  color: var(--p-gold-soft) !important;
}

.login-wrapper .hero-kicker::after {
  display: none !important;
}

.login-wrapper .hero-tagline {
  max-width: none;
  color: #fff !important;
}

.login-wrapper .hero-tagline::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 20px;
  background: var(--p-gold);
}

.login-wrapper .hero-strap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 18px 0 0;
  color: rgb(255 255 255 / 92%);
  font: 500 13px / 1.5 var(--p-font);
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Four quiet indicators: a gold line icon over a short label. */
.login-wrapper .hero-values {
  display: flex;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.login-wrapper .hero-values li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 112px;
  padding: 0 10px;
  color: #fff;
  font: 500 12.5px / 1.35 var(--p-font);
  text-align: center;
}

.login-wrapper .hero-values li + li {
  border-left: 1px solid rgb(255 255 255 / 28%);
}

.login-wrapper .hero-values svg,
.login-wrapper .login-secure-line svg,
.login-wrapper .notice-icon {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-wrapper .hero-values svg {
  width: 34px;
  height: 34px;
  color: var(--p-gold);
}

/* ─────────────────────────── The sign-in side ────────────────────────────
 * An ivory column holding one white card. It owns its scroll area so short
 * screens and zoom cannot crop the credentials.
 */
.login-wrapper .login-panel {
  flex: 1 1 34% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
  background: var(--p-ivory) !important;
}

.login-wrapper .login-header {
  flex: 0 0 auto;
  justify-content: flex-end !important;
  max-height: none !important;
  padding: 22px 28px 0 !important;
  overflow: visible !important;
}

.login-wrapper .login-header .theme-toggle,
.login-wrapper .login-header mifosx-server-selector,
.login-wrapper .login-footer,
.login-wrapper .login-attribution {
  display: none !important;
}

.login-wrapper .login-header .header-control {
  opacity: 1 !important;
}

.login-wrapper .login-card-container {
  flex: 1 0 auto !important;
  flex-direction: column !important;
  animation: none !important;
  min-height: min-content !important;
  justify-content: center !important;
  padding: 20px clamp(18px, 2.1vw, 40px) 36px !important;
}

.login-wrapper .login-card {
  width: 100% !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  height: auto !important;
  justify-content: flex-start !important;
  max-width: 460px !important;
  padding: 36px 30px 26px !important;
  margin: 0 auto !important;
  background: var(--p-card) !important;
  border: 1px solid #e6e1d5 !important;
  border-radius: 24px !important;
  box-shadow:
    0 20px 54px rgb(10 42 82 / 7%),
    0 2px 5px rgb(10 42 82 / 3%) !important;
  animation: none !important;
  color: var(--p-ink) !important;
}

.login-wrapper .login-card .logo-section {
  display: grid !important;
  animation: none !important;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  border: 0 !important;
}

.login-wrapper .logo-section::before {
  content: "";
  grid-row: 1 / 3;
  width: 64px;
  height: 64px;
  background: url("login/crest.webp") center / contain no-repeat;
  border-radius: 50%;
}

.login-wrapper .login-brand-name {
  align-self: end;
  margin: 0 !important;
  color: var(--p-navy) !important;
  font: 700 26px / 1.1 var(--p-font) !important;
  letter-spacing: -0.02em !important;
}

.login-wrapper .login-institution-compact {
  align-self: start;
  max-width: 28ch;
  margin: 6px 0 0 !important;
  color: var(--p-muted) !important;
  font: 500 10.5px / 1.5 var(--p-font) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left !important;
}

.login-wrapper .logo-image {
  display: none !important;
}

.login-wrapper .login-welcome {
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left;
}

.login-wrapper .login-welcome-title {
  margin: 0 !important;
  color: var(--p-navy) !important;
  font: 400 clamp(32px, 2.6vw, 44px) / 1.12 var(--p-serif) !important;
  letter-spacing: -0.02em;
}

.login-wrapper .login-welcome-subtitle {
  margin: 8px 0 0 !important;
  color: var(--p-muted) !important;
  font: 400 15px / 1.55 var(--p-font) !important;
}

.login-wrapper .form-section {
  animation: none !important;
  margin: 0 !important;
  font-family: var(--p-font);
}

.login-wrapper #login-form {
  gap: 6px !important;
  animation: none !important;
}

.login-wrapper .login-card .mat-mdc-form-field {
  --mdc-filled-text-field-container-color: #fff;
  --mdc-filled-text-field-focus-label-text-color: var(--p-navy);
  --mdc-filled-text-field-caret-color: var(--p-navy);
  --mdc-filled-text-field-input-text-color: var(--p-ink);
  --mdc-filled-text-field-label-text-color: var(--p-muted);
  --mat-form-field-container-text-font: var(--p-font);
  --mat-form-field-container-text-size: 16px;
  --mat-form-field-container-text-line-height: 24px;

  width: 100%;
  margin: 0 !important;
}

.login-wrapper .login-card .mat-mdc-text-field-wrapper {
  min-height: 60px;
  padding: 0 14px !important;
  border: 1px solid var(--p-border);
  border-radius: 10px !important;
  background: #fff !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.login-wrapper .login-card .mat-focused .mat-mdc-text-field-wrapper {
  border-color: var(--p-navy);
  box-shadow: 0 0 0 3px rgb(10 42 82 / 14%);
}

.login-wrapper .login-card .mat-form-field-invalid .mat-mdc-text-field-wrapper {
  border-color: var(--p-danger) !important;
}

.login-wrapper .login-card mat-error {
  color: var(--p-danger) !important;
}

/* The person and padlock glyphs the form already carries. */
.login-wrapper .login-card .mat-mdc-form-field-icon-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px 0 2px !important;
  color: var(--p-muted);
}

.login-wrapper .login-header mifosx-language-selector.header-control {
  flex: 0 0 132px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
}

.login-wrapper .login-header mifosx-language-selector .mat-mdc-form-field {
  width: 132px !important;
  min-width: 132px !important;
}

/* The existing language selector, shaped as a pill. */
.login-wrapper .login-header .mdc-notched-outline .mat-mdc-notch-piece {
  border-color: var(--p-border) !important;
}

.login-wrapper .login-header .mdc-notched-outline__leading {
  border-radius: 999px 0 0 999px !important;
  width: 18px !important;
}

.login-wrapper .login-header .mdc-notched-outline__trailing {
  border-radius: 0 999px 999px 0 !important;
}

.login-wrapper .login-header .mat-mdc-text-field-wrapper {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgb(10 42 82 / 8%);
}

.login-wrapper .login-header .mat-mdc-select-arrow,
.login-wrapper .login-header .mat-mdc-select {
  color: var(--p-ink) !important;
}

.login-wrapper .login-card .mdc-line-ripple {
  display: none;
}

.login-wrapper .login-card .mat-mdc-form-field-focus-overlay {
  opacity: 0 !important;
}

.login-wrapper .login-card .mat-mdc-input-element {
  padding: 0 !important;
  font: 400 16px / 24px var(--p-font) !important;
  color: var(--p-ink) !important;
}

.login-wrapper .login-card .mat-mdc-input-element::placeholder {
  color: var(--p-muted) !important;
  opacity: 1 !important;
}

.login-wrapper .login-card .mat-mdc-form-field-infix {
  min-height: 58px;
  padding: 25px 0 7px !important;
}

.login-wrapper .login-card .mat-mdc-floating-label {
  color: var(--p-muted) !important;
  font-family: var(--p-font) !important;
  top: 31px !important;
  transform: translateY(-23px) scale(0.8) !important;
}

.login-wrapper .login-card .mat-mdc-form-field-subscript-wrapper {
  min-height: 22px;
  font: 400 12px / 1.5 var(--p-font);
}

/* Material positions errors absolutely by default. Let translated, wrapping
   validation text reserve its own space before the next field or notice. */
.login-wrapper .login-card .mat-mdc-form-field-error-wrapper {
  position: static;
  padding: 4px 12px 0;
}

.login-wrapper
  .login-card
  .mat-mdc-form-field-subscript-wrapper:has(mat-error)::before {
  display: none;
}

.login-wrapper .login-card .mat-mdc-icon-button {
  color: var(--p-navy) !important;
  min-width: 48px;
  min-height: 48px;
}

.login-wrapper .login-card md-filled-button {
  --md-filled-button-container-color: var(--p-navy);
  --md-filled-button-label-text-color: #fff;
  --md-filled-button-disabled-container-color: #536882;
  --md-filled-button-disabled-container-opacity: 1;
  --md-filled-button-disabled-label-text-color: #fff;
  --md-filled-button-disabled-label-text-opacity: 1;
  --md-filled-button-container-shape: 10px;
  --md-filled-button-container-height: 56px;
  --md-filled-button-label-text-size: 16px;
  --md-filled-button-label-text-weight: 600;
  --md-filled-button-label-text-font: var(--p-font);

  min-height: 56px;
  transition: box-shadow 160ms ease;
}

.login-wrapper .login-submit-button {
  margin-top: 6px !important;
}

.login-wrapper .login-card md-filled-button:not([disabled]):hover {
  box-shadow: 0 6px 16px rgb(10 42 82 / 22%);
}

.login-wrapper .login-card md-filled-button:not([disabled]):active {
  box-shadow: none;
}

/* A failed attempt, said in the card, calmly. */
.login-wrapper .login-error {
  margin: 2px 0 8px !important;
  padding: 10px 12px;
  border: 1px solid #f0c6cb;
  border-left: 4px solid var(--p-danger);
  border-radius: 8px;
  background: #fdf1f2;
  color: #7d1822;
  font: 500 13.5px / 1.45 var(--p-font);
}

/* Older Material controls used by OTP/password renewal retain their behavior. */
.login-wrapper .login-card .mat-mdc-raised-button:not([disabled]),
.login-wrapper .login-card .mat-mdc-unelevated-button:not([disabled]) {
  background: var(--p-navy) !important;
  color: #fff !important;
  min-height: 48px;
}

.login-wrapper .login-card md-outlined-button,
.login-wrapper .login-card md-text-button {
  --md-outlined-button-label-text-color: var(--p-navy);
  --md-outlined-button-outline-color: var(--p-border);
  --md-text-button-label-text-color: var(--p-navy);
}

.login-wrapper .login-card .two-factor-auth-form,
.login-wrapper .login-card .reset-password-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-wrapper .login-card mat-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* "Secure connection", between two hairlines. True of this deployment:
   HTTPS only, TLS 1.2 and above, HSTS. It claims nothing else. */
.login-wrapper .login-secure-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 16px !important;
  color: var(--p-ok);
  font: 500 13px / 1.4 var(--p-font);
}

.login-wrapper .login-secure-line::before,
.login-wrapper .login-secure-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e3e6ec;
}

.login-wrapper .login-secure-line svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* The restricted-system notice, institutional rather than alarming. */
.login-wrapper .login-security-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: 12px;
  background: #eef2f8;
  font-family: var(--p-font);
}

.login-wrapper .notice-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--p-navy);
}

.login-wrapper .notice-heading {
  margin: 0 0 4px !important;
  color: var(--p-navy) !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.login-wrapper .notice-body {
  margin: 0 !important;
  color: var(--p-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

/* "Powered by Prospera", understated, with the approved wordmark. */
.login-wrapper .login-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0 !important;
  color: var(--p-muted);
  font: 500 12px / 1 var(--p-font);
}

.login-wrapper .login-powered img {
  display: block;
  width: auto;
  height: 24px;
}

.login-wrapper .login-card :focus-visible,
.login-wrapper .login-header :focus-visible,
.login-wrapper .login-card md-filled-button:focus-visible,
.login-wrapper .login-submit-button:focus-within {
  outline: 2px solid var(--p-navy) !important;
  outline-offset: 3px;
}

/* Short desktop/tablet screens: tighten spacing, keep controls reachable. */
@media (height <= 820px) and (width >= 801px) {
  .login-wrapper .hero-name,
  .login-wrapper .hero-kicker,
  .login-wrapper .hero-tagline {
    font-size: clamp(40px, 3.6vw, 60px) !important;
  }

  .login-wrapper .hero-values {
    margin-top: 20px;
  }

  .login-wrapper .hero-strap {
    margin-top: 12px;
  }

  .login-wrapper .login-card {
    padding: 28px 30px 20px !important;
  }

  .login-wrapper .login-card .logo-section {
    margin-bottom: 20px !important;
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .login-wrapper .logo-section::before {
    width: 60px;
    height: 60px;
  }

  .login-wrapper .login-welcome {
    margin-bottom: 16px !important;
  }

  .login-wrapper .login-secure-line {
    margin: 14px 0 12px !important;
  }

  .login-wrapper .login-powered {
    margin-top: 14px !important;
  }

  .login-wrapper .login-header {
    padding-top: 14px !important;
  }

  .login-wrapper .login-card-container {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }
}

@media (height <= 740px) and (width >= 1101px) {
  .login-wrapper .login-card {
    padding: 22px 28px 18px !important;
  }

  .login-wrapper .login-card .logo-section {
    margin-bottom: 16px !important;
  }

  .login-wrapper .hero-values {
    display: none;
  }
}

/* Tablet landscape and small laptops: the photograph stays, the extras go. */
@media (width <= 1100px) {
  .login-wrapper .hero-panel.hide-lt-lg {
    flex-basis: 48% !important;
    background-image: image-set(
      url("login/community-bright-960.webp") 1x,
      url("login/community-bright-hd.webp") 2x
    ) !important;
  }

  .login-wrapper .hero-motto,
  .login-wrapper .hero-values,
  .login-wrapper .hero-brand-text .hero-institution {
    display: none !important;
  }

  .login-wrapper .hero-brand-text {
    border-right: 0;
  }

  .login-wrapper .hero-branding-bottom {
    max-width: 100%;
  }

  .login-wrapper .hero-name,
  .login-wrapper .hero-kicker,
  .login-wrapper .hero-tagline {
    font-size: 40px !important;
  }

  .login-wrapper .login-card {
    padding: 30px 26px 22px !important;
  }
}

/* Portrait tablets retain a photographic banner. Phones start at the form. */
@media (width <= 800px) {
  .login-wrapper {
    flex-direction: column !important;
    height: 100dvh !important;
    overflow: hidden auto !important;
  }

  .login-wrapper .hero-panel.hide-lt-lg {
    flex: 0 0 230px !important;
    background-position: 65% 32% !important;
  }

  .login-wrapper .hero-panel.production-mode .hero-content {
    padding: 24px 32px !important;
    gap: 20px;
  }

  .login-wrapper .hero-crest {
    width: 44px;
    height: 44px;
  }

  .login-wrapper .hero-brand-row .hero-title-minimal {
    font-size: 20px !important;
  }

  .login-wrapper .hero-name,
  .login-wrapper .hero-kicker,
  .login-wrapper .hero-tagline {
    display: inline !important;
    font-size: 30px !important;
  }

  .login-wrapper .hero-name::before,
  .login-wrapper .hero-tagline::after,
  .login-wrapper .hero-strap {
    display: none !important;
  }

  .login-wrapper .hero-heading {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.25em;
    max-width: 370px;
    line-height: 1.15;
  }

  .login-wrapper .login-panel {
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .login-wrapper .login-header {
    padding: 16px 24px 0 !important;
  }

  .login-wrapper .login-card-container {
    justify-content: flex-start !important;
    padding: 12px 24px 32px !important;
  }

  .login-wrapper .login-card {
    max-width: 480px !important;
    padding: 30px !important;
  }
}

@media (width <= 600px) {
  .login-wrapper .hero-panel.hide-lt-lg {
    display: none !important;
    background-image: none !important;
  }

  .login-wrapper .login-header {
    padding: 16px 20px 0 !important;
  }

  .login-wrapper .login-card-container {
    padding: 12px 16px 24px !important;
  }

  .login-wrapper .login-card {
    padding: 28px 22px 24px !important;
    border-radius: 18px !important;
  }

  .login-wrapper .login-card .logo-section {
    margin-bottom: 28px !important;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
  }

  .login-wrapper .logo-section::before {
    width: 56px;
    height: 56px;
  }

  .login-wrapper .login-brand-name {
    font-size: 24px !important;
  }

  .login-wrapper .login-institution-compact {
    font-size: 9.5px !important;
  }

  .login-wrapper .login-welcome-title {
    font-size: 34px !important;
  }

  .login-wrapper .login-welcome-subtitle {
    font-size: 14px !important;
  }
}

/* stylelint-disable selector-max-universal -- Disable all inherited component motion on this route only. */
@media (prefers-reduced-motion: reduce) {
  .login-wrapper *,
  .login-wrapper *::before,
  .login-wrapper *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* stylelint-enable selector-max-universal */
@media (forced-colors: active) {
  .login-wrapper .login-card .mat-mdc-text-field-wrapper {
    border: 1px solid CanvasText;
  }
}

/* stylelint-disable no-duplicate-selectors -- a deliberate override block, kept whole so it can be reviewed and removed in one piece. */

/* ─────────────── Reference of 27 September 2026, 09:15 ───────────────
 * A brighter, simpler page: the photograph almost untouched, the crest and
 * name top left, "Redefining / Banking" in white under a gold rule; on the
 * right a plain bright panel with "Welcome back", labels above the fields,
 * a navy "Sign In", two quiet lines of notice and "Powered by Prospera".
 * Presentation only; the form and its behaviour are unchanged. This block
 * overrides the rules above it and can be removed whole to go back.
 */
.login-wrapper {
  --p-ivory: #fff;

  background: #fff !important;
}

/* The photograph, bright: navy only where the words sit. */
.login-wrapper .hero-panel.hide-lt-lg {
  flex-basis: 64% !important;
}

.login-wrapper .hero-panel .hero-overlay {
  background:
    linear-gradient(90deg, rgb(7 31 61 / 72%) 0%, rgb(7 31 61 / 38%) 20%, transparent 42%),
    linear-gradient(180deg, rgb(7 31 61 / 30%) 0%, transparent 16%, transparent 64%, rgb(7 31 61 / 40%) 100%) !important;
}

.login-wrapper .hero-motto,
.login-wrapper .hero-name,
.login-wrapper .hero-strap,
.login-wrapper .hero-values,
.login-wrapper .hero-tagline::after {
  display: none !important;
}

.login-wrapper .hero-brand-text {
  padding-right: 0;
  border-right: 0;
}

.login-wrapper .hero-crest {
  width: 84px;
  height: 84px;
}

.login-wrapper .hero-brand-row .hero-title-minimal {
  font: 700 32px / 1.1 var(--p-font) !important;
  letter-spacing: 0.01em !important;
}

.login-wrapper .hero-brand-row .hero-institution {
  max-width: 25ch;
  font: 500 15px / 1.4 var(--p-font) !important;
  letter-spacing: 0.02em;
}

.login-wrapper .hero-heading::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 26px;
  background: var(--p-gold);
}

.login-wrapper .hero-kicker,
.login-wrapper .hero-tagline {
  display: block !important;
  color: #fff !important;
  font: 600 clamp(52px, 4.6vw, 92px) / 1.02 var(--p-serif) !important;
  text-shadow: 0 2px 16px rgb(7 31 61 / 40%) !important;
}

/* The sign-in side: one bright panel, no card. */
.login-wrapper .login-panel {
  background: #fff !important;
}

.login-wrapper .login-card {
  max-width: 456px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.login-wrapper .login-card .logo-section,
.login-wrapper .login-welcome-subtitle,
.login-wrapper .login-secure-line {
  display: none !important;
}

.login-wrapper .login-welcome {
  margin: 0 0 34px !important;
}

.login-wrapper .login-welcome-title {
  font: 800 clamp(34px, 2.6vw, 46px) / 1.1 var(--p-font) !important;
  letter-spacing: -0.02em;
}

/* Labels above the boxes, as on paper; no asterisk. The field stays
   required, and the label stays the input's accessible name. */
.login-wrapper .login-card .mat-mdc-form-field {
  margin-top: 30px !important;
}

.login-wrapper .login-card .mat-mdc-text-field-wrapper {
  overflow: visible !important;
  min-height: 64px;
  border-radius: 8px !important;
}

.login-wrapper .login-card .mat-mdc-form-field-infix {
  padding: 20px 0 !important;
}

/* .login-field raises specificity above the form component's own
   `.login-field .mat-mdc-floating-label { left: 0 !important }`, which is
   injected after this stylesheet and would otherwise win. */
.login-wrapper .login-card .login-field .mat-mdc-floating-label {
  top: -12px !important;

  /* measured: the label box starts 51px right of the field's left edge */
  left: -51px !important;
  transform: translateY(-100%) !important;
  color: var(--p-ink) !important;
  font: 600 16px / 1.2 var(--p-font) !important;
}

.login-wrapper .login-card .mat-mdc-form-field-required-marker {
  display: none !important;
}

/* Focus is shown by the field itself (navy border and glow, rule above), so
   the input does not draw a second box inside it. Buttons keep their ring. */
.login-wrapper .login-card .mat-mdc-input-element:focus-visible {
  outline: none !important;
}

.login-wrapper .login-card .mat-focused .mat-mdc-text-field-wrapper {
  border-color: var(--p-navy) !important;
  box-shadow: 0 0 0 3px rgb(10 42 82 / 22%) !important;
}

.login-wrapper .login-submit-button {
  margin-top: 16px !important;
}

.login-wrapper .login-card md-filled-button {
  --md-filled-button-container-height: 60px;
  --md-filled-button-label-text-size: 18px;

  min-height: 60px;
}

/* The notice: two quiet centred lines. */
.login-wrapper .login-security-notice {
  display: block !important;
  margin-top: 28px !important;
  padding: 0 !important;
  background: none !important;
  text-align: center;
}

.login-wrapper .login-security-notice .notice-icon {
  display: none !important;
}

.login-wrapper .notice-heading,
.login-wrapper .notice-body {
  margin: 0 !important;
  color: var(--p-muted) !important;
  font: 400 15px / 1.6 var(--p-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* "Powered by Prospera" between two hairlines. */
.login-wrapper .login-powered {
  margin-top: 56px !important;
}

.login-wrapper .login-powered::before,
.login-wrapper .login-powered::after {
  content: "";
  flex: 0 1 64px;
  height: 1px;
  background: #d6dbe3;
}

@media (width <= 800px) {
  .login-wrapper .login-card {
    max-width: 520px !important;
    padding: 8px 4px 20px !important;
  }

  /* Phones get no photograph, so the crest and name stay on the form:
     a sign-in page must say whose it is. */
  .login-wrapper .login-card .logo-section {
    display: grid !important;
    margin-bottom: 24px !important;
  }

  .login-wrapper .hero-crest {
    width: 44px;
    height: 44px;
  }

  .login-wrapper .hero-brand-row .hero-title-minimal {
    font-size: 20px !important;
  }

  .login-wrapper .hero-brand-row .hero-institution {
    display: none !important;
  }

  .login-wrapper .hero-heading::before {
    display: none;
  }

  .login-wrapper .hero-kicker,
  .login-wrapper .hero-tagline {
    display: inline !important;
    font-size: 28px !important;
  }
}

/* stylelint-enable no-duplicate-selectors */