:root {
  /* Brand + theme vars */
  --brand-bg: #0e1225;
  --brand-blue: #2F82D3;
  --brand-blue-ink: #1D5FA7;
  --brand-blue-weak: rgba(47,130,211,.35);
  --brand-blue-hover: rgba(47,130,211,.55);
  --brand-blue-glow: rgba(47,130,211,.18);

  /* Button gradients */
  --btn-grad: linear-gradient(180deg, #2F82D3 0%, #226bb2 100%);
  --btn-grad-hover: linear-gradient(180deg, #3a8fe0 0%, #2b75bd 100%);
  --btn-grad-active: linear-gradient(180deg, #1f66aa 0%, #1a5a95 100%);
  --btn-ring: rgba(47,130,211,.35);

  /* Unified control height (textfields & primary buttons) */
  --control-h: 56px;
}

/* Base layout */
html, body, #root { height: 100%; }

body {
  background:
    var(--brand-bg)
    url("/background.png") center center / cover no-repeat fixed !important;
}

/* Background overlay (disabled by default) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: none !important;
  /* background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 75%, rgba(0,0,0,0) 100%); */
  pointer-events: none;
}

/* Glass card */
.MuiPaper-root {
  background-color: rgba(20, 22, 30, .55) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  border-radius: 16px !important;
}

/* Headline color (login + reset) */
#first-factor-stage h5.MuiTypography-h5,
#first-factor-stage .MuiTypography-h5,
#reset-password-stage h5.MuiTypography-h5,
[id*="reset"][id*="password"] h5.MuiTypography-h5 {
  color: var(--brand-blue-ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 700;
}

/* Labels (scoped to first factor form) */
#first-factor-stage .MuiFormLabel-root,
#first-factor-stage .MuiInputBase-input,
#first-factor-stage .MuiFormHelperText-root {
  color: #0f2238 !important;
}

/* Footer */
.MuiGrid-root:has(> a[href*="authelia.com"]) { display: none !important; }

/* Remember me */
#first-factor-stage label.MuiFormControlLabel-root .MuiFormControlLabel-label { color: #000 !important; }
#first-factor-stage label.MuiFormControlLabel-root .MuiCheckbox-root { color: #000 !important; }
#first-factor-stage label.MuiFormControlLabel-root .MuiCheckbox-root .MuiSvgIcon-root { fill: #000 !important; }
#first-factor-stage label.MuiFormControlLabel-root .MuiCheckbox-root.Mui-checked { color: #000 !important; }
#first-factor-stage label.MuiFormControlLabel-root .MuiCheckbox-root:hover { filter: brightness(0.9); }

/* Username & Password inputs (content styles only; borders unified below) */
#username-textfield,
#password-textfield {
  color: #000 !important;
  background-color: rgba(255,255,255,.98) !important;
  caret-color: #000 !important;
  padding: 14px 14px !important;          /* inner padding */
  font-size: 16px !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  min-height: var(--control-h) !important;/* same height as buttons */
}
#username-textfield::placeholder { color: rgba(0,0,0,.5) !important; }
label.MuiFormLabel-root[for="username-textfield"],
label.MuiFormLabel-root[for="password-textfield"] {
  color: #0f2238 !important;
  font-weight: 600 !important;
}

/* Blue borders for textfields (unified: base/hover/focus) */
#first-factor-stage .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue-weak) !important;
  border-width: 1px !important;
  border-radius: 12px !important;
}
#first-factor-stage .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue-hover) !important;
}
#first-factor-stage .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 2px var(--brand-blue-glow) !important;
}
/* label + icon in focus to brand blue */
#first-factor-stage label.MuiFormLabel-root.Mui-focused { color: var(--brand-blue) !important; }
#first-factor-stage .MuiOutlinedInput-root.Mui-focused .MuiSvgIcon-root { color: var(--brand-blue) !important; }

