/* ===================================================================
   AuxiliumAI - aspetto della pagina di accesso
   Servito da nginx come file dello stesso sito: la politica di
   sicurezza di Authelia (style-src 'self') blocca gli stili scritti
   dentro la pagina, ma accetta questo.
   =================================================================== */

:root {
  --aux-blu:     #1F3C88;
  --aux-arancio: #E8511F;
  --aux-testo:   #e8ecf4;
  --aux-tenue:   #9aa6bd;
}

/* --- sfondo --- */
html, body {
  min-height: 100%;
  background: radial-gradient(1200px 600px at 50% -10%, #23375f 0%, #16203a 45%, #0d1425 100%) !important;
  color: var(--aux-testo);
}

/* --- IL LOGO: grande, senza ritagli --- */
img[src*="logo"] {
  width: min(460px, 82vw) !important;
  max-width: 82vw !important;
  height: auto !important;
  max-height: none !important;
  margin: 8px auto 28px auto !important;
  display: block !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}

/* il contenitore del logo: centrato davvero, qualunque impaginazione usi */
div:has(> img[src*="logo"]) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

/* ripiego per i browser che non conoscono :has() */
img[src*="logo"] {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* --- il riquadro di accesso --- */
.MuiPaper-root {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(6px);
  padding: 26px 22px !important;
}

/* --- campi di testo --- */
.MuiOutlinedInput-root {
  background: rgba(255, 255, 255, .06) !important;
  border-radius: 12px !important;
}
.MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, .18) !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(232, 81, 31, .55) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--aux-arancio) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--aux-arancio) !important; }
.MuiInputBase-input { color: var(--aux-testo) !important; }

/* --- pulsante di accesso: arancio Auxilium --- */
.MuiButton-contained {
  background: linear-gradient(135deg, var(--aux-arancio) 0%, #c8410f 100%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  text-transform: none !important;
  padding: 11px 18px !important;
  box-shadow: 0 8px 22px rgba(232, 81, 31, .30) !important;
}
.MuiButton-contained:hover {
  background: linear-gradient(135deg, #f2622f 0%, var(--aux-arancio) 100%) !important;
  box-shadow: 0 10px 26px rgba(232, 81, 31, .42) !important;
}
.MuiButton-text { color: var(--aux-tenue) !important; text-transform: none !important; }

/* --- testi secondari --- */
.MuiTypography-root { color: var(--aux-testo); }
.MuiFormControlLabel-label, .MuiTypography-caption { color: var(--aux-tenue) !important; }

/* --- riga aziendale in fondo --- */
body::after {
  content: "Powered by Auxilium ICT \00b7  Auxilium Service Provider \00a0\2014\00a0  \00a9 2026 - Tutti i diritti riservati";
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 0 18px;
  color: var(--aux-tenue);
  letter-spacing: .2px;
  pointer-events: none;
  z-index: 9999;
}

/* --- riga sopra la dicitura, sottile --- */
body::before {
  content: "";
  position: fixed;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
  z-index: 9999;
}

/* --- schermi piccoli --- */
@media (max-width: 480px) {
  img[src*="logo"] { width: 86vw !important; margin-bottom: 20px !important; }
  body::after { font-size: 11px; bottom: 14px; }
  body::before { bottom: 40px; }
}

/* se la guida finisce come figlia diretta della pagina (impaginazione
   non riconosciuta), la posiziono comunque in modo visibile */
body > .auxai-guida {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 64px;
  max-height: 42vh;
  overflow-y: auto;
  z-index: 9998;
  margin: 0;
}