/* ==========================================================================
   Pagina di accesso — Portale Rivenditori
   Palette, tipografia e impaginazione riprese dal prototipo
   Desktop\SitoOrdiniTende (styles.css), limitate a quanto serve al login.
   Caricato solo da Login.razor: non tocca il resto del portale.
   ========================================================================== */

/* I colori sono quelli di app.css, che il portale carica anche qui: questi sono solo i nomi
   che usa la pagina di accesso. */
:root {
  --surface-soft: var(--surface-top);
  --label:        var(--ink-3);
  --label-2:      var(--ink-3);
  --muted-4:      var(--muted-3);
  --line-field:   var(--campo);
  --btn:          var(--dark);
  --btn-hover:    var(--dark-hover);
  --acc-bg:       var(--anello);
  --danger:       var(--err);
}

/* Login.css lo carica solo Login.razor, tramite HeadContent: queste regole di base
   valgono nella pagina di accesso e in nessun altro punto del portale. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body * { box-sizing: border-box; }
body a { color: var(--acc-ink); text-decoration: none; }
body a:hover { color: var(--ink); }
body button,
body input { font-family: var(--sans); }

/* --------------------------------------------------------------- primitivi */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--label-2); }

.input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 6px;
  border: 1px solid var(--line-field);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  outline: none;
}
.input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }

.btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: background .15s ease, opacity .15s ease;
}
.btn:disabled { cursor: not-allowed; opacity: .6; }
.btn--dark { background: var(--btn); color: var(--on-dark); padding: 12px 26px; font-size: 14px; }
.btn--dark:hover:not(:disabled) { background: var(--btn-hover); }

/* --------------------------------------------------------------- impianto */

.login-shell { display: flex; min-height: 100vh; }

/* --- pannello di marca (sinistra) --- */
.login-hero {
  width: min(46%, 520px);
  flex-shrink: 0;
  background: var(--dark);
  border-right: 1px solid var(--dark-line);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: 48px 44px;
}
/* velo: alone verde in basso a destra + reticolo di punti */
.login-hero__pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(460px 460px at calc(100% + 40px) calc(100% + 60px),
      oklch(84% 0.09 142 / .12), transparent 70%),
    radial-gradient(circle, oklch(33% 0.014 255 / .6) 1px, transparent 1px);
  background-size: auto, 24px 24px;
  background-repeat: no-repeat, repeat;
}
.login-hero > *:not(.login-hero__pattern) { position: relative; z-index: 1; }
.login-hero > .login-hero__deco {
  position: absolute;
  right: -86px;
  bottom: -78px;
  width: 340px;
  height: 340px;
  z-index: 0;
  color: var(--acc-chiaro);
  opacity: .32;
  pointer-events: none;
  user-select: none;
}

/* logo e ragione sociale del committente. Il logo è quello della barra laterale del portale
   (LogoDsZanzariere), nei colori della guida, e come lì sta su una fascia bianca da bordo a
   bordo in cima al pannello: sul grigio i suoi grigi sparirebbero. I margini negativi pareggiano
   il padding del pannello. */
.login-cliente {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: -48px -44px 0;
  padding: 24px 44px;
  background: var(--surface);
}
.login-cliente__logo { display: block; height: 88px; flex-shrink: 0; }
.login-cliente__nome {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ds-grigio);
}
.login-cliente__ruolo { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* marchio dell'applicativo */
.login-hero__mid { display: flex; flex-direction: column; gap: 14px; }
.login-lockup { display: flex; align-items: center; gap: 16px; }
.login-lockup__icon { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 4px 14px oklch(0 0 0 / .38)); }
.login-lockup__name {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.04;
  color: var(--on-dark);
}
.login-lockup__name span { display: block; }
.login-hero__payoff { font-size: 50px; font-weight: 600; color: var(--acc-chiaro); }
.login-hero__desc { margin: 0; max-width: 400px; font-size: 13.5px; line-height: 1.65; color: var(--on-dark-soft); }

/* produttore e certificazioni */
.login-hero__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--dark-line);
  padding-top: 20px;
}
.login-powered__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--on-dark-soft);
}
.login-marks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.login-mark {
  background: var(--surface);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 14px oklch(8% 0.01 255 / .3);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s;
}
.login-mark:hover { transform: translateY(-2px); box-shadow: 0 8px 20px oklch(8% 0.01 255 / .4); }
.login-mark:focus-visible { outline: 2px solid var(--acc-chiaro); outline-offset: 3px; }
.login-mark img { display: block; height: 34px; width: auto; }
.login-mark--wide img { height: 26px; }
.login-hero__legal { font-size: 11px; line-height: 1.6; color: var(--on-dark-soft); }

