/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--surface-alt); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--wa {
  background: var(--wa);
  border-color: var(--wa);
  color: var(--text-inverse);
}
.btn--wa:hover { background: var(--wa-hover); }

.btn--danger { color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); }

.btn--sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }

.btn--icon {
  padding: var(--sp-1) var(--sp-2);
  border-color: transparent;
  background: transparent;
  font-size: var(--fs-md);
}
.btn--icon:hover { background: var(--surface-alt); border-color: var(--border); }

.btn[disabled], .btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Un bouton en cours de requête HTMX ne peut pas être recliqué */
.btn.htmx-request { opacity: 0.6; pointer-events: none; }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.badge--hot { background: var(--hot-soft); color: var(--hot); }
.badge--warm { background: var(--warm-soft); color: var(--warm); }
.badge--cold { background: var(--cold-soft); color: var(--cold); }

/* ---- Carte ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* ---- Connexion ---- */
.login {
  max-width: 340px;
  margin: 80px auto;
  padding: var(--sp-5);
}
.login__form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.login__form input {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
}

/* ---- Erreurs de formulaire ---- */
.form-error {
  color: var(--danger);
  font-size: var(--fs-sm);
}

/* ---- Tableaux de leads ---- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-4);
}
th, td {
  text-align: left;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.lead-row:hover { background: var(--surface-alt); }

.audit-info {
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 220px;
}
.audit-notes {
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-4);
}

/* ---- Sélecteur de température ---- */
.temp-picker { display: inline-flex; gap: var(--sp-1); }
.temp-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--fs-md);
  padding: var(--sp-1);
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.temp-btn:hover { opacity: 1; }

/* ---- Boutons de canal (WhatsApp / SMS / Appel) ---- */
.channel-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* ---- Sélecteur d'issue d'appel ---- */
.call-outcome-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.call-outcome-picker input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
}
.call-outcome-picker button {
  align-self: flex-start;
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
}
.call-outcome-picker button:hover { background: var(--surface-alt); }