/* Top bar */
header.MuiAppBar-root {
  background: rgba(47,130,211,0.12) !important;
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--brand-blue-weak) !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
}
header.MuiAppBar-root .MuiTypography-root,
header.MuiAppBar-root a { color: #0f2238 !important; }

/* Language button minimal transparent icon */
#language-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#language-button:hover { filter: none !important; }
#language-button:active { transform: none !important; }
#language-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring) !important;
}

/* Hide any logo in the top bar */
header.MuiAppBar-root img { display: none !important; }
/* Hide possible logos around login/reset forms */
#first-factor-stage img[alt*="logo" i],
#first-factor-stage img[alt*="authelia" i],
#first-factor-stage img[alt*="finansys" i],
#reset-password-stage img[alt*="logo" i],
#reset-password-stage img[alt*="authelia" i],
#reset-password-stage img[alt*="finansys" i],
[id*="reset"][id*="password"] img[alt*="logo" i],
[id*="reset"][id*="password"] img[alt*="authelia" i],
[id*="reset"][id*="password"] img[alt*="finansys" i] { display: none !important; }
#first-factor-stage .MuiGrid-item:has(img),
#reset-password-stage .MuiGrid-item:has(img),
[id*="reset"][id*="password"] .MuiGrid-item:has(img) { display: none !important; }

/* --- Reset Password page: inputs, labels, borders (same look as login) --- */
#reset-password-stage .MuiInputBase-input,
[id*="reset"][id*="password"] .MuiInputBase-input {
  color: #000 !important;
  background-color: rgba(255,255,255,.98) !important;
  caret-color: #000 !important;
}
#reset-password-stage .MuiOutlinedInput-input,
[id*="reset"][id*="password"] .MuiOutlinedInput-input {
  padding: 14px 14px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  min-height: var(--control-h) !important;
}
#reset-password-stage .MuiFormLabel-root,
[id*="reset"][id*="password"] .MuiFormLabel-root {
  color: #0f2238 !important;
  font-weight: 600 !important;
}
#reset-password-stage .MuiFormLabel-root.Mui-focused,
[id*="reset"][id*="password"] .MuiFormLabel-root.Mui-focused {
  color: var(--brand-blue) !important;
}
#reset-password-stage .MuiOutlinedInput-notchedOutline,
[id*="reset"][id*="password"] .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue-weak) !important;
  border-width: 1px !important;
  border-radius: 12px !important;
}
#reset-password-stage .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
[id*="reset"][id*="password"] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue-hover) !important;
}
#reset-password-stage .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
[id*="reset"][id*="password"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 2px var(--brand-blue-glow) !important;
}
#reset-password-stage .MuiOutlinedInput-root.Mui-focused .MuiSvgIcon-root,
[id*="reset"][id*="password"] .MuiOutlinedInput-root.Mui-focused .MuiSvgIcon-root {
  color: var(--brand-blue) !important;
}

/* === Buttons brand gradient, depth, smooth states === */
/* Primary contained (login) */
#first-factor-stage .MuiButton-containedPrimary {
  background-image: var(--btn-grad) !important;
  color: #fff !important; /* a11y text stays; we overlay custom caption */
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  box-shadow:
    0 8px 20px rgba(47,130,211,.32),
    0 2px 6px rgba(0,0,0,.18) !important;
  transition: filter .15s ease, transform .06s ease, box-shadow .15s ease;
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
#first-factor-stage .MuiButton-containedPrimary:hover {
  background-image: var(--btn-grad-hover) !important;
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(47,130,211,.36),
    0 3px 8px rgba(0,0,0,.20) !important;
}
#first-factor-stage .MuiButton-containedPrimary:active {
  background-image: var(--btn-grad-active) !important;
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(47,130,211,.28),
    0 2px 6px rgba(0,0,0,.18) !important;
}
#first-factor-stage .MuiButton-containedPrimary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring) !important;
}
#first-factor-stage .MuiButton-containedPrimary .MuiTouchRipple-child {
  background-color: rgba(255,255,255,.6) !important;
}

