/* Final login contrast layer: keep every interactive and informational element legible. */
@media screen {
  body.login-page {
    min-height: 100svh !important;
    color: #102a18 !important;
    background: var(--erp-theme-page, #f4faf5) !important;
  }

  body.login-page .login-layout {
    align-items: stretch;
  }

  body.login-page .login-hero {
    border: 1px solid var(--erp-theme-deep, #006b31) !important;
    background: linear-gradient(150deg, var(--erp-theme-deep, #005c2b) 0%, var(--erp-theme-primary, #006b31) 60%, var(--erp-theme-deep, #004b22) 100%) !important;
    color: #ffffff !important;
  }

  body.login-page .login-hero :where(a, strong, small, h1, h2, h3, p, span, li, header) {
    color: #ffffff !important;
  }

  body.login-page .login-hero .login-copy .eyebrow {
    border-color: rgba(255, 255, 255, .28) !important;
    background: rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
  }

  body.login-page .login-hero .login-feature-map article {
    border: 1px solid rgba(255, 255, 255, .20) !important;
    background: rgba(var(--erp-theme-focus, 0, 54, 23), .28) !important;
    box-shadow: none !important;
  }

  body.login-page .login-feature-map header .icon,
  body.login-page .login-feature-map li::before {
    color: var(--erp-theme-primary, #b8ff75) !important;
  }

  body.login-page .login-card {
    border: 1px solid var(--erp-theme-line, #cfe5d5) !important;
    background: #ffffff !important;
    color: #102a18 !important;
    box-shadow: 0 18px 42px rgba(var(--erp-theme-focus, 0, 75, 34), .14) !important;
  }

  body.login-page .login-card :where(h1, h2, h3, strong, label) {
    color: #102a18 !important;
  }

  body.login-page .login-card :where(p, small, .field-hint) {
    color: #4a6553 !important;
  }

  body.login-page .login-icon {
    background: var(--erp-theme-primary, #007a39) !important;
    box-shadow: 0 10px 20px rgba(var(--erp-theme-focus, 0, 122, 57), .20) !important;
  }

  body.login-page .input-shell {
    border: 1px solid var(--erp-theme-line, #b8d7c1) !important;
    background: #f8fcf9 !important;
  }

  body.login-page .input-shell:focus-within {
    border-color: var(--erp-theme-primary, #007a39) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(var(--erp-theme-focus, 0, 122, 57), .15) !important;
  }

  body.login-page .input-shell .icon {
    color: var(--erp-theme-primary, #007a39) !important;
  }

  body.login-page .input-shell input {
    color: #102a18 !important;
    caret-color: var(--erp-theme-primary, #007a39);
  }

  body.login-page .input-shell input::placeholder {
    color: #6b8073 !important;
    opacity: 1;
  }

  body.login-page .login-options .check,
  body.login-page .login-options a {
    color: var(--erp-theme-deep, #075f2e) !important;
  }

  body.login-page .login-submit,
  body.login-page .login-app-download {
    border-color: var(--erp-theme-primary, #006b31) !important;
    background: var(--erp-theme-primary, #007a39) !important;
    background-image: none !important;
    color: var(--erp-theme-on-primary, #ffffff) !important;
  }

  body.login-page .login-submit :where(span, strong, small, .icon),
  body.login-page .login-app-download :where(span, strong, small, .icon) {
    color: #ffffff !important;
  }

  body.login-page .login-submit:hover,
  body.login-page .login-submit:focus-visible,
  body.login-page .login-app-download:hover,
  body.login-page .login-app-download:focus-visible {
    border-color: var(--erp-theme-deep, #004b22) !important;
    background: var(--erp-theme-deep, #005c2b) !important;
  }

  body.login-page .login-footnote {
    border-color: var(--erp-theme-line, #d9e9dd) !important;
  }

  body.login-page .login-footnote span,
  body.login-page .login-footnote .icon {
    color: #476350 !important;
  }

  body.login-page .alert.danger {
    border-color: #efb2b2 !important;
    background: #fff5f5 !important;
    color: #9b1c1c !important;
  }

  body.login-page .login-footer {
    border-color: var(--erp-theme-line, #cfe5d5) !important;
    background: #ffffff !important;
    color: #31513b !important;
  }

  body.login-page .login-footer :where(span, b, a) {
    color: inherit !important;
  }

  body.login-page .login-footer a {
    color: var(--erp-theme-deep, #006b31) !important;
    font-weight: 800;
  }

  @media (max-width: 620px) {
    body.login-page { padding: 8px !important; }
    body.login-page .login-card, body.login-page .login-hero { border-radius: 15px !important; }
    body.login-page .login-copy h1 { font-size: 1.38rem !important; }
    body.login-page .login-feature-map { gap: 7px !important; }
    body.login-page .login-footer { gap: 5px !important; font-size: .66rem !important; }
  }
}

/* Keep the complete sign-in journey scrollable on narrow phone viewports.
   The desktop footer remains fixed, but a fixed multi-line footer on a phone
   can obscure the form and the mobile-app links. */
@media screen and (max-width: 640px) {
  body.login-page {
    display: block !important;
    min-width: 0 !important;
    padding: 8px !important;
    padding-bottom: 8px !important;
  }

  body.login-page .login-layout {
    display: grid !important;
    gap: 10px !important;
    margin: 0 auto !important;
    max-width: 460px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* On a phone, sign-in takes priority over the desktop feature catalogue. */
  body.login-page .login-hero {
    display: grid !important;
    gap: 8px !important;
    order: 1 !important;
    padding: 14px !important;
  }

  body.login-page .login-brand {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.login-page .login-brand .brand-mark {
    height: 38px !important;
    width: 38px !important;
  }

  body.login-page .login-copy {
    padding-top: 0 !important;
  }

  body.login-page .login-copy h1 {
    font-size: clamp(1.28rem, 6vw, 1.55rem) !important;
    line-height: 1.12 !important;
    margin: 7px 0 5px !important;
  }

  body.login-page .login-copy p {
    font-size: .73rem !important;
    line-height: 1.42 !important;
  }

  body.login-page .login-copy .eyebrow {
    min-height: 24px !important;
    padding: 4px 7px !important;
  }

  body.login-page .login-feature-map {
    display: none !important;
  }

  body.login-page .login-card {
    order: 2 !important;
    padding: 14px !important;
  }

  body.login-page .login-card-head {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    margin-bottom: 10px !important;
  }

  body.login-page .login-icon {
    height: 40px !important;
    width: 40px !important;
  }

  body.login-page .login-options {
    gap: 7px !important;
  }

  body.login-page .login-footnote {
    display: none !important;
  }

  body.login-page .login-footer,
  body.login-page .app-footer {
    display: grid !important;
    gap: 5px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    margin: 10px 0 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    position: static !important;
    width: 100% !important;
  }

  body.login-page .login-footer :where(.login-footer-brand, span, a) {
    justify-content: center !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
  }
}