/* ============================================================
   Rollenspiel-Studio — Login-Theme für Authelia.
   Wird NUR auf auth.roleplay.localhost in Authelias HTML injiziert (via Caddy).
   Überstylt Authelias MUI-Login im „Claude-Design" der App, damit sich der
   Login nicht wie ein Fremdkörper anfühlt.
   ============================================================ */
/* Selbst gehostete Fonts (same-origin, offline) — kein externes CDN, kein Render-Block. */
@import url('/fonts/fonts.css');

:root {
  --bg: #EEE9E2;
  --card: #ffffff;
  --ink: #23211E;
  --muted: #5C564D;
  --label: #615B51;
  --faint: #6E675C;
  --border: #E4DED5;
  --border-strong: #D5CEC4;
  --accent: #7C93D4;
  --accent-deep: #3D4F8F;
  --accent-soft: #AFC0F0;
  --accent-tint: #EEF1FB;
  --on-accent: #23211E;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}

html, body, #root { background: var(--bg) !important; }
body, #root { font-family: var(--font-sans) !important; color: var(--ink) !important; }
body * { font-family: var(--font-sans); }

/* Standard-Person-Avatar (Authelia-Logo) entfernen — wirkt fremd. */
#UserSvg, .MuiAvatar-root { display: none !important; }

/* Login-Inhalt als weiße Karte (wie die Karten der App). */
.MuiContainer-maxWidthXs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(35, 33, 30, 0.12);
  padding: 30px 28px 22px !important;
  max-width: 404px !important;
}

/* App-Marke als Karten-Kopf (wie in der App-Bar/Seitenleiste). */
.MuiContainer-maxWidthXs::before {
  content: "Rollenspiel-Studio";
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.005em;
  color: var(--accent-deep);
  margin: 0 0 2px;
}

/* „Sign in / Anmelden" als dezente Unterzeile darunter. */
.MuiTypography-h5 {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  letter-spacing: 0.01em;
}

/* Weitere Überschriften (z. B. andere Stufen) als Serif. */
#root h1, #root h2, .MuiTypography-h4, .MuiTypography-h6 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: 0.005em;
}

/* Eingabefelder. */
.MuiOutlinedInput-root { border-radius: 10px !important; background: #fff !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--border-strong) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--accent) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--accent) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root { color: var(--label) !important; }
.MuiInputLabel-root.Mui-focused { color: var(--accent-deep) !important; }
.MuiInputBase-input { color: var(--ink) !important; }

/* „Remember me"-Checkbox. */
.MuiCheckbox-root { color: var(--border-strong) !important; }
.MuiCheckbox-root.Mui-checked { color: var(--accent-deep) !important; }
.MuiFormControlLabel-label { color: var(--muted) !important; }

/* Primärer „Sign in"-Button — perlblau mit dunkler Tinte (wie .btn-primary). */
.MuiButton-contained, .MuiButton-containedPrimary {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  letter-spacing: 0 !important;
}
.MuiButton-contained:hover, .MuiButton-containedPrimary:hover {
  background: var(--accent) !important;
  filter: brightness(1.04);
  box-shadow: none !important;
}

/* Text-Buttons & Links (z. B. Passwort zurücksetzen) im Akzent. */
.MuiButton-text, .MuiLink-root { color: var(--accent-deep) !important; text-transform: none !important; }
a { color: var(--accent-deep); }

/* „Powered by Authelia" dezent halten. */
a[href*="authelia"] { color: var(--faint) !important; text-decoration: none; }