/* ============================================================
   login.css — pagina di accesso

   Stesso linguaggio di clienti_v2 e bacheca-v2:
   - superfici bianche piatte, bordo sottile, ombra leggera;
   - pulsanti a pillola, blu #2563eb, niente gradienti né bagliori;
   - testo #111827 / #374151 / #6b7280 come nelle altre pagine.

   Compatibile con il Safari vecchio dell'iPad:
   niente gap nei flex, niente inset, niente :has.

   Le misure stanno tutte nelle variabili qui sotto.
   Quattro gradini, che cambiano solo le variabili:
   1. iPhone (predefinito, verticale)
   2. iPhone orizzontale (schermo basso)
   3. iPad
   4. Computer (come iPad, ma con il mouse: campi un po' più bassi)
   ============================================================ */

:root {
  /* Colori: stessi valori di --clv2-* in clienti_v2.css */
  --lg-bg:           #f8fafc;
  --lg-card:         #ffffff;
  --lg-border:       rgba(229, 231, 235, 0.9);
  --lg-border-str:   rgba(15, 23, 42, 0.14);
  --lg-shadow:       0 10px 24px rgba(15, 23, 42, 0.08);

  --lg-text:         #111827;
  --lg-text-2:       #374151;
  --lg-mute:         #6b7280;
  --lg-faint:        #9ca3af;

  --lg-primary:      #2563eb;
  --lg-primary-dark: #1d4ed8;
  --lg-primary-bg:   #e6f1fb;
  --lg-primary-on:   #0c447c;
  --lg-focus-ring:   0 0 0 3px rgba(37, 99, 235, 0.16);

  --lg-radius-card:  16px;
  --lg-radius-md:    12px;
  --lg-radius-sm:    10px;
  --lg-radius-pill:  999px;

  /* Misure — iPhone verticale (predefinito) */
  --lg-card-w:       420px;   /* larghezza massima della card */
  --lg-gutter:       16px;    /* margine attorno alla card */
  --lg-pad-top:      28px;    /* spazio interno della card */
  --lg-pad-x:        20px;
  --lg-pad-bottom:   24px;

  --lg-logo-w:       140px;   /* il logo non supera mai né questa larghezza… */
  --lg-logo-h:       84px;    /* …né questa altezza, qualunque sia la sua forma */
  --lg-logo-gap:     20px;

  --lg-title-fs:     1.375rem;
  --lg-title-gap:    20px;

  --lg-label-fs:     0.875rem;
  --lg-field-h:      48px;
  --lg-field-fs:     16px;    /* mai sotto 16px: sotto, iOS Safari fa zoom */
  --lg-field-gap:    16px;

  --lg-btn-h:        48px;
  --lg-btn-fs:       1rem;

  --lg-small-fs:     0.875rem;
  --lg-env-fs:       0.72rem;
  --lg-env-h:        32px;
  --lg-footer-fs:    0.75rem;
}

/* ─────────────────────────── Pagina ─────────────────────────── */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* niente scorrimento di lato */
}

body.login-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--lg-text);
  background-color: var(--lg-bg);
  /* un alone azzurro appena accennato in alto, sullo stesso fondo delle altre pagine */
  background-image: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.07) 0%, rgba(37, 99, 235, 0) 60%);
  background-repeat: no-repeat;
  -webkit-text-size-adjust: 100%;

  display: flex;
  flex-direction: column;
  min-height: 100vh;    /* Safari vecchi */
  min-height: 100dvh;   /* altezza visibile vera sui telefoni */
}

/* iOS senza dvh (Safari prima della 15.4) */
@supports (-webkit-touch-callout: none) and (not (min-height: 100dvh)) {
  html {
    height: -webkit-fill-available;
  }

  body.login-page {
    min-height: -webkit-fill-available;
  }
}

/* Contenitore: centrato in verticale e in orizzontale con margin: auto.
   Se la card è più alta dello schermo resta in cima e la pagina scorre
   (con align-items: center la parte alta finirebbe tagliata). */
.login-wrapper {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: calc(var(--lg-card-w) + 2 * var(--lg-gutter));
  margin: auto;
  padding: var(--lg-gutter);
  /* sotto la tacca/isola dell'iPhone */
  padding-top: max(var(--lg-gutter), env(safe-area-inset-top));
  padding-bottom: max(var(--lg-gutter), env(safe-area-inset-bottom));
}

