/* ==========================================================================
   Interface v2 — écran « Fichier de prospection » (25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-prospection.js. Tout est scopé html.ui-v2 et préfixé
   v2pp- (pp comme prospection) : sans la v2, ce fichier ne change RIEN.

   L'écran REPREND la manière des Fiches : les classes partagées v2l-*
   (en-tête, boutons, filtres, tableau, bandeau, panneau, états vides)
   viennent de ui-v2-prospects.css, chargé avant. Ce fichier ne définit que
   ce qui est propre à la prospection : pilules de population, pastilles de
   score, sous-lignes, colonne d'actions, menu « Plus », bannières.
   Jetons de design-tokens.css ; cartes radius 12, pastilles radius 4,
   pastels, grille 8 pt.
   ========================================================================== */

/* ------------------------------------------------ pilules de population */
html.ui-v2 .v2pp-pilules {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
html.ui-v2 .v2pp-pilule {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 999px;
  background: var(--fond-surface, #fff);
  color: var(--texte-attenue);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
html.ui-v2 .v2pp-pilule:hover { color: var(--sobria-nuit); background: #faf8f3; }
html.ui-v2 .v2pp-pilule.active {
  background: var(--sobria-nuit);
  border-color: var(--sobria-nuit);
  color: #fff;
  font-weight: 600;
}

/* -------------------------------------------------------------- bannières */
/* Verrou légal (rouge) et liste tronquée (cuivre) — mêmes messages que la
   v1, en carte v2. */
html.ui-v2 .v2pp-note {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
html.ui-v2 .v2pp-note-rouge { border-color: #a3392b; }
html.ui-v2 .v2pp-note-cuivre { border-left: 3px solid var(--sobria-cuivre); }
html.ui-v2 .v2pp-note-titre {
  margin: 0;
  font-weight: 600;
  color: #a3392b;
  font-size: 14px;
}
html.ui-v2 .v2pp-note-texte {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--texte-attenue);
}
html.ui-v2 .v2pp-note-cuivre .v2pp-note-texte { margin-top: 0; }
html.ui-v2 .v2pp-note a { color: var(--cuivre-clair, #a05f27); }

/* -------------------------------------------- filtres : cases à cocher */
html.ui-v2 .v2pp-case {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 13px;
  color: var(--texte-attenue);
  cursor: pointer;
  white-space: nowrap;
}
html.ui-v2 .v2pp-case input,
html.ui-v2 .v2pp-tout input {
  width: 18px;
  height: 18px;
  accent-color: var(--sobria-cuivre);
  cursor: pointer;
  margin: 0;
}
html.ui-v2 .v2pp-tout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  color: var(--texte-attenue);
  cursor: pointer;
  margin-bottom: 4px;
}

/* -------------------------------------------------------------- tableau */
/* Le menu « Plus » se déploie DANS la carte : l'overflow:hidden hérité de
   v2l-carte (coins arrondis) le rognerait — piège « présent mais
   inatteignable » du dépôt. On le rend visible ici. */
html.ui-v2 .v2l-carte.v2pp-deborde { overflow: visible; }

html.ui-v2 .v2pp-sub {
  font-size: 12px;
  color: var(--texte-attenue);
  margin-top: 2px;
}
/* Sélecteurs en td.v2pp-* : la règle générale « html.ui-v2 .v2l-tableau td »
   de ui-v2-prospects.css pèse (0,2,2) — une classe seule (0,2,1) perdrait
   contre elle, sur la taille de police ici et sur les display du mobile
   plus bas. Mesuré avant d'écrire, pas découvert après. */
html.ui-v2 .v2l-tableau td.v2pp-c-score { white-space: nowrap; }
html.ui-v2 .v2l-tableau td.v2pp-c-ville { white-space: nowrap; }
html.ui-v2 .v2l-tableau td.v2pp-c-contact { font-size: 13px; color: var(--texte-attenue); }

/* Statut par ligne : le même select-endpoint que la v1, à l'habit v2. */
html.ui-v2 .v2pp-statut {
  height: 36px;
  max-width: 180px;
  padding: 0 8px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13px;
}

/* --------------------------------------------------------------- pastilles */
html.ui-v2 .v2pp-pastille {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
/* Score d'opportunité — pastels, seuils 80/60/40 comme la v1. */
html.ui-v2 .v2pp-score-chaud  { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2pp-score-eleve  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2pp-score-moyen  { background: #f6f3e2; color: #8a6d3b; }
html.ui-v2 .v2pp-score-faible { background: #eef3fb; color: #2f5fa8; }
/* Prospect déjà converti en fiche. */
html.ui-v2 .v2pp-converti { background: #eaf5ee; color: #3f8f5f; margin-left: 6px; }
/* Statut affiché dans le panneau (le tableau, lui, montre le select). */
html.ui-v2 .v2pp-statut-pastille { background: #efeeec; color: #4a5065; }

/* ------------------------------------------------------ colonne Actions */
/* « Une action principale, le reste dans Plus » : Convertir + le menu. */
html.ui-v2 .v2l-tableau th.v2pp-c-actions,
html.ui-v2 .v2l-tableau td.v2pp-c-actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}
html.ui-v2 .v2pp-c-actions .v2l-btn.v2pp-btn-ligne {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}
html.ui-v2 .v2pp-c-actions .v2l-btn.v2pp-btn-plus {
  width: 40px;
  padding: 0;
}
html.ui-v2 .v2pp-btn-plus svg { width: 18px; height: 18px; }
html.ui-v2 .v2pp-menu-ancre {
  position: relative;
  display: inline-block;
  margin-left: 6px;
}

/* Menu « Plus » : la coquille (.v2-menu, ui-v2.css) donne le cadre ; ici,
   les icônes et l'entrée destructrice. */
html.ui-v2 .v2-menu [data-act] svg,
html.ui-v2 .v2pp-menu-liste [data-act] svg {
  width: 18px;
  height: 18px;
  flex: none;
}
html.ui-v2 .v2-menu [data-act][disabled],
html.ui-v2 .v2pp-menu-liste [data-act][disabled] {
  opacity: .45;
  cursor: not-allowed;
}
html.ui-v2 .v2pp-menu-danger { color: #a3392b; }

/* Repli sans coquille : les mêmes entrées, listées dans une modale. */
html.ui-v2 .v2pp-menu-liste { display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .v2pp-menu-liste [data-act] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--texte);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
html.ui-v2 .v2pp-menu-liste [data-act]:hover { background: var(--fond-survol, #efeade); }

/* --------------------------------------------------------------- panneau */
html.ui-v2 .v2pp-panneau-notes {
  margin: 0;
  font-size: 13.5px;
  color: var(--texte);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* « Modifier le prospect » : un bouton à l'habit du lien de panneau. */
html.ui-v2 .v2pp-panneau-bouton {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* ---------------------------------------------------------------- mobile */
/* v2l-* transforme déjà le tableau en cartes (thead masqué, cellules en
   blocs, case absolue à gauche) ; ici, ce qui est propre à cet écran :
   les colonnes secondaires partent dans le panneau, les gestes restent. */
@media (max-width: 767px) {
  html.ui-v2 .v2l-tableau td.v2pp-c-ville,
  html.ui-v2 .v2l-tableau td.v2pp-c-contact { display: none; }
  html.ui-v2 .v2l-tableau td.v2pp-c-statut { padding-top: 6px; }
  html.ui-v2 .v2l-tableau td.v2pp-c-score { display: inline-block; padding: 2px 8px 2px 0; }
  html.ui-v2 .v2l-tableau td.v2pp-c-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    padding-top: 8px;
    text-align: left;
  }
  html.ui-v2 .v2pp-c-actions .v2l-btn.v2pp-btn-ligne { min-height: 44px; }
  html.ui-v2 .v2pp-c-actions .v2l-btn.v2pp-btn-plus { width: 44px; }
  html.ui-v2 .v2pp-pilules { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  html.ui-v2 .v2pp-pilule { flex: none; }
  /* Le panneau plein écran vient de v2l-panneau (media query des Fiches). */
}