/* Login-only styling. Keep this after the shared dashboard styles. */
@font-face {
  font-family: "Fleet Login Manrope";
  src: url("assets/fonts/manrope-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

#auth-screen.login-screen {
  --login-accent: #7150c5;
  --login-ink: #262337;
  --login-muted: #696575;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: 0;
  padding: max(30px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 24px;
  color: var(--login-ink);
  font-family: "Fleet Login Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(ellipse at 12% 6%, #e9e2f2b3, transparent 48%), radial-gradient(ellipse at 94% 92%, #e7e9e0a8, transparent 44%), #f7f6f3;
}

#auth-screen::before,
#auth-screen::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
#auth-screen::before {
  width: min(64vw, 740px);
  aspect-ratio: 1;
  border: 1px solid #8d7aa414;
  border-radius: 50%;
  top: -40%;
  left: -26%;
  box-shadow: 0 0 0 48px #8d7aa406, 0 0 0 96px #8d7aa404;
}
/* Retain the original map/truck artwork at the foot of the login screen. */
#auth-screen::after {
  inset: auto 0 0;
  width: 100%;
  height: clamp(180px, 34dvh, 360px);
  background: linear-gradient(180deg, #f7f6f3 0%, #f7f6f300 45%), url("assets/brand/login-bg.png") center bottom / cover no-repeat;
}

#auth-screen .login-shell {
  position: relative;
  width: min(100%, 430px);
  min-width: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-block: auto;
}
#auth-screen .login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  text-align: center;
  animation: login-arrive .65s cubic-bezier(.2,.8,.2,1) both;
}
#auth-screen .login-logo-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 98px;
  height: 98px;
  margin-bottom: 14px;
  flex: none;
  border: 1px solid #ffffff;
  border-radius: 28px;
  background: #ffffffb8;
  box-shadow: 0 5px 18px #3d285c08, 0 0 0 7px #ffffff4d;
}
#auth-screen .login-logo-frame::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid #9478bb26;
  border-radius: 35px;
  pointer-events: none;
  animation: login-halo 4.5s ease-in-out 2;
}
#auth-screen .login-logo {
  width: 76px;
  height: 76px;
  max-width: 100%;
  object-fit: contain;
}
#auth-screen .login-brand-name {
  max-width: 100%;
  margin: 0;
  color: var(--login-ink);
  font-family: inherit;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
#auth-screen .login-tagline {
  max-width: 100%;
  margin: 5px 0 0;
  color: var(--login-muted);
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 450;
  line-height: 1.6;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
#auth-screen .login-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 32px 34px 27px;
  border: 1px solid #ffffff;
  border-radius: 25px;
  background: linear-gradient(180deg, #fff 0%, #fff 64%, #fffffff2 80%, #ffffffc9 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 3px 7px #2e244403, 0 16px 44px #2e244409, 0 0 0 1px #dcd6e636;
  animation: login-arrive .65s .08s cubic-bezier(.2,.8,.2,1) both;
}
#auth-screen .auth-panel-inner { width: 100%; min-width: 0; }
#auth-screen .login-card-heading { text-align: center; }
#auth-screen .login-kicker {
  margin: 0 0 10px;
  color: #766785;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.5;
}
#auth-screen .login-card-heading h2 {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: clamp(24px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.25;
}
#auth-screen .login-card-heading > p:last-child {
  margin: 0;
  color: var(--login-muted);
  font-size: 12px;
  line-height: 1.7;
}
#auth-screen .production-form { gap: 18px; margin-top: 25px; }
#auth-screen .production-form label {
  gap: 8px;
  color: #514a61;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}
#auth-screen .production-form input {
  height: 49px;
  min-height: 49px;
  padding: 12px 14px;
  border: 1px solid #e7e3ed;
  border-radius: 11px;
  background: #fcfbfd;
  color: var(--login-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#auth-screen .production-form input::placeholder { color: #746c7e; font-size: 13px; font-weight: 400; }
#auth-screen .production-form input:focus {
  border-color: #9e83d2;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 4px #7150c510;
}
#auth-screen .production-form input:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 2px; }
#auth-screen .form-message { margin: 0; font-size: 12px; line-height: 1.65; }
#auth-screen #login-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  min-height: 49px;
  margin-top: 3px;
  padding: 12px 18px;
  border: 1px solid #ffffff26;
  border-radius: 11px;
  background: linear-gradient(120deg, #8061cf, #6845b7);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.5;
  box-shadow: 0 5px 12px #7150c524, inset 0 1px #ffffff1a;
}
#auth-screen #login-submit::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
#auth-screen #login-submit:disabled::after { opacity: .4; }
#auth-screen #retry-session { display: block; min-height: 44px; margin: 10px auto 0; color: var(--login-accent); }
#auth-screen #auth-status {
  margin-top: 20px;
  color: #514a61;
  font-size: 10px !important;
  line-height: 1.75;
  text-align: center;
  overflow-wrap: anywhere;
}
#auth-screen .brand-contact-details {
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #f0edf4;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}
#auth-screen .brand-contact-details a { max-width: 100%; color: #514a61; overflow-wrap: anywhere; }
#auth-screen .brand-contact-details a:focus-visible { border-radius: 2px; }
#auth-screen .login-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  margin: -4px 0 0;
  padding: 5px 11px;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  background: #f7f6f3e6;
  color: #5d5669;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  animation: login-arrive .65s .16s cubic-bezier(.2,.8,.2,1) both;
}
#auth-screen .login-assurance .icon { width: 14px; height: 14px; stroke-width: 1.6; }

@media (hover: hover) {
  #auth-screen #login-submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 7px 17px #7150c536; }
  #auth-screen .brand-contact-details a[href]:hover { color: var(--login-accent); }
}
@media (max-width: 480px) {
  #auth-screen.login-screen { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  #auth-screen .login-shell { gap: 22px; }
  #auth-screen .login-card { padding: 27px 24px 24px; border-radius: 22px; }
  #auth-screen .login-logo-frame { width: 84px; height: 84px; margin-bottom: 13px; border-radius: 24px; }
  #auth-screen .login-logo-frame::after { border-radius: 31px; }
  #auth-screen .login-logo { width: 64px; height: 64px; }
  #auth-screen .production-form input { font-size: 16px; }
}
@media (max-height: 700px) {
  #auth-screen.login-screen { padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom)); }
  #auth-screen .login-shell { gap: 20px; }
  #auth-screen .login-logo-frame { width: 70px; height: 70px; margin-bottom: 11px; border-radius: 20px; }
  #auth-screen .login-logo-frame::after { inset: -7px; border-radius: 26px; }
  #auth-screen .login-logo { width: 54px; height: 54px; }
  #auth-screen .login-brand-name { font-size: 26px; }
  #auth-screen .login-tagline { margin-top: 4px; font-size: 11px; }
  #auth-screen .login-card { padding-block: 25px 22px; }
  #auth-screen .login-kicker { margin-bottom: 7px; }
  #auth-screen .production-form { margin-top: 21px; gap: 16px; }
}
@media (max-width: 360px) {
  #auth-screen.login-screen { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  #auth-screen .login-card { padding-inline: 20px; }
  #auth-screen .login-brand-name { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #auth-screen *, #auth-screen *::before, #auth-screen *::after { animation: none !important; transition: none !important; }
}
@keyframes login-arrive {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes login-halo {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.025); }
}