/* ============================================================================
   MGS Login - 2026 design system
   ----------------------------------------------------------------------------
   Loaded by Bare.Master ONLY when all three hold (see Bare.master.cs
   UseMgsLoginSkin): the "LoginSkin" system setting is "mgs", the request is one
   of the sign-in flow screens (login / forgot- / reset- / change-password), and
   the Hyundai EDGE custom-CSS path is NOT active. dashboard_spark shares the
   same master and is deliberately excluded. Because the file is conditional,
   plain selectors are safe - nothing here can reach the original login.

   Loaded after spark_mdf_login.css, so equal-specificity rules win over it.

   These screens are PRE-AUTH: no account theme is resolved, so no --color-*
   variables exist. MGS brand values are therefore written literally rather than
   via var() - the login is always MGS-branded, never dealer-themed.

   Composition (per the supplied design): Blue Slate hero on the left carrying
   the MGS wordmark, the brand tagline, a two-part product panel for MGS Retain
   and MGS Target, and the MGS Hub family line; sign-in card on a Cool Grey
   field to the right.

   Marks come from the official logo pack in ../img/mgs/ - the MGS wordmark uses
   the AMBER-accent variant, because the navy-accent one loses its segment
   against this slate panel. Product panels use the full supplied lockups; the
   straplines beneath them are live text in DM Sans.

   Presentation only: no server control IDs, names or behaviour are touched.
   ========================================================================== */

/* ---- Self-hosted brand fonts (same faces the app skin uses) ---------------- */
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/mgs/PlusJakartaSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/mgs/PlusJakartaSans-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/mgs/PlusJakartaSans-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/mgs/PlusJakartaSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/mgs/DMSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/mgs/DMSans-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/mgs/DMSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* ---- Page: Cool Grey field (the legacy sphere.jpg background is dropped) --- */
body{
  background-image:none;
  background-color:#eceef3;
  color:#1d2231;
  font-family:'DM Sans', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  min-height:100vh;
}

/* The original logo sits top-right of the old dark layout; the hero carries the
   brand now, so it is retired here (the element itself is left untouched). */
.login-logo, .hyundai-brand{ display:none; }

/* ---- Hero: fixed Blue Slate panel on the left ----------------------------- */
.mgs-login-hero{
  position:fixed; top:0; left:0; bottom:0; width:46%;
  z-index:0;
  box-sizing:border-box;
  padding:44px 44px 36px;
  background:#1d2231;
  display:flex; flex-direction:column;
  overflow:auto;
}
.mgs-login-hero-logo{
  display:block; width:104px; height:37px; flex:0 0 auto;
  background:url('../img/mgs/mgs-logo-white.png') no-repeat left center;
  background-size:contain;
}
/* Tagline is the brand line, used verbatim, one clause per line as designed. */
.mgs-login-hero-tagline{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:700; font-size:23px; line-height:1.45;
  color:#ffffff; margin:26px 0 0;
}

/* ---- Product panel: MGS Retain over MGS Target ----------------------------
   One rounded card split into two halves, each in its product's colour with the
   mark repeated large and faint as a watermark. This is the sanctioned use of a
   product colour: labelling the product's own area. */
