/* L22 — Appels rapprochés (Commerce › Échanges › Appels) et alerte avant livraison. */

/* Cellule « Client · voiture · dossier » : le fait principal en lien, le suivi dessous. */
.ux-appel-rappr { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ux-appel-rappr small { color: var(--muted-foreground); line-height: 1.3; }
.ux-appel-rappr .btn { align-self: flex-start; margin-top: 4px; }
.ux-appel-lien {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-weight: 600; text-align: left; color: var(--primary);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ux-appel-lien:hover, .ux-appel-lien:focus-visible { text-decoration-thickness: 2px; }
.ux-appel-autres { color: var(--warning-fort) !important; }

/* Détail d'un appel. */
.ux-appel-fiche {
  border: 1px solid var(--bord, var(--border)); border-radius: 10px; background: var(--card);
  padding: 14px 16px; margin: 0 0 14px;
}
.ux-appel-tete h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.ux-appel-tete p { margin: 0 0 4px; }
.ux-appel-tete small { display: block; color: var(--muted-foreground); }
.ux-appel-fiche h4 { margin: 14px 0 6px; }
.ux-appel-fiche td .badge { margin-right: 6px; }
.ux-appel-fiche td small { display: block; color: var(--muted-foreground); }
.ux-appel-plusieurs { margin: 0 0 6px; color: var(--warning-fort); font-weight: 600; }
.ux-appel-inconnu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ux-appel-inconnu p { margin: 0; }

/* Onglet « Appel » de la conversation. */
.ux-appel-note-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 6px; }
.ux-appel-note-ligne input { max-width: 220px; }

/* Alerte avant livraison : chaque point avec l'endroit où le régler. */
.ux-alerte-points { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.ux-alerte-points li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ux-alerte-points li span { flex: 1 1 220px; }

@media (max-width: 720px) {
  .ux-appel-fiche { padding: 12px; }
  .ux-appel-note-ligne input { max-width: none; width: 100%; }
}