/* ─────────────────────────── Card ─────────────────────────── */

.login-card {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--lg-pad-top) var(--lg-pad-x) var(--lg-pad-bottom);
  background: var(--lg-card);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-card);
  box-shadow: var(--lg-shadow);
}

/* Logo */
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--lg-logo-gap);
}

.login-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--lg-logo-w);
  max-height: var(--lg-logo-h);
}

/* Titolo "Accedi" */
.login-card h1 {
  margin: 0 0 var(--lg-title-gap);
  font-size: var(--lg-title-fs);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--lg-text);
  text-align: center;
}

/* ─────────────────────────── Modulo ─────────────────────────── */

.login-form {
  margin: 0;
}

.form-group {
  margin-bottom: var(--lg-field-gap);
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--lg-label-fs);
  font-weight: 500;
  color: var(--lg-text-2);
}

.form-group input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--lg-field-h);
  margin: 0;
  padding: 0 14px;
  font-family: inherit;
  font-size: var(--lg-field-fs);
  color: var(--lg-text);
  background-color: #ffffff;
  border: 1px solid var(--lg-border-str);
  border-radius: var(--lg-radius-md);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder {
  color: var(--lg-faint);
}

.form-group input:focus {
  border-color: var(--lg-primary);
  box-shadow: var(--lg-focus-ring);
}

/* Campi compilati dal browser (password salvate):
   niente fondo giallo/azzurro, resta bianco come gli altri. */
.form-group input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset;
  -webkit-text-fill-color: var(--lg-text);
}

.form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset, var(--lg-focus-ring);
}

/* Pulsante principale "Entra": pillola blu piena, come le azioni primarie */
.login-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--lg-btn-h);
  margin: 8px 0 0;
  padding: 0 20px;
  font-family: inherit;
  font-size: var(--lg-btn-fs);
  font-weight: 600;
  color: #ffffff;
  background-color: var(--lg-primary);
  border: 1px solid transparent;
  border-radius: var(--lg-radius-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .login-btn:hover {
    background-color: var(--lg-primary-dark);
  }
}

.login-btn:active {
  background-color: var(--lg-primary-dark);
}

.login-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ─────────────────────────── Messaggi ─────────────────────────── */

.login-alert {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 10px 14px;
  font-size: var(--lg-small-fs);
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--lg-radius-sm);
  transition: opacity 0.4s ease;
}

/* spazio tra icona e testo, senza gap (Safari vecchio) */
.login-alert > * + * {
  margin-left: 8px;
}

.login-alert.fade-out {
  opacity: 0;
}

.login-alert-error {
  color: #b91c1c;
  background-color: #fef2f2;
  border-color: #fecaca;
}

.login-alert-info {
  color: var(--lg-primary-on);
  background-color: var(--lg-primary-bg);
  border-color: #bfdbfe;
}

