/* 12Nexus sign-in. Brand tokens from 12nexusbpo.com. */

@font-face { font-family: Almarai; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/almarai-400.woff2) format("woff2"); }
@font-face { font-family: Almarai; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/almarai-700.woff2) format("woff2"); }
@font-face { font-family: Almarai; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/almarai-800.woff2) format("woff2"); }

:root {
  /* The card is always light: the logo is navy on transparent and vanishes on dark surfaces. */
  color-scheme: light;

  --blue: #004EF0;
  --navy: #011B35;
  --navy-alt: #031427;
  --navy-hover: #0B2E63;
  --tint-300: #7EA2FF;
  --tint-200: #BFD0FF;
  --tint-100: #D7E2FF;
  --tint-50: #EAF0FF;
  --page-tint: #F3F6FF;
  --field: #F6F8FC;
  --line: #DDE5F2;
  --text: #011B35;
  --muted: #4A5A75;
  --danger-bg: #FDEEEE;
  --danger-line: #F4C7C3;
  --danger-text: #8C1D18;

  --radius-card: 20px;
  --radius-control: 12px;
  --font: Almarai, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 16px;
  font: 400 16px/1.5 var(--font);
  color: var(--text);
  background-color: var(--navy);
  background-image:
    radial-gradient(900px 520px at 50% -12%, rgba(0, 78, 240, 0.42), transparent 62%),
    radial-gradient(700px 480px at 100% 112%, rgba(126, 162, 255, 0.16), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-alt) 100%);
  background-attachment: fixed;
}

.card {
  width: 100%;
  max-width: 420px;
  padding: 40px 36px 32px;
  background: #FFFFFF;
  border-radius: var(--radius-card);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 28px 64px -16px rgba(0, 8, 24, 0.6),
    0 0 0 1px rgba(191, 208, 255, 0.18);
}

.logo {
  display: block;
  width: 136px;
  height: auto;
  margin: 0 auto 28px;
}

h1 {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--navy);
}

.subtitle {
  margin: 10px 0 28px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

.app-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--tint-50);
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-control);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.alert svg { flex: none; margin-top: 1px; }

.field + .field { margin-top: 18px; }

label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

input:hover { border-color: var(--tint-200); }

input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 78, 240, 0.16);
}

.password { position: relative; }
.password input { padding-right: 72px; }

.reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--blue);
  font: 700 0.8125rem var(--font);
  cursor: pointer;
}

.reveal:hover { background: var(--tint-50); }
.reveal:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.reveal[hidden] { display: none; }

.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  margin-top: 28px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--blue);
  color: #FFFFFF;
  font: 700 1rem var(--font);
  cursor: pointer;
  transition: background-color 120ms ease, transform 60ms ease;
}

.primary:hover { background: var(--navy-hover); }
.primary:active { transform: translateY(1px); }
.primary:focus-visible { outline: 3px solid var(--tint-300); outline-offset: 2px; }
.primary[disabled] { cursor: progress; background: var(--navy-hover); }

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.primary .spinner { display: none; }
.primary[disabled] .spinner { display: inline-block; }

.secondary-link {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.secondary-link:hover { color: var(--blue); text-decoration: underline; }

.button-row { display: grid; gap: 10px; margin-top: 24px; }
.button-row .primary { margin-top: 0; }

.ghost {
  width: 100%;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #FFFFFF;
  color: var(--navy);
  font: 700 1rem var(--font);
  cursor: pointer;
}

.ghost:hover { border-color: var(--tint-200); background: var(--page-tint); }
.ghost:focus-visible { outline: 3px solid var(--tint-300); outline-offset: 2px; }

/* Status pages: expired link, error, cancelled, signing in. */
.status { text-align: center; }

.status-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--tint-50);
  color: var(--blue);
}

.status-icon.danger { background: var(--danger-bg); color: var(--danger-text); }

.status-icon .spinner { width: 26px; height: 26px; border-width: 3px; border-color: var(--tint-100); border-top-color: var(--blue); }

.status p { margin: 10px 0 0; color: var(--muted); }

.footer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tint-300);
  font-size: 0.8125rem;
}

.footer strong { color: var(--tint-200); font-weight: 700; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

@media (max-width: 480px) {
  body { padding: 24px 16px; justify-content: flex-start; }
  .card { padding: 32px 22px 26px; }
  .logo { width: 120px; margin-bottom: 22px; }
  h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}