/* hexfield login skin — injected at the box's Caddy (install-authelia.yml) via a <link> before </head>,
   served same-origin from auth.hexfield.app. 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 hexfield site
   (roles/common/templates/hexfield/{index,console}.html.j2): near-black bg, violet→pink accents,
   gradient "hexfield" wordmark. The stock Authelia logo is killed by a transparent logo.png
   (server.asset_path). Edit + re-run Install: Authelia (hexfield) to retune. */

:root { color-scheme: dark; }

html, body {
  background:
    radial-gradient(1100px 520px at 70% -10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(720px 360px at 12% 4%, rgba(255,84,112,.12), transparent 55%),
    #070910 fixed !important;
  color: #eaf0f7 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif !important;
}

/* the hexfield wordmark — fixed at the top, gradient text exactly like the site h1. Pure CSS so there
   is no image to sync; the transparent logo.png removes Authelia's own mark from the card. The hexagon
   glyph echoes the site favicon/brand mark. */
body::before {
  content: "\2b22  hexfield";   /* ⬢ + wordmark */
  position: fixed; top: 1.6rem; left: 0; right: 0; text-align: center;
  font-weight: 820; font-size: clamp(1.7rem, 6vmin, 2.3rem); letter-spacing: -1px; line-height: 1;
  background: linear-gradient(90deg, #fff, #bcaaff 60%, #9b8cff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(124,92,255,.35));
  z-index: 2147483647; pointer-events: none;
}

/* the login card / centered container */
.MuiPaper-root {
  background: linear-gradient(180deg, #141b27, #10151f) !important;
  border: 1px solid #1f2937 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px -28px rgba(124,92,255,.45), 0 18px 60px -20px #000a !important;
  backdrop-filter: blur(6px);
}

/* inputs — match the site fields */
.MuiOutlinedInput-root { background: #0e131d !important; border-radius: 13px !important; }
.MuiOutlinedInput-notchedOutline { border-color: #243049 !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #33405a !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #7c5cff !important; border-width: 1px !important; box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}
.MuiInputBase-input { color: #eaf0f7 !important; }
.MuiInputLabel-root { color: #8a97aa !important; }
.MuiInputLabel-root.Mui-focused { color: #9b8cff !important; }
.MuiFormHelperText-root { color: #8a97aa !important; }

/* primary button — the site violet gradient */
.MuiButton-containedPrimary, button[type="submit"].MuiButton-contained {
  background: linear-gradient(180deg, #7c5cff, #9b8cff) !important;
  color: #fff !important; font-weight: 800 !important; text-transform: none !important;
  border-radius: 13px !important; box-shadow: 0 8px 24px -10px rgba(124,92,255,.7) !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: #9b8cff !important; }
a:hover, .MuiLink-root:hover { color: #fff !important; }
.MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked { color: #7c5cff !important; }
.MuiTypography-root { color: #eaf0f7; }

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

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