html,
body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

html,
body,
#root,
#root > div,
main {
  min-height: 100vh !important;
  background: linear-gradient(135deg, #4c1d95 0%, #6028d1 45%, #7c3aed 100%) !important;
}

/* Deterministic injected logo element */
img#auth-top-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 40;
}

/* Header strip styling */
[class*="MuiAppBar-root"],
[class*="MuiToolbar-root"],
header,
[role="banner"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

[class*="MuiAppBar-root"] *,
[class*="MuiToolbar-root"] * {
  color: #e2e8f0 !important;
}

/* Login card */
main [class*="MuiPaper-root"] {
  position: relative !important;
  z-index: 20;
  padding-top: 120px !important;
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
}

/* Overlay logo-top.png over the existing header icon area */
main [class*="MuiPaper-root"]::after {
  content: none;
}

/* Hide default sign-in heading/icon block */
main [class*="MuiAvatar-root"],
main h1,
main h2,
main [class*="MuiTypography-h"] {
  display: none !important;
}

/* Copy color */
main [class*="MuiTypography-h"],
main [class*="MuiTypography-body"],
main p,
main label,
main h1,
main h2 {
  color: #ffffff !important;
}

/* Inputs */
main [class*="MuiOutlinedInput-root"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
}

main [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

main [class*="MuiOutlinedInput-root"]:hover [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: rgba(255, 255, 255, 0.55) !important;
}

main [class*="MuiOutlinedInput-root"][class*="Mui-focused"] {
  background: #000000 !important;
}

main [class*="MuiOutlinedInput-root"][class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: #ffffff !important;
  border-width: 2px !important;
}

main input,
main textarea {
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

main input::placeholder,
main textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Browser autofill override */
main input:-webkit-autofill,
main input:-webkit-autofill:hover,
main input:-webkit-autofill:focus,
main textarea:-webkit-autofill,
main textarea:-webkit-autofill:hover,
main textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
  box-shadow: 0 0 0 1000px #000000 inset !important;
}

/* Sign In button: force black via MUI variables + explicit rules */
main {
  --mui-palette-primary-main: #000000 !important;
  --mui-palette-primary-dark: #000000 !important;
  --mui-palette-primary-light: #000000 !important;
  --mui-palette-primary-contrastText: #ffffff !important;
  --variant-containedBg: #000000 !important;
  --variant-containedHoverBg: #000000 !important;
}

main button[type="submit"],
main [class*="MuiButton-containedPrimary"],
main [class*="MuiButton-contained"] {
  --mui-palette-primary-main: #000000 !important;
  --mui-palette-primary-dark: #000000 !important;
  --mui-palette-primary-light: #000000 !important;
  --mui-palette-primary-contrastText: #ffffff !important;
  --variant-containedBg: #000000 !important;
  --variant-containedHoverBg: #000000 !important;
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

main button[type="submit"]:hover,
main button[type="submit"]:focus,
main button[type="submit"]:active,
main [class*="MuiButton-containedPrimary"]:hover,
main [class*="MuiButton-containedPrimary"]:focus,
main [class*="MuiButton-containedPrimary"]:active,
main [class*="MuiButton-contained"]:hover,
main [class*="MuiButton-contained"]:focus,
main [class*="MuiButton-contained"]:active {
  --variant-containedBg: #000000 !important;
  --variant-containedHoverBg: #000000 !important;
  background: #000000 !important;
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Show password icon button */
main [class*="MuiIconButton-root"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

main [class*="MuiIconButton-root"]:hover,
main [class*="MuiIconButton-root"]:focus {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Absolute fallback: every non-icon button stays black */
button:not([class*="MuiIconButton-root"]),
[role="button"]:not([class*="MuiIconButton-root"]) {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

button:not([class*="MuiIconButton-root"]):hover,
button:not([class*="MuiIconButton-root"]):focus,
button:not([class*="MuiIconButton-root"]):active,
[role="button"]:not([class*="MuiIconButton-root"]):hover,
[role="button"]:not([class*="MuiIconButton-root"]):focus,
[role="button"]:not([class*="MuiIconButton-root"]):active {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Hide footer attribution + reset links */
footer,
.MuiTypography-caption,
a[href*="authelia.com"],
a[href*="reset-password"],
a[href*="resetpassword"],
a[href*="forgot-password"],
a[href*="forgotpassword"],
button[id*="reset"],
button[name*="reset"],
[class*="reset-password"],
[class*="ResetPassword"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}