/* Outlined/secondary (login) */
#first-factor-stage .MuiButton-outlined {
  color: #0a62c8 !important;
  border-color: var(--brand-blue-weak) !important;
  background: rgba(255,255,255,.72);
  border-radius: 12px !important;
  text-transform: none !important;
  font-weight: 700 !important;
}
#first-factor-stage .MuiButton-outlined:hover {
  border-color: var(--brand-blue) !important;
  background: rgba(47,130,211,.06);
}

/* Disabled state (login) */
#first-factor-stage .MuiButton-root.Mui-disabled {
  background: linear-gradient(180deg, rgba(47,130,211,.35) 0%, rgba(47,130,211,.28) 100%) !important;
  color: rgba(255,255,255,.85) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: saturate(.9) brightness(.97);
}

/* Primary contained (reset page) */
#reset-password-stage .MuiButton-containedPrimary,
[id*="reset"][id*="password"] .MuiButton-containedPrimary {
  background-image: var(--btn-grad) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  box-shadow:
    0 8px 20px rgba(47,130,211,.32),
    0 2px 6px rgba(0,0,0,.18) !important;
  transition: filter .15s ease, transform .06s ease, box-shadow .15s ease;
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;

  /* match inputs */
  min-height: var(--control-h) !important;
  padding-block: 0 !important;
  padding-inline: 14px !important;
}
#reset-password-stage .MuiButton-containedPrimary:hover,
[id*="reset"][id*="password"] .MuiButton-containedPrimary:hover {
  background-image: var(--btn-grad-hover) !important;
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(47,130,211,.36),
    0 3px 8px rgba(0,0,0,.20) !important;
}
#reset-password-stage .MuiButton-containedPrimary:active,
[id*="reset"][id*="password"] .MuiButton-containedPrimary:active {
  background-image: var(--btn-grad-active) !important;
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(47,130,211,.28),
    0 2px 6px rgba(0,0,0,.18) !important;
}
#reset-password-stage .MuiButton-containedPrimary:focus-visible,
[id*="reset"][id*="password"] .MuiButton-containedPrimary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring) !important;
}
#reset-password-stage .MuiButton-containedPrimary .MuiTouchRipple-child,
[id*="reset"][id*="password"] .MuiButton-containedPrimary .MuiTouchRipple-child {
  background-color: rgba(255,255,255,.6) !important;
}

/* Outlined/secondary (reset page) */
#reset-password-stage .MuiButton-outlined,
[id*="reset"][id*="password"] .MuiButton-outlined {
  color: #0a62c8 !important;
  border-color: var(--brand-blue-weak) !important;
  background: rgba(255,255,255,.72);
  border-radius: 12px !important;
  text-transform: none !important;
  font-weight: 700 !important;
}
#reset-password-stage .MuiButton-outlined:hover,
[id*="reset"][id*="password"] .MuiButton-outlined:hover {
  border-color: var(--brand-blue) !important;
  background: rgba(47,130,211,.06);
}

/* Login button: force custom caption via ::after + height/width match */
#sign-in-button {
  position: relative;
  color: transparent !important;      /* hide native label visually */
  font-size: 0 !important;
  text-transform: none !important;

  /* height like textfields */
  height: var(--control-h) !important;
  min-height: var(--control-h) !important;
  padding-block: 0 !important;
  padding-inline: 14px !important;
  border-radius: 12px !important;

  /* full row width */
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
#sign-in-button::after {
  content: "Sign in";                 /* change as needed */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}
/* === Tighter textfields (login + reset) === */
/* target the actual input element v OutlinedInput */
:root {
  /* pick your preferred input height */
  --input-h: 44px;
}

/* Login fields */
#first-factor-stage #username-textfield,
#first-factor-stage #password-textfield,
#first-factor-stage .MuiOutlinedInput-input {
  min-height: var(--input-h) !important;
  padding-block: 8px !important;   
  padding-inline: 14px !important; 
}

