/*
 * Admin login — loaded after Django login.css (see templates/admin/login.html).
 * Aligns unauthenticated entry with brand + design-system tokens.
 */

body.login {
  font-family: var(--tv-font-sans);
  font-size: var(--tv-text-base);
  line-height: var(--tv-leading-normal);
  color: var(--tv-ink);
  /* #f7f9fc matches the PWA's --c-surface-muted — a one-page override, not
     a change to --tv-brand-surface (used elsewhere in admin). */
  background: #f7f9fc;
}

body.login #container {
  /* 12px to match the PWA login card's rounded-xl, and a lighter shadow to
     match its shadow-sm — both are page-specific overrides, not changes to
     the shared --tv-radius-lg/--tv-shadow-md tokens used elsewhere in admin. */
  border-radius: 12px;
  border-color: var(--tv-border-strong);
  box-shadow: 0 1px 3px rgb(var(--tv-brand-navy-rgb) / 0.06);
}

body.login #content {
  /* 24px matches the PWA card's p-6 (Django ships 20px by default). */
  padding: 24px;
}

body.login .tv-admin-brand-logo {
  /* 40px matches the PWA TorvanBrand's h-10. display:block + margin:auto
     centers it now that it's a plain <img> inside #content, not inside the
     header's centering flexbox. */
  display: block;
  height: 40px;
  max-width: min(360px, 80vw);
  margin: 0 auto 16px;
}

body.login .form-row label {
  /* text-sm + regular weight matches the PWA's "text-sm text-ink-muted"
     labels (was medium weight, no explicit size — read as bolder/larger). */
  color: var(--tv-ink-muted);
  font-size: var(--tv-text-sm);
  font-weight: var(--tv-weight-regular);
}

body.login .form-row #id_username,
body.login .form-row #id_password {
  /* Navy-tinted border, matching the PWA login form's border-brand-navy/25.
     #ecf1f5 fill matches the PWA's --c-surface-sunken (was plain white). */
  background: #ecf1f5;
  border: 1px solid rgb(var(--tv-brand-navy-rgb) / 0.25);
  border-radius: var(--tv-radius-md);
  font-family: var(--tv-font-sans);
}

body.login .form-row #id_username:focus,
body.login .form-row #id_password:focus {
  border-color: var(--tv-brand-navy);
  outline: 2px solid var(--tv-brand-navy);
  outline-offset: var(--tv-focus-ring-offset);
}

body.login input[type="submit"] {
  /* Full-width + larger padding/font-size matches the PWA's
     "w-full ... px-4 py-3 text-lg" button (was an auto-width pill). */
  width: 100%;
  padding: 12px 16px;
  font-size: 1.125rem;
  background: var(--tv-brand-navy);
  border: 1px solid var(--tv-brand-navy);
  color: var(--tv-on-primary);
  border-radius: var(--tv-radius-md);
  font-family: var(--tv-font-sans);
  font-weight: var(--tv-weight-semibold);
}

body.login input[type="submit"]:hover,
body.login input[type="submit"]:focus {
  background: var(--tv-primary-hover);
  border-color: var(--tv-primary-hover);
}

body.login .password-reset-link a {
  color: var(--tv-brand-navy);
  font-weight: var(--tv-weight-semibold);
}

body.login .password-reset-link a:hover {
  color: var(--tv-primary-hover);
}