/*
 * Modale « Importer » (`templates/components/import_csv_modal.html`), commune
 * aux clients et au catalogue : le bloc d'erreurs d'un refus, deux etapes
 * numerotees, puis le memo du format (colonnes reconnues, aide propre au
 * domaine) en retrait sous un filet.
 *
 * Ces classes n'ont qu'un usage : elles vivent ici plutot que dans
 * `modales.css`, qui ne porte que les primitives de toute modale. La zone de
 * depot (`ui-dropzone`, `formulaires.css`), les etiquettes (`ui-tag`,
 * `badges.css`) et le petit texte (`ui-help`) sont ceux de l'application.
 */

.ui-import-erreurs {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--ui-danger-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-danger-soft);
}

.ui-import-erreurs__titre {
  color: var(--ui-danger-hover);
  font-size: 0.875rem;
  font-weight: 620;
}

/* Cinquante erreurs au plus (`MAX_ERREURS_AFFICHEES`) : la liste defile dans
   son cadre plutot que de repousser les etapes hors de vue. */
.ui-import-erreurs__liste {
  display: grid;
  max-height: 15rem;
  margin-top: 0.5rem;
  gap: 0.25rem;
  overflow-y: auto;
  color: var(--ui-danger);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.ui-import-etapes {
  display: grid;
  gap: 1.25rem;
}

.ui-import-etape {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
}

.ui-import-etape__numero {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.ui-import-etape__corps {
  display: grid;
  min-width: 0;
  gap: 0.625rem;
}

/* L'etape du modele tient sur une ligne : la phrase a gauche, le bouton a
   droite ; le bouton passe dessous quand la place manque. */
.ui-import-etape__ligne {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1rem;
}

.ui-import-etape__titre {
  color: var(--ui-text);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.5rem;
}

.ui-import-memo {
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ui-border);
}

.ui-import-memo__titre {
  margin-bottom: 0.5rem;
  color: var(--ui-text-muted);
  font-size: 0.75rem;
  font-weight: 650;
}

/* L'aide d'un domaine (textes types du catalogue) : une entree par colonne,
   son etiquette (`ui-tag`) a gauche, la regle a droite ; une regle sur deux
   lignes reste alignee sur la sienne. */
.ui-import-aide {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem 0.625rem;
}