/*
 * Optale — Solar Eclipse v3 theme for Authelia
 * Injected via nginx sub_filter sidecar at auth.optale.no
 * Accent gradient approved 2026-04-19 (OPT-1014)
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --accent-gradient: linear-gradient(90deg, #ff4f81 0%, #ff5c5c 50%, #ff6b2c 100%);
  --accent-gradient-soft: linear-gradient(90deg, rgba(255,79,129,0.15) 0%, rgba(255,92,92,0.15) 50%, rgba(255,107,44,0.15) 100%);
  --void: #000000;
  --surface-0: #050404;
  --surface-1: #0a0807;
  --surface-2: #0f0d0b;
  --surface-3: #16130f;
  --cream: #faf8f4;
  --cream-muted: rgba(250,248,244,0.64);
  --cream-faint: rgba(250,248,244,0.42);
  --border: rgba(250,248,244,0.08);
  --border-strong: rgba(250,248,244,0.16);
  --focus-glow: 0 0 0 2px rgba(255,92,92,0.55), 0 0 0 4px rgba(255,107,44,0.28);
}

html, body, #root {
  background-color: var(--void) !important;
  color: var(--cream) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Full-page background layering */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at top, rgba(255,107,44,0.045) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(255,79,129,0.035) 0%, transparent 60%),
    var(--void);
  pointer-events: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--cream) !important;
}

.MuiTypography-body1, .MuiTypography-body2, .MuiTypography-subtitle1, .MuiTypography-subtitle2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--cream) !important;
}

.MuiTypography-caption, .MuiTypography-overline {
  color: var(--cream-muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.04em !important;
}

/* Card / login panel */
.MuiPaper-root, .MuiCard-root {
  background-color: var(--surface-1) !important;
  color: var(--cream) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.4),
    0 12px 48px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,92,92,0.03) inset !important;
  border-radius: 14px !important;
}

.MuiContainer-root, .MuiGrid-container {
  background: transparent !important;
}

/* Inputs */
.MuiInputBase-root, .MuiOutlinedInput-root, .MuiFilledInput-root {
  background-color: var(--surface-2) !important;
  color: var(--cream) !important;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

.MuiInputBase-input, .MuiOutlinedInput-input {
  color: var(--cream) !important;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace !important;
  caret-color: #ff6b2c !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--border) !important;
  border-width: 1px !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-strong) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: transparent !important;
}

.MuiOutlinedInput-root.Mui-focused {
  box-shadow: var(--focus-glow) !important;
}

