/* =====================================================================
   VISION PME — La ligne de vie d'un client

   Un fil d'événements, lu de haut en bas, du plus récent au plus vieux.
   Deux règles de lecture ont guidé la mise en forme :

     · ce qui a ÉCHOUÉ doit se voir sans être lu — un rebond, un appel
       sans réponse, un texto refusé portent un filet rouge à gauche ;
     · ce qui vient du CLIENT doit se distinguer de ce qu'on lui a
       envoyé — un fil où tout se ressemble oblige à tout lire.
   ===================================================================== */

/* ── Le résumé ────────────────────────────────────────────────────── */
.ldv-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.ldv-pastille {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  background: var(--surface-2);
}

.ldv-pastille-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--green);
}
.ldv-pastille-ico .icon { width: 16px; height: 16px; }

.ldv-pastille-v {
  font: 700 1.15rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}
.ldv-pastille-t { font-size: var(--fs-xs); color: var(--text-muted); }
.ldv-pastille-d { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 3px; }

/* ── Le fil ───────────────────────────────────────────────────────── */
.ldv-liste { display: flex; flex-direction: column; }

.ldv-ligne {
  display: flex; gap: 12px;
  padding: 12px 0 12px 12px;
  border-left: 2px solid var(--border);
  /* Le trait continue entre les lignes : c'est ce qui en fait un fil et
     non une liste. Le dernier élément ne le prolonge pas dans le vide. */
  margin-left: 6px;
}
.ldv-ligne:last-child { border-left-color: transparent; padding-bottom: 0; }

.ldv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  margin-left: -25px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.ldv-ico .icon { width: 14px; height: 14px; }

/* Ce qui vient du client. Le vert est la couleur de la marque : on la
   réserve à ce qui compte, et une réponse de client compte. */
.ldv-ligne.est-entrant > .ldv-ico { color: var(--green); border-color: var(--green); }
.ldv-ligne.est-entrant .ldv-titre { color: var(--green-text, var(--green)); }

/* Ce qui a échoué. */
.ldv-ligne.est-mauvais > .ldv-ico { color: var(--danger); border-color: var(--danger); }

.ldv-corps { min-width: 0; flex: 1; }

.ldv-titre {
  font: 600 var(--fs-sm)/1.35 var(--font-body);
  overflow-wrap: anywhere;
}

.ldv-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 3px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
/* Un point de séparation dessiné plutôt qu'écrit : il ne se retrouve
   jamais seul en fin de ligne quand le texte revient à la ligne. */
.ldv-meta span + span::before { content: '· '; color: var(--text-subtle); }

.ldv-apercu {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  font: 400 var(--fs-xs)/1.5 var(--font-body);
  color: var(--text);
  overflow-wrap: anywhere;
  /* Trois lignes suffisent à reconnaitre un message ; au-dela, le fil
     devient illisible. Le texte complet reste dans la base. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.ldv-erreur {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 0;
  font-size: var(--fs-xs); color: var(--danger);
}
.ldv-erreur .icon { width: 13px; height: 13px; flex: none; }

@media (max-width: 640px) {
  .ldv-resume { grid-template-columns: 1fr; gap: var(--s-2); }
  .ldv-pastille { padding: 10px 12px; }
}

/* =====================================================================
   « Ne pas déranger »

   Deux rangées au-dessus de l'historique. Elles répondent à une question
   qu'on se pose en regardant ce qu'on a déjà écrit à quelqu'un : a-t-on
   encore le droit de lui écrire ?

   ⚠️ LE BLOCAGE POSÉ PAR LE CLIENT NE PORTE PAS DE BOUTON. Le distinguer
   visuellement du nôtre n'est pas décoratif : « bloqué par l'équipe » se
   défait d'un clic, « a répondu ARRÊT » ne se défait pas du tout depuis
   cet écran. Deux états qui se ressemblent produiraient des clics qui se
   font refuser, et un agent qui finit par croire que le bouton est
   cassé.
   ===================================================================== */

.ldv-dnd {
  display: grid; gap: 6px;
  margin-bottom: var(--s-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  background: var(--surface-2);
}

.ldv-dnd-rangee {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font: 400 var(--fs-xs)/1.5 var(--font-body);
  color: var(--text-muted);
}
.ldv-dnd-rangee > .icon { width: 15px; height: 15px; flex: none; }
.ldv-dnd-rangee b { color: var(--text); font-weight: 650; }

/* L'adresse prend la place qui reste, et pousse le bouton à droite. */
.ldv-dnd-etat {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 1 1 8rem; min-width: 0;
  overflow-wrap: anywhere;
}
.ldv-dnd-etat .icon { width: 12px; height: 12px; flex: none; }

.ldv-dnd-rangee.est-vide { opacity: .6; }
.ldv-dnd-rangee.est-bloque > .icon,
.ldv-dnd-rangee.est-bloque b { color: var(--danger); }
.ldv-dnd-rangee.est-bloque .ldv-dnd-etat { color: var(--danger); }

/* Posé par le client : le fond dit qu'on n'y touche pas. */
.ldv-dnd-rangee.est-client {
  margin: 2px -4px; padding: 6px 8px;
  border-radius: 8px;
  background: var(--danger-soft);
}

.ldv-dnd-btn { flex: none; }
.ldv-dnd-btn .icon { width: 14px; height: 14px; }

/* =====================================================================
   À QUI EST CETTE VENTE ? (0226)

   Posé en haut de la fiche client, AVANT l'historique, et seulement pour
   un client payant. Deux états : attribuée (une ligne calme) et
   orpheline (un bloc qui demande une décision).

   ⚠️ L'orphelin est en teinte d'avertissement, pas de danger. Rien n'est
   cassé — une vente attend son vendeur. Le rouge est réservé à ce qui
   fait perdre de l'argent maintenant ; ici on en récupère.
   ===================================================================== */
.fc-vente {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font: 400 var(--fs-xs)/1.5 var(--font-body);
}
.fc-vente .icon { width: 15px; height: 15px; flex: none; }
.fc-vente strong { color: var(--text); font-weight: 650; }

.fc-vente.est-attribuee {
  display: flex; align-items: center; gap: 8px;
  background: var(--ok-soft); color: var(--green-text);
}

.fc-vente.est-orpheline {
  background: var(--warn-soft);
  color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}
.fc-vente-tete {
  display: flex; align-items: center; gap: 8px;
  color: var(--warn);
  margin-bottom: 9px;
}
/* Le choix et le geste sur une ligne, et qui se replie sur petit écran :
   cette fenêtre s'ouvre aussi depuis un téléphone, en plein appel. */
.fc-vente-geste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fc-vente-geste .select-wrap { flex: 1 1 12rem; min-width: 0; }
.fc-vente-geste .select { width: 100%; }