/* ContID - stiluri pentru paginile de autentificare (login + inregistrare).
   Se folosesc impreuna cu style.css (variabile, butoane, reset). */

.auth-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Zona centrala cu cardul de autentificare */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spatiu-mare) var(--spatiu-mediu);
}
.auth-card {
  width: 100%;
  max-width: 520px;
  background: var(--culoare-suprafata);
  border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza);
  box-shadow: var(--umbra-card);
  padding: var(--spatiu-mare);
}
.auth-card h1 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: var(--spatiu-mic);
}
.auth-card__subtitle {
  text-align: center;
  color: var(--culoare-text-secundar);
  margin-bottom: var(--spatiu-mare);
}

/* Nota de sub subtitlu, la resetarea parolei („dacă ai scris greșit adresa, nu vei primi codul").
   ⚠️ Mai stinsă decât subtitlul și cu chenar la stânga: e o lămurire, nu o instrucțiune — trebuie
   să se citească dacă omul o caută, fără să se bată la privire cu pașii de urmat. */
.auth-nota {
  margin: calc(-1 * var(--spatiu-mediu)) 0 var(--spatiu-mare);
  padding: 8px 12px;
  border-left: 3px solid var(--culoare-bordura);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--culoare-text-secundar);
}
.auth-nota strong { color: var(--culoare-text); }

/* Formular */
.form-group { margin-bottom: var(--spatiu-mediu); }

/* Doua campuri pe acelasi rand (ex: Nume + Prenume) */
.form-row { display: flex; gap: var(--spatiu-mediu); }
.form-row .form-group { flex: 1; }
@media (max-width: 480px) { .form-row { flex-direction: column; gap: 0; } }

/* ── Formular pe DOUA coloane (pagina de invitatie, 16 Aug 2026) ──────────────────────────────────
   ⚠️ Sapte campuri unul sub altul nu incapeau pe un laptop, iar omul trebuia sa deruleze ca sa gaseasca
   butonul. Asezate pe perechi, ecranul intra intreg. Perechile sunt alese dupa INTELES (nume cu prenume,
   parola cu repetarea ei), nu doar ca sa se umple randul.
   ⚠️ `auto-fit` face singur trecerea pe o coloana cand fereastra e ingusta — fara media query si fara ca
   ceva sa se taie pe telefon. */
.form-doua {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 var(--spatiu-mediu);
}
.form-doua .form-group--tot { grid-column: 1 / -1; }
/* Randurile se string putin: pe doua coloane, spatiul dintre ele ar fi facut ecranul iar prea inalt. */
.form-doua .form-group { margin-bottom: 12px; }
.form-doua .form-group label { margin-bottom: 4px; }
/* ⚠️ Butonul, in perechea lui, se lipeste de BAZA celulei: n-are eticheta deasupra, deci fara asta ar fi
   stat aliniat cu ETICHETA campului de alaturi, plutind cu un rand mai sus decat trebuie. */
.form-doua .form-group--buton { display: flex; flex-direction: column; justify-content: flex-end; }

/* ── Bifa Termenilor (27 Sep 2026, etapa 3) ─────────────────────────────────────────────────────────
   Pusă de server înaintea butonului, doar când e publicată o versiune a Termenilor.
   ⚠️ NU stă într-un `.form-group`: acolo `input` primește `width: 100%`, iar caseta s-ar fi întins pe tot
      rândul. În grila invitației ocupă tot rândul, ca textul să nu se strângă într-o coloană. */
.bifa-termeni {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 var(--spatiu-mediu);
  font-size: .92rem; line-height: 1.45; color: var(--culoare-text-secundar);
}
.bifa-termeni input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--culoare-primara); }
.bifa-termeni label { cursor: pointer; }
.bifa-termeni a { font-weight: 600; }
.form-doua .bifa-termeni { grid-column: 1 / -1; }

/* ── Campurile si butonul, ACEEASI inaltime (cererea userului, 16 Aug 2026) ───────────────────────
   Campul avea 12px de umplutura sus si jos, butonul 10px — deci era cu ~4px mai inalt, si se vedea
   tocmai pe randul de jos, unde stau unul langa altul.
   ⚠️ Se leaga de o SINGURA masura, nu se potrivesc din doua locuri: doua valori scrise separat se
   despart la prima schimbare de font sau de umplutura, iar nepotrivirea se vede abia pe ecran. */
.form-doua { --inaltime-camp: 46px; }
.form-doua .input-icon { min-height: var(--inaltime-camp); }
.form-doua .form-group--buton .btn { min-height: var(--inaltime-camp); }
/* ⚠️ Umplutura pe verticala se scoate: cutia isi ia inaltimea din masura de mai sus, iar textul dintr-un
   `input` se aseaza singur la mijloc pe inaltimea lui. Ramane doar cea laterala. */
