/* Penguin Theme for Authelia - NUCLEAR OVERRIDES */

/* ===== KILL ALL GREY/BLUE - FORCE BLACK ===== */
*, *::before, *::after {
  background-color: transparent;
}

html {
  background: #000000 !important;
}

body {
  background: #000000 !important;
  background-color: #000000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#root, #app, [id="root"], [id="app"],
.MuiBox-root, div[class*="MuiBox"],
main, section, article, aside {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* ===== NUKE THE GREY TOP BAR ===== */
header, nav,
[class*="Header"], [class*="header"],
[class*="AppBar"], [class*="appbar"],
[class*="Toolbar"], [class*="toolbar"],
[class*="TopBar"], [class*="topbar"],
.MuiAppBar-root, .MuiToolbar-root {
  background: #000000 !important;
  background-color: #000000 !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* The specific grey hero/header area */
div[style*="background"],
div[style*="Background"],
[style*="rgb(30"], [style*="rgb(40"], [style*="rgb(50"],
[style*="#1"], [style*="#2"], [style*="#3"] {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* ===== LOGO - TOP LEFT ===== */
img[alt="Logo"], img[src*="logo"], [class*="logo"] img {
  position: fixed !important;
  top: 20px !important;
  left: 24px !important;
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  z-index: 9999 !important;
}

/* Hide the centered logo container */
[class*="logo"]:not(img) {
  position: fixed !important;
  top: 20px !important;
  left: 24px !important;
}

/* ===== INPUTS - KILL BLUE ===== */
input, textarea, select,
input[type="text"], input[type="password"], input[type="email"],
.MuiInputBase-root, .MuiFilledInput-root, .MuiOutlinedInput-root,
.MuiInputBase-input, .MuiFilledInput-input,
div[class*="MuiInputBase"], div[class*="MuiFilledInput"], div[class*="MuiOutlinedInput"],
[class*="Input"], [class*="input"],
[class*="TextField"], [class*="textfield"] {
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
  color: #FAFAFA !important;
  border-radius: 8px !important;
}

/* Input wrapper/container */
.MuiFormControl-root, [class*="FormControl"],
.MuiTextField-root, [class*="TextField"] {
  background: transparent !important;
}

/* Remove blue underline/border */
.MuiFilledInput-underline:before,
.MuiFilledInput-underline:after,
.MuiInput-underline:before,
.MuiInput-underline:after {
  border-bottom-color: #1F1F24 !important;
}

.MuiOutlinedInput-notchedOutline, fieldset {
  border-color: #1F1F24 !important;
}

/* Focus state */
.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiFilledInput-underline:after,
input:focus {
  border-color: #22CAAD !important;
}

/* ===== TEXT ===== */
h1, h2, h3, h4, h5, h6, p, span, label, div,
.MuiTypography-root, [class*="Typography"] {
  color: #FAFAFA !important;
}

label, .MuiInputLabel-root, .MuiFormLabel-root {
  color: #8E8E96 !important;
}

.Mui-focused.MuiInputLabel-root {
  color: #22CAAD !important;
}

/* ===== CARD/FORM CONTAINER ===== */
.MuiPaper-root, .MuiCard-root,
[class*="Paper"], [class*="Card"],
form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== BUTTON ===== */
button[type="submit"],
.MuiButton-containedPrimary,
.MuiButton-root[class*="primary"],
[class*="Button"][class*="Primary"],
[class*="button"][class*="primary"] {
  background: #22CAAD !important;
  background-color: #22CAAD !important;
  color: #000000 !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: 8px !important;
  box-shadow: 0 0 30px rgba(34, 202, 173, 0.4) !important;
}

button[type="submit"]:hover,
.MuiButton-containedPrimary:hover {
  background: #3DDDC0 !important;
  background-color: #3DDDC0 !important;
}

/* ===== LINKS ===== */
a, .MuiLink-root {
  color: #22CAAD !important;
}

a:hover {
  color: #3DDDC0 !important;
}

/* ===== CHECKBOX - NO BACKGROUND, NO GLOW ===== */
.MuiCheckbox-root,
.MuiCheckbox-root *,
[class*="Checkbox"],
span[class*="Checkbox"],
input[type="checkbox"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.MuiButtonBase-root.MuiCheckbox-root {
  background: transparent !important;
  box-shadow: none !important;
}

/* Unchecked - grey */
.MuiCheckbox-root svg {
  color: #8E8E96 !important;
  filter: none !important;
}

/* Checked - teal, no glow */
.MuiCheckbox-root.Mui-checked svg {
  color: #22CAAD !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Kill all effects */
.MuiTouchRipple-root {
  display: none !important;
}

.MuiCheckbox-root:hover,
.MuiCheckbox-root:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== MISC ===== */
.MuiIconButton-root {
  color: #8E8E96 !important;
}

.MuiIconButton-root:hover {
  color: #FAFAFA !important;
}

/* Language selector */
.MuiSelect-root, select, [class*="Select"] {
  color: #FAFAFA !important;
  background: transparent !important;
}

/* Hide powered by */
[class*="powered"], [class*="Powered"], footer {
  opacity: 0.15 !important;
}

/* Caption text */
.MuiTypography-caption, small {
  color: #52525A !important;
}