/*
 * Pages de comptes : inscription, connexion, tableau de bord, onboarding.
 * Ne redéfinit aucun jeton (tokens.css) ni composant déjà stylé
 * (buttons.css, forms.css) : uniquement la mise en page propre à ces pages,
 * chargée via {% block extra_css %} pour ne pas peser sur les pages
 * éditoriales qui ne l'utilisent pas.
 */

.auth-card {
  max-width: 480px;
  margin-inline: auto;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2.5em;
  box-shadow: var(--shadow-card);
}

.auth-card h1 {
  font-size: var(--fs-h2);
  margin-bottom: 0.5em;
}

.auth-card__lead {
  color: var(--c-muted);
  margin-bottom: 1.5em;
}

.auth-card__footer {
  margin-top: 1.5em;
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-align: center;
}

.auth-choice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  max-width: 760px;
  margin-inline: auto;
}

.auth-choice__card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2em;
  text-align: center;
}

.auth-choice__card h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5em;
}

.auth-choice__card p {
  color: var(--c-muted);
  margin-bottom: 1.5em;
}

@media (max-width: 480px) {
  .auth-choice {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: 1.5em;
  }
}

/* --- Tableau de bord ---------------------------------------------------- */

.dashboard-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  margin-bottom: 2em;
}

.dashboard-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2em;
  margin-bottom: var(--gutter);
}

.dashboard-card h2 {
  font-size: var(--fs-h3);
  text-align: left;
  margin-bottom: 1em;
}

.dashboard-empty {
  color: var(--c-muted);
  font-style: italic;
}

.dashboard-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}

.dashboard-list li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--c-border);
}

.dashboard-list li:last-child {
  border-bottom: none;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
}

.status-badge--draft {
  background: var(--c-surface);
  color: var(--c-muted);
}

.status-badge--pending_review {
  background: #fff7e6;
  color: #92600a;
}

.status-badge--published {
  background: #eafaf0;
  color: var(--c-success);
}

.status-badge--suspended {
  background: var(--c-error-bg);
  color: var(--c-error);
}

/* Statuts de missions.MissionRequest (phase 5) : mêmes teintes que les
   statuts de profil consultant ci-dessus, réutilisées par similarité de
   sens plutôt que dupliquées avec de nouvelles couleurs. */
.status-badge--new {
  background: var(--c-surface);
  color: var(--c-muted);
}

.status-badge--qualified,
.status-badge--matched {
  background: #fff7e6;
  color: #92600a;
}

.status-badge--converted {
  background: #eafaf0;
  color: var(--c-success);
}

.status-badge--closed {
  background: var(--c-error-bg);
  color: var(--c-error);
}

/* Statuts de leads.Lead (phase 6) : mêmes teintes que ci-dessus par
   similarité de sens (proposé ~ en attente, accepté/contacté ~ en cours,
   gagné ~ publié/converti, refusé/perdu ~ erreur/clôturé). */
.status-badge--proposed {
  background: var(--c-surface);
  color: var(--c-muted);
}

.status-badge--accepted,
.status-badge--contacted {
  background: #fff7e6;
  color: #92600a;
}

.status-badge--won {
  background: #eafaf0;
  color: var(--c-success);
}

.status-badge--declined,
.status-badge--lost {
  background: var(--c-error-bg);
  color: var(--c-error);
}

/* --- Leads (phase 6) ------------------------------------------------------ */

.lead-item {
  flex-direction: column;
  align-items: flex-start !important;
}

.lead-item__actions {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 0.5em;
}

.lead-item__actions form {
  margin: 0;
}

.lead-item__actions details {
  font-size: var(--fs-small);
}

.lead-item__actions details form {
  margin-top: 0.5em;
  min-width: 240px;
}

/* --- Onboarding ----------------------------------------------------------- */

.onboarding-progress {
  display: flex;
  justify-content: center;
  gap: 0.75em;
  margin-bottom: 2em;
}

.onboarding-progress__step {
  width: 2.25em;
  height: 2.25em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-small);
  background: var(--c-surface);
  color: var(--c-muted);
  border: 1px solid var(--c-border);
}

.onboarding-progress__step.is-current {
  background: var(--c-blue-600);
  color: var(--c-white);
  border-color: var(--c-blue-600);
}

.onboarding-progress__step.is-done {
  background: var(--c-blue-50);
  color: var(--c-blue-600);
  border-color: var(--c-blue-600);
}

/* --- Restitution du matching (phase 5, section 7.4) ------------------------ */

.matching-result--separated {
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid var(--c-border);
}

.matching-result__reasons {
  list-style: none;
  padding: 0;
  color: var(--c-muted);
}

.matching-result__reasons li {
  margin-bottom: 0.4em;
}