/* Reset-password fields */
#reset-password-stage .MuiOutlinedInput-input,
[id*="reset"][id*="password"] .MuiOutlinedInput-input,
#new-password-textfield,
#repeat-new-password-textfield,
#reset-password-token-textfield {
  min-height: var(--input-h) !important;
  padding-block: 8px !important;
  padding-inline: 14px !important;
}

/* Keep the Sign-in button taller */
#sign-in-button {
  height: 56px !important;
  min-height: 56px !important;
}

/* Slim username on the reset page */
:root { --input-h: 44px; } 

#reset-password-stage #username-textfield,
[id*="reset"][id*="password"] #username-textfield {
  min-height: var(--input-h) !important;
  padding-block: 8px !important;
  padding-inline: 14px !important;
  line-height: calc(var(--input-h) - 2px) !important;
}

#reset-password-stage .MuiOutlinedInput-root:has(#username-textfield),
[id*="reset"][id*="password"] .MuiOutlinedInput-root:has(#username-textfield) {
  min-height: var(--input-h) !important;
  border-radius: 12px !important;
}
/* === Hide the top language/app bar completely === */
header.MuiAppBar-root {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Defensive: if the button exists outside the header */
#language-button { display: none !important; }

/* Collapse any leftover spacing on the first content container */
#first-factor-stage,
#reset-password-stage,
[id*="reset"][id*="password"],
.MuiContainer-root:has(#first-factor-stage),
.MuiContainer-root:has(#reset-password-stage) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* OTP / Second-Factor Screen*/

/* Known/likely container IDs for OTP screens (no styles here, just anchors) */
#second-factor-stage,
#time-based-one-time-password-stage,
#one-time-password-stage,
#otp-stage {}

/* Fallback anchors: any container that clearly contains OTP inputs */
.MuiContainer-root:has(input[autocomplete="one-time-code"]),
.MuiContainer-root:has(input[maxlength="1"]),
.MuiContainer-root:has(input[inputmode="numeric"]) {}

/* --- 1) Hide the logo above the greeting ---------------- */
#second-factor-stage img[alt*="logo" i],
#time-based-one-time-password-stage img[alt*="logo" i],
#one-time-password-stage img[alt*="logo" i],
#otp-stage img[alt*="logo" i],
.MuiContainer-root:has(input[autocomplete="one-time-code"]) img[alt*="logo" i],
.MuiContainer-root:has(input[maxlength="1"]) img[alt*="logo" i],
.MuiContainer-root:has(input[inputmode="numeric"]) img[alt*="logo" i] {
  display: none !important;
}

/* --- 2) Headlines ---------- */
#second-factor-stage .MuiTypography-h4,
#second-factor-stage .MuiTypography-h5,
#second-factor-stage .MuiTypography-h6,
#time-based-one-time-password-stage .MuiTypography-h4,
#time-based-one-time-password-stage .MuiTypography-h5,
#time-based-one-time-password-stage .MuiTypography-h6,
#one-time-password-stage .MuiTypography-h4,
#one-time-password-stage .MuiTypography-h5,
#one-time-password-stage .MuiTypography-h6,
#otp-stage .MuiTypography-h4,
#otp-stage .MuiTypography-h5,
#otp-stage .MuiTypography-h6,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiTypography-h4,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiTypography-h5,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiTypography-h6,
.MuiContainer-root:has(input[maxlength="1"]) .MuiTypography-h4,
.MuiContainer-root:has(input[maxlength="1"]) .MuiTypography-h5,
.MuiContainer-root:has(input[maxlength="1"]) .MuiTypography-h6,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiTypography-h4,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiTypography-h5,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiTypography-h6 {
  color: var(--brand-blue-ink) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* --- 3) Helper/description text ("Enter One-Time Password") */
#second-factor-stage .MuiTypography-body2,
#second-factor-stage .MuiFormHelperText-root,
#time-based-one-time-password-stage .MuiTypography-body2,
#time-based-one-time-password-stage .MuiFormHelperText-root,
#one-time-password-stage .MuiTypography-body2,
#one-time-password-stage .MuiFormHelperText-root,
#otp-stage .MuiTypography-body2,
#otp-stage .MuiFormHelperText-root,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiTypography-body2,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiFormHelperText-root,
.MuiContainer-root:has(input[maxlength="1"]) .MuiTypography-body2,
.MuiContainer-root:has(input[maxlength="1"]) .MuiFormHelperText-root,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiTypography-body2,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiFormHelperText-root {
  color: #0f2238 !important;     /* readable dark text */
  opacity: 1 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* --- 4) Top actions (LOGOUT | SWITCH USER | METHODS) ----- */
/* Base look: brand blue text, no red/pink background, subtle hover */
#second-factor-stage .MuiButtonBase-root.MuiLink-root,
#second-factor-stage a.MuiLink-root,
#time-based-one-time-password-stage .MuiButtonBase-root.MuiLink-root,
#time-based-one-time-password-stage a.MuiLink-root,
#one-time-password-stage .MuiButtonBase-root.MuiLink-root,
#one-time-password-stage a.MuiLink-root,
#otp-stage .MuiButtonBase-root.MuiLink-root,
#otp-stage a.MuiLink-root {
  color: #0a62c8 !important;
  background: transparent !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}

/* Hover/focus/ripple in brand tones */
#second-factor-stage .MuiButtonBase-root.MuiLink-root:hover,
#second-factor-stage a.MuiLink-root:hover,
#time-based-one-time-password-stage .MuiButtonBase-root.MuiLink-root:hover,
#time-based-one-time-password-stage a.MuiLink-root:hover,
#one-time-password-stage .MuiButtonBase-root.MuiLink-root:hover,
#one-time-password-stage a.MuiLink-root:hover,
#otp-stage .MuiButtonBase-root.MuiLink-root:hover,
#otp-stage a.MuiLink-root:hover {
  background: rgba(47,130,211,.08) !important;
  color: #0a62c8 !important;
  text-decoration: none !important;
}
#second-factor-stage .MuiButtonBase-root.MuiLink-root:focus-visible,
#time-based-one-time-password-stage .MuiButtonBase-root.MuiLink-root:focus-visible,
#one-time-password-stage .MuiButtonBase-root.MuiLink-root:focus-visible,
#otp-stage .MuiButtonBase-root.MuiLink-root:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--btn-ring) !important;
}
#second-factor-stage .MuiButtonBase-root.MuiLink-root .MuiTouchRipple-child,
#time-based-one-time-password-stage .MuiButtonBase-root.MuiLink-root .MuiTouchRipple-child,
#one-time-password-stage .MuiButtonBase-root.MuiLink-root .MuiTouchRipple-child,
#otp-stage .MuiButtonBase-root.MuiLink-root .MuiTouchRipple-child {
  background-color: rgba(47,130,211,.25) !important;
}

