/* Account access uses the same blue, type and compact actions as the client panel. */
.login-page,
.auth-page {
  --bs-link-color-rgb: 23, 92, 211;
  --bs-link-hover-color-rgb: 18, 74, 168;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  color: #111827;
  background-color: #f5f7fc !important;
}

.login-page header a,
.auth-page header a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-underline-offset: .2em;
}

.login-workspace {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(2rem, 6vh, 5rem);
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  max-width: 56rem;
  width: 100%;
  border: 1px solid #cdd9eb;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 5px 5px 0 #dce5f3;
}

.login-visual {
  position: relative;
  min-width: 0;
  background: #175cd3;
}

.login-visual img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.login-panel {
  width: 100%;
  min-width: 0;
  background: #fff;
}

/* Password recovery and other account screens remain compact. */
.auth-page .login-panel {
  width: calc(100% - 2rem);
  max-width: 30rem;
  margin-inline: auto;
  border: 1px solid #cdd9eb;
  border-top: 4px solid #175cd3;
  border-radius: 1rem;
}

.login-heading {
  padding: 2rem 2rem 0;
}

.login-page h1,
.auth-page h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: -.035em;
  margin-bottom: .75rem;
}

.login-form {
  padding: 1.5rem 2rem;
}

.login-provider {
  margin: 0 2rem 1.5rem;
}

.login-page .form-control,
.auth-page .form-control {
  min-height: 48px;
  border-color: #bdcada;
  border-radius: .65rem;
  font-size: 1rem;
}

.login-page .form-control:focus,
.auth-page .form-control:focus {
  border-color: #175cd3;
  box-shadow: 0 0 0 .2rem rgb(23 92 211 / 12%);
}

.login-page .btn,
.auth-page .btn {
  min-height: 44px;
  border-radius: .7rem;
  padding: .7rem 1rem;
  font-weight: 650;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.login-page .btn-primary,
.auth-page .btn-primary {
  --bs-btn-bg: #175cd3;
  --bs-btn-border-color: #111827;
  --bs-btn-hover-bg: #124aa8;
  --bs-btn-hover-border-color: #111827;
  --bs-btn-active-bg: #124aa8;
  --bs-btn-active-border-color: #111827;
  box-shadow: 2px 2px 0 #111827;
}

.login-page .btn-primary:hover:not(:disabled),
.auth-page .btn-primary:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #111827;
}

.login-page .btn-primary:active:not(:disabled),
.auth-page .btn-primary:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.login-page :focus-visible,
.auth-page :focus-visible {
  outline: 3px solid #175cd3;
  outline-offset: 3px;
}

.login-password {
  position: relative;
}

.login-password:has(.password-toggle:not([hidden])) .form-control {
  padding-right: 5.5rem;
}

.password-toggle {
  position: absolute;
  right: .25rem;
  top: .125rem;
  min-height: 44px;
  min-width: 4.75rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: #175cd3;
  font-size: .8rem;
  font-weight: 600;
}

.password-toggle:hover {
  background: #eef4ff;
}

.login-page .form-check-label {
  padding-block: .25rem;
  cursor: pointer;
}

.login-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.25rem 2rem;
  border-top: 1px solid #d8e1ed;
  background: #f7faff;
  font-size: .8125rem;
}

.login-help a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: .2em;
}

@media (max-width: 767.98px) {
  .login-layout {
    max-width: 30rem;
    grid-template-columns: minmax(0, 1fr);
    border-top: 4px solid #175cd3;
  }

  .login-visual {
    display: none;
  }

  .login-workspace {
    align-items: flex-start;
  }

  .login-heading {
    padding: 1.5rem 1.25rem 0;
  }

  .login-form {
    padding: 1.5rem 1.25rem;
  }

  .login-provider {
    margin-inline: 1.25rem;
  }

  .login-help {
    padding: 1rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .login-page .btn,
  .auth-page .btn {
    transition: none;
  }

  .login-page .btn-primary:hover:not(:disabled),
  .login-page .btn-primary:active:not(:disabled),
  .auth-page .btn-primary:hover:not(:disabled),
  .auth-page .btn-primary:active:not(:disabled) {
    transform: none;
  }
}