.form-doua .input-icon input { padding-top: 0; padding-bottom: 0; }

/* ⚠️ Cardul e mai LAT pe pagina de invitatie (cererea userului): doua coloane in 520px ar fi strans
   campurile pana la ilizibil. Latimea creste, dar randurile raman patru — ecranul intra tot fara derulare. */
.auth-card--lat { max-width: 660px; }

/* ⚠️ Asterisc portocaliu pe campurile obligatorii, pus SINGUR de CSS (aceeasi regula ca in aplicatie,
   `app.css`) — nu se scrie de mana in eticheta, ca sa nu ramana un asterisc pe un camp care intre timp a
   devenit optional. `label` ca urmas, nu ca fiu: pe pagina de login eticheta sta intr-un rand cu legatura
   „Ai uitat parola?", deci nu e copil direct. */
.form-group:has(:required) label::after {
  content: " *";
  color: #ea580c;
  font-weight: 700;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: .95rem;
}
.form-group input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza);
  font: inherit;
  background: var(--culoare-suprafata);
}
.form-group input:focus {
  outline: none;
  border-color: var(--culoare-primara);
  box-shadow: 0 0 0 3px var(--culoare-primara-inel);
}

/* Rand eticheta + link ("Parola" ..... "Ai uitat parola?") */
.camp-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.camp-label-row label { margin-bottom: 0; }
.camp-link { font-size: .9rem; color: var(--culoare-text-secundar); }

/* Camp cu iconita: [iconita] [ input ] [ochi optional] */
.input-icon {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza);
  background: var(--culoare-primara-stins);
  overflow: hidden;
}
.input-icon:focus-within {
  border-color: var(--culoare-primara);
  box-shadow: 0 0 0 3px var(--culoare-primara-inel);
}
/* Cutia din stanga cu iconita */
.camp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
  background: var(--culoare-primara-stins-tare);
  border-right: 1px solid var(--culoare-bordura);
}
.camp-icon img { width: 20px; height: 20px; opacity: .5; display: block; }
/* Input-ul propriu-zis: fara bordura proprie (o are containerul .input-icon) */
.input-icon input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 12px 14px;
  font: inherit;
  outline: none;
}
/* Butonul cu ochi (arata/ascunde parola) */
/* Butonul de lipit codul stă în aceeași cutie ca ochiul, deci împarte stilul cu el. */
.camp-lipeste,
.camp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
  background: var(--culoare-suprafata);
  border: none;
  border-left: 1px solid var(--culoare-bordura);
  cursor: pointer;
}
.camp-lipeste img,
.camp-toggle img { width: 20px; height: 20px; opacity: .7; display: block; }
.camp-lipeste:hover img,
.camp-toggle:hover img { opacity: 1; }
/* Însemn scurt după o lipire reușită, ca omul să vadă că s-a întâmplat ceva */
.camp-lipeste.e-reusit { background: var(--culoare-succes-stins); }

/* Mesaj (info / eroare / succes) - ascuns pana e nevoie */
.form-msg {
  display: none;
  margin-bottom: var(--spatiu-mediu);
  padding: 10px 12px;
  border-radius: var(--raza);
  font-size: .95rem;
}
.form-msg.is-visible { display: block; }
.form-msg--info { background: var(--culoare-primara-stins); color: var(--culoare-primara); }
.form-msg--error { background: var(--culoare-eroare-stins); color: var(--culoare-eroare); }
.form-msg--success { background: var(--culoare-succes-stins); color: var(--culoare-succes); }

/* Separator + link catre cealalta pagina de auth */
.auth-sep {
  border: none;
  border-top: 1px solid var(--culoare-bordura);
  margin: var(--spatiu-mediu) 0 var(--spatiu-mediu);
}
.auth-alt { text-align: center; color: var(--culoare-text-secundar); }
.auth-alt a { font-weight: 600; }

/* ✅ 1 Oct 2026 — mesajul de lansare din „Cont nou", in locul campurilor, cat crearea de conturi e oprita
   (Setari → Mentenanta). Iconita in cerc palid, titlul si textul centrate, ca restul cardului.
   ⚠️ Numai jetoane care exista deja in `style.css` (un jeton nedefinit sterge in tacere). */
.auth-lansare { text-align: center; }
.auth-lansare__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--spatiu-mediu);
  border-radius: 50%;
  background: var(--culoare-primara-stins);
  color: var(--culoare-primara);
}
.auth-lansare .auth-card__subtitle { line-height: 1.55; }