/* --- 5) OTP inputs: same border/hover/focus as login fields --- */
#second-factor-stage .MuiInputBase-input,
#time-based-one-time-password-stage .MuiInputBase-input,
#one-time-password-stage .MuiInputBase-input,
#otp-stage .MuiInputBase-input,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiInputBase-input,
.MuiContainer-root:has(input[maxlength="1"]) .MuiInputBase-input,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiInputBase-input {
  color: #000 !important;
  background-color: rgba(255,255,255,.98) !important;
}

#second-factor-stage .MuiOutlinedInput-notchedOutline,
#time-based-one-time-password-stage .MuiOutlinedInput-notchedOutline,
#one-time-password-stage .MuiOutlinedInput-notchedOutline,
#otp-stage .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[maxlength="1"]) .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue-weak) !important;
  border-radius: 12px !important;
}

#second-factor-stage .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
#time-based-one-time-password-stage .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
#one-time-password-stage .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
#otp-stage .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[maxlength="1"]) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue-hover) !important;
}

#second-factor-stage .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
#time-based-one-time-password-stage .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
#one-time-password-stage .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
#otp-stage .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[maxlength="1"]) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiContainer-root:has(input[inputmode="numeric"]) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 2px var(--brand-blue-glow) !important;
}

/* OTP helper text ("Enter One-Time Password") */
#one-time-password-method p,
#second-factor-stage .MuiTypography-body1,
#time-based-one-time-password-stage .MuiTypography-body1,
#one-time-password-stage .MuiTypography-body1,
#otp-stage .MuiTypography-body1,
.MuiContainer-root:has(#one-time-password-method) .MuiTypography-body1,
.MuiContainer-root:has(input[autocomplete="one-time-code"]) .MuiTypography-body1 {
  color: #0f2238 !important;   /* same ink as on login */
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* === OTP top actions: make them brand-blue, no red === */
#logout-button,
#switch-user-button,
#methods-button {
  /* force blue text & transparent bg */
  color: #0a62c8 !important;
  background: transparent !important;

  /* neutralize variant variables some builds use */
  --variant-textColor: #0a62c8 !important;
  --variant-plainColor: #0a62c8 !important;
  --variant-outlinedColor: #0a62c8 !important;
  --variant-containedBg: transparent !important;
  --variant-textBg: transparent !important;
  --variant-outlinedBorder: rgba(47,130,211,.35) !important;
  --variant-plainHoverBg: rgba(47,130,211,.08) !important;
  --variant-plainActiveBg: rgba(47,130,211,.12) !important;

  text-decoration: none !important;
  text-transform: none !important;      /* no automatic UPPERCASE */
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;

  outline: none !important;
  box-shadow: none !important;
}

#logout-button:hover,
#switch-user-button:hover,
#methods-button:hover {
  background: rgba(47,130,211,.08) !important;
  color: #0a62c8 !important;
}

