/* =========================================================
   EHRplus login page

   A clone of the OpenMRS login (ehrplus-esm-clinical, esm-login-app/src/login/login.scss), so a clerk
   moving between OpenMRS, Odoo and SENAITE sees one product. Sizes follow the Carbon tokens OpenMRS
   uses; the font stays SENAITE's own. Loaded on the login view only, by the resources viewlet.
   ========================================================= */

/* The dark toolbar, the Plone footer and the empty viewlet rows belong to the logged-in app. The status
   message is moved into the card by login.js, so its row goes too. */
body.template-login > .mb-2,
body.template-login #senaite-toolbar,
body.template-login #portal-top,
body.template-login #portal-mainnavigation,
body.template-login #global_statusmessage,
body.template-login #viewlet-above-content,
body.template-login #portal-column-content > footer,
body.template-login #portal-footer-wrapper {
  display: none;
}

body.template-login {
  background: #f3f4f4;
}

body.template-login .wrapper,
body.template-login .container-fluid,
body.template-login #portal-column-content,
body.template-login #content {
  margin: 0;
  padding: 0;
}

body.template-login .container-fluid > .row {
  margin: 0;
}

/* The logged-in layout keeps 50px free on the right for the sidebar, which the login page has not got. */
body.template-login .wrapper > .container-fluid {
  width: 100%;
}

/* The card in the middle of the page, the credits under it, and the three health workers standing in the
   bottom-right corner. The page grows and scrolls when the window is short, so the top of the card is never
   cut off. */
.ehr-login {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  color: #161616;
  /* Hospital icons scattered and tilted across the page, faint enough that the card still leads. */
  background: url("login-pattern.svg") 0 0 / 60rem 60rem repeat #f3f4f4;
}

.ehr-login-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.ehr-login-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 23rem;
  padding: 2.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  background-color: #ffffff;
}

.ehr-login-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
  text-align: center;
}

/* Names the system, so support staff can tell the three login pages apart. */
.ehr-login .ehr-login-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1f5a6e;
}

.ehr-login h1.ehr-login-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
  letter-spacing: 0;
  color: #161616;
  text-wrap: balance;
}

.ehr-login-address {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.16px;
  color: #525252;
}

.ehr-login-logo {
  margin-top: 1.5rem;
}

.ehr-login-logo img {
  display: block;
  max-width: 14rem;
  max-height: 5rem;
  object-fit: contain;
}

[hidden].ehr-login-address,
[hidden].ehr-login-logo,
[hidden].ehr-login-menu,
[hidden].ehr-login-menu-languages {
  display: none;
}

/* ---- Kebab menu: Get help and the language picker, out of plain sight ---- */

.ehr-login-more {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.ehr-login-kebab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #525252;
  cursor: pointer;
}

.ehr-login-kebab svg {
  fill: currentColor;
}

.ehr-login-kebab:hover,
.ehr-login-kebab[aria-expanded="true"] {
  background-color: #e8e8e8;
  color: #161616;
}

.ehr-login-kebab:focus {
  outline: 2px solid #1f5a6e;
  outline-offset: -2px;
}

.ehr-login-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 13rem;
  padding: 0.25rem 0;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ehr-login-menu a {
  display: block;
  padding: 0.6875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.125rem;
  letter-spacing: 0.16px;
  color: #161616;
  text-decoration: none;
  white-space: nowrap;
}

.ehr-login-menu a:hover {
  background-color: #e8e8e8;
  color: #161616;
  text-decoration: none;
}

.ehr-login-menu a:focus {
  outline: 2px solid #1f5a6e;
  outline-offset: -2px;
}

.ehr-login-menu-languages {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #e0e0e0;
}

.ehr-login-menu a[aria-current="true"] {
  font-weight: 600;
}

.ehr-login-menu a[aria-current="true"]::after {
  content: "\2713";
  float: right;
  margin-left: 1rem;
  color: #1f5a6e;
}

/* ---- Messages: the failed-login alert, the cookie warning and form errors ---- */

