/* ==========================================================================
   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 di bronzo 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(62% 0.08 65 / .14), 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 */
.login-cliente { display: flex; align-items: center; gap: 14px; }
.login-cliente__logo {
  background: var(--surface);
  border-radius: 10px;
  padding: 7px 9px;
  box-shadow: 0 4px 16px oklch(8% 0.01 255 / .35);
  flex-shrink: 0;
}
.login-cliente__logo img { display: block; height: 52px; width: auto; }
.login-cliente__nome {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--on-dark);
}
.login-cliente__ruolo { display: block; font-size: 12px; color: var(--on-dark-soft); 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: 14px; 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); }

/* 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-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 img { height: 36px; }
  .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; }
}