/* ═══════════════════════════════════════════════════════════════════════
   Prospects — table dense, toolbar (recherche + filtres), états vide/erreur.
   S'appuie sur les primitives de la fondation (css/components.css) :
   .btn, .input, .select, .toolbar, .search, .table-wrap, .tbl, .badge,
   .tag, .spinner, .card. Ici : seulement le spécifique à cet écran.
   Direction « Linear futuriste » — prototype 02-linear-dark.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Toolbar : icône de recherche en SVG (Lucide) ─── */
.search .search-ico svg { width: 15px; height: 15px; display: block; }
.search .input[type="search"] { padding-left: 34px; height: 34px; }
.toolbar .select-inline { height: 34px; padding-top: 0; padding-bottom: 0; }

/* ─── Table dense : header sticky mono + lignes denses ─── */
.table-wrap .tscroll { overflow-x: auto; }
.tbl th { padding: 10px 14px; }
.tbl td { padding: 11px 14px; white-space: nowrap; }

/* Cellule « Prospect » : avatar initiales + nom + (entreprise · poste) */
.cell-name { display: flex; align-items: center; gap: 10px; }
.cell-name .nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-name .t-name { font-weight: 600; color: var(--text); }
.cell-name .t-sub {
  color: var(--text-muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.cell-name .t-av {
  width: 28px; height: 28px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--text);
  background: var(--bg-hover); border: 1px solid var(--border);
}

/* Valeurs/dates en mono, alignées à droite (la classe .num pose déjà le mono) */
.tbl td.t-val { color: var(--text); }
.tbl td.t-meta { color: var(--text-muted); font-size: 12px; }

/* ─── Pastilles de relance (colonne dense, mono) ─── */
.rel-pill {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.rel-pill.rel-ok   { color: var(--accent);  background: var(--accent-soft);  border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.rel-pill.rel-warn { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.rel-pill.rel-dim  { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); }
/* « Dernier contact » en retard (> 30 j) */
.t-meta .rel-warn { color: var(--warning); font-weight: 500; background: none; border: none; padding: 0; }

/* ─── Chargement ─── */
.prosp-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 64px 24px;
}
.prosp-loading .spinner { width: 22px; height: 22px; border-width: 2px; }

/* ─── Bandeau d'erreur (non technique) ─── */
.error-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; margin-bottom: 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: var(--danger-soft);
}
.error-banner .error-ic {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center; background: var(--bg-surface);
}
.error-banner .error-ic svg { width: 17px; height: 17px; color: var(--danger); }
.error-banner .error-tx { flex: 1; min-width: 0; }
.error-banner .error-tx b { font-size: 13px; font-weight: 600; color: var(--text); }
.error-banner .error-tx p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.error-banner .btn { flex: none; }
.error-banner .btn .spinner { width: 14px; height: 14px; border-width: 2px; }

/* ─── États vides (aucun prospect / aucun résultat) ─── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 54px 24px;
}
.empty-state.empty-inline { background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.empty-state .empty-ill {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 8px;
  display: grid; place-items: center;
  background: var(--accent-soft); position: relative; overflow: hidden;
}
.empty-state .empty-ill::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, #fff 18%, transparent), transparent 60%);
  pointer-events: none;
}
.empty-state .empty-ill svg { width: 26px; height: 26px; color: var(--accent); }
.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text); }
.empty-state p { font-size: 13px; color: var(--text-muted); max-width: 300px; }
.empty-state .btn { margin-top: 10px; }

/* ─── Responsive : masquer les colonnes secondaires en étroit ─── */
@media (max-width: 880px) {
  .tbl th:nth-child(4), .tbl td:nth-child(4),
  .tbl th:nth-child(6), .tbl td:nth-child(6) { display: none; }
  .cell-name .t-sub { max-width: 160px; }
}