/* Stile comune delle pagine di accesso: UI di analisi e viewer.
 *
 * Sta in shared/frontend/ perche' entrambi i servizi espongono gia' /shared/<path>
 * (come explorer.css). Un foglio solo e' il motivo per cui le due schermate
 * restano identiche invece di divergere a ogni ritocco: girano su due macchine
 * diverse e nessuno le vede mai una accanto all'altra.
 *
 * Uso:  <link rel="stylesheet" href="/shared/auth.css">
 */
:root {
  --auth-blu: #1976d2;
  --auth-blu-scuro: #1257a0;
  --auth-bordo: #dde2ea;
  --auth-muto: #6b7280;
  --auth-sfondo: #f4f6fa;
  --auth-testo: #1f2937;
  --auth-scheda-sfondo: #fff;
  /* I campi devono staccarsi dalla scheda, non confondersi con essa. */
  --auth-campo-sfondo: #fff;
}

/* Il viewer e' un'applicazione di visualizzazione video: e' scuro di proposito,
   e una schermata di accesso chiara stonerebbe con tutto il resto. Struttura e
   comportamento restano identici, cambiano solo i colori. */
.auth-scuro {
  --auth-bordo: #1f2937;
  --auth-muto: #94a3b8;
  --auth-sfondo: #0b0f14;
  --auth-testo: #e5e7eb;
  --auth-scheda-sfondo: #111827;
  --auth-campo-sfondo: #0f172a;
}

.auth-pagina {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--auth-sfondo);
  color: var(--auth-testo);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 16px;
}

.auth-scheda {
  width: 100%;
  max-width: 380px;
  background: var(--auth-scheda-sfondo);
  border: 1px solid var(--auth-bordo);
  border-radius: 12px;
  padding: 28px 26px;
  box-shadow: 0 2px 14px rgba(16, 24, 40, .06);
}

.auth-scheda h1 { margin: 0 0 6px; font-size: 19px; }
.auth-scheda .auth-sottotitolo { margin: 0 0 18px; color: var(--auth-muto); font-size: 13px; }

.auth-scheda label {
  display: block;
  margin: 12px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}

.auth-scheda input[type=text],
.auth-scheda input[type=email],
.auth-scheda input[type=password] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--auth-bordo);
  border-radius: 8px;
  font-size: 14px;
  background: var(--auth-campo-sfondo);
  color: inherit;
}
.auth-scheda input:focus {
  outline: 2px solid rgba(25, 118, 210, .35);
  border-color: var(--auth-blu);
}

/* Il codice si legge una cifra per volta: spaziato e centrato si ricontrolla
   senza perdere il segno. */
.auth-codice {
  letter-spacing: 6px;
  text-align: center;
  font-size: 18px;
}

.auth-scheda button[type=submit], .auth-azione {
  width: 100%;
  margin-top: 18px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--auth-blu);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.auth-scheda button[type=submit]:hover:not(:disabled), .auth-azione:hover:not(:disabled) {
  background: var(--auth-blu-scuro);
}
.auth-scheda button:disabled { opacity: .55; cursor: not-allowed; }

/* Azione secondaria: deve leggersi come un link, non competere col pulsante. */
.auth-link {
  display: inline-block;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--auth-blu);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.auth-avviso, .auth-errore, .auth-nota {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.auth-errore { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.auth-avviso { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.auth-nota   { background: #f8fafc; border: 1px solid var(--auth-bordo); color: var(--auth-muto); }

/* Requisiti della password: aiuto mentre si scrive. La decisione resta del
   server, che controlla anche cose non verificabili qui (password compromesse,
   dati personali). */
.auth-regole { margin: 10px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.auth-regole li { color: var(--auth-muto); padding: 2px 0 2px 20px; position: relative; }
.auth-regole li::before {
  content: "○";
  position: absolute;
  left: 4px;
}
.auth-regole li.ok { color: #166534; }
.auth-regole li.ok::before { content: "●"; }

.auth-violazioni { margin: 6px 0 0 18px; padding: 0; }
.auth-violazioni li { margin: 2px 0; }

.auth-ultimo-accesso {
  margin-top: 14px;
  font-size: 12px;
  color: var(--auth-muto);
  text-align: center;
}

.auth-marchio { display: block; margin: 0 auto 16px; max-height: 46px; }