/* =====================================================================
   HRKLIX Design System — Authentication screens (login / forgot password)
   ---------------------------------------------------------------------
   The approved mock (v3 AR and v3 EN) contains no auth screen, so this is
   DERIVED from the system's own primitives rather than copied:
     - the navy gradient + glow of the sidebar / drawer header
     - the .panel card (surface, --hx-radius-lg, --hx-shadow-card)
     - the 44px / 11px form controls from hrklix-forms.css
     - the orange gradient primary CTA
   ---------------------------------------------------------------------
   Applies to Modules/Membership/Account/AccountLogin.cshtml, which renders
   through _LayoutNoNavigation (body.no-navigation, #s-LoginPage).
   ===================================================================== */

/* ---------- page canvas ---------- */
body.no-navigation {
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(73, 179, 228, .16), transparent 62%),
    var(--hx-bg) !important;
  min-height: 100vh;
}
body#s-LoginPage .page-content,
body#s-ForgotPasswordPage .page-content,
body#s-ResetPasswordPage .page-content {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
}

/* ---------- the card ---------- */
#LoginPanel,
#ForgotPasswordPanel,
#ResetPasswordPanel {
  /* the view used to hard-code background-color:#640202 !important here */
  background: var(--hx-surface) !important;
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow-pop);
  overflow: hidden;
  padding: 0 !important;
}

/* ---------- navy header, same language as the drawer head ---------- */
.hx-auth-head {
  position: relative;
  overflow: hidden;
  padding: 26px 28px 22px;
  background: linear-gradient(150deg, var(--hx-navy), var(--hx-navy-3));
  color: #fff;
  text-align: center;
}
.hx-auth-head::after {
  content: "";
  position: absolute;
  inset-inline-start: -40px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(73, 179, 228, .25);
  pointer-events: none;
}
.hx-auth-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hx-auth-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hx-sky), #7ED0F0);
  color: var(--hx-navy-2);
  font-family: var(--hx-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  box-shadow: 0 8px 18px -6px rgba(73, 179, 228, .65);
}
.hx-auth-wordmark { text-align: start; line-height: 1.25; }
.hx-auth-wordmark strong {
  display: block;
  font-family: var(--hx-font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.hx-auth-wordmark span { font-size: 11px; color: #9FB0D6; font-weight: 500; }

/* company logo, when one is configured */
.hx-auth-logo {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 74px;
  margin: 0 auto 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---------- body ---------- */
#LoginPanel h3,
.hx-auth-title {
  position: relative;
  margin: 14px 0 0;
  font-family: var(--hx-font-display);
  font-size: 15px;
  font-weight: 700;
  color: #EAF0FC !important;
  letter-spacing: -.01em;
}
#LoginPanel .flex-layout > .s-Form,
#LoginPanel form,
#ForgotPasswordPanel form {
  padding: 0;
}
#LoginPanel .fieldset,
#ForgotPasswordPanel .fieldset {
  padding: 24px 28px 6px !important;
  border: none !important;
  background: transparent !important;
}
/* stack caption above editor — the auth card is narrow, and the design's
   form pattern is label-over-input (same as the drawer). */
#LoginPanel .s-Form .field,
#ForgotPasswordPanel .s-Form .field {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}
#LoginPanel .s-Form .caption,
#ForgotPasswordPanel .s-Form .caption {
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: start !important;
  padding: 0 0 7px !important;
  line-height: 1.4 !important;
  color: var(--hx-ink-2) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}
#LoginPanel .s-Form .editor,
#ForgotPasswordPanel .s-Form .editor {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
#LoginPanel .s-Form .vx,
#LoginPanel .s-Form .clear { display: none !important; }

/* ---------- primary CTA ---------- */
#LoginPanel .buttons,
#ForgotPasswordPanel .buttons {
  padding: 6px 28px 0;
  /* serenity.css/site.css ship `.buttons { margin-right: 28px }`, which made
     the CTA 28px narrower than the inputs above it. */
  margin: 0 !important;
  text-align: center !important;
}
#LoginPanel .buttons .btn,
#LoginPanel #LinkedGates_HR_Membership_LoginPanel0_LoginButton,
#ForgotPasswordPanel .buttons .btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 46px;
  border: none !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--hx-orange), #FF9A44) !important;
  color: #fff !important;
  font-family: var(--hx-font-ui);
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 22px -8px rgba(246, 133, 37, .55);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
#LoginPanel .buttons .btn:hover,
#ForgotPasswordPanel .buttons .btn:hover {
  background: linear-gradient(135deg, #EE7A18, var(--hx-orange)) !important;
  box-shadow: 0 12px 26px -8px rgba(246, 133, 37, .65);
}
#LoginPanel .buttons .btn:active { transform: translateY(1px); }

/* ---------- secondary actions ---------- */
#LoginPanel .actions,
#ForgotPasswordPanel .actions {
  padding: 14px 28px 24px;
  text-align: center;
}
#LoginPanel .actions a,
#ForgotPasswordPanel .actions a {
  /* `.actions a { float: right }` from serenity.css defeated the centred
     text-align on the parent. */
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--hx-sky-deep) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  border: none !important;
  padding: 6px;
  border-radius: var(--hx-radius-sm);
}
#LoginPanel .actions a:hover { color: var(--hx-navy) !important; background: var(--hx-surface-soft); }

/* ---------- alerts above the card ---------- */
body.no-navigation .alert {
  max-width: 440px;
  margin: 0 auto 14px;
  border-radius: var(--hx-radius-md);
  border: 1px solid var(--hx-line);
  box-shadow: var(--hx-shadow-card);
  font-size: 13px;
}

/* ---------- validation ---------- */
#LoginPanel .s-Form label.error {
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  padding: 6px 0 0 !important;
  float: none !important;
  overflow: visible !important;
  color: var(--hx-red) !important;
  font-size: 11.5px;
  font-weight: 600;
}

@media (max-width: 480px) {
  #LoginPanel { max-width: 100%; border-radius: var(--hx-radius-md); }
  #LoginPanel .fieldset { padding: 20px 18px 6px !important; }
  #LoginPanel .buttons, #LoginPanel .actions { padding-inline: 18px; }
}