/* ==========================================================================
   CHESTIONAR DE INTERVIU  —  ViewComponent „ChestionarInterviu" + editorul
   --------------------------------------------------------------------------
   Trei contexte, aceleași reguli vizuale:
     .ps-chestionar                 candidatul completează (formularul de aplicare)
     .ps-chestionar--raspunsuri     angajatorul citește (fișa candidatului)
     .ps-chestionar-editor          angajatorul compune (/Cont/Anunt/{id}/Chestionar)

   Doar tokeni --ps-*. Controalele (input, textarea, checkbox, radio, fieldset)
   sunt cele din components/forms.css — aici stau numai ritmul vertical și
   marcajele specifice, ca o schimbare de temă să nu trebuiască făcută de două
   ori.

   Modificatorii sunt în ROMÂNĂ, ca în tot proiectul.
   ========================================================================== */

.ps-chestionar {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-15);
  margin-block: var(--ps-space-30);
}

.ps-chestionar__titlu {
  margin: 0;
  font-size: var(--ps-fs-18);
  font-weight: var(--ps-fw-semibold);
  color: var(--ps-text);
}

.ps-chestionar__descriere,
.ps-chestionar__gol {
  margin: 0;
  font-size: var(--ps-fs-14);
  color: var(--ps-text-ui);
}

/* lista de întrebări: <ol> fără bulinele implicite — numerotarea vizuală ar
   dubla textul întrebării, care e deja o propoziție întreagă */
.ps-chestionar__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-20);
}

.ps-chestionar__item {
  margin: 0;
}

/* întrebarea refuzată de server: bara din stânga completează mesajul de eroare,
   nu îl înlocuiește — culoarea singură nu este informație accesibilă */
.ps-chestionar__item.is-invalid {
  border-inline-start: var(--ps-border-width) solid var(--ps-danger);
  padding-inline-start: var(--ps-space-15);
}

.ps-chestionar__marcaj {
  margin-inline-start: var(--ps-space-5);
  font-size: var(--ps-fs-12);
  font-weight: var(--ps-fw-regular);
  color: var(--ps-text-ui);
  text-transform: lowercase;
}

.ps-chestionar__variante {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
}

.ps-chestionar__varianta {
  align-items: center;
  gap: var(--ps-space-5);
}

/* ------------------------------------------------------- răspunsurile citite */

.ps-chestionar__perechi {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-15);
}

.ps-chestionar__intrebare {
  margin: 0;
  font-weight: var(--ps-fw-medium);
  color: var(--ps-text);
}

.ps-chestionar__raspuns-text {
  margin: 0;
  color: var(--ps-text-ui);
  /* răspunsul este text scris de o persoană: se păstrează rândurile, dar se rupe
     orice cuvânt prea lung, ca o adresă lipită să nu întindă pagina */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ps-chestionar__valori {
  margin: 0;
  padding-inline-start: var(--ps-space-30);
}

/* ------------------------------------------------------------ editorul */

.ps-chestionar-editor {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-30);
}

.ps-chestionar-editor__antet {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
}

.ps-chestionar-editor__titlu {
  margin: 0;
  font-size: var(--ps-fs-24);
  font-weight: var(--ps-fw-semibold);
  color: var(--ps-text);
}

.ps-chestionar-editor__anunt,
.ps-chestionar-editor__descriere {
  margin: 0;
  font-size: var(--ps-fs-14);
  color: var(--ps-text-ui);
}

.ps-chestionar-editor__formular {
  gap: var(--ps-space-20);
}

.ps-chestionar-editor__caseta.is-invalid {
  border-color: var(--ps-danger);
}

.ps-chestionar-editor__optiuni {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-5);
  margin-block-start: var(--ps-space-15);
}

/* [hidden] trebuie să învingă display:flex de mai sus — altfel variantele rămân
   vizibile la întrebările de tip „text liber" când JavaScript le ascunde */
.ps-chestionar-editor__optiuni[hidden] {
  display: none;
}

/* previzualizarea: aceeași componentă ca la candidat, despărțită de formular
   printr-o linie, ca să nu pară încă un set de câmpuri de completat */
.ps-chestionar-editor__previzualizare {
  border-block-start: var(--ps-border-width) solid var(--ps-border);
  padding-block-start: var(--ps-space-20);
}