.mgs-login-products{
  margin:30px 0 0; flex:0 0 auto;
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
.mgs-login-product{
  position:relative;
  padding:24px 24px 22px;
  min-height:186px;
  display:flex; flex-direction:column; align-items:flex-start;
  overflow:hidden;
}
.mgs-login-product-retain{ background:linear-gradient(135deg,#12525e 0%,#183744 60%,#1b2c39 100%); }
.mgs-login-product-target{ background:linear-gradient(135deg,#48239e 0%,#3a1d80 60%,#2f1a68 100%); }

/* Oversized watermark of the product mark, bleeding off the right edge. */
.mgs-login-product::after{
  content:''; position:absolute; top:50%; right:-56px;
  width:230px; height:230px; transform:translateY(-50%);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.09; pointer-events:none;
}
.mgs-login-product-retain::after{ background-image:url('../img/mgs/retain-icon-white.png'); }
.mgs-login-product-target::after{ background-image:url('../img/mgs/target-icon-white.png'); }

/* The full supplied product lockup (mark over wording) rather than a mark plus typeset text.
   Sized as a fixed box with background-size:contain. Both lockups were trimmed to their ink
   and share an identical source WIDTH, so an equal box width renders them at an equal scale;
   the box is tall enough for the taller of the two, and contain letterboxes the difference.
   (Deliberately NOT the padding-top ratio trick: percentage padding resolves against the
   PARENT's width, so on a wide panel it produced a box hundreds of pixels tall that pushed
   the strapline out of the panel entirely.) flex:0 0 auto stops the column flex layout from
   shrinking the box and clipping the wording. */
.mgs-login-product-mark{
  position:relative; z-index:1;
  display:block; flex:0 0 auto;
  width:72px; height:110px;
  background-repeat:no-repeat; background-position:left top; background-size:contain;
}
.mgs-login-product-retain .mgs-login-product-mark{ background-image:url('../img/mgs/retain-logo-white.png'); }
.mgs-login-product-target .mgs-login-product-mark{ background-image:url('../img/mgs/target-logo-white.png'); }
.mgs-login-product-line{
  position:relative; z-index:1; flex:0 0 auto;
  display:block; margin-top:auto; padding-top:20px;
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:14px; line-height:1.4; color:rgba(255,255,255,.86);
}

/* ---- Hub family line ------------------------------------------------------ */
.mgs-login-hero-family{
  display:flex; align-items:center; gap:12px;
  margin:26px 0 0; flex:0 0 auto;
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:13px; color:rgba(255,255,255,.66);
}
.mgs-login-hero-family-mark{
  display:block; width:26px; height:26px; flex:0 0 auto;
  background:url('../img/mgs/hub-icon-white.png') no-repeat center; background-size:contain;
  opacity:.9;
}

/* ---- Form side: sign-in card centred on the Cool Grey field --------------- */
.container-fluid{
  position:relative; z-index:1;
  box-sizing:border-box;
  margin-left:46%;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 40px;
}
/* Only the outer row - the button rows inside the card must keep Bootstrap's grid. */
.container-fluid > .row{ width:100%; max-width:780px; margin:0; }

/* Neutralise the legacy column offsets and the 260px top padding of the dark layout. */
.loginForm{
  float:none; width:100%; max-width:none;
  margin:0; padding:50px 56px 46px;
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(29,34,49,.10);
  color:#1d2231;
}
.loginForm h1{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:700; font-size:27px; line-height:1.25;
  color:#1d2231; margin:0 0 5px;
}
/* Subtitle under the heading (login page only - the other screens omit it). */
.mgs-login-sub{
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:13.5px; color:#6b7280; margin:0 0 26px;
}
.loginForm h1 + .form-group{ margin-top:28px; }

/* Labels + fields */
/* spark_mdf_login.css pushes these to 18px at >=768px via .loginForm .form-group-lg
   .control-label, which outranks a two-class selector - hence the fuller selector here. */
.loginForm .control-label,
.loginForm .form-group-lg .control-label{
  font-family:'DM Sans', system-ui, sans-serif; font-weight:500;
  font-size:14px; line-height:1.3; color:#1d2231; margin-bottom:8px;
}
.loginForm .form-group{ margin-bottom:22px; }
.loginForm .form-control,
.loginForm .form-group-lg .form-control{
  height:48px; padding:11px 15px;
  font-family:'DM Sans', system-ui, sans-serif; font-size:15px;
  color:#1d2231; background-color:#ffffff;
  border:1px solid #dfe3ea; border-radius:8px; box-shadow:none;
}
.loginForm .form-control:focus{
  border-color:#1d2231;
  box-shadow:0 0 0 3px rgba(233,170,68,.45);
  outline:none;
}
.loginForm .form-control::-ms-input-placeholder{ color:#9aa1ad; }
.loginForm .form-control::placeholder{ color:#9aa1ad; }

/* "Forgot your password?" - amber, the one accent on this side. */
.loginForm .help-block{ margin:9px 0 0; }
.loginForm .help-block a{
  font-size:14px; color:#b5801f; text-decoration:underline;
}
.loginForm .help-block a:hover,
.loginForm .help-block a:focus{ color:#8f6416; }

/* ---- Buttons ----------------------------------------------------------------
   One amber CTA (Login); the secondary destinations take the outline treatment.
   Natural widths in a single row rather than Bootstrap's equal columns. */
.loginForm .row{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; }
.loginForm .row > [class*='col-']{
  width:auto; float:none; padding:0; margin:0;
}
.loginForm .btn,
.loginForm .btn-lg{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600;
  width:auto; height:46px; padding:0 22px; font-size:15px; line-height:44px;
  border-radius:8px; border:1px solid transparent;
  transition:background-color 150ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1);
}
.loginForm .btn-primary{ background-color:#e9aa44; border-color:#e9aa44; color:#1d2231; }
.loginForm .btn-primary:hover,
.loginForm .btn-primary:focus,
.loginForm .btn-primary:active{ background-color:#d9922e; border-color:#d9922e; color:#1d2231; box-shadow:0 4px 10px rgba(29,34,49,.12); }
.loginForm .btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(233,170,68,.45); }

.loginForm [id$='btnDashboard'],
.loginForm [id$='btnDashboard2'],
.loginForm [id$='btnCampaignBuilder2']{
  background-color:#ffffff; border-color:#d3d8e2; color:#1d2231;
}
.loginForm [id$='btnDashboard']:hover,
.loginForm [id$='btnDashboard2']:hover,
.loginForm [id$='btnCampaignBuilder2']:hover,
.loginForm [id$='btnDashboard']:focus,
.loginForm [id$='btnDashboard2']:focus,
.loginForm [id$='btnCampaignBuilder2']:focus{
  background-color:#1d2231; border-color:#1d2231; color:#ffffff;
}

/* ---- Signing-in state -------------------------------------------------------
   While a sign-in postback is in flight the clicked action shows a spinner and the
   whole button row stops responding, so the user gets feedback and cannot fire a
   second submit. The button is deliberately NOT disabled: disabling an
   <input type="submit"> before its postback can stop the server-side Click event
   firing at all, so the guard is pointer-events plus a flag in script instead.
   The label is kept in place but transparent, so the button does not change width. */
/* Idle buttons while signing in. NOT opacity: all three buttons carry .btn-primary and the
   secondary two are restyled to white outlines, so fading them simply makes them disappear
   against the white card. They are dimmed with explicit muted fills per variant instead, so
   the row stays legible while it is inactive. */
.mgs-login-busy .loginForm .btn{ pointer-events:none; cursor:default; }
.mgs-login-busy .loginForm .btn-primary{
  background-color:#f2ddb4; border-color:#f2ddb4; color:#9c8a63;
}
.mgs-login-busy .loginForm .btn[id$='btnDashboard'],
.mgs-login-busy .loginForm .btn[id$='btnDashboard2'],
.mgs-login-busy .loginForm .btn[id$='btnCampaignBuilder2']{
  background-color:#f4f6f9; border-color:#e3e7ee; color:#a8aeba;
}
/* The button actually being submitted keeps its full colour; only its label is hidden so the
   spinner can sit in its place without the button changing width. */
.mgs-login-busy .loginForm .btn.mgs-btn-busy{ color:transparent; }
.mgs-login-busy .loginForm .btn-primary.mgs-btn-busy{ background-color:#e9aa44; border-color:#e9aa44; }
.mgs-login-busy .loginForm .btn.mgs-btn-busy[id$='btnDashboard'],
.mgs-login-busy .loginForm .btn.mgs-btn-busy[id$='btnDashboard2'],
.mgs-login-busy .loginForm .btn.mgs-btn-busy[id$='btnCampaignBuilder2']{
  background-color:#ffffff; border-color:#d3d8e2;
}
/* The spinner is a REAL element injected into the button's wrapper, not generated content:
   <asp:Button> renders an <input type="submit">, and input elements cannot host
   ::before/::after at all. A real span also renders identically for every button rather
   than depending on pseudo-element support. The wrapper shrink-wraps the button here, so
   centring within it centres over the button. */
.loginForm .mgs-btn-busy-host{ position:relative; }
.loginForm .mgs-btn-spinner{
  position:absolute; top:50%; left:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid rgba(29,34,49,.25);
  border-top-color:#1d2231;
  border-radius:50%;
  animation:mgs-login-spin .7s linear infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes mgs-login-spin{ to{ transform:rotate(360deg); } }
/* Respect a reduced-motion preference: keep the indicator, drop the fast spin. */
@media (prefers-reduced-motion: reduce){
  .loginForm .mgs-btn-spinner{ animation-duration:2.4s; }
}

/* ---- Prose inside the card (the error page shares this chrome) --------------
   Error.aspx uses the same .container-fluid > .row > .loginForm structure as the sign-in
   screens, so it picks up the card, the hero and the type automatically - but it is mostly
   running text rather than form controls, which the rules above do not cover. */
.loginForm h4{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:600; font-size:16px; line-height:1.4;
  color:#1d2231; margin:24px 0 10px;
}
.loginForm p{
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:14px; line-height:1.6; color:#4b5563; margin:0 0 14px;
}
.loginForm ol, .loginForm ul{
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:14px; line-height:1.6; color:#4b5563;
  margin:0 0 16px; padding-left:20px;
}
.loginForm li{ margin-bottom:6px; }
.loginForm p a, .loginForm li a{ color:#b5801f; text-decoration:underline; }
.loginForm p a:hover, .loginForm li a:hover{ color:#8f6416; }
/* The error page's action is an anchor with .btn-block; keep it a normal-width button
   like the sign-in actions rather than a full-width bar. */
.loginForm p > .btn{ display:inline-block; margin-top:6px; }

/* ---- Alerts (ErrorSuccessMessage) ------------------------------------------ */
.loginForm .alert{ border:none; border-radius:8px; font-size:14px; padding:10px 14px; }
.loginForm .alert-danger{ background-color:#fcebeb; color:#a32c2c; }
.loginForm .alert-success{ background-color:#e7f7ef; color:#0f7a4a; }
.loginForm .alert-info{ background-color:#e9f1fb; color:#1f548f; }
.loginForm .alert-warning{ background-color:#fdf3e2; color:#9a5e06; }

/* The CSS-toggle test checkbox: keep it out of the card, quiet and corner-pinned. */
#CSSToggle{
  position:fixed; right:16px; bottom:12px; z-index:2;
  font-size:12px; color:#6b7280;
}

/* ---- Narrow screens: hero becomes a compact band above the card ----------- */
/* Mid widths: the hero column narrows before the layout stacks, so ease the lockup and
   tagline down rather than letting the panel crowd. */
@media (max-width: 1280px){
  .mgs-login-hero{ padding:36px 32px 30px; }
  .mgs-login-hero-tagline{ font-size:20px; margin-top:22px; }
  .mgs-login-product{ padding:20px 20px 18px; min-height:168px; }
  .mgs-login-product-mark{ width:62px; height:96px; }
  .mgs-login-product-line{ font-size:13px; padding-top:16px; }
  .mgs-login-product::after{ width:180px; height:180px; right:-48px; }
}

@media (max-width: 991px){
  .mgs-login-hero{
    position:static; width:auto; bottom:auto;
    padding:22px 22px 24px;
  }
  .mgs-login-hero-tagline{ font-size:19px; margin-top:18px; }
  .mgs-login-products{ flex-direction:row; margin-top:20px; }
  /* Row layout: equal columns. min-height keeps the lockup and strapline from being
     squeezed when the two panels share a narrow band. */
  .mgs-login-product{ flex:1 1 0; min-height:152px; padding:18px; }
  .mgs-login-product-mark{ width:58px; height:90px; }
  .mgs-login-product::after{ width:150px; height:150px; right:-44px; }
  .mgs-login-hero-family{ margin-top:18px; }

  .container-fluid{
    margin-left:0; min-height:0;
    align-items:flex-start; flex-wrap:wrap;
    padding:26px 16px 56px;
  }
  /* Once the page stacks it scrolls, so a viewport-fixed toggle would sit on top of the
     card. Drop it into normal flow underneath instead. */
  #CSSToggle{
    position:static; right:auto; bottom:auto;
    width:100%; margin:18px 0 0; text-align:center;
  }
}

@media (max-width: 600px){
  .mgs-login-products{ flex-direction:column; }
  /* Stacked again: flex:1 1 0 from the rule above would give each panel a zero base height
     in a column and collapse them onto each other, clipping the marks - so size to content. */
  .mgs-login-product{ flex:0 0 auto; min-height:0; }
  .loginForm{ padding:26px 22px 24px; }
  .loginForm h1{ font-size:24px; }
}