#logout-button:active,
#switch-user-button:active,
#methods-button:active {
  background: rgba(47,130,211,.12) !important;
  color: #0a62c8 !important;
}

#logout-button:focus-visible,
#switch-user-button:focus-visible,
#methods-button:focus-visible {
  box-shadow: 0 0 0 3px var(--btn-ring) !important; /* consistent focus ring */
  outline: none !important;
}

/* ripple color to blue-ish (Material UI ripple) */
#logout-button .MuiTouchRipple-child,
#switch-user-button .MuiTouchRipple-child,
#methods-button .MuiTouchRipple-child {
  background-color: rgba(47,130,211,.25) !important;
}

/* ==== Sign-out splash (brief page after Logout) ==== */
/* Hide any logo that might appear in the content area */
#root img[alt*="logo" i],
#root img[alt*="authelia" i],
#root img[alt*="finansys" i] {
  display: none !important;
}

/* Make the headline (e.g., "Sign out") visible and on brand */
#root .MuiTypography-h4,
#root .MuiTypography-h5,
#root .MuiTypography-h6 {
  color: var(--brand-blue-ink) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Make the helper/paragraph (e.g., "You're being signed out and redirected")
   readable (some themes tint it very light) */
#root .MuiTypography-body1,
#root .MuiTypography-body2 {
  color: #0f2238 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}
/* === MFA Settings improve readability of cards/boxes === */

/* Cards/boxes (MUI Paper/Card) brighter background + stronger text contrast */
.MuiPaper-root,
.MuiCard-root,
[class*="Paper-root"],
[class*="Card-root"],
.card,
.panel {
  background: rgba(255, 255, 255, 0.92) !important; /* translucent white to tame busy backgrounds */
  color: #0b1720 !important;                         /* very dark text for contrast */
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;/* softer shadow */
  backdrop-filter: blur(2px);                        /* slightly blur noisy background */
}

/* Headings in cards ensure dark color and no text shadow */
h1, h2, h3, h4, h5, h6,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6,
[class*="Typography-root"][class*="Typography-h"] {
  color: #0b1720 !important;
  text-shadow: none !important;
  opacity: 0.96;
}

