/* Authelia (auth.webery.at) — Webery light theme matching wireframes.
 * Authelia uses Material-UI (MUI). We override MUI's tokens at the root
 * and recolor specific MUI components. The dark default-theme is forced
 * to light via background and color overrides.
 */
:root {
  --webery-accent: #ff5745;
  --webery-accent-hover: #e64636;
  --webery-accent-dark: #c93628;
  --webery-accent-soft: #fff0ed;
  --webery-accent-ring: rgba(255, 87, 69, .25);

  --webery-page: #fafafa;
  --webery-panel: #ffffff;
  --webery-panel-alt: #f4f4f5;
  --webery-line: #e4e4e7;
  --webery-ink: #0a0a0a;
  --webery-text: #3f3f46;
  --webery-muted: #71717a;
  --webery-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(10, 10, 10, .05);

  color-scheme: light !important;
}

/* ─── Page surface ─────────────────────────────────────────────────── */
html,
body,
#root,
.theme-dark,
.theme-light,
.MuiCssBaseline-root {
  background: var(--webery-page) !important;
  background-color: var(--webery-page) !important;
  color: var(--webery-text) !important;
}

/* ─── Top right language switcher / circle button ──────────────────── */
button.MuiIconButton-root,
.MuiIconButton-root {
  color: var(--webery-muted) !important;
}

button.MuiIconButton-root:hover {
  color: var(--webery-ink) !important;
  background: var(--webery-panel-alt) !important;
}

/* ─── Login card / paper ───────────────────────────────────────────── */
.MuiPaper-root,
.MuiPaper-elevation,
.MuiCard-root {
  background: var(--webery-panel) !important;
  background-color: var(--webery-panel) !important;
  color: var(--webery-text) !important;
  border: 1px solid var(--webery-line) !important;
  box-shadow: var(--webery-shadow) !important;
  border-radius: 10px !important;
  background-image: none !important;
}

/* ─── Hide default Authelia user-avatar circle (we replace with logo) ─ */
.MuiAvatar-root[class*="root"],
[class*="LoginPortal"] .MuiAvatar-root,
[class*="MuiAvatar-circular"] {
  display: none !important;
}

/* Inject the Webery wordmark at top of the login card */
.MuiPaper-root [class*="header"],
.MuiPaper-root > div:first-child,
.MuiContainer-root [class*="LoginLayout"] > div:first-child {
  /* placeholder — overridden below */
}

/* Use the Webery wordmark as the card header */
.MuiCardContent-root::before,
.MuiPaper-root::before {
  content: "";
  display: block;
  background: url("/favicon.svg") no-repeat center / contain;
  width: 100%;
  height: 80px;
  margin: -1rem auto 1rem;
}

/* ─── Typography ───────────────────────────────────────────────────── */
.MuiTypography-root,
h1, h2, h3, h4, h5, h6, p, span, label {
  color: var(--webery-text) !important;
}

.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  color: var(--webery-ink) !important;
}

.MuiTypography-caption {
  color: var(--webery-muted) !important;
}

/* ─── Form inputs (TextField) ──────────────────────────────────────── */
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiFilledInput-root,
.MuiInput-root {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
  border-radius: 8px !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--webery-line) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--webery-muted) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--webery-accent) !important;
  border-width: 2px !important;
}

.MuiInputBase-input {
  color: var(--webery-ink) !important;
}

.MuiInputLabel-root {
  color: var(--webery-muted) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--webery-accent-dark) !important;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.MuiButton-root {
  text-transform: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}

.MuiButton-contained,
.MuiButton-containedPrimary,
.MuiButton-root.MuiButton-contained,
button[type="submit"].MuiButton-root {
  background: var(--webery-accent) !important;
  background-color: var(--webery-accent) !important;
  color: #ffffff !important;
}

.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover,
button[type="submit"].MuiButton-root:hover {
  background: var(--webery-accent-hover) !important;
  background-color: var(--webery-accent-hover) !important;
  box-shadow: 0 0 0 3px var(--webery-accent-ring) !important;
}

.MuiButton-text {
  color: var(--webery-accent-dark) !important;
}

.MuiButton-text:hover {
  background: var(--webery-accent-soft) !important;
  color: var(--webery-accent) !important;
}

.MuiButton-outlined {
  border-color: var(--webery-accent) !important;
  color: var(--webery-accent-dark) !important;
}

.MuiButton-outlined:hover {
  background: var(--webery-accent-soft) !important;
  border-color: var(--webery-accent) !important;
}

/* ─── Links ────────────────────────────────────────────────────────── */
.MuiLink-root,
a.MuiTypography-root {
  color: var(--webery-accent-dark) !important;
  text-decoration: none !important;
}

.MuiLink-root:hover,
a.MuiTypography-root:hover {
  color: var(--webery-accent) !important;
}

/* ─── Checkboxes (Angemeldet bleiben) ──────────────────────────────── */
.MuiCheckbox-root {
  color: var(--webery-muted) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--webery-accent) !important;
}