.login-alert-success {
  color: #15803d;
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.login-alert-session {
  color: var(--lg-primary-on);
  background-color: var(--lg-primary-bg);
  border-color: #bfdbfe;
  border-left: 4px solid var(--lg-primary);
}

/* ─────────────────────────── Link e piede ─────────────────────────── */

.login-help {
  margin: 0;
  font-size: var(--lg-small-fs);
  text-align: center;
}

/* Link subito sotto il modulo, senza switch ambiente in mezzo
   (pagina di reset password: "Torna al login") */
.login-form + .login-help {
  margin-top: 20px;
}

.login-card a {
  color: var(--lg-primary);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) {
  .login-card a:hover {
    text-decoration: underline;
  }
}

/* Piede fuori dalla card */
.login-footer {
  margin: 16px 0 0;
  font-size: var(--lg-footer-fs);
  color: var(--lg-mute);
  text-align: center;
}

/* ============================================================
   Switch ambiente (test / produzione)
   I selettori sono scopati su .login-card per battere la
   specificità di `.login-card a` (0,1,1), che altrimenti
   sovrascriverebbe colore e peso.
   Pillola piatta tinta, come i chip delle altre pagine:
   arancio per il test, bruno tenue per la produzione.
   ============================================================ */
.login-card .env-switch {
  display: inline-flex;
  align-items: center;
  align-self: center;
  box-sizing: border-box;
  min-height: var(--lg-env-h);
  margin: 20px 0 12px;
  padding: 0 14px;
  font-size: var(--lg-env-fs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--lg-radius-pill);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* spazio tra pallino, nome e azione, senza gap (Safari vecchio) */
.login-card .env-switch > * + * {
  margin-left: 8px;
}

.login-card .env-switch:focus-visible {
  outline: 2px solid var(--lg-primary);
  outline-offset: 2px;
}

.env-switch__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.env-switch__action {
  padding-left: 8px;
  font-weight: 500;
  border-left: 1px solid currentColor;
  opacity: 0.75;
}

.login-card .env-switch--test {
  color: #9a3412;
  background-color: #fff7ed;
  border-color: #fed7aa;
}

.login-card .env-switch--prod {
  color: #6e5353;
  background-color: #f6f1f0;
  border-color: #e6dad8;
}

@media (hover: hover) {
  .login-card .env-switch:hover {
    text-decoration: none;
  }

  .login-card .env-switch--test:hover {
    background-color: #ffedd5;
    border-color: #fdba74;
  }

  .login-card .env-switch--prod:hover {
    background-color: #efe6e4;
    border-color: #d6c4c1;
  }
}

/* ============================================================
   iPhone orizzontale: schermo basso, tutto più compatto
   (nessun iPhone in orizzontale supera i ~440px di altezza;
   le finestre del computer da 1000px in su sono escluse)
   ============================================================ */
@media (max-height: 500px) and (max-width: 999px) {
  :root {
    --lg-gutter:     12px;
    --lg-pad-top:    20px;
    --lg-pad-x:      24px;
    --lg-pad-bottom: 18px;

    --lg-logo-w:     120px;
    --lg-logo-h:     44px;
    --lg-logo-gap:   12px;

    --lg-title-fs:   1.2rem;
    --lg-title-gap:  14px;

    --lg-field-h:    44px;
    --lg-field-gap:  12px;
    --lg-btn-h:      44px;
  }

  .login-card .env-switch {
    margin-top: 14px;
    margin-bottom: 8px;
  }
}

/* ============================================================
   iPad (verticale e orizzontale) e computer.
   iPhone escluso per costruzione:
   - verticale    -> larghezza max 440px  (< 600px)
   - orizzontale  -> altezza max ~440px   (< 600px)
   La seconda condizione recupera le finestre basse del computer:
   nessun iPhone in orizzontale arriva a 1000px di larghezza.
   Campi e pulsante più alti: si usano con il dito, al banco.
   ============================================================ */
@media (min-width: 600px) and (min-height: 600px),
       (min-width: 1000px) {
  :root {
    --lg-card-w:     520px;
    --lg-gutter:     24px;
    --lg-pad-top:    40px;
    --lg-pad-x:      44px;
    --lg-pad-bottom: 32px;

    --lg-radius-card: 20px;

    --lg-logo-w:     210px;
    --lg-logo-h:     110px;
    --lg-logo-gap:   24px;

    --lg-title-fs:   1.75rem;
    --lg-title-gap:  24px;

    --lg-label-fs:   0.9375rem;
    --lg-field-h:    52px;
    --lg-field-fs:   17px;
    --lg-field-gap:  20px;

    --lg-btn-h:      52px;
    --lg-btn-fs:     1.0625rem;

    --lg-small-fs:   0.9375rem;
    --lg-env-fs:     0.75rem;
    --lg-env-h:      34px;
    --lg-footer-fs:  0.8125rem;
  }
}

/* ============================================================
   Computer: stesso gradino dell'iPad, ma con il mouse
   (hover + puntatore preciso; l'iPad non li ha).
   Card un po' più stretta e campi più bassi: sullo schermo
   grande una card da 520px con campi da 52px risulta fuori scala.
   ============================================================ */
@media (min-width: 600px) and (min-height: 600px) and (hover: hover) and (pointer: fine),
       (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  :root {
    --lg-card-w:     480px;
    --lg-gutter:     32px;
    --lg-pad-x:      40px;

    --lg-logo-w:     190px;
    --lg-logo-h:     100px;

    --lg-title-fs:   1.625rem;

    --lg-field-h:    48px;
    --lg-field-fs:   16px;
    --lg-btn-h:      48px;
    --lg-btn-fs:     1rem;
  }
}

/* Movimenti ridotti */
@media (prefers-reduced-motion: reduce) {
  .form-group input,
  .login-btn,
  .login-card .env-switch {
    transition: none;
  }
}