/* =============================================================================
   Tema "Gruppo ECOSafety" per il portale Authelia (authelia.ecosafety.it)
   -----------------------------------------------------------------------------
   Iniettato da Caddy (plugin replace-response) come <link> di STESSA ORIGINE,
   cosi' da rispettare la CSP di Authelia (`style-src 'self'`). Nessuna risorsa
   esterna (font/immagini): solo gradienti CSS, quindi nessuna violazione CSP.
   Palette allineata al logo ufficiale: navy #004070 + ciano #0090c0.
   Interventi puramente cosmetici sopra la UI MUI: sfondo, glassmorphism,
   accenti, bottoni e campi. I selettori `.Mui*` sono stabili tra build.
   ============================================================================= */

:root {
  --eos-cyan: #1aa3da;
  --eos-cyan-2: #0a6fb0;
  --eos-navy: #004070;
  --eos-cyan-soft: rgba(26, 163, 218, 0.18);
  --eos-text: #e6f3fb;
  --eos-text-muted: #9fc0d4;
  --eos-card: rgba(8, 24, 38, 0.55);
  --eos-border: rgba(26, 163, 218, 0.30);
}

/* ---- Sfondo ------------------------------------------------------------- */
html, body {
  min-height: 100%;
  background-color: #04101d !important;
  color: var(--eos-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
}

body {
  position: relative;
  background-image:
    radial-gradient(60rem 60rem at 12% -10%, rgba(26, 163, 218, 0.22), transparent 60%),
    radial-gradient(50rem 50rem at 110% 8%,  rgba(0, 64, 112, 0.40), transparent 58%),
    radial-gradient(70rem 70rem at 50% 120%, rgba(10, 111, 176, 0.22), transparent 60%),
    linear-gradient(160deg, #061726 0%, #07223a 42%, #03101d 100%) !important;
  background-attachment: fixed !important;
}

/* lieve drift luminoso di sfondo */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(26rem 26rem at 30% 28%, rgba(26, 163, 218, 0.12), transparent 60%),
    radial-gradient(22rem 22rem at 72% 64%, rgba(0, 64, 112, 0.18), transparent 60%);
  filter: blur(8px);
  animation: eosDrift 20s ease-in-out infinite alternate;
}
@keyframes eosDrift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0)  scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

#root { position: relative; z-index: 1; }

/* ---- "Card" centrale (Container maxWidth xs) ---------------------------- */
.MuiContainer-maxWidthXs {
  background: var(--eos-card) !important;
  border: 1px solid var(--eos-border) !important;
  border-radius: 20px !important;
  padding: 2.2rem 2rem 2rem !important;
  margin-top: 1.5rem !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 42px -10px rgba(26, 163, 218, 0.28);
}

/* ---- Top bar trasparente (selettore lingua) ----------------------------- */
.MuiAppBar-root { background: transparent !important; box-shadow: none !important; }
.MuiAppBar-root .MuiSvgIcon-root { color: var(--eos-text-muted) !important; }

/* ---- Logo ufficiale Gruppo ECOSafety ------------------------------------ */
/* Wordmark navy+ciano su trasparente: lo poggiamo su una "targhetta" chiara
   con padding, cosi' il navy resta leggibile sulla card scura. */
.MuiContainer-maxWidthXs img {
  display: block !important;
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  margin: 0.2rem auto 0.6rem !important;
  padding: 15px 20px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-radius: 14px !important;
  box-shadow:
    0 10px 26px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}
/* nasconde l'icona utente di default se mai comparisse */
#UserSvg { display: none !important; }

/* ---- Titolo ("Accedi"/"Sign in"): nascosto su richiesta -------------------- */
.MuiContainer-maxWidthXs h5.MuiTypography-root { display: none !important; }

/* ---- Campi input -------------------------------------------------------- */
.MuiOutlinedInput-root {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 12px !important;
  transition: box-shadow .2s ease, background .2s ease;
}
.MuiOutlinedInput-root:hover { background: rgba(255, 255, 255, 0.06) !important; }
.MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, 0.14) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(26, 163, 218, 0.50) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--eos-cyan) !important;
  border-width: 1px !important;
}
.MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 4px var(--eos-cyan-soft) !important; }
.MuiInputBase-input { color: var(--eos-text) !important; font-size: 0.875rem !important; }
.MuiInputLabel-root { color: var(--eos-text-muted) !important; font-size: 0.875rem !important; }
.MuiInputLabel-root.Mui-focused { color: var(--eos-cyan) !important; }
/* legenda della tacca (notch) coerente col label rimpicciolito */
.MuiOutlinedInput-notchedOutline legend { font-size: 0.66rem !important; }

/* ---- Bottone principale ------------------------------------------------- */
.MuiButton-containedPrimary {
  background-image: linear-gradient(135deg, var(--eos-cyan) 0%, var(--eos-cyan-2) 100%) !important;
  box-shadow: 0 10px 24px -8px rgba(26, 163, 218, 0.55) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.3px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.MuiButton-containedPrimary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(26, 163, 218, 0.72) !important;
}
.MuiButton-containedPrimary:active { transform: translateY(0); }

/* ---- Checkbox "ricordami" (font/icona piu' piccoli) --------------------- */
.MuiCheckbox-root { color: var(--eos-text-muted) !important; padding: 4px !important; }
.MuiCheckbox-root.Mui-checked { color: var(--eos-cyan) !important; }
.MuiCheckbox-root .MuiSvgIcon-root { font-size: 1.05rem !important; }

/* ---- Link (reset password, ecc.) ---------------------------------------- */
.MuiLink-root, a.MuiLink-root, .MuiLink-button {
  color: var(--eos-cyan) !important;
  text-decoration-color: rgba(26, 163, 218, 0.4);
  font-size: 0.8rem !important;
}
.MuiLink-root:hover { color: #5fc6ee !important; }

/* ---- Testi secondari ---------------------------------------------------- */
.MuiFormControlLabel-label { color: var(--eos-text-muted) !important; font-size: 0.8rem !important; }