/* Numen — pagine dell'account: l'ingresso (accesso, recupero password,
   secondo fattore) e la gestione (email, password, 2FA, uscita).

   Stessa direzione della superficie conversazionale: fondo notte blu-nero,
   bianco caldo per il testo, l'oro speso solo sull'azione principale. Il
   logo è il nodo che sale, e la pagina gli fa da cielo. Zero CDN, zero
   framework: la porta d'ingresso del prodotto non dipende da terzi.

   Due layout, un foglio: ``body.entrance-page`` centra la scheda d'accesso,
   ``body.account-page`` è la pagina interna con la barra in alto. Le regole
   di campi, bottoni e messaggi non hanno prefisso: il foglio lo caricano
   solo queste pagine, e il loro markup lo genera allauth con crispy, non
   noi. */

:root {
  --night: #0f1522;
  --night-raised: #171f30;
  --night-line: #232e44;
  --warm-white: #ece9e2;
  --mist: #8b95a7;
  --gold: #c89b3c;
  --gold-soft: #e8ce96;
  --danger: #d47069;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  /* L'alone riprende il nodo luminoso del logo: la luce viene da lì. */
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(79, 70, 229, 0.22), transparent 70%),
    var(--night);
  color: var(--warm-white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- ingresso: una scheda sola, al centro dello schermo ---- */
body.entrance-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px 20px calc(24px + env(safe-area-inset-bottom));
}

.entrance { width: 100%; max-width: 400px; }

.entrance-head { text-align: center; margin-bottom: 22px; }
.entrance-head img { width: 148px; height: auto; }
.entrance-head .payoff {
  margin: 12px 0 0;
  color: var(--mist);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.entrance-card {
  background: var(--night-raised);
  border: 1px solid var(--night-line);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 18px 40px rgba(8, 11, 18, 0.45);
}

/* Nella scheda d'accesso l'azione è una sola e occupa tutta la riga. */
.entrance-card .btn { width: 100%; margin-top: 6px; }

/* Nota di chiusura della scheda (accesso a inviti, rimando all'azienda). */
.entrance-card .note {
  margin: 18px 0 0;
  color: var(--mist);
  font-size: 0.85rem;
}

.entrance-foot {
  margin-top: 20px;
  text-align: center;
  color: var(--mist);
  font-size: 0.78rem;
}
.entrance-foot .sep { opacity: 0.5; padding: 0 6px; }

/* ---- gestione account: barra in alto, contenuto in colonna ---- */
.account-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--night-line);
}
.account-bar .logo { flex: 1; min-width: 0; }
.account-bar .logo img { height: 24px; width: auto; vertical-align: middle; }
.account-bar a {
  color: var(--mist);
  font-size: 0.82rem;
  text-decoration: none;
}
.account-bar a:hover { color: var(--gold-soft); }

.account-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 26px 20px calc(32px + env(safe-area-inset-bottom));
}

/* Menù delle pagine dell'account: poche voci, tutte allo stesso livello. */
.account-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.account-menu a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--night-line);
  border-radius: 999px;
  color: var(--warm-white);
  font-size: 0.84rem;
  text-decoration: none;
}
.account-menu a:hover { border-color: var(--gold); }
.account-menu a.current { border-color: var(--gold); color: var(--gold-soft); }

/* Nelle pagine interne le azioni sono molte e ravvicinate: più contenute
   della grande azione singola dell'ingresso. */
.account-main .btn { padding: 9px 18px; font-size: 0.88rem; margin: 0 6px 8px 0; }

/* ---- schede (i "panel" di allauth) ---- */
.card, section > .card {
  background: var(--night-raised);
  border: 1px solid var(--night-line);
  border-radius: 16px;
  margin-bottom: 18px;
}
.card-body { padding: 22px; }
.card-title,
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0 0 10px;
}
h1 { font-size: 1.5rem; }
h2, .card-title { font-size: 1.2rem; }
p { margin: 0 0 14px; }
hr { border: 0; border-top: 1px solid var(--night-line); margin: 20px 0; }

/* ---- campi ---- */
.field { margin-bottom: 14px; }
label:not(.form-check-label):not(.check) {
  display: block;
  margin-bottom: 6px;
  color: var(--mist);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input:not([type]),
.form-control,
textarea,
select {
  width: 100%;
  background: var(--night);
  border: 1px solid var(--night-line);
  border-radius: 10px;
  color: var(--warm-white);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 11px 14px;
}
input:focus,
.form-control:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold);
}
input::placeholder { color: #5f6a7d; }
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  margin: 0;
}
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.form-check-label { color: var(--warm-white); font-size: 0.9rem; }

/* ---- azioni ---- */
.btn {
  display: inline-block;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: #141414;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 22px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.99); }
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #1b0f0e;
}
.btn-secondary, .btn-outline-primary {
  background: none;
  border-color: var(--night-line);
  color: var(--warm-white);
}
.btn-secondary:hover, .btn-outline-primary:hover { border-color: var(--gold); }
/* I gruppi di azioni di allauth sono liste: qui sono bottoni in riga. */
.button-group, .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---- riga sotto i campi: ricordami + password dimenticata ---- */
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
  font-size: 0.85rem;
}
/* Il link resta a destra anche quando "Ricordami" non c'è. */
.row-between a { margin-left: auto; }
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mist);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  cursor: pointer;
}

a { color: var(--gold-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- messaggi ed errori ---- */
.alert, .errorlist {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 112, 105, 0.45);
  background: rgba(212, 112, 105, 0.12);
  color: #f2c9c5;
  font-size: 0.88rem;
  list-style: none;
}
.alert-success, .alert-info {
  border-color: var(--night-line);
  background: rgba(35, 46, 68, 0.6);
  color: var(--warm-white);
}
.errorlist li { margin: 0; }
.field .errorlist {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--danger);
  font-size: 0.82rem;
}
.helptext, .form-text {
  display: block;
  margin-top: 6px;
  color: var(--mist);
  font-size: 0.78rem;
}

/* ---- tabelle ed etichette (indirizzi email, codici di recupero) ---- */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.table th, .table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--night-line);
}
.table th { color: var(--mist); font-weight: 500; font-size: 0.78rem; }
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--night-line);
  color: var(--mist);
  font-size: 0.72rem;
}
.badge.bg-success { border-color: #3f6b4a; color: #9fd6ac; }
.badge.bg-warning, .badge.bg-danger { border-color: #6b3b3b; color: #e8a0a0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (min-width: 520px) {
  .entrance-card { padding: 30px 28px; }
}