/* ─── Footer "Betrieben mit Authelia" ──────────────────────────────── */
footer,
[class*="footer"],
[class*="LoginLayout"] > p:last-child {
  color: var(--webery-muted) !important;
  opacity: .7;
}

/* ─── Progress / spinner ───────────────────────────────────────────── */
.MuiCircularProgress-root,
.MuiCircularProgress-circle {
  color: var(--webery-accent) !important;
}

/* ─── Snackbar / notification ──────────────────────────────────────── */
.MuiSnackbarContent-root,
.MuiAlert-root {
  background: var(--webery-panel) !important;
  color: var(--webery-ink) !important;
  border: 1px solid var(--webery-line) !important;
}

/* ─── Selection ────────────────────────────────────────────────────── */
::selection {
  background: var(--webery-accent) !important;
  color: #ffffff !important;
}

/* ─── Hide the default user-avatar SVG circle on Hallo/Consent pages ── */
.MuiAvatar-root,
.MuiAvatar-circular,
.MuiAvatar-colorDefault,
[class*="MuiAvatar"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* The bare SVG (person icon) that some Authelia views render above the
 * greeting — match by size + shape. Hide it. */
[id="root"] > div > svg[viewBox*="0 0 24 24"],
.MuiContainer-root svg[data-testid="AccountCircleIcon"],
svg[data-testid="AccountCircleIcon"] {
  display: none !important;
}

/* ─── Scope/permission list on the consent page ───────────────────── *
 * Authelia renders the requested scopes in a list. By default that list
 * sits in a dark Box. Force it light. */
.MuiList-root,
.MuiListItem-root,
.MuiListItem-gutters,
[class*="MuiList-"],
.MuiBox-root[class*="scope"],
[class*="ConsentView"] .MuiBox-root,
[class*="Consent"] [class*="MuiBox-root"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--webery-text) !important;
}

/* The wrapper containing the scope list often has dark fill — drop it */
.MuiPaper-root .MuiBox-root,
.MuiCardContent-root .MuiBox-root {
  background: transparent !important;
  background-color: transparent !important;
}

/* List item text + icons must be readable */
.MuiListItemText-root,
.MuiListItemText-primary,
.MuiListItemText-secondary,
.MuiListItem-root span,
.MuiListItem-root p {
  color: var(--webery-text) !important;
}

.MuiListItemIcon-root,
.MuiListItemIcon-root svg {
  color: var(--webery-accent) !important;
  fill: currentColor !important;
}

/* Outline the scope list with a light border so it still feels like
 * a contained group */
.MuiList-root {
  border: 1px solid var(--webery-line) !important;
  border-radius: 8px !important;
  background: var(--webery-panel-alt) !important;
  padding: .25rem .5rem !important;
}

/* ─── Two big buttons row (Annehmen / Ablehnen) ──────────────────── */
.MuiButton-root[class*="primary"],
button.MuiButton-containedPrimary {
  background: var(--webery-accent) !important;
  color: #ffffff !important;
}

.MuiButton-root[class*="secondary"],
button.MuiButton-containedSecondary {
  background: var(--webery-panel-alt) !important;
  color: var(--webery-ink) !important;
  border: 1px solid var(--webery-line) !important;
}

button.MuiButton-containedSecondary:hover {
  background: var(--webery-panel) !important;
  border-color: var(--webery-muted) !important;
}

/* ─── Card wrapper for the centered "Hallo X" + content ─────────── *
 * Authelia centers content vertically but without a card. Add one
 * via a wrapper on the main grid. */
.MuiContainer-root > .MuiGrid-container,
#root > div > .MuiContainer-root > .MuiGrid-container {
  background: var(--webery-panel) !important;
  border: 1px solid var(--webery-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--webery-shadow) !important;
  padding: 2rem 1.5rem !important;
  max-inline-size: 480px !important;
  margin: 4vh auto !important;
}

/* Authentifiziert success-state card — drop the outline */
.MuiCardContent-root,
[class*="success"] .MuiPaper-root {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1rem 0 !important;
}

/* The big green check inside the "Authentifiziert" card */
[class*="success"] svg,
.MuiSvgIcon-colorSuccess {
  color: #16a34a !important;
}

/* ─── Suppress the Webery ::before on the AppBar (top header) ──────── *
 * The ::before logo I add to .MuiPaper-root inherits onto the AppBar
 * because the AppBar uses MuiPaper internally. The result is a clipped
 * signet stuck at the top of the page. Make the AppBar invisible and
 * kill its pseudo-elements. */
header.MuiAppBar-root,
.MuiAppBar-root,
.MuiAppBar-root.MuiPaper-root {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-block-size: 0 !important;
  block-size: 56px !important;
  position: relative !important;
}

.MuiAppBar-root::before,
.MuiAppBar-root::after,
header.MuiPaper-root::before,
header.MuiPaper-root::after {
  content: none !important;
  display: none !important;
  background: none !important;
}