/* Body text / descriptions darker than default for readability */
p, .text, .description,
.MuiTypography-body1, .MuiTypography-body2,
[class*="Typography-root"][class*="body"] {
  color: rgba(0, 0, 0, 0.80) !important;
  text-shadow: none !important;
}

/* Secondary/hint text still readable but subdued */
.MuiFormHelperText-root,
.small, .muted, .hint,
[class*="Typography-colorTextSecondary"] {
  color: rgba(0, 0, 0, 0.62) !important;
}

/* "ADD" button and other outlined buttons better contrast on light cards */
.MuiButton-outlinedPrimary,
.MuiButton-outlined {
  background: rgba(255,255,255,0.85) !important;
  color: #0b1720 !important;
  border-color: rgba(0,0,0,0.28) !important;
}
.MuiButton-outlinedPrimary:hover,
.MuiButton-outlined:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(0,0,0,0.36) !important;
}

/* Links inside cards darker shade for contrast on light background */
a, .link, .MuiLink-root {
  color: #0b2239 !important;
  text-decoration-thickness: .08em;
}

/* If a dark overlay/backdrop is used over the page background reduce opacity */
[class*="overlay"], [class*="Backdrop-root"], .backdrop, .overlay {
  opacity: 0.6 !important; /* typical values are 0.8 0.9; lower = more readable content */
}

/* If a strong gradient/image is applied via ::before, tone it down */
body::before, .background::before, .bg::before {
  opacity: 0.25 !important;
}

/* Safety: some themes force white text globally; restore inheritance inside cards */
.MuiPaper-root *, .MuiCard-root * {
  color: inherit !important;
  text-shadow: none !important;
}

/* === Fixed footer for login/reset screens === */
.auth-footer.auth-footer--fixed {
  position: fixed;          /* stay at the bottom regardless of SPA rerenders */
  left: 0;
  right: 0;
  bottom: 12px;             /* tweak spacing as needed */
  text-align: center;
  font-size: .95rem;
  opacity: .95;
  z-index: 2147483647;      /* ensure it's above app UI */
  pointer-events: auto;
}

/* Optional: readable "chip" background for the link over busy images */
.auth-footer.auth-footer--fixed a {
  text-decoration: underline;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.75);  /* improve contrast against background */
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* === Footer tooltip (info bubble) === */
.auth-tooltip {
  position: fixed;                /* float above the fixed footer */
  left: 50%;
  bottom: 52px;                   /* sits above the footer chip */
  transform: translateX(-50%);
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.97);     /* light bubble for your light theme */
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 0.95rem;
  line-height: 1.35;
  z-index: 2147483647;
  pointer-events: auto;
}
.auth-tooltip.hidden { display: none; }

/* little arrow */
.auth-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: inherit;
  border-left: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transform: translateX(-50%) rotate(45deg);
}

/* close button */
.auth-tooltip__close {
  position: absolute;
  top: 6px; right: 8px;
  border: 0; background: transparent;
  font-size: 16px; line-height: 1;
  cursor: pointer;
}

/* links inside tooltip */
.auth-tooltip a { text-decoration: underline; }

/* === Tooltip text visibility fixes (force readable colors) === */
.auth-tooltip,
.auth-tooltip * {
  color: #0b1720 !important;          /* force dark ink for all children */
  text-shadow: none !important;       /* remove any theme shadow */
}

/* Links inside the tooltip: darker blue for contrast */
.auth-tooltip a {
  color: #0b2239 !important;
  text-decoration: underline;
}

/* Close button color */
.auth-tooltip__close {
  color: #0b1720 !important;
  opacity: .8;
}
.auth-tooltip__close:hover { opacity: 1; }

/* Optional: slight blur/stronger separation from background */
.auth-tooltip {
  backdrop-filter: blur(2px);         /* soften busy bg under the bubble */
  background: rgba(255,255,255,.98) !important; /* near-solid white */
  border-color: rgba(0,0,0,.12) !important;     /* slightly stronger border */
}

