/* ==========================================================================
   Login landing page (/) - layout + visual polish
   --------------------------------------------------------------------------
   Loaded by startup/login, forgotPassword and otpForm, after login.css
   (login.css is also used by pwdChangeForm, so it is left alone -
   everything here is scoped to .login_mainbg).

   Same logo, illustration and copy; brand colours taken from nsg-logo.svg.
   ========================================================================== */

:root {
  --lg-blue: #2574bb;
  --lg-blue-deep: #1a5a96;
  --lg-blue-ink: #123f6a;
  --lg-orange: #f36c21;
  --lg-ink: #1f2a37;
  --lg-muted: #5b6776;
  --lg-line: #dde3ea;
  --lg-field: #f4f7fa;
  --lg-panel: #eaf2fa;
  --lg-page: #f3f5f8;
  --lg-error-bg: #fdecea;
  --lg-error-ink: #9b1c12;
  --lg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

::selection {
  background: rgba(37, 116, 187, 0.18);
  color: var(--lg-ink);
}

body {
  height: auto;
  min-height: 100vh;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--lg-ink) !important;
  background: var(--lg-page);
  -webkit-font-smoothing: antialiased;
}

.login_mainbg {
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: center;
  padding: 40px 0;
  /* login.css points at a missing image; two quiet brand washes instead */
  background:
    radial-gradient(60rem 40rem at 0% 0%, rgba(37, 116, 187, 0.10), transparent 60%),
    radial-gradient(50rem 36rem at 100% 100%, rgba(243, 108, 33, 0.07), transparent 60%),
    var(--lg-page);
}

.login_mainbg > .container,
.login_mainbg > .container > .row {
  height: auto !important;
}

/* ---- Card ---------------------------------------------------------------- */

.login_mainbg .AppForm {
  width: 100%;
  max-width: 820px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(18, 63, 106, 0.06),
    0 12px 24px -8px rgba(18, 63, 106, 0.10),
    0 32px 64px -24px rgba(18, 63, 106, 0.18) !important;
}

.login_mainbg .AppForm > .row {
  margin: 0;
}

.login_mainbg .AppForm > .row > [class*="col-"] {
  padding: 0;
}

/* ---- Left: the form ------------------------------------------------------ */

.login_mainbg .AppFormLeft {
  width: 100%;
  max-width: 360px;
  padding: 32px 28px;
}

.login_mainbg .AppForm .AppFormLeft h1 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--lg-blue-ink);
  margin: 0 0 6px;
}

.login_mainbg .AppForm .AppFormLeft h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--lg-muted);
  margin: 0 0 22px;
}

/* Error from the server (wrong credentials, locked account...) */
.login_mainbg .errer_msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--lg-error-bg);
  color: var(--lg-error-ink);
  border: 1px solid #f6c9c4;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.login_mainbg .errer_msg::before {
  content: "\f06a"; /* fa-exclamation-circle */
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.3;
}

/* Fields: soft filled inputs, icon on the left */
.login_mainbg .AppFormLeft .form-group {
  margin-bottom: 12px !important;
}

.login_mainbg .AppForm .AppFormLeft .form-control {
  height: 46px;
  padding: 0 16px 0 46px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lg-ink);
  caret-color: var(--lg-blue);
  background: var(--lg-field);
  border: 1px solid var(--lg-line) !important;
  border-radius: 12px !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.login_mainbg .AppForm .AppFormLeft .form-control::placeholder {
  font-size: 15px;
  color: #6b7684;
  opacity: 1;
}

.login_mainbg .AppForm .AppFormLeft .form-control:hover {
  border-color: #c5cfda !important;
}

.login_mainbg .AppForm .AppFormLeft .form-control:focus {
  background: #fff;
  border-color: var(--lg-blue) !important;
  box-shadow: 0 0 0 4px rgba(37, 116, 187, 0.14) !important;
}

/* keep Chrome's autofill from painting the fields yellow/blue */
.login_mainbg .AppForm .AppFormLeft .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--lg-field) inset;
  -webkit-text-fill-color: var(--lg-ink);
}

.login_mainbg .AppForm .AppFormLeft .form-group i {
  left: 17px;
  right: auto;
  font-size: 16px;
  color: #8592a1;
  pointer-events: none;
  transition: color 160ms ease;
}

.login_mainbg .AppForm .AppFormLeft .form-group:focus-within i {
  color: var(--lg-blue);
}

/* Primary action */
.login_mainbg .AppFormLeft input[type="submit"],
.login_mainbg .AppFormLeft button[type="submit"] {
  height: 46px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--lg-blue) !important;
  border-radius: 12px;
  box-shadow: 0 8px 18px -8px rgba(37, 116, 187, 0.6) !important;
  transition: background-color 160ms ease, box-shadow 200ms ease, transform 120ms ease;
}

.login_mainbg .AppFormLeft input[type="submit"]:hover,
.login_mainbg .AppFormLeft button[type="submit"]:hover {
  background: var(--lg-blue-deep) !important;
  box-shadow: 0 12px 22px -10px rgba(26, 90, 150, 0.7) !important;
}

.login_mainbg .AppFormLeft input[type="submit"]:active,
.login_mainbg .AppFormLeft button[type="submit"]:active {
  transform: translateY(1px);
}

.login_mainbg .AppFormLeft input[type="submit"]:focus-visible,
.login_mainbg .AppFormLeft button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37, 116, 187, 0.28) !important;
}

