/* === BrainFlow Auth Theme v8 — exakt nach brainflow.pro === */

/* Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- brainflow.pro Farbvariablen --- */
:root {
  --bf-bg: #0f1117;
  --bf-surface: #1a1b23;
  --bf-border: #2e2f3a;
  --bf-accent: #d4903c;
  --bf-text: #e8e4df;
  --bf-text2: #9a9690;
  --bf-text3: #6b6862;
}

/* Hintergrund exakt wie brainflow.pro */
body {
  background-color: var(--bf-bg) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Authelia Header (AppBar) komplett weg — kein Sprach-Toggle */
header[class*="MuiAppBar"],
header[class*="MuiAppBar"] * {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Card-Panel unsichtbar */
[class*="MuiGrid"][class*="container"],
[class*="MuiPaper"]:not(header) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Original Authelia-Logo ausblenden */
img[class*="MuiBox"] {
  display: none !important;
}

/* Original Authelia h5 (Login/Anmelden) ausblenden — wird per JS ersetzt */
h5.MuiTypography-h5, [class*="MuiTypography-h5"] {
  display: none !important;
}

/* === BrainFlow Hero-Block (per JS eingefuegt) === */

/* Logo: Brain-SVG in Amber */
#bf-logo-svg {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  display: block;
}
#bf-logo-svg .brain-path,
#bf-logo-svg .glasses-path {
  fill: var(--bf-accent) !important;
}

/* Schriftzug */
#bf-brand {
  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: var(--bf-text) !important;
  text-align: center;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}
#bf-brand span {
  color: var(--bf-accent) !important;
}

/* Claim */
#bf-claim {
  font-size: 16px !important;
  color: var(--bf-text2) !important;
  font-weight: 400 !important;
  text-align: center;
  margin: 0 0 32px 0 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Keywords-Block: 2 Reihen wie brainflow.pro */
#bf-keywords {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}
.bf-kw-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.bf-kw {
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--bf-text2);
  font-weight: 500;
  font-family: 'Inter', -apple-system, sans-serif;
}
.bf-kw-hero {
  font-size: 16px;
  padding: 8px 28px;
  font-weight: 600;
  color: var(--bf-accent);
  border-color: var(--bf-accent);
}

/* === Formular-Felder === */
input, [class*="MuiInputBase-input"] {
  color: var(--bf-text) !important;
  background-color: var(--bf-surface) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
}
[class*="MuiOutlinedInput-root"] {
  background-color: var(--bf-surface) !important;
  border-radius: 8px !important;
}
fieldset, [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--bf-border) !important;
}
[class*="Mui-focused"] > fieldset,
[class*="Mui-focused"] [class*="notchedOutline"],
[class*="MuiOutlinedInput-root"]:hover > fieldset {
  border-color: var(--bf-accent) !important;
}
label, [class*="MuiInputLabel"] {
  color: var(--bf-text3) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
[class*="Mui-focused"][class*="MuiInputLabel"],
label[class*="Mui-focused"] {
  color: var(--bf-accent) !important;
}

/* Autofill Override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bf-surface) inset !important;
  -webkit-text-fill-color: var(--bf-text) !important;
  caret-color: var(--bf-text) !important;
}

/* Alle Texte */
h1, h2, h3, h4, h6, p, label, div {
  color: var(--bf-text) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Login-Button — wie brainflow.pro .btn-primary */
.MuiButton-containedPrimary, .MuiButton-colorPrimary.MuiButton-contained,
button[class*="Primary"][class*="contained"],
button.MuiButton-root.MuiButton-containedPrimary {
  background-color: var(--bf-accent) !important;
  color: var(--bf-bg) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  text-transform: none !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  border: none !important;
  transition: all 0.2s !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
.MuiButton-containedPrimary:hover, button[class*="Primary"][class*="contained"]:hover {
  background-color: #e0a050 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(212, 144, 60, 0.15) !important;
}

/* Links */
a { color: var(--bf-accent) !important; }
a:hover { color: #e0a050 !important; }

/* Checkbox */
[class*="Checkbox"] svg { color: var(--bf-border) !important; }
[class*="checked"] svg { color: var(--bf-accent) !important; }
span[class*="MuiTypography"][class*="body"] {
  color: var(--bf-text2) !important;
  font-size: 13px !important;
}

/* Auge-Icon (Passwort) */
button[class*="IconButton"], [class*="adornment"] button {
  color: var(--bf-text3) !important;
}

/* Footer "Powered by Authelia" */
[class*="MuiTypography-caption"], footer {
  color: var(--bf-text3) !important;
  font-size: 12px !important;
}

/* Passwort-Link */
a[class*="MuiTypography"] { font-size: 13px !important; }