/* ingresso a cascata degli elementi del pannello */
.login-cliente    { animation: login-in 380ms cubic-bezier(.16,1,.3,1)  60ms backwards; }
.login-hero__mid  { animation: login-in 380ms cubic-bezier(.16,1,.3,1) 150ms backwards; }
.login-hero__foot { animation: login-in 380ms cubic-bezier(.16,1,.3,1) 260ms backwards; }
@keyframes login-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- pannello del modulo (destra) --- */
.login-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: var(--surface-soft);
}
.login-form__inner {
  width: 100%;
  max-width: 380px;
  animation: login-in 360ms cubic-bezier(.16,1,.3,1) 60ms backwards;
}
.login-form__mob { display: none; align-items: center; gap: 10px; margin-bottom: 26px; }
.login-form__mob-icon { width: 32px; height: 32px; }
.login-form__mob span { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.login-form__title { font-family: var(--serif); font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.login-form__sub   { font-size: 14px; line-height: 1.5; color: var(--muted-2); margin-bottom: 30px; }
.login-form__fields{ display: flex; flex-direction: column; gap: 18px; }
.login-form__fields .field > label { font-size: 13px; color: var(--label); }
.login-form__fields .input { padding: 12px 14px; font-size: 15px; }
.login-form__forgot { display: flex; justify-content: flex-end; font-size: 13px; }
.login-form__submit { margin-top: 8px; padding: 13px; font-size: 15px; font-weight: 600; width: 100%; }
.login-form__foot {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-2);
  text-align: center;
}
.login-form__help { font-size: 12px; color: var(--muted-4); }

/* "Ricorda la mia email": una scelta di chi entra, non un'abitudine del portale. */
.login-ricorda {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
  font-size: 13px;
  color: var(--muted-2);
  cursor: pointer;
}

/* La casella del browser resta al suo posto, invisibile, sopra quella disegnata: riceve i clic,
   il Tab e lo spazio. Quella disegnata (da Uiverse, LeonKohli/wise-puma-87, nella forma del
   portale) si fa grigia quando è spuntata, e la spunta si disegna come in "Aggiunto
   all'ordine". */
.login-ricorda__input {
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.login-ricorda__casella {
  flex: 0 0 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--campo);
  border-radius: 5px;
  background: var(--surface);
  transition: background var(--durata-media) var(--curva-entrata),
              border-color var(--durata-media) var(--curva-entrata),
              transform var(--durata-breve) var(--curva-entrata);
}
.login-ricorda:hover .login-ricorda__casella { border-color: var(--campo-hover); }
.login-ricorda:active .login-ricorda__casella { transform: scale(.9); }

.login-ricorda__casella svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--durata-lunga) var(--curva-entrata) 40ms;
}

.login-ricorda__input:checked + .login-ricorda__casella { border-color: var(--dark); background: var(--dark); }
.login-ricorda__input:checked + .login-ricorda__casella svg { stroke-dashoffset: 0; }
.login-ricorda__input:focus-visible + .login-ricorda__casella { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Sotto il pulsante: entrando si accettano le condizioni d'uso. In fondo, le pagine legali e
   il titolare del portale. */
.login-form__legale { margin: -6px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-2); text-align: center; }
.login-form__legale a,
.login-legale a { color: var(--acc-ink); }
/* Dentro la frase il link si distingue anche senza guardare il colore. */
.login-form__legale a { text-decoration: underline; text-underline-offset: 2px; }
.login-form__legale a:focus-visible,
.login-legale a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 2px; }
.login-legale { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; }
.login-societa { font-size: 11.5px; color: var(--muted-3); }

/* campo con icona e occhio */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-ico {
  position: absolute;
  left: 13px;
  width: 17px; height: 17px;
  color: var(--muted-4);
  pointer-events: none;
  transition: color .15s;
}
.field:focus-within .input-ico { color: var(--acc); }
.input--ico { padding-left: 40px !important; }
.input--eye { padding-right: 46px !important; }
.input-eye {
  position: absolute;
  right: 5px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--muted-4);
  cursor: pointer;
  transition: color .14s, background .14s, transform .12s;
}
.input-eye:hover { color: var(--ink-3); background: var(--fill-2); }
.input-eye:active { transform: scale(.9); }
.input-eye svg { width: 18px; height: 18px; }

/* Avviso Caps Lock. Lo accende login.js aggiungendo la classe: lo stato del
   tasto non arriva al server, e per una spia del genere non vale un giro di rete. */
.login-caps {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warn-ink);
}
.login-caps.is-on { display: flex; }
.login-caps__ico { width: 13px; height: 13px; flex: none; }

.login-form__error {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--err-sfondo);
  border: 1px solid var(--err-bordo);
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  animation: login-shake 380ms cubic-bezier(.16,1,.3,1) 60ms;
}
.login-form__error svg { flex: none; }
@keyframes login-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@media (max-width: 900px) {
  .login-shell { flex-direction: column; }
  .login-hero {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--dark-line);
    padding: 26px 24px;
    gap: 22px;
  }
  .login-hero > .login-hero__deco { display: none; }
  .login-cliente { margin: -26px -24px 0; padding: 16px 24px; }
  .login-cliente__logo { height: 64px; }
  .login-hero__desc { display: none; }
  .login-lockup__name { font-size: 26px; }
  .login-lockup__name span { display: inline; }
  .login-lockup__icon { width: 42px; height: 42px; }
  .login-form { padding: 34px 24px; }
}

@media (max-width: 480px) {
  .login-cliente__logo { height: 52px; }
  .login-mark img { height: 28px; }
  .login-mark--wide img { height: 22px; }
  .login-marks { gap: 8px; }
  /* almeno 16px, altrimenti iOS ingrandisce la pagina al focus */
  .login-form__fields .input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-cliente, .login-hero__mid, .login-hero__foot,
  .login-form__inner, .login-form__error { animation: none; }
  .login-mark:hover { transform: none; }
}