/* peachey.me restyle of the Authelia sign-in page (Authelia 4.39).
   Injected by nginx (sub_filter on </head> under /authelia/). NOT an Authelia feature: selectors target
   Authelia's element IDs and MUI class names, so an Authelia upgrade may drop some styling — it then
   falls back to Authelia's own look; nothing breaks. Follows the device's light/dark setting. */
@import url("/peachey-assets/peachey.css");

html, body { background: var(--bg-solid) !important; }
body { font-family: var(--body) !important; color: var(--text); }
#root { position: relative; isolation: isolate; }

/* drifting peach light: two glows on body, one on #root, plus grain */
body::before, body::after, #root::before {
  content: ""; position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1;
  opacity: var(--glow-op); will-change: transform;
}
body::before { width: 46vmax; height: 46vmax; background: var(--glow1); left: -14vmax; top: -16vmax; animation: peach-drift-a 19s ease-in-out infinite alternate, peach-breathe 11s ease-in-out infinite alternate; }
body::after  { width: 40vmax; height: 40vmax; background: var(--glow2); right: -14vmax; bottom: -18vmax; animation: peach-drift-b 23s ease-in-out infinite alternate, peach-breathe 13s ease-in-out -4s infinite alternate; }
#root::before { width: 26vmax; height: 26vmax; background: var(--glow3); right: 18%; top: -14vmax; opacity: calc(var(--glow-op) * .5); animation: peach-drift-c 29s ease-in-out infinite alternate; }
html { background-image: radial-gradient(130% 100% at 50% -10%, var(--bg-a) 0%, var(--bg-b) 60%, var(--bg-c) 100%) !important; background-attachment: fixed !important; min-height: 100%; }
body { background: transparent !important; }

/* the sign-in column becomes a soft glass card */
#first-factor-stage .MuiContainer-maxWidthXs,
.MuiContainer-maxWidthXs {
  background: linear-gradient(180deg, var(--surf-a), var(--surf-b));
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 60px -26px var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 30px 28px 22px !important; max-width: 380px !important;
  animation: peach-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes peach-rise { from { transform: translateY(10px); } }   /* movement only — never hide the form */

/* logo (Authelia shows /config/assets/logo.png when present; size it) */
.MuiContainer-maxWidthXs img { width: 72px !important; height: 72px !important; }
#UserSvg { color: var(--accent) !important; fill: currentColor; }

/* title */
.MuiContainer-maxWidthXs .MuiTypography-h5 { font: 700 22px/1.25 var(--display) !important; color: var(--text) !important; letter-spacing: -.01em; }

/* fields */
.MuiOutlinedInput-root { background: var(--field) !important; border-radius: 10px !important; color: var(--text) !important; font-family: var(--body) !important; }
.MuiOutlinedInput-notchedOutline { border-color: var(--line) !important; border-radius: 10px !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--icon-line) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--accent) !important; border-width: 2px !important; }
.MuiInputBase-input { color: var(--text) !important; }
.MuiInputLabel-root, .MuiFormLabel-root { color: var(--muted) !important; font-family: var(--body) !important; }
.MuiInputLabel-root.Mui-focused { color: var(--accent) !important; }
.MuiInputAdornment-root .MuiIconButton-root { color: var(--muted) !important; }
input:-webkit-autofill { -webkit-text-fill-color: var(--text) !important; box-shadow: 0 0 0 40px var(--field) inset !important; }

/* remember me */
.MuiCheckbox-root { color: var(--muted) !important; }
.MuiCheckbox-root.Mui-checked { color: var(--accent-lo) !important; }
.MuiFormControlLabel-label { color: var(--muted) !important; font-family: var(--body) !important; font-size: 14px !important; }

/* sign-in button */
#sign-in-button, .MuiButton-containedPrimary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)) !important;
  color: var(--btn-text) !important; font: 600 15px var(--body) !important; text-transform: none !important;
  border-radius: 10px !important; padding: 11px 16px !important;
  box-shadow: 0 8px 20px -10px var(--accent-lo) !important; transition: transform .15s, box-shadow .15s !important;
}
#sign-in-button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px var(--accent-lo) !important; }
#sign-in-button.Mui-disabled { opacity: .6; }

/* links, footer, language button, errors */
.MuiLink-root, #reset-password-button { color: var(--accent) !important; font-family: var(--body) !important; }
.MuiContainer-maxWidthXs a.MuiLink-root { color: var(--faint) !important; font-size: 11.5px !important; white-space: nowrap; }
.MuiContainer-maxWidthXs .MuiGrid-grid-xs-4 { flex-basis: auto !important; max-width: none !important; }
header.MuiAppBar-root, header.MuiAppBar-root * { color: var(--muted) !important; background: transparent !important; box-shadow: none !important; }
.MuiAlert-root { border-radius: 10px !important; font-family: var(--body) !important; }
.MuiTypography-root { font-family: var(--body); }

@keyframes peach-drift-a { 50% { transform: translate(10vmax, 3vmax) scale(1.08); } 100% { transform: translate(16vmax, 10vmax) scale(1.18); } }
@keyframes peach-drift-b { 50% { transform: translate(-6vmax, -8vmax) scale(1.06); } 100% { transform: translate(-14vmax, -6vmax) scale(1.14); } }
@keyframes peach-drift-c { 100% { transform: translate(-12vmax, 9vmax) scale(1.2); } }
@keyframes peach-breathe { from { opacity: calc(var(--glow-op) * .75); } to { opacity: var(--glow-op); } }
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, #root::before, .MuiContainer-maxWidthXs { animation: none !important; }
}

/* Authelia's brief "Loading…" screen */
#root svg:not(#UserSvg):not([class*="MuiSvgIcon"]) { color: var(--accent) !important; fill: currentColor; }
#root > div > p, #root .MuiTypography-root { color: var(--text); }