/* ===== enzinger.eu SSO — login theme (served same-origin; CSP 'self' safe) ===== */
:root {
  --green:#0f6b4f; --green-d:#0a4a37; --teal:#16c0ae; --ink:#0e2b23; --muted:#5f6f68;
  --card:rgba(255,255,255,.82);
}

/* --- animated tropical background + scrim (behind everything) --- */
html, body { min-height:100%; }
body {
  margin:0; background:#0b3a34;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body::before {
  content:""; position:fixed; inset:-4%; z-index:-2;
  background:url('/auth-bg.jpg') center/cover no-repeat;
  animation:ez-kenburns 36s ease-in-out infinite alternate;
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(155deg, rgba(4,26,22,.28), rgba(4,26,22,.56));
}
@keyframes ez-kenburns { from{transform:scale(1) translateY(0)} to{transform:scale(1.07) translateY(-1.2%)} }
@media (prefers-reduced-motion: reduce){ body::before{animation:none} }

/* --- the card --- */
#first-factor-stage .MuiContainer-root {
  max-width:432px;
  background:var(--card) !important;
  backdrop-filter:blur(22px) saturate(155%); -webkit-backdrop-filter:blur(22px) saturate(155%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:26px;
  padding:44px 40px 30px !important;
  box-shadow:0 46px 104px -42px rgba(2,20,16,.78), inset 0 1px 0 rgba(255,255,255,.75);
  animation:ez-rise .7s cubic-bezier(.2,.7,.15,1) both;
}
@keyframes ez-rise { from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:none} }

/* --- strip logo + default "Sign in" title --- */
#first-factor-stage .MuiGrid-root:has(> img[alt="Logo"]) { display:none !important; }
#first-factor-stage img[alt="Logo"] { display:none !important; }
#first-factor-stage .MuiTypography-h5 { display:none !important; }

/* --- injected header --- */
.ez-login-title { text-align:center; margin:0 0 28px; }
.ez-login-eyebrow {
  font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal); margin-bottom:12px;
}
.ez-login-head { font-size:clamp(20px,4.6vw,25px); font-weight:800; line-height:1.24; letter-spacing:-.01em; color:var(--ink); overflow-wrap:anywhere; }
.ez-login-head span {
  background:linear-gradient(100deg,var(--green),var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ez-login-sub { margin-top:10px; font-size:13.5px; color:var(--muted); font-weight:500; }

/* --- inputs --- */
#first-factor-stage .MuiOutlinedInput-root {
  border-radius:13px; background:rgba(255,255,255,.72); transition:box-shadow .2s, background .2s;
}
#first-factor-stage .MuiOutlinedInput-notchedOutline { border-color:rgba(15,107,79,.22); }
#first-factor-stage .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color:rgba(15,107,79,.42); }
#first-factor-stage .MuiOutlinedInput-root.Mui-focused { background:#fff; box-shadow:0 0 0 4px rgba(22,192,174,.16); }
#first-factor-stage .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color:var(--teal) !important; border-width:1.5px; }
#first-factor-stage .MuiInputLabel-root.Mui-focused { color:var(--green) !important; }

/* --- remember me --- */
#first-factor-stage .MuiCheckbox-root.Mui-checked { color:var(--teal) !important; }
#first-factor-stage .MuiFormControlLabel-label { color:#586b63; font-size:14px; }

/* --- sign-in button --- */
#first-factor-stage #sign-in-button {
  background:linear-gradient(120deg,var(--green),var(--teal)) !important;
  border-radius:13px !important; padding:12px !important; margin-top:6px;
  font-weight:800 !important; letter-spacing:.06em !important; font-size:15px !important;
  box-shadow:0 16px 32px -12px rgba(22,192,174,.75) !important;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
#first-factor-stage #sign-in-button:hover { transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 22px 40px -12px rgba(22,192,174,.85) !important; }
#first-factor-stage #sign-in-button:active { transform:translateY(0); }

/* --- reset link + footer --- */
#first-factor-stage #reset-password-button { color:var(--green) !important; font-weight:600 !important; }
#first-factor-stage a[href*="authelia.com"] { color:#83918b; opacity:.6; font-size:11px; }

/* --- language switcher pill (top-right, over the photo) --- */
#language-button {
  color:#fff !important; background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.3) !important; border-radius:999px !important;
  backdrop-filter:blur(8px); padding:5px 12px !important;
}
#language-button .MuiTypography-root, #language-button svg { color:#fff !important; }

/* --- narrow screens --- */
@media (max-width:430px){
  #first-factor-stage .MuiContainer-root { padding:34px 24px 24px !important; }
  .ez-login-title { margin-bottom:24px; }
}