/*
  Sign-in pages: Identity Login, ForgotPassword, ResetPassword, their confirmations, Lockout, AccessDenied and
  Logout, all on Views/Shared/_LayoutLoginPage.cshtml.

  Standalone on purpose (no Bootstrap, no build step), so the pages work on port 5100 whether or not the dealer
  portal is built or running. The colors are the dealer portal's Torp palette (dealer-portal/src/assets/main.css),
  and so are the fonts, self-hosted from @fontsource 5.3 (SIL OFL, licenses next to the files). The fonts sit under
  css/ because on dealers.torpmotors.com nginx only passes css, img, js and lib through.
*/

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Only the "TORP" wordmark uses it. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  --page     page background behind the card
  --bg       card and input surface
  --primary  brand red as text, rings and tints (lighter in dark mode so it stays readable)
  --fill     brand red as a solid fill behind white text
*/
:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --radius: 0.5rem;

  --page: #f6f5f3;
  --glow: rgb(166 3 3 / 0.07);
  --fill: #a60303;
  --fill-hover: #810202;
  --primary: #a60303;
  --error: #c10007;
  --success: #008236;

  --text-dimmed: #6e6e76;
  --text-muted: #5c5c63;
  --text-toned: #3f3f46;
  --text: #18181b;
  --text-highlighted: #09090b;

  --bg: #ffffff;
  --bg-muted: #f8f7f5;
  --bg-elevated: #eeede9;

  --border: #e0ded9;
  --border-accented: #cfccc6;

  --card-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 12px 32px -16px rgb(24 24 27 / 0.18);

  color-scheme: light;
}

:root.dark {
  --page: #111113;
  --glow: rgb(193 18 31 / 0.16);
  --fill: #c1121f;
  --fill-hover: #9e0e19;
  --primary: #ff6b5e;
  --error: #ff6467;
  --success: #05df72;

  --text-dimmed: #85858e;
  --text-muted: #a1a1aa;
  --text-toned: #c4c4cc;
  --text: #ececee;
  --text-highlighted: #ffffff;

  --bg: #1a1a1d;
  --bg-muted: #202024;
  --bg-elevated: #26262b;

  --border: #303036;
  --border-accented: #3f3f46;

  --card-shadow: 0 16px 40px -20px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--page);
  background-image: radial-gradient(ellipse 70rem 26rem at 50% -8rem, var(--glow), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

.auth-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===== Page frame ===== */

/* min-height keeps the page from shifting when the script un-hides the theme toggle. */
.auth-top {
  display: flex;
  justify-content: flex-end;
  min-height: 52px;
  padding: 12px 12px 0;
}

.auth-theme {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.auth-theme:hover {
  background: var(--bg-elevated);
  color: var(--text-highlighted);
}

.auth-theme[hidden] {
  display: none;
}

.auth-theme .auth-icon {
  width: 20px;
  height: 20px;
}

/* Shows what a click switches to, like the portal's ThemeToggle. */
.auth-theme .icon-sun,
.dark .auth-theme .icon-moon {
  display: none;
}

.dark .auth-theme .icon-sun {
  display: block;
}

.auth-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 48px;
}

.auth-shell {
  width: 100%;
  max-width: 400px;
}

.auth-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--text-highlighted);
}

.auth-wordmark {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.auth-product {
  font-size: 14px;
  color: var(--text-muted);
}

.auth-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--card-shadow);
}

@media (min-width: 480px) {
  .auth-card {
    padding: 32px;
  }
}

.auth-footer {
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 13px;
  color: var(--text-dimmed);
}

/* ===== Card content ===== */

.auth-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-highlighted);
}

.auth-lead {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.auth-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-highlighted);
}

.auth-field > .auth-label {
  margin-bottom: 6px;
}

.auth-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-input {
  position: relative;
}

.auth-input > .auth-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--text-dimmed);
  pointer-events: none;
}

.auth-input input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 12px 0 42px;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border-accented);
  color: var(--text-highlighted);
  font: inherit;
  /* 16px keeps iOS from zooming into the field on focus. */
  font-size: 16px;
  transition: box-shadow 0.15s;
}

@media (min-width: 640px) {
  .auth-input input {
    font-size: 15px;
  }
}

.auth-input input::placeholder {
  color: var(--text-dimmed);
  opacity: 1;
}

.auth-input input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
}

.auth-input input.input-validation-error {
  box-shadow: inset 0 0 0 1px var(--error);
}

.auth-input input.input-validation-error:focus {
  box-shadow: inset 0 0 0 2px var(--error);
}

/* Browser autofill paints its own background; keep it on the palette (the ring has to be repeated). */
.auth-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-highlighted);
  caret-color: var(--text-highlighted);
  box-shadow: inset 0 0 0 1px var(--border-accented), inset 0 0 0 100px var(--bg-muted);
}

.auth-input input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 2px var(--primary), inset 0 0 0 100px var(--bg-muted);
}

.auth-input--reveal input {
  padding-right: 46px;
}

.auth-reveal {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-dimmed);
  cursor: pointer;
}

.auth-reveal:hover {
  color: var(--text-highlighted);
  background: var(--bg-elevated);
}

.auth-reveal[hidden] {
  display: none;
}

.auth-reveal .icon-eye-off,
.auth-reveal[aria-pressed="true"] .icon-eye {
  display: none;
}

.auth-reveal[aria-pressed="true"] .icon-eye-off {
  display: block;
}

.field-validation-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--error);
}

.field-validation-valid {
  display: none;
}

/* asp-validation-summary: the tag helper adds validation-summary-errors, and leaves the element out when there are none. */
.auth-alert {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 25%, transparent);
  color: var(--error);
  font-size: 14px;
}

.auth-alert.validation-summary-valid {
  display: none;
}

.auth-alert .auth-icon {
  margin-top: 1px;
}

.auth-alert ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text-toned);
  cursor: pointer;
}

.auth-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--fill);
  cursor: pointer;
}

.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--fill);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.auth-button:hover,
.auth-button:active {
  background: var(--fill-hover);
}

.auth-button:focus-visible,
.auth-theme:focus-visible,
.auth-reveal:focus-visible,
.auth-link:focus-visible,
.auth-check input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.auth-button--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-accented);
  color: var(--text-highlighted);
}

.auth-button--outline:hover,
.auth-button--outline:active {
  background: var(--bg-elevated);
}

.auth-button[aria-busy="true"] {
  cursor: progress;
  background: var(--fill-hover);
}

.auth-button .icon-loader {
  display: none;
  animation: auth-spin 0.8s linear infinite;
}

.auth-button[aria-busy="true"] .icon-loader {
  display: block;
}

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

.auth-link {
  border-radius: 2px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-back {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.auth-back .auth-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.auth-back .auth-link:hover {
  color: var(--text-highlighted);
}

.auth-back .auth-icon {
  width: 16px;
  height: 16px;
}

/* ===== Status pages (confirmations, lockout, access denied, log out) ===== */

.auth-status {
  text-align: center;
}

.auth-status .auth-lead {
  margin-bottom: 24px;
}

.auth-status form {
  margin: 0;
}

.auth-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.auth-badge--success {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.auth-badge--neutral {
  background: var(--bg-elevated);
  color: var(--text-toned);
}

.auth-badge .auth-icon {
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-theme,
  .auth-input input,
  .auth-button {
    transition: none;
  }
}