/* Auth pages: login, password reset, set password (STCS Universe) */

:root {
  --bg: #0b1020;
  --fg: #e6e9f2;
  --muted: #9aa3b2;
  --card: #1a2233;
  --field: #0f1524;
  --border: #2c3952;
  --auth-max: 960px;
  --auth-min: 420px;
  --auth-pref: 68vw;
}

body { background: var(--bg); color: var(--fg); }
.wrap { min-height: 100dvh; display: grid; place-items: center; padding: 3rem 1rem; }
.brand { font-size: 1.25rem; opacity: .9; }
.muted { color: var(--muted); }
.card { background: var(--card); border: none; border-radius: 1rem; }
.auth-card {
  width: clamp(var(--auth-min), var(--auth-pref), var(--auth-max));
  margin-inline: auto;
  padding: 2.25rem !important;
}

.form-label { opacity: .9; }
.form-control, .form-check-input {
  background: var(--field);
  color: var(--fg);
  border-color: var(--border);
}
.form-control { padding: .9rem 1rem; font-size: 1rem; }
.form-control:focus { box-shadow: none; border-color: #4c69ff; }

/* Style email/password inputs even when allauth doesn't add .form-control */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  background: var(--field);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: .9rem 1rem;
  font-size: 1rem;
  width: 100%;
}
.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
  outline: none;
  box-shadow: none;
  border-color: #4c69ff;
}

.btn { padding: .9rem 1rem; font-weight: 600; }
.auth-card .btn-primary { width: 100%; border-radius: 0.5rem; }
.auth-card .btn-outline-secondary { border-radius: 0.5rem; }
.auth-card .d-grid .btn { width: 100%; }
.auth-card .input-group .btn { padding: .9rem 1rem; }

/* Plain submit buttons (e.g. on password reset request page) – match .btn-primary */
.auth-card form button[type="submit"]:not(.btn) {
  display: block;
  width: 100%;
  padding: .9rem 1rem;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background-color: #0d6efd;
  border: 1px solid #0d6efd;
  border-radius: 0.5rem;
  cursor: pointer;
}
.auth-card form button[type="submit"]:not(.btn):hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #fff;
}

.card h1, .card h2, .card label { color: #e9ecf6; }
.card .text-muted { color: var(--muted) !important; }
.card a:not(.btn) { color: #8ab4f8; }
.card a:not(.btn):hover { color: #a5c9ff; }

/* Form errors – make visible on dark background (Django default is dark text) */
.card .errorlist { color: #f87171; }
/* Password requirements help text – visible but muted (not errors) */
.card .password-requirements { color: var(--muted); }
.card .password-requirements ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* Login page: caps lock hint and submit spinner */
.caps { display: none; }
.spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }