/*
 * Admin sign-in.
 *
 * Standalone: templates/admin/login.html does not extend Jazzmin, so this is
 * the only stylesheet the page loads. No AdminLTE, no Bootstrap, no Font
 * Awesome, no webfont -- a door desk on venue wifi gets one CSS request and
 * the system font stack.
 *
 * The tokens are lifted from static/css/admin.css so both surfaces agree, and
 * the rules it states are kept:
 *
 *   - One accent carries identity and the primary action. Amber and red stay
 *     reserved for meaning. The accent is teal, which is close to the green
 *     that means "checked in", so the two are kept apart by hand -- see the
 *     note at the top of admin.css.
 *   - --ad-accent-alt is never a standalone accent, only the second stop of a
 *     pair. Here that pair is the seam between the rail and the form, which is
 *     the same device that sits under the sidebar brand inside the app.
 *   - The rail is dark in both themes. It is the app's spine, and this page is
 *     its doorway.
 */

:root {
  --ad-ink: #0f172a;
  --ad-paper: #f6f9fa;
  --ad-surface: #ffffff;
  --ad-surface-sunk: #eef2f5;
  --ad-line: #e4eaee;
  --ad-line-strong: #cbd5dd;
  --ad-mute: #64748b;

  --ad-accent: #0d9488;
  --ad-accent-deep: #0b7c72;
  --ad-accent-rgb: 13, 148, 136;
  --ad-accent-alt: #6d5ce0;

  --ad-stop: #be2f24;
  --ad-stop-wash: #fceceb;

  --ad-rail: #0b1f26;
  --ad-rail-deep: #071318;
  --ad-rail-ink: #cbd9dc;
  --ad-rail-mute: #7d949a;

  --ad-field: #ffffff;
  --ad-on-accent: #ffffff;

  --ad-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --ad-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --ad-radius: 12px;
  --ad-radius-sm: 8px;
  --ad-shadow-md: 0 2px 4px rgba(20, 22, 28, 0.05), 0 8px 24px rgba(20, 22, 28, 0.07);
}

/* The template writes data-bs-theme before first paint. This block is the
   no-JS fallback, and is scoped so an explicit light choice still wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --ad-ink: #e6edf0;
    --ad-paper: #0a1216;
    --ad-surface: #111d23;
    --ad-surface-sunk: #17262d;
    --ad-line: #1f313a;
    --ad-line-strong: #2f4650;
    --ad-mute: #90a4ac;
    --ad-accent: #2dd4bf;
    --ad-accent-deep: #5eead4;
    --ad-accent-rgb: 45, 212, 191;
    --ad-accent-alt: #a5a2ff;
    --ad-stop: #f8776a;
    --ad-stop-wash: #2f1a18;
    --ad-field: #17262d;
    --ad-on-accent: #06231f;
    --ad-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.36);
  }
}

:root[data-bs-theme="dark"] {
  --ad-ink: #e6edf0;
  --ad-paper: #0a1216;
  --ad-surface: #111d23;
  --ad-surface-sunk: #17262d;
  --ad-line: #1f313a;
  --ad-line-strong: #2f4650;
  --ad-mute: #90a4ac;
  --ad-accent: #2dd4bf;
  --ad-accent-deep: #5eead4;
  --ad-accent-rgb: 45, 212, 191;
  --ad-accent-alt: #a5a2ff;
  --ad-stop: #f8776a;
  --ad-stop-wash: #2f1a18;
  --ad-field: #17262d;
  /* The dark accent is a light lavender: white on it reads about 2.5:1, dark
     type clears AA. Same trade the rest of the admin makes. */
  --ad-on-accent: #06231f;
  --ad-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.36);
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--ad-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ad-ink);
  background: var(--ad-paper);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.lg {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(19rem, 40%) minmax(0, 1fr);
}

/* --------------------------------------------------------- the rail ------ */

/* Three zones, the same shape as the sidebar this page is the door to: mark at
   the top, the substance in the middle, standing state at the foot. */
.lg-rail {
  position: relative;
  background: linear-gradient(180deg, var(--ad-rail) 0%, var(--ad-rail-deep) 100%);
  color: var(--ad-rail-ink);
  padding: 2.75rem 2.75rem 2.5rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
}

/* The signature: one two-stop stroke on the join. The same device sits under
   the sidebar brand inside the app, which is what makes this page read as the
   door to that app rather than a page in front of it. */
.lg-rail::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: -1px;
  width: 2px;
  background: linear-gradient(180deg, var(--ad-accent), var(--ad-accent-alt));
}

/* The wordmark is dark type drawn for a light ground. On the rail it sits on
   its own plate rather than being recoloured -- a brand mark is not ours to
   restyle. */
.lg-plate {
  display: inline-flex;
  background: #fff;
  border-radius: var(--ad-radius-sm);
  padding: 0.45rem 0.7rem;
  /* justify-self, not align-self: the rail is a grid, and a grid item stretches
     across its column unless told otherwise -- which turns the plate into a
     full-width white bar. */
  justify-self: start;
  align-self: start;
}

.lg-plate img {
  display: block;
  height: 2rem;
  width: auto;
}

