@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ── Basis ── */
*, *::before, *::after {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
  box-sizing: border-box;
}

body, #root {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ── Hintergrund-Layer ── */
.MuiContainer-root,
.MuiBox-root {
  background-color: transparent !important;
}

/* ── Login-Karte ── */
.MuiPaper-root,
.MuiCard-root {
  background-color: #000000 !important;
  border: 1px solid #1a1a1a !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Logo ── */
img[alt="Authelia"],
img[class*="logo"],
img[src*="logo"] {
  width: 48px !important;
  height: 48px !important;
  border-radius: 0 !important;
  opacity: 0.9;
}

/* ── Texte ── */
.MuiTypography-root,
.MuiFormLabel-root,
.MuiInputLabel-root,
h1, h2, h3, h4, h5, h6, p, span, label {
  color: #ffffff !important;
  letter-spacing: 0.03em;
}

.MuiTypography-colorTextSecondary,
.MuiFormHelperText-root {
  color: #555555 !important;
}

/* ── Eingabefelder ── */
.MuiInputBase-root {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

.MuiOutlinedInput-root {
  border-radius: 0 !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: #2a2a2a !important;
  border-radius: 0 !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #555555 !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #ffffff !important;
  border-width: 1px !important;
}

.MuiInputBase-input {
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

.MuiInputBase-input:-webkit-autofill,
.MuiInputBase-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #000 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* ── Labels (schwebend) ── */
.MuiInputLabel-root {
  color: #555555 !important;
}
.MuiInputLabel-root.Mui-focused {
  color: #ffffff !important;
}

/* ── Buttons ── */
.MuiButton-containedPrimary,
.MuiButton-contained {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.05em !important;
  padding: 0.6rem 1.5rem !important;
}

.MuiButton-containedPrimary:hover,
.MuiButton-contained:hover {
  background-color: #cccccc !important;
  box-shadow: none !important;
}

.MuiButton-outlinedPrimary,
.MuiButton-outlined {
  border-color: #2a2a2a !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  text-transform: none !important;
}

.MuiButton-outlinedPrimary:hover,
.MuiButton-outlined:hover {
  border-color: #555555 !important;
  background-color: transparent !important;
}

/* ── Links ── */
.MuiLink-root,
a {
  color: #555555 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

.MuiLink-root:hover,
a:hover {
  color: #ffffff !important;
}

/* ── Divider ── */
.MuiDivider-root {
  border-color: #1a1a1a !important;
}

/* ── Icons ── */
.MuiSvgIcon-root {
  color: #555555 !important;
}

/* ── 2FA / OTP Eingabe ── */
.MuiOutlinedInput-root input[type="tel"],
.MuiOutlinedInput-root input[type="number"] {
  text-align: center;
  letter-spacing: 0.3em;
  font-size: 1.2rem !important;
}

/* ── Fehler-Meldungen ── */
.MuiAlert-root {
  border-radius: 0 !important;
  background-color: #1a0000 !important;
  border: 1px solid #330000 !important;
  color: #ff6666 !important;
}

.MuiAlert-icon {
  color: #ff6666 !important;
}

/* ── Checkbox ── */
.MuiCheckbox-root {
  color: #555555 !important;
}
.MuiCheckbox-root.Mui-checked {
  color: #ffffff !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: #555555; }