/* Only used by the standalone /login page (outside the React/Mantine build,
   see app/main.py). --accent/--accent-text are placeholders substituted
   server-side (main.py's login_stylesheet()) from config.DEFAULT_THEME —
   this page has no client-side theme picker (no React here), so it always
   reflects whichever theme a fresh browser would land on in the app
   itself. Everything else matches the app's own neutral tokens either way. */
:root {
  color-scheme: light dark;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --text: #1a1d21;
  --text-muted: #6b7280;
  --border: #e2e4e8;
  --accent: #0f97c0;
  --accent-text: #ffffff;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #14161a;
    --surface: #1e2126;
    --surface-2: #262a31;
    --text: #e8e9eb;
    --text-muted: #9aa0aa;
    --border: #33373f;
    --accent: #35c5f0;
    --accent-text: #08222c;
    --danger: #f87171;
    --danger-bg: #3a1c1c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Logo + wordmark, centered as one block above the form fields — width/
   height attributes on the <img> itself (see login.html) pin its box
   before any CSS even loads, so a slow/blocked stylesheet can't leave it
   rendering at its native 303x375. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  margin-bottom: 4px;
}
.brand .logo { height: 56px; width: auto; object-fit: contain; margin-bottom: 8px; }
.brand h1 { margin: 0; font-size: 1.5rem; }
.brand .subtitle { margin: 0; color: var(--text-muted); font-size: 0.85rem; }

.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--text-muted); }
.login-card input {
  font-size: 1rem;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

/* Native checkbox, just recolored — a hand-drawn checkmark (previous
   version) needs its ::after box positioned by hand to land dead-center,
   which drifted visibly off-center in testing. accent-color hands the
   whole box+checkmark to the browser's own renderer, in our accent color,
   properly centered by construction instead of by pixel-guessing. */
.login-card label.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.login-card button {
  margin-top: 8px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
}
.error-box {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
}

/* Only rendered when Authentik is actually configured (see main.py's
   _OIDC_BUTTON_HTML substitution) — outlined rather than filled so it
   doesn't compete with the password form's own submit button for
   attention. */
.oidc-button {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}