/* ==========================================================================
   login.css — solo la pagina di accesso
   Presuppone tokens.css già caricato.

   Ricalca login.html del portale di riferimento: card centrata, marchio in
   testa, errore in linea, pulsante a tutta larghezza.
   ========================================================================== */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;   /* su telefono tiene conto delle barre del browser */
  display: grid;
  place-items: center;
  padding: 2rem 20px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Alone tenue dietro alla card, come nell'hero della vetrina. */
.login-page::before {
  content: "";
  position: absolute; inset: -20% auto auto -15%;
  width: 70%; height: 90%;
  background: radial-gradient(
    ellipse at 40% 40%,
    color-mix(in srgb, var(--brand) 14%, transparent) 0%,
    transparent 62%);
  pointer-events: none;
}
.login-page::after {
  content: "";
  position: absolute; inset: auto -15% -25% auto;
  width: 60%; height: 90%;
  background: radial-gradient(
    ellipse at 60% 60%,
    color-mix(in srgb, var(--gold) 12%, transparent) 0%,
    transparent 62%);
  pointer-events: none;
}

.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 2.2rem 2rem 1.8rem;
}

.login-head { text-align: center; margin-bottom: 1.8rem; }
.login-head .brand-mark {
  width: 52px; height: 52px; flex-basis: 52px;
  margin: 0 auto .95rem;
  border-radius: 13px;
  font-size: 1.05rem;
}
.login-head h1 { font-size: 1.45rem; margin-bottom: .25rem; }
.login-head p { color: var(--text-muted); font-size: .92rem; margin: 0; }

.login-card .alert { margin-bottom: 1.3rem; }

.login-card .btn-primary { width: 100%; }

.login-foot {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .87rem; color: var(--text-muted);
}
.login-foot a { display: inline-flex; align-items: center; gap: .35rem; }

/* Il selettore del tema sta in un angolo: presente ma non invadente. */
.login-theme {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
}

@media (max-width: 420px) {
  .login-card { padding: 1.8rem 1.35rem 1.5rem; }
}