/* Pagina di accesso (accounts/login.html) — pagina standalone, non eredita
   layout/base.html. Nessun riquadro: campi e scritte direttamente sulla foto,
   con un solo carattere (Montserrat, quello del logo). Sfondo: foto + animazione
   WebGL (crm-login-fx.js). Selettori con .crm-login-shell davanti per battere
   le regole globali di input e pulsanti del bundle del CRM. */

@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:var(--crm-login-font-file) format("woff2");
}

.crm-login-shell{
  --lg-ink:#ffffff;
  --lg-soft:rgba(255,255,255,.78);
  --lg-line:rgba(255,255,255,.55);
  --lg-brand:#2e8f5f;
  --lg-brand-hi:#38a36d;
  --lg-warm:#f2b184;
  --lg-font:"Montserrat","Segoe UI",system-ui,sans-serif;
  min-height:100vh;
  margin:0;
  background:#0b120f;
  color:var(--lg-ink);
  font:500 15px/1.55 var(--lg-font);
}

.crm-login-shell .crm-login-page{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr minmax(360px,440px);
  align-items:center;
  background-color:#0b120f;
  background-image:var(--crm-login-hero);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Velo scuro sfumato solo a destra: la foto resta nitida a sinistra (logo) e il testo e' sempre leggibile. */
.crm-login-shell .crm-login-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, transparent 46%, rgba(5,10,8,.5) 66%, rgba(5,10,8,.74) 100%);
  pointer-events:none;
  z-index:1;
}

/* Sfondo animato (crm-login-fx.js): sopra la foto, sotto velo e campi.
   Opacita' 0 finche' WebGL non ha disegnato il primo frame: nessun flash. */
.crm-login-shell .crm-login-fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
}
.crm-login-shell .crm-login-fx.is-live{ opacity:1; }

.crm-login-shell .crm-login-panel{
  grid-column:2;
  position:relative;
  z-index:2;
  padding:2rem clamp(1.75rem,4vw,3.5rem);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}

.crm-login-shell .crm-login-title{
  margin:0 0 .4rem;
  font:600 1.625rem/1.2 var(--lg-font);
  letter-spacing:-.005em;
  color:var(--lg-ink);
}

.crm-login-shell .crm-login-sub{
  margin:0 0 2.1rem;
  max-width:36ch;
  font-size:.875rem;
  font-weight:500;
  color:var(--lg-soft);
}

.crm-login-shell .crm-login-error{
  margin:0 0 1.4rem;
  padding:.7rem .9rem;
  border-left:3px solid #fda4af;
  font-size:.85rem;
  line-height:1.4;
  font-weight:600;
  color:#ffe4e6;
  background:rgba(120,20,40,.45);
}

.crm-login-shell .crm-login-form{
  margin:0;
  display:block;
}

.crm-login-shell .crm-login-field{
  display:block;
  margin:0 0 1.5rem;
}

.crm-login-shell .crm-login-field span{
  display:block;
  margin-bottom:.1rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lg-soft);
}

.crm-login-shell input.crm-login-input{
  display:block;
  width:100%;
  margin:0;
  padding:.65rem 0 .7rem;
  background:transparent !important;
  border:0 !important;
  border-bottom:1.5px solid var(--lg-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none;
  color:var(--lg-ink) !important;
  font:500 1.125rem var(--lg-font);
  text-shadow:inherit;
  -webkit-text-fill-color:var(--lg-ink);
  transition:border-color .15s;
}
.crm-login-shell input.crm-login-input:focus{
  border-bottom-color:#fff !important;
  box-shadow:0 1.5px 0 #fff !important;
}
/* Riempimento automatico del browser: niente sfondo chiaro dietro il testo */
.crm-login-shell input.crm-login-input:-webkit-autofill{
  -webkit-text-fill-color:var(--lg-ink);
  transition:background-color 9999s ease-out 0s;
  box-shadow:0 0 0 1000px rgba(5,10,8,.9) inset !important;
}

.crm-login-shell button.crm-login-submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin:.5rem 0 0;
  padding:1rem 1.1rem;
  background:var(--lg-brand);
  color:#fff;
  border:0;
  border-radius:3px;
  font:700 .8125rem var(--lg-font);
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow:none;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  cursor:pointer;
  transition:background .15s;
}
.crm-login-shell button.crm-login-submit:hover{ background:var(--lg-brand-hi); }
.crm-login-shell button.crm-login-submit:focus-visible,
.crm-login-shell .crm-login-links a:focus-visible{
  outline:2px solid var(--lg-warm);
  outline-offset:3px;
}

.crm-login-shell .crm-login-links{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:.8125rem;
}

.crm-login-shell .crm-login-links a{
  align-self:flex-start;
  padding-bottom:1px;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
}
.crm-login-shell .crm-login-links a:hover{ border-bottom-color:#fff; }

.crm-login-shell .crm-login-note{
  margin:0;
  color:var(--lg-soft);
  font-weight:500;
}

@media (max-width: 820px){
  .crm-login-shell .crm-login-page{
    grid-template-columns:1fr;
    align-items:end;
    background-position:70% center;
  }
  .crm-login-shell .crm-login-page::before{
    background:linear-gradient(180deg, transparent 0%, transparent 28%, rgba(5,10,8,.62) 62%, rgba(5,10,8,.82) 100%);
  }
  .crm-login-shell .crm-login-panel{
    grid-column:1;
    margin-top:44vh;
    padding:1.9rem 1.5rem 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .crm-login-shell .crm-login-fx{ display:none; }
}