/* Gapit Unity login — replicates unity-log-in.png */

@font-face {
  font-family: "Poppins";
  font-weight: 400;
  font-style: normal;
  src: url("/gapit-auth/static/fonts/poppins/Poppins-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: normal;
  src: url("/gapit-auth/static/fonts/poppins/Poppins-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-style: normal;
  src: url("/gapit-auth/static/fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg-dark: #0E1116;
  --input-bg: #171B22;
  --fg: #E7E9EE;
  --fg-muted: #9CA3AF;
  --fg-dim: #6B7280;
  --border: #262B34;
  --border-strong: #313842;
  --accent: #1E7BFF;
  --accent-hover: #1769E0;
  --accent-soft: rgba(30, 123, 255, 0.20);
  --error: #F25C5C;
  /* Federated-login button + "or" rule, straight from the design. */
  --sso-bg: #1D232A;
  --sso-bg-hover: #242C35;
  --sso-border: #344054;
  --divider: #667085;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-dark);
  color: var(--fg);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.pane {
  position: relative;
  overflow: hidden;
}

.pane--dark {
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

/* Two layers, split out of the design frame (Frame 1687):
     - the 10% black wash, on top — see below.
     - `login-illustration.svg` — the 960x1080 diagonal #EFF8FF → #1570EF wash
       and the interlocking-squares path. `cover` scales it to the pane.

   The design frame's grain is a *sub-pixel* dither: feTurbulence at
   baseFrequency 2 has a half-pixel period, so its appearance is decided
   entirely by how the rasteriser samples it. At exactly 100% zoom on a 1x
   display it averages to an even 10% darkening — invisible, and what the
   design frame itself looks like. At 110%, 125%, 150% or on any HiDPI screen
   each device pixel resolves a separate sample and the full 10%-black speckle
   snaps into view over ~51% of pixels, roughly 2.4x the high-frequency energy
   of the whole design frame. It is binary: 0.000 grain RMS at 100%, ~6.1 at
   every scale above it. Scaling the artwork did the same thing by stretching
   the noise past the pixel grid.

   So the noise is not shipped at all. What it resolves to at 100% — the flat
   10% darkening — is painted directly instead (drop it and the pane renders
   ~18 levels too bright). A flat colour cannot alias, so the pane now looks
   the same at every zoom level, DPR and viewport size. At the 1920x1080
   design viewport the pane is exactly 960x1080, so the artwork lands 1:1 and
   the result is the design frame pixel for pixel.

   It is the pane's own background rather than an <img> child on purpose. A
   child had to be sized with height:100%, which only resolves if the browser
   resolves percentage heights against a stretched grid item; where it doesn't
   (Safari, notably), the 8:9 artwork fell back to its intrinsic ratio. That is
   exact on a 16:9 screen but leaves a band of bare pane along the bottom on
   16:10/3:2 displays — 120px at 1920x1200, 263px at 3024x1964, growing with
   the screen. A grid item always fills its cell and a background always fills
   its box, so there is no longer anything that can come up short.

   The URL is relative, so it resolves against this stylesheet's own location
   (<base_url>/static/login.css) and stays correct for any public_base_url.
   #1570EF — the artwork's dominant colour — sits underneath so the pane never
   flashes a contrasting colour before the SVG paints. */
.pane--gradient {
  background-color: #1570EF;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url("img/login-illustration.svg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.form-wrap {
  width: 100%;
  max-width: 360px;
}

/* The design sets the lockup 108px clear of the caption — the breathing room
   the full-size mark needs. Capped at 10vh so a short viewport tightens up
   instead of pushing the form out of the pane. */
.brand {
  display: flex;
  justify-content: center;
  margin-bottom: min(108px, 10vh);
}
/* 284px is the lockup's native box and the size it has in the design. */
.brand__wordmark {
  width: 284px;
  max-width: 100%;
  height: auto;
  display: block;
}

.caption {
  text-align: center;
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 24px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-size: 13px;
  color: var(--fg-muted);
  font-weight: 400;
}
.field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font-family: inherit;
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder {
  color: var(--fg-dim);
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field--error input {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(242, 92, 92, .15);
}
.field__error {
  color: var(--error);
  font-size: 13px;
  margin-top: 2px;
}

/* Top-of-form banner used for transient page-level messages such as
   "Your session expired. Please sign in again." (?expired=1). */
.flash {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--fg);
}
.flash--info {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
}

/* Autofill — keep dark background instead of Chrome's default white */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  transition: background-color 5000s ease-in-out 0s;
}

/* Password visibility toggle */
.field__input-wrap {
  position: relative;
}
.field__input-wrap input {
  padding-right: 44px;
}
.field__eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.field__eye:hover { color: var(--fg); }
.field__eye:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 4px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox__box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  flex: none;
}
.checkbox input:focus-visible + .checkbox__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.checkbox input:checked + .checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.checkbox__label {
  color: var(--fg-muted);
  font-size: 13px;
}

.link {
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.link:hover { text-decoration: underline; }

.btn {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #ffffff;
}
.btn--primary:hover {
  background: var(--accent-hover);
}
.btn--primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.btn--primary[disabled] {
  opacity: .7;
  cursor: progress;
}

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

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .pane--gradient { display: none; }
  .pane--dark { padding: 32px 20px; }
}

/* Federated sign-in — rendered after the form, behind an "or" divider.
   .btn--sso keeps the shared .btn box so it is exactly the same size as the
   primary "Log in" button, as in the design. */
.sso { display: flex; flex-direction: column; gap: 10px; }
.btn--sso {
  text-decoration: none;
  border: 1px solid var(--sso-border);
  background: var(--sso-bg);
  color: var(--fg);
}
.btn--sso:hover { background: var(--sso-bg-hover); }
.btn--sso:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn__icon { flex: none; display: block; }

.sso-divider {
  display: flex; align-items: center; text-align: center;
  color: var(--fg); font-size: 13px; margin: 16px 0;
}
.sso-divider::before, .sso-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--divider);
}
.sso-divider span { padding: 0 12px; }