/* Pagina di accesso (accounts/login.html) — pagina standalone, non eredita
   layout/base.html (niente topbar/sidebar app-shell): qui solo gli stili
   propri di questa pagina, sopra ai token/gli utility gia' definiti in
   crm-base-bundle.css (ui-card, ui-input, ui-btn, app-logo-badge...). */

.crm-login-shell{
  min-height:100vh;
  margin:0;
}

.crm-login-page{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:3rem;
  background-image:var(--crm-login-hero);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Leggera vignette scura solo sul lato destro (dove galleggia la card): il
   logo/claim del render restano nitidi a sinistra, il form resta leggibile
   sopra qualsiasi zona della foto senza appiattirla con un velo uniforme. */
.crm-login-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, transparent 42%, rgba(6,10,20,.42) 68%, rgba(6,10,20,.58) 100%);
  pointer-events:none;
}

.crm-login-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:23rem;
  padding:2.25rem 2rem !important;
  border-radius:1.5rem !important;
  background:rgba(8,12,22,.62) !important;
  -webkit-backdrop-filter:saturate(165%) blur(22px);
  backdrop-filter:saturate(165%) blur(22px);
  box-shadow:0 24px 60px rgba(0,0,0,.45) !important;
}

.crm-login-brand{
  display:flex;
  align-items:center;
  gap:.85rem;
}

.crm-login-badge{
  display:grid;
  place-items:center;
  height:2.75rem;
  width:2.75rem;
  border-radius:.9rem !important;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-0.02em;
  flex-shrink:0;
}

.crm-login-kicker{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
}

.crm-login-title{
  margin:.1rem 0 0;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text-1);
}

.crm-login-sub{
  margin:1.1rem 0 0;
  font-size:.85rem;
  line-height:1.55;
  color:var(--text-2);
}

.crm-login-sub a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

.crm-login-error{
  margin-top:1rem;
  padding:.7rem .9rem;
  border-radius:.85rem;
  font-size:.82rem;
  line-height:1.4;
  color:#fecdd3;
  background:rgba(244,63,94,.16);
  border:1px solid rgba(244,63,94,.32);
}

.crm-login-form{
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.crm-login-field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.crm-login-field span{
  font-size:.72rem;
  font-weight:600;
  color:var(--text-3);
}

.crm-login-submit{
  width:100%;
  margin-top:.35rem;
  font-size:.95rem;
}

.crm-login-forgot{
  display:block;
  margin-top:1.3rem;
  text-align:center;
  font-size:.82rem;
  color:var(--text-2);
  text-decoration:underline;
  text-underline-offset:2px;
}

.crm-login-forgot:hover{
  color:var(--text-1);
}

@media (max-width: 720px){
  .crm-login-page{
    justify-content:center;
    padding:1.25rem;
    align-items:flex-end;
    padding-bottom:2.5rem;
    /* Foto panoramica: al centro mostra soprattutto il muro spoglio.
       Spostando l'inquadratura verso destra si vede la piscina/vista
       illuminata, molto più scenografica sul ritaglio stretto mobile. */
    background-position:75% center;
  }
  .crm-login-page::before{
    background:linear-gradient(180deg, transparent 0%, transparent 40%, rgba(6,10,20,.55) 78%, rgba(6,10,20,.7) 100%);
  }
}

@media (max-width: 420px){
  .crm-login-card{ padding:1.6rem 1.3rem !important; }
}