/* Oqora CRM · liste des contacts en tableau comme GHL (24/10/2026, .ct-*). Onglets soulignés, barre d'outils,
   tableau blanc à lignes fines (44 px), en-têtes triables, barre de sélection, pied « Page 1 de N ». Texte d'une
   seule couleur, boutons de 32 px (44 px sur téléphone). Règles préfixées par .s-contacts ; jetons de crm.css. */

.s-contacts .ct{ --ct-trait:var(--rule); --ct-trait-fort:var(--rule-strong, #c4cad0); --ct-fond:var(--bande);
  display:flex; flex-direction:column; gap:12px; min-width:0; color:var(--ink); font-size:14px;
  margin:0 calc(16px - var(--gutter, 24px)); }
.s-contacts .ct p{ margin:0; }
.s-contacts .ct svg{ width:15px; height:15px; flex:none; }
.s-contacts .ct-cache{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------------------------------------------------------- onglets, barre d'outils */
.s-contacts .ct-onglets{ display:flex; gap:22px; border-bottom:1px solid var(--ct-trait); overflow-x:auto; }
.s-contacts .ct-onglet{ height:40px; padding:0; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer;
  font:500 14px/1 var(--font); color:var(--ink-soft); white-space:nowrap; }
.s-contacts .ct-onglet:hover{ color:var(--ink); }
.s-contacts .ct-onglet[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--bleu); }
.s-contacts .ct-barre{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.s-contacts .ct-espace{ flex:1; }
.s-contacts .ct-champ{ height:32px; min-height:32px; padding:0 10px; border:1px solid var(--ct-trait-fort); border-radius:6px;
  background:var(--surface); color:var(--ink); font:400 13.5px/1 var(--font); box-shadow:none; }
.s-contacts .ct-champ:focus{ outline:0; border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-ring); }
.s-contacts .ct-chercher{ width:300px; }
.s-contacts .ct-filtre-etiquette .ct-champ{ width:auto; max-width:240px; }
.s-contacts .ct-pastille{ display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:12px;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--ct-trait); font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.s-contacts .ct-note{ font-size:12.5px; color:var(--ink-soft); margin-top:-4px; }
.s-contacts .ct-b{ min-height:32px; height:32px; padding:0 12px; gap:6px; border-radius:6px; font-size:13px; font-weight:500;
  background:var(--surface); color:var(--ink); border:1px solid var(--ct-trait-fort); box-shadow:none; }
.s-contacts .ct-b:hover{ background:var(--ct-fond); color:var(--ink); box-shadow:none; }
.s-contacts .ct-b--principal{ background:var(--bleu); border-color:var(--bleu); color:#fff; }
.s-contacts .ct-b--principal:hover{ background:var(--bleu-dark); color:#fff; }
.s-contacts .ct-b--lien{ border-color:transparent; background:none; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--ct-trait-fort); }
.s-contacts .ct-b[disabled]{ opacity:.5; }

/* ---------------------------------------------------------------- barre de sélection */
.s-contacts .ct-selection{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 12px; border-radius:8px;
  background:var(--bleu-tint); border:1px solid var(--ct-trait); }
.s-contacts .ct-sel-nombre{ font-size:13.5px; font-weight:600; }
.s-contacts .ct-sel-sep{ width:1px; height:20px; background:var(--ct-trait-fort); margin:0 4px; }
.s-contacts .ct-sel-form{ display:flex; align-items:center; gap:8px; flex-basis:100%; }
.s-contacts .ct-sel-form .ct-champ{ width:260px; }
.s-contacts .ct-apercu:empty{ display:none; }
.s-contacts .ct-apercu{ flex-basis:100%; background:var(--surface); border-radius:8px; padding:12px; border:1px solid var(--ct-trait); }

/* ---------------------------------------------------------------- tableau */
.s-contacts .ct-tableau-zone{ background:var(--surface); border:1px solid var(--ct-trait); border-radius:8px; overflow:auto;
  max-height:calc(100vh - 340px); min-height:200px; }
.s-contacts .ct-tableau{ width:100%; min-width:1080px; table-layout:fixed; border-collapse:separate; border-spacing:0;
  font-size:13px; }
/* Largeurs fixes (lisibles à 1440 px : numéro, étape, dates entiers) ; le nom prend le reste. */
.s-contacts .ct-col-case{ width:40px; } .s-contacts .ct-col-tel{ width:138px; } .s-contacts .ct-col-email{ width:160px; }
.s-contacts .ct-col-centre{ width:92px; } .s-contacts .ct-col-etape{ width:116px; } .s-contacts .ct-col-source{ width:92px; }
.s-contacts .ct-col-activite{ width:132px; } .s-contacts .ct-col-etiquettes{ width:116px; } .s-contacts .ct-col-cree{ width:108px; }
.s-contacts .ct-tableau td{ overflow:hidden; text-overflow:ellipsis; }
.s-contacts .ct-tableau th{ position:sticky; top:0; z-index:2; height:38px; padding:0 10px; text-align:left;
  font:500 12.5px/1.2 var(--font); color:var(--ink-soft); background:var(--ct-fond); border-bottom:1px solid var(--ct-trait);
  white-space:normal; }
.s-contacts .ct-tableau td{ height:44px; padding:0 10px; border-bottom:1px solid var(--rule-soft); vertical-align:middle;
  white-space:nowrap; }
.s-contacts .ct-tableau tbody tr:last-child td{ border-bottom:0; }
.s-contacts .ct-tableau tbody tr:hover td{ background:#f8f9fb; }
.s-contacts .ct-ligne--cochee td{ background:var(--bleu-tint); }
.s-contacts .ct-tableau tbody tr.ct-ligne--cochee:hover td{ background:var(--bleu-tint); }
.s-contacts .ct-case{ width:40px; padding:0 0 0 12px !important; }
.s-contacts .ct-case-l{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; cursor:pointer; }
.s-contacts .ct-cocher{ width:16px; height:16px; margin:0; accent-color:var(--bleu); cursor:pointer; }
.s-contacts .ct-tri{ display:inline-flex; align-items:center; gap:4px; height:30px; padding:0; border:0; background:none;
  font:inherit; color:inherit; cursor:pointer; }
.s-contacts .ct-tri:hover{ color:var(--ink); }
.s-contacts .ct-sens svg{ width:13px; height:13px; }
.s-contacts .ct-sens--asc svg{ transform:rotate(180deg); }
.s-contacts .ct-nom{ display:flex; align-items:center; gap:10px; max-width:100%; border:0; background:none; padding:0;
  cursor:pointer; color:var(--ink); text-align:left; font:inherit; }
.s-contacts .ct-avatar{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--bleu-tint); color:var(--bleu-dark); font-size:11.5px; font-weight:600; }
.s-contacts .ct-nom-texte{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.s-contacts .ct-nom-ligne{ font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.s-contacts .ct-nom:hover .ct-nom-ligne{ text-decoration:underline; text-underline-offset:3px; }
.s-contacts .ct-pseudo{ font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.s-contacts .ct-faible{ color:var(--ink-soft); }
.s-contacts .ct-icone-texte{ display:inline-flex; align-items:center; gap:6px; max-width:100%; font-variant-numeric:tabular-nums; }
.s-contacts .ct-icone-texte svg{ color:var(--ink-faint); }
.s-contacts .ct-coupe{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.s-contacts .ct-icone-texte .ct-coupe{ min-width:0; }
.s-contacts .ct-etape{ display:inline-block; max-width:100%; height:22px; line-height:22px; padding:0 8px; border-radius:5px;
  font-size:12px; background:var(--ct-fond); box-shadow:inset 0 0 0 1px var(--ct-trait); overflow:hidden; text-overflow:ellipsis;
  vertical-align:middle; }
.s-contacts .ct-etape--fermee{ color:var(--ink-soft); }
.s-contacts .ct-td--activite, .s-contacts .ct-td--cree, .s-contacts .ct-td--source{ color:var(--ink-soft); font-size:13px; }
.s-contacts .ct-puce{ display:inline-flex; align-items:center; height:22px; padding:0 7px; margin-right:4px; border-radius:5px;
  font-size:12px; background:var(--ct-fond); box-shadow:inset 0 0 0 1px var(--ct-trait); max-width:110px; overflow:hidden;
  text-overflow:ellipsis; }
.s-contacts .ct-puce--plus{ color:var(--ink-soft); }
.s-contacts .ct-puces{ display:flex; align-items:center; gap:4px; min-width:0; }
.s-contacts .ct-puces .ct-puce{ display:block; flex:0 1 auto; min-width:0; margin:0; line-height:22px; white-space:nowrap; }
.s-contacts .ct-puces .ct-puce--plus{ flex:none; }
.s-contacts .ct-vide{ padding:40px 16px; text-align:center; }

/* ---------------------------------------------------------------- pied : pages */
.s-contacts .ct-pied{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); }
.s-contacts .ct-page{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- téléphone : 44 px pour chaque bouton */
@media (max-width: 899px){
  .s-contacts .ct-b, .s-contacts .ct-champ{ min-height:44px; height:44px; }
  .s-contacts .ct-chercher{ width:100%; flex-basis:100%; }
  .s-contacts .ct-onglet, .s-contacts .ct-tri, .s-contacts .ct-nom{ min-height:44px; height:44px; }
  .s-contacts .ct-case-l{ width:44px; height:44px; }
  .s-contacts .ct-tableau-zone{ max-height:none; }
  .s-contacts .ct-sel-form{ flex-wrap:wrap; }
  .s-contacts .ct-sel-form .ct-champ{ width:100%; }
}
/* Téléphone (25/10/2026) : le tableau de 1080 px ne laissait que 86 px au nom (« L… », « M… ») et se lisait en
 * glissant de côté. Comme l'appli GHL sur téléphone : le nom et le numéro seulement, sur toute la largeur. */
@media (max-width: 599px){
  .s-contacts .ct-tableau{ min-width:0; }
  .s-contacts .ct-col-email, .s-contacts .ct-col-centre, .s-contacts .ct-col-etape, .s-contacts .ct-col-source,
  .s-contacts .ct-col-activite, .s-contacts .ct-col-etiquettes, .s-contacts .ct-col-cree,
  .s-contacts .ct-th--email, .s-contacts .ct-th--centre, .s-contacts .ct-th--etape, .s-contacts .ct-th--source,
  .s-contacts .ct-th--activite, .s-contacts .ct-th--etiquettes, .s-contacts .ct-th--cree,
  .s-contacts .ct-td--email, .s-contacts .ct-td--centre, .s-contacts .ct-td--etape, .s-contacts .ct-td--source,
  .s-contacts .ct-td--activite, .s-contacts .ct-td--etiquettes, .s-contacts .ct-td--cree{ display:none; }
  .s-contacts .ct-col-case{ width:52px; } .s-contacts .ct-col-tel{ width:132px; }
  .s-contacts .ct-tableau td.ct-td--nom{ white-space:normal; }     /* un nom long passe sur deux lignes au lieu d'être coupé */
  .s-contacts .ct-nom{ height:auto; padding:4px 0; }
  .s-contacts .ct-nom-ligne{ overflow-wrap:anywhere; }
}