/* The panel's one statement, so it carries the weight rather than sitting as a
   caption under the mark. Vertically centred in the middle zone. */
.lg-lede {
  margin: 0;
  align-self: center;
  font-size: 1.5rem;
  line-height: 1.32;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.021em;
  max-width: 15ch;
  text-wrap: balance;
}

.lg-rail-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.lg-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ad-rail-mute);
}

/* Shown only when the server is actually enforcing a second factor, so it
   states the current posture rather than advertising a feature. */
.lg-posture {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ad-rail-ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

.lg-posture::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ad-accent), var(--ad-accent-alt));
}

/* --------------------------------------------------------- the form ------ */

.lg-main {
  background: var(--ad-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.75rem;
}

.lg-form {
  width: 100%;
  max-width: 24rem;
}

.lg-title {
  margin: 0 0 0.4rem;
  font-size: 1.875rem;
  font-weight: 660;
  letter-spacing: -0.024em;
  color: var(--ad-ink);
}

.lg-sub {
  margin: 0 0 1.85rem;
  color: var(--ad-mute);
  font-size: 0.9375rem;
}

.lg-field + .lg-field {
  margin-top: 1.05rem;
}

.lg-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 570;
  color: var(--ad-ink);
}

.lg-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ad-ink);
  background: var(--ad-field);
  border: 1px solid var(--ad-line-strong);
  border-radius: var(--ad-radius-sm);
  padding: 0.65rem 0.8rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.lg-input::placeholder {
  color: var(--ad-mute);
  opacity: 0.75;
}

.lg-input:focus-visible,
.lg-input:focus {
  outline: none;
  border-color: var(--ad-accent);
  box-shadow: 0 0 0 3px rgba(var(--ad-accent-rgb), 0.22);
}

/* A one-time code is serial data, like the UUIDs and EK numbers the admin
   already sets in mono with tabular figures. Same treatment, so the field
   reads as a code to copy rather than a word to type. */
.lg-input--code {
  font-family: var(--ad-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em;
  font-size: 1rem;
}

/* django-otp renders the device selector itself, so this is matched on the
   element rather than on a class the template could add. */
.lg-field select {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ad-ink);
  background: var(--ad-field);
  border: 1px solid var(--ad-line-strong);
  border-radius: var(--ad-radius-sm);
  padding: 0.6rem 0.8rem;
}

.lg-field select:focus-visible,
.lg-field select:focus {
  outline: none;
  border-color: var(--ad-accent);
  box-shadow: 0 0 0 3px rgba(var(--ad-accent-rgb), 0.22);
}

.lg-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--ad-mute);
}

.lg-submit {
  width: 100%;
  margin-top: 1.6rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 570;
  letter-spacing: -0.006em;
  color: var(--ad-on-accent);
  background: var(--ad-accent);
  border: 1px solid var(--ad-accent);
  border-radius: var(--ad-radius-sm);
  padding: 0.7rem 1rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--ad-accent-rgb), 0.3);
  transition: transform 0.06s ease, background-color 0.12s ease,
    border-color 0.12s ease;
}

.lg-submit:hover {
  background: var(--ad-accent-deep);
  border-color: var(--ad-accent-deep);
}

.lg-submit:active {
  transform: translateY(1px);
}

.lg-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ad-accent-rgb), 0.32);
}

.lg-links {
  margin: 1.15rem 0 0;
  font-size: 0.875rem;
}

.lg-links a {
  color: var(--ad-accent);
  text-decoration: none;
}

.lg-links a:hover {
  color: var(--ad-accent-deep);
  text-decoration: underline;
}

.lg-links a:focus-visible {
  outline: 2px solid var(--ad-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------- problems ------ */

.lg-alert {
  margin: 0 0 1.35rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--ad-stop);
  border-left-width: 3px;
  border-radius: var(--ad-radius-sm);
  background: var(--ad-stop-wash);
  color: var(--ad-stop);
  font-size: 0.875rem;
}

.lg-alert p {
  margin: 0;
}

.lg-alert p + p {
  margin-top: 0.4rem;
}

.lg-alert a {
  color: inherit;
  font-weight: 570;
}

/* ==========================================================================
   Narrow screens
   ==========================================================================
   The rail becomes a band rather than disappearing: it is the product's
   identity, and an usher signing in on a phone at a door should still be able
   to see at a glance that they are in the right place. */

@media (max-width: 60rem) {
  .lg {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .lg-rail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.35rem;
  }

  .lg-rail::after {
    inset-block: auto;
    inset-inline: 0;
    bottom: -1px;
    top: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--ad-accent), var(--ad-accent-alt));
  }

  .lg-lede,
  .lg-note {
    display: none;
  }

  .lg-rail-foot {
    margin-top: 0;
  }

  .lg-plate img {
    height: 1.65rem;
  }

  .lg-main {
    padding: 2.25rem 1.35rem 3rem;
    align-items: flex-start;
  }
}

@media (max-width: 26rem) {
  .lg-title {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-input,
  .lg-submit {
    transition: none;
  }

  .lg-submit:active {
    transform: none;
  }
}