/* custom.css — Authelia login arcade brand layer (Design Core, ADR-0002). GENERATED — do not hand-edit; regenerate: node build/sd.config.js */
/* Cosmetic only. Delivered same-origin as /mod-authelia.css by the authelia-nginx sub_filter sidecar (P5 CSS-injection ADR). */

:root {
  --al-accent: #4F74E4;
  --al-accent-hi: #8AA4F2;
  --al-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --al-mono: 'IBM Plex Mono', monospace;
  --al-line: 1px;
  --al-grid-pitch: 56px;
  --al-tick: 8px;
  --al-tick-w: 1.5px;
  --al-bg: color-mix(in srgb, var(--al-accent) 5%, #E7E9ED);
  --al-raised: color-mix(in srgb, var(--al-accent) 3%, #FFFFFF);
  --al-sunken: color-mix(in srgb, var(--al-accent) 7%, #DDE0E5);
  --al-text: #14161B;
  --al-text-2: #4C5464;
  --al-muted: #7C8494;
  --al-border: color-mix(in srgb, var(--al-accent) 26%, #C4C9D2);
  --al-border-ui: color-mix(in srgb, var(--al-accent) 15%, #D8DBE2);
  --al-grid: color-mix(in srgb, var(--al-accent) 12%, #CFD3DB);
  --al-link: color-mix(in srgb, var(--al-accent) 60%, #000000);
  --al-on-accent: #FFFFFF;
}

/* dark ground — mirrors Authelia theme:auto (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root {
      --al-bg: color-mix(in srgb, var(--al-accent) 5%, #0C0E12);
      --al-raised: color-mix(in srgb, var(--al-accent) 6%, #13161B);
      --al-sunken: color-mix(in srgb, var(--al-accent) 4%, #070809);
      --al-text: #EEF1F6;
      --al-text-2: #A6AEBC;
      --al-muted: #6C7382;
      --al-border: color-mix(in srgb, var(--al-accent) 22%, #2B303A);
      --al-border-ui: color-mix(in srgb, var(--al-accent) 12%, #1B1F26);
      --al-grid: color-mix(in srgb, var(--al-accent) 16%, #14181F);
      --al-link: var(--al-accent-hi);
      --al-on-accent: #FFFFFF;
  }
}

/* ---- page ground ---- */
body {
  background-color: var(--al-bg) !important;
  color: var(--al-text) !important;
  font-family: var(--al-sans) !important;
}
/* arcade hairline grid substrate — a fixed z-index:-1 layer masked to fade at the edges
   (matches huly-structure.css), so it reads as an instrument field, not wallpaper. Content
   and the opaque card sit above it; the gutters reveal it. */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background-image: linear-gradient(to right, var(--al-grid) var(--al-line), transparent var(--al-line)), linear-gradient(to bottom, var(--al-grid) var(--al-line), transparent var(--al-line)) !important;
  background-size: var(--al-grid-pitch) var(--al-grid-pitch) !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 0%, rgba(0,0,0,.35) 55%, transparent 92%) !important;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 0%, rgba(0,0,0,.35) 55%, transparent 92%) !important;
}

/* ---- the login panel: hairline card, boxy, tinted-raised surface, 4-corner ticks ---- */
.MuiContainer-root {
  background-color: var(--al-raised) !important;
  background-image: linear-gradient(var(--al-link), var(--al-link)), linear-gradient(var(--al-link), var(--al-link)), linear-gradient(var(--al-link), var(--al-link)), linear-gradient(var(--al-link), var(--al-link)), linear-gradient(var(--al-link), var(--al-link)), linear-gradient(var(--al-link), var(--al-link)), linear-gradient(var(--al-link), var(--al-link)), linear-gradient(var(--al-link), var(--al-link)) !important;
  background-repeat: no-repeat !important;
  background-size: var(--al-tick) var(--al-tick-w), var(--al-tick-w) var(--al-tick), var(--al-tick) var(--al-tick-w), var(--al-tick-w) var(--al-tick), var(--al-tick) var(--al-tick-w), var(--al-tick-w) var(--al-tick), var(--al-tick) var(--al-tick-w), var(--al-tick-w) var(--al-tick) !important;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right !important;
  background-origin: border-box !important;
  border: var(--al-line) solid var(--al-border) !important;
  border-radius: 0 !important;
  padding: 2.5rem 1.75rem 1.75rem !important;
  position: relative !important;
  box-shadow: none !important;
}
/* mono coordinate label — the instrument's registration tag, pinned top-left. Static here
   (this panel is always the identity/auth stage), so CSS content is honest, not a faked
   dynamic value. */
.MuiContainer-root::before {
  content: "ID.AUTH" !important;
  position: absolute !important;
  top: calc(var(--al-tick) + 0.35rem) !important;
  left: calc(var(--al-tick) + 0.6rem) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  font-family: var(--al-mono) !important;
  font-size: 0.6875rem !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--al-link) !important;
  opacity: 0.85 !important;
}

/* ---- logo: swap #UserSvg for the mod-id key tile — CSS gradients only (CSP-exempt) ---- */
#UserSvg {
  width: 64px !important;
  height: 64px !important;
  background-color: #e08768 !important;
  background-image: radial-gradient(circle at 20px 32px, transparent 5px, #fff 5px, #fff 8px, transparent 9px), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 27px 30px, 44px 34px, 49px 34px !important;
  background-size: 64px 64px, 23px 4px, 3px 7px, 3px 7px !important;
  border-radius: 0 !important;
}
#UserSvg > * {
  display: none !important;
}

/* ---- title: mono instrument voice, uppercase, tracked ---- */
.MuiTypography-h5 {
  font-family: var(--al-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
  color: var(--al-text) !important;
}

/* ---- inputs: boxy outlined, tinted well, hairline -> 2px accent on focus ---- */
.MuiInputBase-root.MuiOutlinedInput-root {
  border-radius: 0 !important;
  background: var(--al-sunken) !important;
}
.MuiOutlinedInput-notchedOutline {
  border-color: var(--al-border-ui) !important;
  border-width: var(--al-line) !important;
  border-radius: 0 !important;
}
.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--al-accent) !important;
  border-width: 2px !important;
}
.MuiInputBase-input {
  color: var(--al-text) !important;
  font-family: var(--al-sans) !important;
}
/* labels: mono, uppercase, tracked — the instrument voice */
.MuiInputLabel-root, label.MuiFormLabel-root {
  font-family: var(--al-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--al-muted) !important;
}
.MuiInputLabel-root.Mui-focused {
  color: var(--al-accent) !important;
}
/* floated label: collapse MUI's computed notch (mono+uppercase+tracking is wider than the
   gap MUI cut from the original mixed-case text) and let the shrunk label paint its own
   card-coloured background — a clean self-notch that fits any label width. */
.MuiOutlinedInput-notchedOutline legend {
  max-width: 0 !important;
}
.MuiInputLabel-root.MuiInputLabel-shrink {
  background: var(--al-raised) !important;
  padding: 0 6px !important;
}

/* ---- primary button: accent fill, boxy, mono uppercase, no shadow ---- */
#sign-in-button, .MuiButton-containedPrimary {
  background: var(--al-accent) !important;
  color: var(--al-on-accent) !important;
  border: var(--al-line) solid var(--al-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--al-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
}
#sign-in-button:hover, .MuiButton-containedPrimary:hover {
  background: color-mix(in srgb, var(--al-accent) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--al-accent) 85%, #000) !important;
  box-shadow: none !important;
}

