/* namecoat login skin — injected at the Caddy edge (install-authelia.yml) via a <link> before </head>,
   served same-origin from auth.name.co.at. Authelia 4.39 has no custom-CSS config hook, so this overrides
   the MUI v5 portal by its STABLE class names (.Mui*) + structural selectors — never the hashed emotion
   (css-xxxx) classes. Palette + wordmark match the apex (roles/common/templates/namecoat-web/index.html.j2).
   The stock Authelia logo is killed by a transparent logo.png (server.asset_path); the wordmark below is
   pure CSS so it tracks the apex exactly. Edit this file + re-run Install: Authelia (namecoat) to retune. */

:root { color-scheme: dark; }

html, body {
  background: radial-gradient(1400px 1000px at 50% 40%, #16131f, #0a0a10 80%) !important;
  color: #e8e8f0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* the namecoat wordmark — fixed at the top, gradient text exactly like the apex. Pure CSS so there is
   no image to keep in sync; the transparent logo.png removes Authelia's own mark from the card. */
body::before {
  content: "namecoat";
  position: fixed; top: 1.7rem; left: 0; right: 0; text-align: center;
  font-family: 'Avenir Next','Avenir',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight: 700; font-size: clamp(1.7rem, 6vmin, 2.2rem); letter-spacing: -1.3px; line-height: 1;
  background: linear-gradient(100deg, #7fd1ff, #9bb3f0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  z-index: 2147483647; pointer-events: none;
}

/* the login card / centered container */
.MuiPaper-root {
  background: #13111dcc !important;
  border: 1px solid #262338 !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 60px -20px #000a !important;
  backdrop-filter: blur(6px);
}

/* inputs — match the apex lookup field */
.MuiOutlinedInput-root { background: #15131fdd !important; border-radius: 13px !important; }
.MuiOutlinedInput-notchedOutline { border-color: #2a2740 !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #3a3658 !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #9bb3f0 !important; border-width: 1px !important; box-shadow: 0 0 0 3px #9bb3f022;
}
.MuiInputBase-input { color: #e8e8f0 !important; }
.MuiInputLabel-root { color: #6f6a92 !important; }
.MuiInputLabel-root.Mui-focused { color: #9bb3f0 !important; }
.MuiFormHelperText-root { color: #9a93c8 !important; }

/* primary button — the apex blue gradient with dark ink */
.MuiButton-containedPrimary, button[type="submit"].MuiButton-contained {
  background: linear-gradient(180deg, #7fd1ff, #9bb3f0) !important;
  color: #0c0c14 !important; font-weight: 800 !important; text-transform: none !important;
  border-radius: 13px !important; box-shadow: none !important;
}
.MuiButton-containedPrimary:hover { filter: brightness(1.08); }
.MuiButton-root { text-transform: none !important; border-radius: 11px !important; }

/* links + checkbox + accents */
a, .MuiLink-root { color: #9bb3f0 !important; }
a:hover, .MuiLink-root:hover { color: #cfe3ff !important; }
.MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked { color: #9bb3f0 !important; }
.MuiTypography-root { color: #e8e8f0; }

/* dim the "Powered by Authelia" footer rather than hide it (attribution stays, quietly) */
.MuiTypography-root[href*="authelia"], a[href*="authelia.com"] { color: #4a466a !important; opacity: .7; }

@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }