/* ---- Poarta de autentificare ----------------------------------------------
   Forma e a prototipului (`scanexpert-Centrala-2/index.html`, blocul
   „autentificare (poarta de intrare)” și cardurile `authView*`), tradusă prin
   `design-kit/dialect.json`: fiecare culoare, rază și mărime e un token `--se-*`,
   niciodată hexul din prototip. */
.auth-shell {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--se-color-bg-surface);
  display: flex;
}
.auth-hero {
  flex: 1 1 50%;
  background: var(--se-color-bg-surface);
}
/* `object-position` e scris din JS, per pas (`AUTH_HERO`, js/auth-gate.js):
   ilustrația de la „Ai uitat parola?” își are subiectul în dreapta și centrarea
   îl scoate din cadru, exact ca în prototip. */
.auth-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sub 1220px ilustrația pleacă și formularul ia toată lățimea — regula
   prototipului (`scanexpert-Centrala-2/index.html:2490`). Fără ea, pe un ecran
   de laptop coloana formularului ajunge mai îngustă decât cele 568px pe care le
   cere cardul, iar câmpurile se strâng sub ilustrație. */
@media (max-width: 1219px) {
  .auth-hero {
    display: none;
  }
  .auth-panel {
    flex: 1 1 100%;
    padding: var(--se-space-24);
  }
}
.auth-panel {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  overflow-y: auto;
}
/* 80 și 56 nu sunt pe scara de spațiere (se oprește la 28), deci se compun din
   tokeni în loc să fie scrise brut. `compact` e starea cu eroare pe ecran:
   cardul își strânge spațiul dintre siglă și formular, fiindcă altfel un
   formular lung plus pastila roșie trece de marginea de jos pe 1366×768. */
.auth-card {
  width: 100%;
  max-width: 568px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--se-space-16) * 5);
}
.auth-card.compact {
  gap: calc(var(--se-space-28) * 2);
}
/* 1366×768 e biroul (LAYOUT.md §4), iar acolo pasul de autentificare nu încape:
   cardul designului e deja la limită, iar noi punem pe el încă două drumuri care
   în prototip nu există — „trimite-mi un cod” și ușa organizației. Coloana
   derulează oricum (`overflow-y: auto`, regula prototipului), dar pe un ecran
   scund se strânge întâi cu propria stare `compact` a designului, ca derularea să
   fie de câteva zeci de pixeli, nu de două sute. Nimic din tipografie nu se
   micșorează: aia ar fi altă machetă, nu aceeași machetă pe alt ecran.
   Regula stă DUPĂ cea de bază: un @media nu adaugă specificitate, deci pusă mai
   sus ar fi fost bătută de `.auth-card` de deasupra și n-ar fi făcut nimic. */
@media (max-height: 860px) {
  .auth-panel {
    padding: var(--se-space-24) 56px;
  }
  .auth-card {
    gap: calc(var(--se-space-28) * 2);
  }
}
.auth-logo {
  height: 48px;
  width: auto;
}
.auth-form-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--se-space-24);
  width: 100%;
}
/* Pasul e formularul ȘI acțiunile lui, la 24 între ele; câmpurile stau strânse
   într-un bloc propriu, la 32 — 32 e pasul de deasupra celui mai mare din scară
   (28) și se compune din tokeni. */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-24);
  width: 100%;
}
.auth-form-block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--se-space-16) * 2);
  width: 100%;
}
.auth-heading {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  text-align: center;
}
/* Mărimea titlului de pe poartă e a prototipului (2.5rem/3.375rem) și e în afara
   scării tipografice — a doua intrare pe lista de întrebat designerul, lângă
   cele trei culori off-system de sus. */
.auth-heading h1 {
  margin: 0;
  color: var(--se-color-text-title);
  font-size: 2.5rem;
  line-height: 3.375rem;
  font-weight: var(--se-type-bodymed-weight);
}
.auth-heading p {
  margin: 0;
  color: var(--se-color-text-title);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}
.auth-fields {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-16);
  width: 100%;
}
.auth-field label {
  display: block;
  color: var(--se-color-text-title);
  margin-bottom: var(--se-space-8);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}
.auth-input {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  padding: 0 var(--se-space-16);
  min-height: var(--se-size-control);
  background: var(--se-color-bg-surface);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.auth-input:hover {
  border-color: var(--se-color-secondary-60);
}
.auth-input:focus-within {
  border-color: var(--se-color-secondary-60);
  box-shadow: 0 0 4px 2px rgba(202, 56, 93, 0.1);
}
.auth-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0;
  color: var(--se-color-text-title);
  background: transparent;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}
.auth-input input::placeholder {
  color: var(--se-color-text-placeholder);
}
/* Chrome pictează câmpurile completate automat cu un galben propriu, peste
   fundalul alb al pastilei: pe poartă asta lovește exact emailul și parola,
   adică toată prima impresie. Regula prototipului, cu tokenii noștri. */
.auth-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--se-color-text-title);
  -webkit-box-shadow: 0 0 0 1000px var(--se-color-bg-surface) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.auth-pw-toggle {
  border: none;
  background: none;
  padding: var(--se-space-4);
  display: flex;
  color: var(--se-color-text-description);
  flex: none;
}
/* Câmpul vinovat, când îl știm: contur roșu care nu se aprinde la hover și nu
   primește halo la focus — starea de eroare bate stările obișnuite până se
   repară, altfel conturul dispare exact când omul pune cursorul în câmp. */
.auth-field.has-error .auth-input {
  border-color: var(--se-color-alert-red-600);
}
.auth-field.has-error .auth-input:hover,
.auth-field.has-error .auth-input:focus-within {
  border-color: var(--se-color-alert-red-600);
  box-shadow: none;
}

/* Refuzul: pastilă cu pictogramă, nu paragraf. Devine dreptunghi (rază md) când
   textul trece de un rând — o rază de 100px pe două rânduri arată ca un defect
   de desen, iar propozițiile lui Clerk sunt lungi. `multiline` se pune din JS
   (setAuthError), fiindcă lungimea o știe cine scrie textul. */
.auth-error {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  width: 100%;
  background: var(--se-color-badge-red-100);
  color: var(--se-color-alert-red-600);
  border: 1px solid var(--se-color-alert-red-600);
  border-radius: var(--se-radius-pill);
  padding: var(--se-space-4) var(--se-space-12);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}
.auth-error > span {
  flex: 1;
}
.auth-error.multiline {
  align-items: flex-start;
  border-radius: var(--se-radius-md);
}
.auth-error.multiline .ph {
  margin-top: var(--se-space-4);
}
.auth-error[hidden] {
  display: none;
}

/* Anunțul care nu e un refuz: „În așteptarea aprobării” (albastru, prototipul
   `authViewRequestSent`) și, pe ecranul de configurație lipsă, aceeași formă în
   roșu — acolo nimeni nu poate intra până nu umblă cineva la server. */
.auth-alert {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  background: var(--se-color-badge-blue-100);
  border: 1px solid var(--se-color-badge-blue-600);
  color: var(--se-color-badge-blue-600);
  border-radius: var(--se-radius-pill);
  padding: var(--se-space-8) var(--se-space-16);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}
.auth-alert-stop {
  background: var(--se-color-badge-red-100);
  border-color: var(--se-color-alert-red-600);
  color: var(--se-color-alert-red-600);
}
.auth-confirm-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--se-space-16);
  width: 100%;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--se-space-16);
  width: 100%;
}
.auth-actions .btn-primary {
  width: 100%;
  margin-top: 0;
}
.auth-note {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-muted);
  text-align: center;
}
/* Regula de sub un câmp de parolă. Caption, nu body: e o precizare despre ce s-a
   tastat, nu o propoziție a ecranului. */
.auth-hint {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
  margin-top: var(--se-space-8);
}

/* Un pas odată. `[hidden]` singur nu ajunge: `.auth-form` pune `display: flex`,
   care bate regula browserului, și toți pașii s-ar desena unul peste altul. */
.auth-step[hidden] {
  display: none;
}

/* Acțiunea secundară de pe poartă („cere un cod”, „creează cont”, „ieși din
   cont”) e text navy, nu un al doilea buton: două pastile una sub alta se citesc
   ca două drumuri la fel de bune, când unul e drumul și celălalt e excepția.
   Prototipul are DOUĂ forme și le folosește pe rând, iar diferența e reală:
   `auth-link-pill` e navy închis și duce ALTUNDEVA („Ai uitat parola?”, „Creează
   cont”, „Loghează-te”); `auth-link-btn` e culoarea textului și se ÎNTOARCE
   („Înapoi la autentificare”, „Ieși din cont”). Amândouă țin 44px, ținta de
   atingere din sistem — prototipul o compune din 10px de padding, ceea ce nu e
   pe scara de spațiere. */
