/* ==========================================================================
   E-deal 2025 Design System - Login pages (login.jsp, login_2fa.jsp)

   The login pages do not go through navigation/html_headers.jsp. They link
   tokens.css and the few design2027 component files they use (buttons,
   inputs, links, alerts) directly, then this file. This file only lays out
   the page: component styling stays in the component files. Every rule is
   scoped to body.login.
   ========================================================================== */

/* The checkbox check mark and the alert icons are Font Awesome glyphs. The
   page does not load the Font Awesome stylesheet, so declare the two faces
   used here. A face is only downloaded once a glyph is actually rendered. */
@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../../default/css/core/externalComponent/original/fontawesome/webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../../default/css/core/externalComponent/original/fontawesome/webfonts/fa-solid-900.woff2") format("woff2");
}

/* ── Page ───────────────────────────────────────────────────────────────── */

body.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: var(--space-8) var(--space-4) var(--space-3);
  background: linear-gradient(120deg, var(--color-blue-100) 0%, var(--color-white) 50%, var(--color-brand-100) 100%);
  background-attachment: fixed;
  font-family: var(--font-family-main);
  font-size: var(--text-size-p2);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}

body.login *,
body.login *::before,
body.login *::after {
  box-sizing: border-box;
}

body.login #header {
  flex-shrink: 0;
  width: 100%;
  height: 100px;
  margin-bottom: var(--space-8);
  /* Same logo size as the legacy login page. */
  background: url("../../default/images/core/layout/logo.svg") no-repeat center;
  background-size: auto 200px;
}

/* ── Columns ────────────────────────────────────────────────────────────── */

body.login .centerHeightPosition {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-6);
  width: 100%;
  max-width: 920px;
  /* Centred in the height left between the logo and the footer. */
  margin-block: auto;
}

body.login .slider {
  position: relative;
  flex: 0 1 420px;
  min-width: 0;
  padding: var(--space-6);
  border-radius: 16px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

body.login .slider.loginDisclaimer {
  flex: 0 1 476px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-200) transparent;
  font-size: var(--text-size-p2);
  line-height: var(--line-height-snug);
  text-align: center;
}

/* Admin content: a table (e.g. a list of users) reads one step smaller than the text. */
body.login .slider.loginDisclaimer table {
  margin: var(--space-2) auto;
  border-collapse: collapse;
  font-size: var(--text-size-p3);
  line-height: var(--line-height-tight);
}

body.login .slider.loginDisclaimer th,
body.login .slider.loginDisclaimer td {
  padding: var(--space-1) var(--space-2);
  font-size: inherit;
}

body.login .slider.loginDisclaimer p {
  margin: 0 0 var(--space-2);
}

body.login .slider.loginDisclaimer img {
  max-width: 100%;
  height: auto;
}

/* ── Form content ───────────────────────────────────────────────────────── */

body.login .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

body.login .login-title {
  margin: 0;
  font-size: var(--text-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-text);
}

body.login .login-subtitle {
  margin: 0;
  color: var(--color-text-secondary);
}

body.login form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

/* ed-input is worn by the native input itself: the component's flex layout is
   inert on an <input>, its padding, fill, radius and font carry over. */
body.login .ed-input {
  width: 100%;
  min-height: var(--btn-height-lg);
  margin: 0;
}

body.login .ed-checkbox {
  align-self: flex-start;
}

body.login .login-help {
  margin: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* ── Actions ────────────────────────────────────────────────────────────── */

body.login .login-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

body.login .login-actions .ed-btn {
  width: 100%;
}

body.login .login-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

body.login .login-links--centered {
  justify-content: center;
}

/* ── Messages ───────────────────────────────────────────────────────────── */

/* Message slots are always in the page, filled and emptied by the scripts: an
   alert none of whose .login-message elements holds text takes no room. */
body.login .ed-alert:not(:has(.login-message:not(:empty))) {
  display: none;
}

/* The page loads no Font Awesome stylesheet, so no fa-* class: the glyph comes from the alert type. */
body.login .ed-alert--error .ed-alert__icon::before {
  content: "\f06a"; /* FA circle-exclamation */
}

body.login .ed-alert--success .ed-alert__icon::before {
  content: "\f058"; /* FA circle-check */
}

/* ed-alert is a full-width banner with one line of text: inside a 420px card the message wraps,
   one line per message, and keeps clear of the right edge. */
body.login .ed-alert__content {
  padding-right: var(--space-4);
}

body.login .ed-alert__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  white-space: normal;
}

/* ── Please wait overlay ────────────────────────────────────────────────── */

body.login #pleaseWait {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

body.login .login-wait {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  transform: translateY(-50%);
  color: var(--color-text-secondary);
}

body.login .login-wait__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-gray-100);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: login-spin 0.8s linear infinite;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.login .login-wait__spinner {
    animation-duration: 2.4s;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* In the page flow, pushed to the bottom of the viewport by the cards' auto margins: content taller
   than the window pushes it down instead of running under it. */
body.login .footer {
  align-self: stretch;
  padding-top: var(--space-6);
  font-size: var(--text-size-p3);
  line-height: var(--line-height-tight);
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

body.login .login-footer-link {
  color: inherit;
  text-decoration: none;
}

body.login .login-footer-link:hover,
body.login .login-footer-link:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

/* ── Small screens ──────────────────────────────────────────────────────── */

/* Narrow or short screens (phone portrait and landscape, small or zoomed windows): compact header. */
@media screen and (max-width: 760px), screen and (max-height: 590px) {
  body.login {
    padding-top: var(--space-6);
  }

  body.login #header {
    height: 64px;
    margin-bottom: var(--space-4);
    background-size: auto 128px;
  }

  body.login .footer {
    justify-content: center;
    text-align: center;
  }
}

/* Narrow screens only: the two cards stack, at the login card's desktop width. */
@media screen and (max-width: 760px) {
  body.login .centerHeightPosition {
    flex-direction: column;
    align-items: center;
  }

  body.login .slider {
    flex: none;
    width: 100%;
    max-width: 420px;
  }

  body.login .slider.loginDisclaimer {
    max-height: none;
  }
}