.ehr-login-messages .alert,
.ehr-login-messages .portalMessage {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0.9375rem 2.5rem 0.9375rem 0.8125rem;
  border: 0;
  border-left: 3px solid #da1e28;
  border-radius: 0;
  background-color: #fff1f1;
  font-size: 0.875rem;
  line-height: 1.125rem;
  letter-spacing: 0.16px;
  color: #161616;
}

.ehr-login-messages .alert-info,
.ehr-login-messages .alert-success {
  border-left-color: #24a148;
  background-color: #defbe6;
}

.ehr-login-messages .alert .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 1.25rem;
  opacity: 0.8;
}

/* ---- Fields ---- */

.ehr-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ehr-login-field label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0.32px;
  color: #525252;
}

.ehr-login-input {
  position: relative;
}

.ehr-login .ehr-login-input input.form-control {
  box-sizing: border-box;
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-bottom: 1px solid #8d8d8d;
  border-radius: 0;
  background-color: #f4f4f4;
  box-shadow: none;
  font-size: 0.875rem;
  line-height: 1.125rem;
  letter-spacing: 0.16px;
  color: #161616;
}

.ehr-login .ehr-login-input input.form-control:focus {
  outline: 2px solid #1f5a6e;
  outline-offset: -2px;
  background-color: #f4f4f4;
  box-shadow: none;
}

.ehr-login .ehr-login-input.has-eye input.form-control {
  padding-right: 2.5rem;
}

.ehr-login .ehr-login-field.error input.form-control {
  outline: 2px solid #da1e28;
  outline-offset: -2px;
}

.ehr-login-field-error {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.32px;
  color: #da1e28;
}

.ehr-login-eye {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #161616;
  cursor: pointer;
}

.ehr-login-eye svg {
  fill: currentColor;
}

.ehr-login-eye:focus {
  outline: 2px solid #1f5a6e;
  outline-offset: -2px;
}

.ehr-login-eye .ehr-login-eye-hide,
.ehr-login-eye[aria-pressed="true"] .ehr-login-eye-show {
  display: none;
}

.ehr-login-eye[aria-pressed="true"] .ehr-login-eye-hide {
  display: block;
}

/* ---- Log in button: the header petrol, full width, label left and arrow right ---- */

.ehr-login .formControls {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.ehr-login .formControls #buttons-login {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px;
  border: 1px solid transparent;
  border-radius: 0;
  /* Carbon's arrow--right, drawn at 16px, 16px in from the right edge. */
  background: #1f5a6e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10L18 6z'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem 1rem;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.28572;
  letter-spacing: 0.16px;
  text-align: left;
  color: #ffffff;
  cursor: pointer;
}

.ehr-login .formControls #buttons-login:hover {
  background-color: #184a5b;
}

.ehr-login .formControls #buttons-login:focus {
  border-color: #1f5a6e;
  outline: none;
  box-shadow: inset 0 0 0 1px #1f5a6e, inset 0 0 0 2px #ffffff;
}

/* ---- Art and credits ---- */

/* The artwork is cut at the waist, so it stands on the bottom edge of the page, clear of the card and credits. */
.ehr-login-art {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: min(28rem, 30vw, 45vh);
  height: auto;
}

.ehr-login-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  /* Plain ground behind the credits, so no pattern icon sits under the logos. */
  background-color: #f3f4f4;
}

.ehr-login-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ehr-login-credit p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.32px;
  color: #525252;
}

/* The wordmark is solid letters, so it is drawn a little smaller than the OpenMRS mark to weigh the same. */
.ehr-login-credit-senaite {
  display: block;
  width: 6rem;
  height: 2rem;
  color: #525252;
}

.ehr-login-credit-partner {
  display: block;
  width: auto;
  height: 3rem;
}

/* Below this width the art no longer fits beside the card, so it moves under the credits. */
@media (max-width: 960px) {
  .ehr-login-art {
    position: static;
    order: 1;
    align-self: center;
    width: 12rem;
  }
}

@media (max-width: 480px) {
  .ehr-login-container {
    justify-content: flex-start;
    padding: 1rem;
  }

  .ehr-login-card {
    padding: 1.5rem;
  }

  /* The narrower card padding would let a long hospital name run under the kebab button. */
  .ehr-login-head {
    padding: 0 1rem;
  }
}