/* ---- links / reset: accent (AA-safe: darkened accent on light, accent-hi on dark) ---- */
#reset-password-button, .MuiLink-root {
  color: var(--al-link) !important;
  text-decoration-color: var(--al-link) !important;
}

/* ---- remember-me checkbox: accent when checked ---- */
#remember-checkbox.Mui-checked, .MuiCheckbox-root.Mui-checked {
  color: var(--al-accent) !important;
}

/* ---- header / language button: quiet, boxy, mono ---- */
.MuiAppBar-root {
  background: transparent !important;
  box-shadow: none !important;
}
#language-button {
  color: var(--al-muted) !important;
  border-radius: 0 !important;
  font-family: var(--al-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ---- boxy law on incidental surfaces (alerts/snackbars/paper) ---- */
.MuiPaper-root, .MuiAlert-root, .MuiSnackbarContent-root {
  border-radius: 0 !important;
}

/* ---- square accent focus ring on interactive elements (arcade point) ---- */
.MuiButtonBase-root:focus-visible, #sign-in-button:focus-visible, #reset-password-button:focus-visible, .MuiInputBase-input:focus-visible {
  outline: 2px solid var(--al-accent) !important;
  outline-offset: 2px !important;
}

/* ---- pre-hydrate loader bars: accent (default white is invisible on light ground) ---- */
span[style*="ScaleLoader"] {
  background-color: var(--al-accent) !important;
}