/* ============== ECO-VOLT login ============== */

/* 1. Box-sizing globale */
*,
*::before,
*::after{
  box-sizing: border-box;
}

/* 2. Layout base */
html,
body{
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: background-color .3s, color .3s;
}

/* Tema pagina (sfondo generale) */
body.light-mode{ background:#020617; color:#e5e7eb; }  /* blu-nero */
body.dark-mode { background:#020617; color:#e5e7eb; }

/* Centra verticalmente la card */
body{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

/* 3. Canvas dello sfondo animato */
.content--canvas{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.content--canvas canvas{
  width:100%;
  height:100%;
  opacity:.9;
}

/* 4. Card di login (“vetro” scuro) */
.login-container{
  width:clamp(280px, 90vw, 420px);
  max-width:420px;
  margin:auto;
  padding:2.4rem 2rem 2.6rem;

  background:rgba(15,23,42,0.78);                 /* blu-grigio scuro */
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  border-radius:22px;
  border:1px solid rgba(148,163,184,0.4);          /* grigio-azzurro */
  box-shadow:0 18px 45px rgba(15,23,42,0.7);
  text-align:center;
  color:#e5e7eb;
}

/* 5. Logo */
.logo{
  display:block;
  width:clamp(190px, 50vw, 260px);
  max-width:100%;
  height:auto;
  margin:0 auto 1.0rem;
}
@media (max-width:480px){
  .logo{ width:160px; }
}

/* 6. Header wrapper logo */
.header-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:1rem;
}

.header-home .home-btn{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
}
.header-home svg{ fill:currentColor; }

/* 7. Form righe/etichette/campi */
.row{
  display:flex;
  flex-direction:column;
  margin-bottom:1rem;
  position:relative;
  border-radius:12px;
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* label di campo */
.row label{
  text-align:left;
  margin-bottom:.35rem;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.01em;
  color:#e5e7eb;
}

/* input di base dentro la card */
.login-container .row input{
  width:100%;
  padding:.7rem .9rem;
  font-size:.95rem;
  line-height:1.4;
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.7);
  background:rgba(15,23,42,0.85);
  color:#f9fafb;
}

/* placeholder tenue */
.login-container .row input::placeholder{
  color:rgba(248,250,252,0.6);
}

/* riga attiva (focus su uno dei campi interni) */
.login-container .row:focus-within{
  background:rgba(15,23,42,0.55);
  box-shadow:0 0 0 1px rgba(139,199,63,0.35);
}

/* label della riga attiva un filo più viva */
.login-container .row:focus-within label{
  color:#bef264;
}

/* focus esplicito dell’input */
.login-container .row input:focus{
  outline:none;
  border-color:#8bc73f;
  box-shadow:0 0 0 2px rgba(139,199,63,0.45);
}

/* 8. Bottone di login */
.login-btn{
  all:unset;
  width:100%;
  padding:.9rem 0;
  border-radius:999px;
  background:linear-gradient(135deg,#8bc73f 0%,#2c61c5 100%);
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  text-align:center;
  cursor:pointer;
  margin-top:.2rem;
  transition:transform .18s cubic-bezier(.25,.8,.25,1), box-shadow .18s;
}
.login-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,.26);
}
.login-btn:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}

/* 9. Messaggi dal server (credenziali errate, ecc.) */
.server-msg{
  margin:0 0 1.4rem;
  font-size:.95rem;
  font-weight:600;
  min-height:1.4em;
  text-align:center;
  color:#e5e7eb;
}

/* stato errore (es: utente/password errati) */
.server-msg.error{
  color:#fee2e2;                       /* testo rosa chiaro */
  background:rgba(127,29,29,0.9);      /* rosso scuro vetroso */
  border-radius:999px;
  padding:.45rem .9rem;
  display:inline-block;                /* pillola centrata */
}

/* stato ok/info (non usato ma pronto) */
.server-msg.ok{
  color:#dcfce7;
  background:rgba(22,101,52,0.9);
  border-radius:999px;
  padding:.45rem .9rem;
  display:inline-block;
}

/* 10. Messaggi di validazione lato client (jQuery Validate) */
.login-container label.error,
.login-container .error-message{
  display:block;
  margin-top:4px;
  font-size:.85rem;
  color:#ff9800 !important;
  text-align:left !important; /* allineati a sinistra sotto al campo */
}

/* bordo arancione sugli input invalidi */
.login-container input.error{
  border-color:#ff9800;
  box-shadow:0 0 0 2px rgba(255,152,0,.25);
}

/* 11. Autofill Chrome / Edge: evita sfondo bianco + testo bianco */
.login-container input:-webkit-autofill,
.login-container input:-webkit-autofill:hover,
.login-container input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px rgba(15,23,42,0.95) inset !important;
  box-shadow:0 0 0 1000px rgba(15,23,42,0.95) inset !important;
  -webkit-text-fill-color:#f9fafb !important;
}

/* 12. Footer vetroso (se presente) */
.evolt-footer{
  width:100%;
  padding:1.2rem .8rem;
  margin-top:3rem;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  border-top:1px solid rgba(148,163,184,.35);
  font-size:.75rem;
  text-align:center;
  line-height:1.4;
  color:#e5e7eb;
  margin-top:auto;
}
.evolt-footer a{
  color:#8bc73f;
  text-decoration:none;
}
.evolt-footer a:hover{
  text-decoration:underline;
}