.login_mainbg .AppFormLeft input[type="submit"]:disabled,
.login_mainbg .AppFormLeft button[type="submit"]:disabled {
  opacity: 0.75;
  cursor: progress;
}

/* Forgot Password - quiet secondary link under the button */
.login_mainbg .AppForm .AppFormLeft > a {
  display: block;
  width: max-content;
  margin: 14px 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--lg-blue);
  text-decoration: none;
  text-underline-offset: 3px;
  border-radius: 4px;
}

.login_mainbg .AppForm .AppFormLeft > a:hover {
  color: var(--lg-blue-deep);
  text-decoration: underline;
}

.login_mainbg .AppForm .AppFormLeft > a:focus-visible {
  outline: 2px solid var(--lg-blue);
  outline-offset: 3px;
}

/* ---- Right: brand panel -------------------------------------------------- */

.login_mainbg .AppForm .AppFormRight {
  height: 100%;
  min-height: 0;
  padding: 28px 28px 22px !important;
  border-left: 0;
  background:
    radial-gradient(28rem 20rem at 50% 105%, rgba(243, 108, 33, 0.10), transparent 70%),
    var(--lg-panel);
}

.login_mainbg .logo_login img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto; /* the img's height attribute would otherwise stretch it */
  margin: 0 auto 16px;
}

.login_mainbg .login_image img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto; /* keep the 452x361 aspect ratio */
  margin: 0 auto 12px;
  /* the illustration ships on white - let the panel colour show through */
  mix-blend-mode: multiply;
}

.login_mainbg .AppFormRight p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #4d6680;
}

/* ---- Phone / small tablet: brand on top, then the form ------------------ */

@media (max-width: 767.98px) {
  .login_mainbg {
    padding: 16px 0;
  }

  /* container padding + row negative margin left the card touching the edges */
  .login_mainbg > .container {
    padding: 0 16px;
  }

  .login_mainbg > .container > .row {
    margin: 0;
  }

  .login_mainbg .AppForm {
    border-radius: 16px;
  }

  .login_mainbg .AppForm > .row > .col-md-6:last-child {
    order: -1;
  }

  .login_mainbg .AppForm .AppFormRight {
    min-height: 0;
    padding: 28px 16px 22px !important;
    border-bottom: 1px solid #d6e3f0;
  }

  .login_mainbg .logo_login img {
    max-width: 190px;
    margin-bottom: 10px;
  }

  /* The illustration alone is taller than a phone screen; keep the form in view */
  .login_mainbg .login_image {
    display: none;
  }

  .login_mainbg .AppFormLeft {
    padding: 28px 20px 32px;
  }

  .login_mainbg .AppForm .AppFormLeft h1 {
    font-size: 30px;
  }

  .login_mainbg .AppForm .AppFormLeft h4 {
    font-size: 15px;
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   Entrance - one 5 second sequence
   --------------------------------------------------------------------------
   0.0s card rises      0.3s logo      0.5-1.4s form, top to bottom
   (usable from ~1.4s)  0.9-3.2s illustration unveils from the floor up
   2.6s domain          3.0-5.0s one light sweep across the Login button
   ========================================================================== */

@keyframes lgRise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes lgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lgUnveil {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(14px) scale(0.97); }
  40%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}

.login_mainbg .AppForm                   { animation: lgRise 900ms var(--lg-ease) both; }
.login_mainbg .logo_login                { animation: lgIn 800ms var(--lg-ease) 300ms both; }
.login_mainbg .AppFormLeft h1            { animation: lgIn 800ms var(--lg-ease) 500ms both; }
.login_mainbg .AppFormLeft h4            { animation: lgIn 800ms var(--lg-ease) 620ms both; }
.login_mainbg .AppFormLeft .errer_msg    { animation: lgIn 800ms var(--lg-ease) 700ms both; }
.login_mainbg .AppFormLeft .form-group:nth-of-type(1) { animation: lgIn 800ms var(--lg-ease) 760ms both; }
.login_mainbg .AppFormLeft .form-group:nth-of-type(2) { animation: lgIn 800ms var(--lg-ease) 860ms both; }
.login_mainbg .AppFormLeft input[type="submit"],
.login_mainbg .AppFormLeft button[type="submit"] { animation: lgIn 800ms var(--lg-ease) 960ms both; }
.login_mainbg .AppForm .AppFormLeft > a  { animation: lgIn 800ms var(--lg-ease) 1060ms both; }
/* on the img itself and 'backwards' only: a clip-path left on a wrapper would
   isolate it and break the multiply blend (white box behind the figures) */
.login_mainbg .login_image img           { animation: lgUnveil 2300ms var(--lg-ease) 900ms backwards; }
.login_mainbg .AppFormRight p            { animation: lgIn 1000ms var(--lg-ease) 2600ms both; }

/* the closing beat: a soft light passes over the button once (3.0s -> 5.0s) */
.login_mainbg .AppFormLeft form {
  position: relative;
}

.login_mainbg .AppFormLeft form::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  border-radius: 12px;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(100deg, transparent 0 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65% 100%) no-repeat;
  background-size: 40% 100%;
  opacity: 0;
  animation: lgSweepBg 2000ms cubic-bezier(0.45, 0, 0.2, 1) 3000ms both;
}

@keyframes lgSweepBg {
  0%   { opacity: 1; background-position: -60% 0; }
  90%  { opacity: 1; }
  100% { opacity: 0; background-position: 170% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .login_mainbg *,
  .login_mainbg .AppForm,
  .login_mainbg .AppFormLeft form::after {
    animation: none !important;
  }
}