/* ============================================================================
   Cygnus theme override for the Authelia login portal.
   Injected into the portal HTML by NPM (sub_filter) before </head>, so it loads
   after Authelia's own bundle and wins on specificity/order. Mirrors the Cygnus
   design system (cygnus.tokens.css): deep-space background, one cyan accent,
   Space Grotesk, hairline structure.
   NOTE: Authelia's frontend is React + MUI (hashed classes), so we theme via
   MUI's CSS custom properties + broad element/attribute selectors rather than
   brittle class names.
   Served same-origin (sso.scian.xyz/cygnus-theme.css) so Authelia's strict CSP
   (style-src 'self') allows it. Fonts are self-hosted same-origin too — Space
   Grotesk (Latin) + Pretendard (Korean), both variable — so font-src 'self'
   (default-src fallback) permits them.
   ========================================================================== */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root, [data-mui-color-scheme], body {
  /* MUI v5 CSS variables — recolour the whole palette to Cygnus */
  --mui-palette-primary-main: #8fd0ff;
  --mui-palette-primary-dark: #6fbdf5;
  --mui-palette-primary-light: #a9dbff;
  --mui-palette-primary-contrastText: #04060e;
  --mui-palette-background-default: transparent;
  --mui-palette-background-paper: rgba(8,13,26,.66);
  --mui-palette-text-primary: #e8eef9;
  --mui-palette-text-secondary: rgba(214,228,248,.55);
  --mui-palette-divider: rgba(150,200,255,.15);
  --mui-palette-success-main: #5dd88a;
  --mui-palette-error-main: #ff6b6b;
  --mui-palette-warning-main: #f4bf5f;
}

/* deep-space backdrop -------------------------------------------------- */
html, body, #root {
  background: radial-gradient(130% 100% at 72% 12%, #0a1226 0%, #05070f 46%, #010207 100%)
              no-repeat fixed !important;
  color: #e8eef9 !important;
  font-family: 'Space Grotesk', 'Pretendard', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* the centered login card --------------------------------------------- */
#root .MuiPaper-root,
#root [class*="loginLayout"],
#root [class*="LoginLayout"] {
  background: rgba(8,13,26,.62) !important;
  border: 1px solid rgba(150,200,255,.15) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 80px -32px rgba(0,0,0,.7) !important;
}

/* headings / brand name ------------------------------------------------ */
#root h1, #root h2, #root [class*="title"] {
  font-family: 'Space Grotesk', 'Pretendard', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: .18em !important;
  color: #e8eef9 !important;
}

/* text fields ---------------------------------------------------------- */
#root .MuiInputBase-root {
  background: rgba(4,7,15,.55) !important;
  border-radius: 8px !important;
}
#root .MuiOutlinedInput-notchedOutline { border-color: rgba(150,200,255,.15) !important; }
#root .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #8fd0ff !important; }
#root .MuiInputLabel-root { color: rgba(214,228,248,.55) !important; }
#root .MuiInputLabel-root.Mui-focused { color: #8fd0ff !important; }
#root input { color: #e8eef9 !important; }

/* primary button (Sign in) -------------------------------------------- */
#root .MuiButton-contained {
  background: #8fd0ff !important;
  color: #04060e !important;
  font-family: 'Space Grotesk', 'Pretendard', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
#root .MuiButton-contained:hover { background: #a9dbff !important; }
#root .MuiButton-text, #root .MuiLink-root, #root a { color: #8fd0ff !important; }

/* checkbox / accents --------------------------------------------------- */
#root .MuiCheckbox-root.Mui-checked, #root .MuiSvgIcon-colorPrimary { color: #8fd0ff !important; }

/* logo sizing (Cygnus mark) ------------------------------------------- */
#root img[alt*="Logo"], #root [class*="logo"] img { max-height: 84px !important; width: auto !important; }

/* status / alerts ------------------------------------------------------ */
#root .MuiAlert-standardError { background: rgba(255,107,107,.12) !important; color: #ff9a9a !important; }
#root .MuiAlert-standardSuccess { background: rgba(93,216,138,.12) !important; color: #9be9b5 !important; }

/* footer / powered-by muting ------------------------------------------ */
#root [class*="powered"], #root footer { color: rgba(214,228,248,.34) !important; }