/* =============================================================================
   CRM EcoThatch — 03-crm.css
   -----------------------------------------------------------------------------
   Le tableau kanban, les cartes de fiche, la vue liste et la zone d'alertes.
   ========================================================================== */

.wrap { padding: 4px 16px 110px; }

/* ============================ KANBAN ===================================== */

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

@media (max-width: 940px) {
  .board { grid-template-columns: 1fr; }
}

.col {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.col-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
}

.col-head .pill {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.col[data-s="a_traiter"] .pill { background: var(--s-todo); }
.col[data-s="en_cours"]  .pill { background: var(--s-progress); }
.col[data-s="termine"]   .pill { background: var(--s-done); }

.col-head .count {
  margin-left: auto;
  padding: 2px 9px;
  background: var(--panel2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}

.col-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 11px;
  min-height: 90px;
  transition: background .15s;
}

.col-body.dragover { background: rgba(91, 141, 255, .09); }

.col-empty {
  padding: 26px 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ============================ CARTE ====================================== */

.card {
  position: relative;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--p-moyenne);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .15s, transform .05s;
}

.card:hover { border-color: var(--accent); }
.card.dragging { opacity: .45; }

.card.prio-Basse   { border-left-color: var(--p-basse); }
.card.prio-Moyenne { border-left-color: var(--p-moyenne); }
.card.prio-Haute   { border-left-color: var(--p-haute); }
.card.prio-Urgente { border-left-color: var(--p-urgente); }

/* Fiche qui réclame une action : relance échue ou sample en retard. */
.card.alerted {
  box-shadow: 0 0 0 1px var(--alert), var(--shadow-sm);
}

.card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.card-top h3 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.prio-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.prio-badge.Basse   { background: var(--p-basse); }
.prio-badge.Moyenne { background: var(--p-moyenne); }
.prio-badge.Haute   { background: var(--p-haute); }
.prio-badge.Urgente { background: var(--p-urgente); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }

.cat-badge,
.type-tag,
.sample-badge,
.prop-tag {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.cat-badge.Pro   { background: rgba(61, 124, 240, .18); color: #9dbcff; }
.cat-badge.Perso { background: rgba(34, 179, 145, .18); color: #7fd9c3; }

.type-tag { background: var(--panel2); color: var(--muted); }

.prop-tag { background: rgba(148, 162, 189, .14); color: var(--muted); }

.cat-badge.sale-won  { background: rgba(55, 194, 107, .2);  color: #86e3ab; }
.cat-badge.sale-lost { background: rgba(178, 59, 59, .22);  color: #f0a0a0; }

.sample-badge.sent  { background: rgba(242, 168, 58, .18); color: #f6c983; }
.sample-badge.got   { background: rgba(55, 194, 107, .18); color: #86e3ab; }
.sample-badge.nogot { background: rgba(229, 72, 77, .2);   color: #f3a3a5; }

.meta { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.meta a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.meta a:hover { text-decoration: underline; }

.msg {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  padding: 9px 11px;
  background: var(--bg2);
  border-radius: 9px;
  font-size: 13px;
  color: #c6d2e6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================ COMMANDE =================================== */

.order {
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12.5px;
}

.order-top { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.order-top .oc { margin-left: auto; color: var(--muted); font-size: 11px; }

.obar {
  height: 5px;
  margin: 7px 0;
  background: var(--panel2);
  border-radius: 999px;
  overflow: hidden;
}

.obar i { display: block; height: 100%; background: var(--accent); }

.onum { color: var(--muted); overflow-wrap: anywhere; }
.onext { margin-top: 7px; }

/* ============================ SAMPLE & VENTE ============================= */

.sample-row,
.sale-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.sample-seg,
.sale-seg {
  padding: 4px 9px;
  background: var(--bg2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.sample-seg:hover,
.sale-seg:hover { border-color: var(--accent); }

.sample-seg.act.none  { background: var(--panel2); color: var(--txt); }
.sample-seg.act.sent  { background: var(--warn);  color: #201704; border-color: var(--warn); font-weight: 700; }
.sample-seg.act.got   { background: var(--ok);    color: #04240f; border-color: var(--ok);   font-weight: 700; }
.sample-seg.act.nogot { background: var(--alert); color: #fff;    border-color: var(--alert); font-weight: 700; }

.sale-seg.act.cur  { background: var(--panel2); color: var(--txt); }
.sale-seg.act.won  { background: var(--ok);    color: #04240f; border-color: var(--ok);   font-weight: 700; }
.sale-seg.act.lost { background: var(--alert); color: #fff;    border-color: var(--alert); font-weight: 700; }

/* ============================ CONTACTS =================================== */

.clog {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.clog-counts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 12.5px;
}

.counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px 3px 9px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.counter b { min-width: 12px; text-align: center; }

.pm {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  background: var(--panel2);
  color: var(--txt);
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.pm.plus:hover  { background: var(--ok);    color: #04240f; }
.pm.minus:hover { background: var(--alert); color: #fff; }

.cl-last { color: var(--muted); font-size: 12px; }

.clog-btns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

.chip,
.fu-btn {
  padding: 4px 11px;
  background: var(--bg2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.chip:hover, .fu-btn:hover { border-color: var(--accent); }
.chip.on { background: rgba(55, 194, 107, .18); border-color: var(--ok); color: #86e3ab; font-weight: 600; }

.fu-pill {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.fu-pill.ok   { background: var(--panel2); color: var(--muted); }
.fu-pill.soon { background: rgba(242, 168, 58, .18); color: #f6c983; }
.fu-pill.due  { background: var(--alert); color: #fff; }

/* ============================ VIGNETTES ================================== */

.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.thumbs img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
  cursor: zoom-in;
}

.thumbs .more {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ============================ ACTIONS DE CARTE =========================== */

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.card-actions button {
  padding: 4px 10px;
  background: var(--bg2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.card-actions button:hover { background: var(--panel2); color: var(--txt); }

/* ============================ VUE LISTE ================================== */

.list { display: flex; flex-direction: column; gap: 11px; }

.list .card { cursor: default; }

.card-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }

.status-dot-btn {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.status-dot-btn.st-todo     { background: rgba(135, 148, 173, .18); color: #b6c0d3; }
.status-dot-btn.st-progress { background: rgba(242, 168, 58, .18);  color: #f6c983; }
.status-dot-btn.st-done     { background: rgba(55, 194, 107, .18);  color: #86e3ab; }

/* ============================ ALERTES ==================================== */

.alertzone {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: rgba(229, 72, 77, .09);
  border: 1px solid rgba(229, 72, 77, .4);
  border-radius: var(--radius);
}

.alertzone.sample {
  background: rgba(242, 168, 58, .09);
  border-color: rgba(242, 168, 58, .4);
}

.alertzone.calm {
  background: var(--panel);
  border-color: var(--line);
}

.alertzone h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  font-size: 13.5px;
}

.alert-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 13px;
}

.alert-row:first-of-type { border-top: 0; }

.alert-row .an  { font-weight: 700; }
.alert-row .lbl { color: var(--muted); font-size: 12px; }
.alert-row .sp  { flex: 1; }

.alert-row .cd {
  padding: 2px 9px;
  background: var(--alert);
  color: #fff;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.alert-row .cd.soon { background: var(--warn); color: #201704; }

/* =============================================================================
   PARCOURS — ajouté avec la refonte des rôles (migration 0006)
   ============================================================================= */

/* Cinq colonnes : À qualifier · Devis · Commande · Sample+Devis · Terminé.
 *
 * ⚠️ Colonnes à largeur FIXE et défilement horizontal, surtout pas cinq
 * fractions qui se partagent l'écran. Sur 1500 px, `1fr` donnait 250 px par
 * colonne : le nom du client passait sur deux lignes, les badges s'empilaient
 * sur trois rangs, et les vignettes devenaient illisibles. Une carte de CRM a
 * besoin d'environ 320 px pour rester lisible ; on préfère faire défiler le
 * tableau plutôt que d'écraser son contenu.
 *
 * Le défilement vit sur `.wrap` (le conteneur), pas sur le corps de la page :
 * la règle de responsive du projet veut que le body ne défile jamais
 * horizontalement. */
.board-5 {
  grid-template-columns: repeat(6, 320px);
  min-width: min-content;
}

.wrap { overflow-x: auto; }

/* Au-delà de 2100 px, les six tiennent : elles reprennent la largeur libre. */
@media (min-width: 2100px) {
  .board-5 { grid-template-columns: repeat(6, minmax(320px, 1fr)); }
}

/* Sur téléphone, le défilement horizontal d'un kanban est pénible : on empile.
   ⚠️ Cette règle doit rester la DERNIÈRE qui parle de `.board-5`. Une règle de
   même spécificité écrite plus bas l'écraserait — c'est arrivé en ajoutant la
   sixième colonne : la page débordait à 2006 px de large sur un écran de 390. */
@media (max-width: 780px) {
  .board-5 { grid-template-columns: 1fr; min-width: 0; }
  .wrap { overflow-x: visible; }
}

.col[data-s="nouveau"]      .pill { background: var(--s-todo); }
.col[data-s="devis"]        .pill { background: var(--p-moyenne); }
.col[data-s="commande"]     .pill { background: var(--accent); }
.col[data-s="sample_devis"] .pill { background: var(--warn); }
.col[data-s="termine"]      .pill { background: var(--s-done); }

/* --- Badge de parcours sur la carte ------------------------------------- */

.parcours-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.parcours-badge.vide         { background: var(--panel2);              color: var(--muted); }
.parcours-badge.devis        { background: rgba(63, 155, 212, .2);     color: #9ed2f0; }
.parcours-badge.commande     { background: rgba(91, 141, 255, .2);     color: #a9c3ff; }
.parcours-badge.sample_devis { background: rgba(242, 168, 58, .2);     color: #f6c983; }

/* --- Bloc de parcours : l'information que l'équipe lit en premier -------- */

.parcours-bloc {
  margin-top: 10px;
  padding: 10px 11px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.parcours-bloc.vide { border-style: dashed; }

.pb-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
}

.pb-compte { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 11.5px; }

.parcours-bloc .obar { margin: 8px 0; }

.pb-suivante {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}

.pb-suivante .pb-etape { flex: 1; min-width: 120px; }
.pb-suivante.fini { color: var(--ok); font-weight: 600; }

.pb-choix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* --- Pastille du responsable : V, G, ou automatique ---------------------- */

.qui {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
}

.qui.vendeur      { background: var(--perso);  color: #04241c; }
.qui.gestionnaire { background: var(--pro);    color: #fff; }
.qui.auto         { background: var(--panel2); color: var(--muted); font-size: 12px; }

/* --- Statistiques : deux tuiles de plus --------------------------------- */

.stat.v .bar { background: var(--perso); }
.stat.g .bar { background: var(--pro); }

/* --- Bouton « Mes actions » --------------------------------------------- */

.btn.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* --- Étiquette d'état dans la vue liste --------------------------------- */

.etat-liste {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  text-align: right;
}

/* --- Rôle dans l'en-tête ------------------------------------------------ */

.moi .role.gestionnaire { background: var(--pro); color: #fff; }

/* =============================================================================
   AFFAIRES ET CÔTÉ PRO — migration 0007
   ============================================================================= */

.col[data-s="pro"] .pill { background: var(--pro); }

.parcours-badge.pro_devis_sample { background: rgba(61, 124, 240, .25); color: #b8cdff; }
.parcours-badge.pro_commande     { background: rgba(34, 179, 145, .22); color: #7fd9c3; }

/* Numéro d'affaire : n'apparaît qu'à partir de la deuxième, donc uniquement
   sur les clients qui ont recommandé. C'est l'information neuve. */
.rang-badge {
  padding: 2px 9px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* Nombre d'affaires déjà closes pour ce client, dans l'en-tête du bloc. */
.pb-histo {
  padding: 1px 8px;
  background: rgba(55, 194, 107, .18);
  color: #86e3ab;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.pb-suivante.fini {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

/* =============================================================================
   MIROIR SHOPIFY — migration 0009
   ============================================================================= */

.shopify-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  padding: 7px 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 12px;
  color: var(--muted);
}

/* Un échec de synchronisation doit se voir : le miroir n'est PAS à jour, et
   croire le contraire est pire que ne rien afficher. */
.shopify-ligne.alerte {
  border-color: rgba(242, 168, 58, .5);
  background: rgba(242, 168, 58, .09);
  color: #f6c983;
}

.shopify-ligne a { color: var(--accent); text-decoration: none; }
.shopify-ligne a:hover { text-decoration: underline; }

.sh-etat {
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
}

.sh-etat.ok      { background: rgba(55, 194, 107, .18); color: #86e3ab; }
.sh-etat.attente { background: rgba(242, 168, 58, .18); color: #f6c983; }
.sh-etat.annulee { background: rgba(229, 72, 77, .2);   color: #f3a3a5; }

/* --- Dans la modale ------------------------------------------------------ */

.miroir-shopify {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}

.miroir-shopify a { color: var(--accent); }
.miroir-shopify .btn { margin-left: auto; }

.sh-quand {
  width: 100%;
  color: var(--muted);
  font-size: 11.5px;
}