.auth-link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--se-space-8);
  background: none;
  border: none;
  padding: 0;
  min-height: var(--se-size-hit-target);
  color: var(--se-color-primary-70);
  border-radius: var(--se-radius-pill);
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  transition: opacity 0.15s;
}
.auth-link-pill:hover:not(:disabled) {
  opacity: 0.75;
}
.auth-link-pill:disabled {
  color: var(--se-color-text-disabled);
}
.auth-link-btn {
  background: none;
  border: none;
  padding: 0 var(--se-space-24);
  min-height: var(--se-size-hit-target);
  color: var(--se-color-text-title);
  border-radius: var(--se-radius-md);
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
}
.auth-link-btn:hover:not(:disabled) {
  background: var(--se-color-fill-hover);
}
.auth-link-btn:disabled {
  color: var(--se-color-text-disabled);
}
.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--se-space-8);
  width: 100%;
}
.auth-links span,
.auth-signup-row span {
  color: var(--se-color-text-title);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
}
/* „Ai uitat parola?” stă la dreapta, lipit de câmpuri. */
.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.auth-forgot-row .auth-link-pill {
  padding: 0 var(--se-space-24);
}
/* „Nu ai cont? Creează cont” se desprinde de restul: 32, compus din tokeni. */
.auth-signup-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--se-space-8);
  width: 100%;
  margin-top: calc(var(--se-space-16) * 2);
}

/* A doua cale de intrare: contul organizației (Authentik). Despărțitorul spune
   că e o alternativă, nu un pas următor; ancora e conturată, nu plină — un
   singur drum e principal pe ecranul ăsta, iar celălalt e excepția. Ambele
   pornesc ascunse și le aprinde login-config (`oidc:true`, paintOidcEntry). */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  width: 100%;
  color: var(--se-color-text-muted);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--se-color-border-default);
}
.auth-divider[hidden] {
  display: none;
}
.auth-oidc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--se-space-8);
  width: 100%;
  min-height: var(--se-size-control);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  color: var(--se-color-primary-60);
  text-decoration: none;
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  transition:
    border-color 0.15s,
    color 0.15s;
}
.auth-oidc:hover {
  border-color: var(--se-color-secondary-60);
  color: var(--se-color-primary-40);
}
.auth-oidc[hidden] {
  display: none;
}

/* Contul în așteptare NU e o eroare, deci nu poartă roșul uneia: bleumarin de
   informare, din aceeași paletă. Un ecran care spune „totul e în regulă, mai
   trebuie doar aprobat” pe fundal de eroare trimite omul să-și reseteze parola. */
.auth-notice {
  background: var(--se-color-badge-navi-100);
  color: var(--se-color-badge-navi-600);
  border-radius: var(--se-radius-md);
  padding: 10px var(--se-space-16);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  text-align: center;
  width: 100%;
}
.auth-notice:empty {
  display: none;
}

/* Ce se întâmplă acum, în timp ce se întâmplă. Se stinge singur; eroarea de
   deasupra rămâne până o șterge o tastă. */
.auth-status {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-muted);
  text-align: center;
}
.auth-status[hidden] {
  display: none;
}
.auth-status[data-kind="ok"] {
  color: var(--se-color-status-success);
}

/* Protecția anti-bot a Clerk se desenează aici. De obicei invizibilă — atunci
   elementul nu are ce ocupa. */
#clerk-captcha:empty {
  display: none;
}

/* Apelul rămas în aer după ce poarta s-a ridicat. Roz pal, fiindcă e singurul
   lucru de pe ecranul ăsta care mai are un fir deschis spre un pacient. */
.auth-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--se-space-8);
  width: 100%;
  padding: var(--se-space-16);
  background: var(--se-color-badge-magenta-100);
  border-radius: var(--se-radius-md);
  text-align: center;
}
.auth-call[hidden] {
  display: none;
}
.auth-call-line {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--se-color-badge-magenta-600);
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
}
.auth-call-note {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-secondary);
}