/*
 * Dexter-huisstijl voor het Authelia-portaal.
 * Donker, monochroom (zwart/grijs/wit), minimalistisch — in lijn met Dexter.
 * Wordt door Caddy in de portaal-HTML geinjecteerd (same-origin, CSP-veilig).
 * Authelia's front-end is Material-UI; we sturen op de stabiele Mui-*-klassen
 * met !important om de gebundelde stijlen te overschrijven.
 */

:root {
  --dx-bg: #09090b;
  --dx-surface: #111114;
  --dx-border: #27272a;
  --dx-border-strong: #3f3f46;
  --dx-text: #fafafa;
  --dx-muted: #a1a1aa;
  --dx-accent: #a1a1aa;
  --dx-radius: 10px;
}

html, body, #root {
  background: var(--dx-bg) !important;
  color: var(--dx-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif !important;
}

/* Kaart / paneel waarin het formulier staat */
.MuiPaper-root {
  background: var(--dx-surface) !important;
  border: 1px solid var(--dx-border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  border-radius: var(--dx-radius) !important;
  background-image: none !important;
}

/* Teksten */
.MuiTypography-root { color: var(--dx-text) !important; }
.MuiTypography-colorSecondary,
.MuiFormHelperText-root { color: var(--dx-muted) !important; }

/* Invoervelden */
.MuiOutlinedInput-root { background: var(--dx-bg) !important; border-radius: 8px !important; }
.MuiInputBase-input { color: var(--dx-text) !important; }
.MuiInputLabel-root { color: var(--dx-muted) !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--dx-border-strong) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--dx-muted) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--dx-text) !important; border-width: 1px !important; }
.MuiInputLabel-root.Mui-focused { color: var(--dx-text) !important; }

/* Knoppen — monochroom, gevuld = wit op zwart */
.MuiButton-root {
  text-transform: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.MuiButton-contained {
  background: var(--dx-text) !important;
  color: var(--dx-bg) !important;
}
.MuiButton-contained:hover { background: var(--dx-muted) !important; }
.MuiButton-outlined {
  border-color: var(--dx-border-strong) !important;
  color: var(--dx-text) !important;
}
.MuiButton-text { color: var(--dx-muted) !important; }

/* Links */
a, .MuiLink-root { color: var(--dx-muted) !important; text-decoration-color: var(--dx-border-strong) !important; }
a:hover, .MuiLink-root:hover { color: var(--dx-text) !important; }

/* Checkbox (onthoud mij) en radios */
.MuiCheckbox-root, .MuiRadio-root { color: var(--dx-border-strong) !important; }
.MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked { color: var(--dx-accent) !important; }

/* Voortgang / laadindicatoren */
.MuiCircularProgress-root, .MuiLinearProgress-bar { color: var(--dx-accent) !important; background-color: var(--dx-accent) !important; }

/* Meldingen (snackbars) monochroom houden */
.MuiAlert-root { background: var(--dx-surface) !important; color: var(--dx-text) !important; border: 1px solid var(--dx-border) !important; }

/* Geen tipping-off: verberg branding/voettekst die prijsgeeft wat erachter zit. */
a[href*="authelia.com"] { display: none !important; }
/* Eventueel logo-slot leeg laten (we plaatsen bewust geen logo). */
img[alt="Logo"], .logo, img.logo { display: none !important; }