/* Arrow must match the bubble background */
.auth-tooltip::after {
  background: rgba(255,255,255,.98) !important;
  border-left-color: rgba(0,0,0,.12) !important;
  border-bottom-color: rgba(0,0,0,.12) !important;
}

/* === Normalize browser autofill look on login/reset forms === */
/* Scope to your form wrapper .login-card .authelia-form */
input[type="text"],
input[type="email"],
input[type="password"] {
  /* keep your normal styling here if needed */
}

/* Chromium (Chrome/Edge/Brave/Opera) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  /* Paint the background to your normal input bg using a huge inset shadow */
  box-shadow: 0 0 0 1000px #ffffff inset !important;   /* <- set to your input bg */
  -webkit-text-fill-color: #123b63 !important;         /* <- your normal text color */
  caret-color: #123b63 !important;
  border: 1px solid #2F82D3 !important;                /* <- your normal/hover border */
  transition: background-color 0s ease-in-out 0s;      /* cancel yellow flash */
}

/* Firefox */
input:-moz-autofill {
  box-shadow: 0 0 0 1000px #ffffff inset !important;   /* match input bg */
  -moz-text-fill-color: #123b63 !important;            /* text color */
  caret-color: #123b63 !important;
  border: 1px solid #2F82D3 !important;
}

/* Optional: keep rounded corners & inner icon area consistent */
input:-webkit-autofill,
input:-moz-autofill {
  border-radius: 12px; /* match your inputs */
}

/* If you use a dark theme variant */
@media (prefers-color-scheme: dark) {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-moz-autofill {
    box-shadow: 0 0 0 1000px #111111 inset !important; /* dark input bg */
    -webkit-text-fill-color: #e6e6e6 !important;
    -moz-text-fill-color: #e6e6e6 !important;
    caret-color: #e6e6e6 !important;
    border: 1px solid #2F82D3 !important;
  }
}


/* --- OTP input must be visible even when not focused --- */

/* A) Plain input used by Authelia (most builds) */
input[autocomplete="one-time-code"] {
  /* Force a visible border in idle/blur state */
  border: 2px solid var(--brand-blue-weak, rgba(47,130,211,.35)) !important;
  border-radius: 8px;
  background: rgba(47,130,211,.04); 
  box-shadow: none !important;      
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input[autocomplete="one-time-code"]:focus,
input[autocomplete="one-time-code"]:focus-visible {
  border-color: var(--brand-blue, #2F82D3) !important;
  box-shadow: 0 0 0 3px var(--brand-blue-glow, rgba(47,130,211,.18)) !important;
  outline: none !important;
  background: rgba(47,130,211,.06);
}

/* B) If your build uses MUI OutlinedInput (white hairline often comes from here) */
.MuiOutlinedInput-root {
  /* Give the whole control a light tint so the field is easy to spot */
  background: rgba(47,130,211,.03);
  border-radius: 8px;
}
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  /* Ensure the outline is NOT white when blurred */
  border-color: var(--brand-blue-weak, rgba(47,130,211,.35)) !important;
  border-width: 2px !important;
  box-shadow: none !important; 
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue-ink, #1D5FA7) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--brand-blue, #2F82D3) !important;
  box-shadow: 0 0 0 3px var(--brand-blue-glow, rgba(47,130,211,.18)) !important;
}

/* C) Bootstrap fallback (if your input has form-control class) */
input.form-control[name="one-time-code"],
input.form-control#one-time-code {
  border: 2px solid var(--brand-blue-weak, rgba(47,130,211,.35)) !important;
  box-shadow: none !important;
}
input.form-control[name="one-time-code"]:focus,
input.form-control#one-time-code:focus {
  border-color: var(--brand-blue, #2F82D3) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-blue-glow, rgba(47,130,211,.18)) !important;
}