/* ---- Bandeau KPI ---- */
.kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.kpi__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
}
.kpi__value {
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi__label { font-size: var(--fs-sm); color: var(--muted); }

/* ---- Barre d'outils ---- */
.toolbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.toolbar__spacer { flex: 1; }
.toolbar__sort { display: flex; align-items: center; gap: var(--sp-2); }
.toolbar__search { min-width: 280px; flex: 0 1 320px; }

.toolbar input, .toolbar select {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}

/* ---- Onglets ---- */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.tab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab__count {
  padding: 1px var(--sp-2);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.tab.is-active .tab__count { background: var(--accent-soft); color: var(--accent); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.group-title { margin: var(--sp-5) 0 var(--sp-2); }
.empty {
  padding: var(--sp-6);
  color: var(--muted);
  text-align: center;
}

/* ---- Table de leads ---- */
.table-wrap { overflow: hidden; }

.lead-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.lead-table th {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lead-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.lead-table tr:last-child td { border-bottom: none; }

.lead-row { cursor: pointer; }
.lead-row:hover { background: var(--surface-alt); }
.lead-row.is-selected { background: var(--accent-soft); }

/* Ces trois conteneurs sont des <div> placés *à l'intérieur* de la cellule,
   jamais le <td> lui-même : un `display: flex` sur un <td> le retire de
   l'algorithme de colonnes du tableau (il cesse d'être une `table-cell`),
   ce qui désaligne les cellules de leurs en-têtes et gonfle la hauteur des
   lignes. Voir _lead_row.html. */
.lead-row__name { display: flex; flex-direction: column; }
.lead-row__business { font-weight: 500; }
.lead-row__actions { display: flex; gap: var(--sp-1); white-space: nowrap; }
.lead-row__audit { display: flex; flex-wrap: wrap; gap: var(--sp-1); max-width: 260px; }

/* ---- Marqueur de traitement d'une ligne ---- */
/* Rend visible dans le tableau qu'une issue d'appel a déjà été enregistrée
   pour ce lead (voir _lead_status_badge.html). */
.lead-status {
  align-self: flex-start;
  margin-top: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
/* Lead encore à contacter : l'élément existe pour rester adressable par le
   swap hors bande, mais il ne doit rien occuper à l'écran. */
.lead-status:empty { display: none; }
.lead-status--contacted { background: var(--accent-soft); color: var(--accent); }
.lead-status--replied_interested { background: var(--success-soft); color: var(--success); }
.lead-status--replied_not_interested { background: var(--danger-soft); color: var(--danger); }

.score {
  padding: 1px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.score--unknown { background: var(--surface-alt); color: var(--muted); }
.score--bad { background: var(--hot-soft); color: var(--hot); }
.score--mid { background: var(--warm-soft); color: var(--warm); }
.score--good { background: var(--success-soft); color: var(--success); }

.flag {
  padding: 1px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--hot-soft);
  color: var(--hot);
  font-size: var(--fs-xs);
}

/* ---- Espace de travail deux colonnes ---- */
.workspace { display: flex; align-items: flex-start; gap: var(--sp-4); }
.workspace #leads-container { flex: 1; min-width: 0; }

/* ---- Panneau latéral ---- */
.panel {
  display: none;
  position: sticky;
  top: 120px; /* nav + toolbar */
  width: 380px;
  flex: 0 0 380px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.panel.is-open { display: block; }

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.panel__section { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.panel__section:last-child { border-bottom: none; }
.panel__title {
  margin-bottom: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.panel__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
}
.panel__facts dt { color: var(--muted); }
.panel__facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.panel__notes { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); color: var(--muted); }
.panel__note {
  width: 100%;
  margin-bottom: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
}
.panel__outcomes, .temp-picker { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.timeline { margin: 0; padding-left: var(--sp-4); }
.timeline__item { display: flex; flex-direction: column; margin-bottom: var(--sp-2); }

/* ---- Tiroir et modale ---- */
.drawer, .modal { position: fixed; inset: 0; z-index: 50; }
.drawer__backdrop, .modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
}
.drawer__body {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  overflow-y: auto;
  padding: var(--sp-5);
  border-radius: 0;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.modal__body {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - var(--sp-6)));
  padding: var(--sp-5);
}
.modal__title { margin-bottom: var(--sp-3); }
.modal__input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ---- Toast d'erreur htmx ---- */
.toast {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
}
.toast[hidden] { display: none; }

/* ---- Liste des catégories ---- */
.cat-list { margin: 0; padding: 0; list-style: none; }
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.cat-item__main { display: flex; flex-direction: column; }
.cat-item__name { font-weight: 500; }
.cat-item__actions { display: flex; gap: var(--sp-1); }
.cat-add { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.cat-add input {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
}

/* ---- Adaptation mobile ---- */
@media (max-width: 900px) {
  .workspace { flex-direction: column; }

  /* `.workspace` garde `align-items: flex-start` (hérité de la règle de
     base, pensée pour la mise en page desktop à deux colonnes) même en
     `flex-direction: column`. Sans `stretch`, ses enfants directs
     (`#leads-container`) ne sont plus contraints à sa largeur : ils se
     dimensionnent en shrink-to-fit jusqu'à la largeur min-content de leur
     contenu, et `#leads-container` la répercute vers le bas sur `.tabs`,
     `.tab-panel` et `.table-wrap` (qui remplissent simplement 100% de leur
     parent). `#leads-container { min-width: 0 }` (déjà présent) ne change
     rien ici : cette propriété plafonne le rétrécissement sur l'axe
     principal du flex (utile en ligne, sur desktop), pas le calcul
     shrink-to-fit de l'axe croisé qui s'applique une fois passé en
     colonne. `align-items: stretch` force au contraire une largeur
     définie égale à celle du parent, qui se propage à toute la chaîne. */
  .workspace { align-items: stretch; }

  /* Une fois `#leads-container` contraint à la largeur du parent, les
     trois onglets (avec leur pastille de compteur) ne tiennent toujours
     pas sur une seule rangée à 390px : en flex nowrap sans possibilité de
     rétrécir sous leur largeur de contenu, leur somme dépasse la largeur
     disponible. On confine ce débordement en défilement horizontal propre
     à `.tabs` plutôt que de faire passer les onglets à la ligne : avec
     seulement trois onglets, un retour à la ligne isolerait le troisième
     seul sur une deuxième rangée (bandeau déséquilibré, hauteur qui varie
     selon l'onglet actif), alors qu'un défilement horizontal garde une
     rangée unique stable, cohérente avec le rôle ARIA tablist déjà en
     place, et la navigation clavier existante (`initTabs` appelle déjà
     `.focus()` sur l'onglet suivant, ce qui le fait défiler dans son
     conteneur sans code additionnel). */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab { flex: 0 0 auto; }

  /* La table devient une pile de cartes */
  .lead-table thead { display: none; }
  .lead-table, .lead-table tbody, .lead-table tr, .lead-table td { display: block; }
  .lead-table tr.lead-row {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
  }
  .lead-table td { padding: var(--sp-1) 0; border-bottom: none; }

  /* Les cellules s'empilent, mais les conteneurs flex internes gardent leur
     disposition en ligne : les boutons d'action et les badges d'audit se
     replient sur plusieurs lignes au lieu de s'empiler un par un. */
  .lead-row__actions { flex-wrap: wrap; white-space: normal; margin-top: var(--sp-2); }
  .lead-row__audit { max-width: none; }

  /* Le panneau devient une feuille plein écran remontant du bas */
  .panel.is-open {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    flex: none;
    max-height: 85vh;
    border-radius: var(--r-md) var(--r-md) 0 0;
    z-index: 40;
  }

  .toolbar { position: static; }
  .toolbar__search { flex: 1 1 100%; min-width: 0; }
}