.MuiInputLabel-root {
  color: var(--cream-muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.MuiInputLabel-root.Mui-focused {
  background: var(--accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.MuiFormHelperText-root {
  color: var(--cream-faint) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.MuiFormHelperText-root.Mui-error {
  color: #ff6b6b !important;
}

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px var(--surface-2) inset !important;
  -webkit-text-fill-color: var(--cream) !important;
  caret-color: #ff6b2c !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Primary button — login CTA */
.MuiButton-root, .MuiButtonBase-root {
  text-transform: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  transition: filter 160ms ease, box-shadow 160ms ease, transform 120ms ease !important;
}

.MuiButton-containedPrimary,
.MuiButton-contained.MuiButton-colorPrimary,
button[type="submit"].MuiButton-contained {
  background: var(--accent-gradient) !important;
  background-size: 200% 100% !important;
  color: var(--cream) !important;
  border: 0 !important;
  box-shadow: 0 4px 18px rgba(255,92,92,0.28), 0 2px 4px rgba(0,0,0,0.3) !important;
}

.MuiButton-containedPrimary:hover,
.MuiButton-contained.MuiButton-colorPrimary:hover,
button[type="submit"].MuiButton-contained:hover {
  background: var(--accent-gradient) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 24px rgba(255,92,92,0.38), 0 2px 6px rgba(0,0,0,0.4) !important;
}

.MuiButton-containedPrimary:active,
button[type="submit"].MuiButton-contained:active {
  transform: translateY(1px) !important;
  filter: brightness(0.96) !important;
}

.MuiButton-containedPrimary.Mui-disabled {
  background: var(--surface-3) !important;
  color: var(--cream-faint) !important;
  box-shadow: none !important;
}

/* Secondary: outlined */
.MuiButton-outlined, .MuiButton-outlinedPrimary, .MuiButton-outlinedSecondary {
  background: transparent !important;
  border: 1px solid var(--cream) !important;
  color: var(--cream) !important;
}

.MuiButton-outlined:hover {
  background: rgba(250,248,244,0.04) !important;
  border-color: var(--cream) !important;
}

/* Text buttons + links get gradient-text */
.MuiLink-root, a.MuiLink-root, .MuiButton-text, .MuiButton-textPrimary {
  background: var(--accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.MuiLink-root:hover {
  filter: brightness(1.15) !important;
  text-decoration: none !important;
}

/* Checkbox, radio, switch */
.MuiCheckbox-root, .MuiRadio-root {
  color: var(--border-strong) !important;
}

.MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked {
  color: #ff6b2c !important;
}

.MuiSwitch-track {
  background-color: var(--border-strong) !important;
}

.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background: var(--accent-gradient) !important;
  opacity: 1 !important;
}

/* Icons — obliterate default MUI blue/green */
.MuiSvgIcon-root {
  color: var(--cream) !important;
}

.MuiSvgIcon-colorPrimary { color: #ff6b2c !important; }
.MuiSvgIcon-colorSecondary { color: #ff4f81 !important; }
.MuiSvgIcon-colorAction { color: var(--cream-muted) !important; }

/* Stepper / progress bars */
.MuiCircularProgress-root, .MuiCircularProgress-colorPrimary {
  color: #ff6b2c !important;
}

.MuiLinearProgress-bar {
  background: var(--accent-gradient) !important;
}

/* Alerts */
.MuiAlert-standardError {
  background-color: rgba(255, 79, 79, 0.08) !important;
  color: #ff9a9a !important;
  border: 1px solid rgba(255,79,79,0.25) !important;
}

.MuiAlert-standardSuccess {
  background-color: rgba(255, 107, 44, 0.06) !important;
  color: #ffb37a !important;
  border: 1px solid rgba(255,107,44,0.22) !important;
}

.MuiAlert-standardInfo, .MuiAlert-standardWarning {
  background-color: var(--surface-2) !important;
  color: var(--cream-muted) !important;
  border: 1px solid var(--border) !important;
}

/* Divider */
.MuiDivider-root {
  border-color: var(--border) !important;
}

/* Tooltip */
.MuiTooltip-tooltip {
  background-color: var(--surface-3) !important;
  color: var(--cream) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  border: 1px solid var(--border-strong) !important;
  font-size: 11px !important;
}

/*
 * Logo replacement: the Authelia portal header contains an <img> with the Authelia brand.
 * We hide it and render the Optale eclipse glyph inline via a ::before pseudo-element.
 * The eclipse is an SVG data-URI: cream full disk + gradient corona crescent, scaled to the
 * standard 64px brand mark slot Authelia uses on the login card.
 */
img[alt*="Authelia" i],
img[src*="logo" i],
img[src*="authelia" i] {
  visibility: hidden !important;
  position: relative !important;
  display: inline-block !important;
  min-width: 72px !important;
  min-height: 72px !important;
}

img[alt*="Authelia" i]::after,
img[src*="logo" i]::after,
img[src*="authelia" i]::after {
  content: "" !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='0'><stop offset='0%25' stop-color='%23ff4f81'/><stop offset='50%25' stop-color='%23ff5c5c'/><stop offset='100%25' stop-color='%23ff6b2c'/></linearGradient><mask id='m'><rect width='100' height='100' fill='white'/><circle cx='58' cy='50' r='32' fill='black'/></mask></defs><circle cx='50' cy='50' r='34' fill='%23faf8f4'/><circle cx='50' cy='50' r='34' fill='url(%23g)' mask='url(%23m)'/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Portal header wrapper: inject a cream "Optale" wordmark below the glyph */
.MuiTypography-h1::before,
header h1::before {
  content: "" !important;
}

/* Suppress any Authelia wordmark/text that says "Authelia" */
.MuiTypography-root:where([class*="PortalHeader"]),
h1:has(> img[alt*="Authelia" i]) {
  font-family: 'Instrument Serif', Georgia, serif !important;
  color: transparent !important;
  position: relative !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--void);
}
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 8px;
  border: 2px solid var(--void);
}
::-webkit-scrollbar-thumb:hover {
  background: #2a221c;
}

/* Selection */
::selection {
  background: rgba(255, 107, 44, 0.35);
  color: var(--cream);
}

/* Footer / fine print */
footer, .MuiContainer-root > p:last-child {
  color: var(--cream-faint) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}