/* =============================================================================
   TerraTrack - Qualification screen (dedicated overrides)
   -----------------------------------------------------------------------------
   Fidélité maquette "File de qualification" (Claude Design) : lignes/cartes
   AÉRÉES, hiérarchie claire, espacement généreux. Les tokens visuels de base
   (.qual-row, .qual-title, .qual-info-tag, .qual-sort-btn…) vivent dans la
   couche partagée (redesign.css / components.css) avec !important ; ce fichier
   est chargé EN DERNIER et redéfinit donc, à spécificité égale, l'espacement et
   les proportions pour coller à la maquette. Tokens uniquement, accent bleu.
   ============================================================================= */

/* ── Conteneur liste : colonne aérée (maquette : flex column, gap 10px) ── */
#qual-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--tt-s-3) !important; /* 12px — respiration entre cartes */
}

/* ── Carte compte : padding généreux, rayon + ombre maquette, liseré statut ── */
#qual-list .qual-row {
  margin-bottom: 0 !important; /* l'espacement passe par le gap du conteneur */
  padding: var(--tt-s-4) var(--tt-s-5) !important; /* 16px 20px */
  border-radius: var(--tt-r-3) !important; /* 8px */
  border-left: 3px solid var(--tt-border-strong) !important; /* liseré statut neutre par défaut */
  box-shadow: var(--tt-shadow-1) !important;
}

/* Liseré gauche coloré par statut (maquette : warn / success).
   :has() évite tout ajout de classe/sélecteur côté JS. */
#qual-list .qual-row:has(.qual-card-badge.is-a-trier),
#qual-list .qual-row:has(.qual-card-badge.is-mailing) {
  border-left-color: var(--tt-warn) !important;
}
#qual-list .qual-row:has(.qual-card-badge.is-commercial),
#qual-list .qual-row:has(.qual-card-badge.is-controler) {
  border-left-color: var(--tt-success) !important;
}
#qual-list .qual-row:has(.qual-card-badge.is-hors-cible) {
  border-left-color: var(--tt-border-strong) !important;
}

/* ── En-tête : titre + badge alignés, plus d'air sous le titre ── */
#qual-list .qual-card-header {
  align-items: center !important;
  gap: var(--tt-s-3) !important; /* 12px */
  margin-bottom: 0 !important;
}
#qual-list .qual-title {
  font-size: var(--tt-fs-14) !important; /* 14px */
  font-weight: var(--tt-fw-semi) !important; /* 600 — maquette, fin du gras 800 */
  letter-spacing: -0.005em !important;
  line-height: var(--tt-lh-tight) !important;
}
#qual-list .qual-meta {
  font-size: var(--tt-fs-12) !important; /* 12px (au lieu de 11) */
  color: var(--tt-fg-3) !important;
  margin-top: var(--tt-s-1) !important; /* 4px */
  line-height: var(--tt-lh-normal) !important;
}

/* Badge statut : casse douce (maquette n'est pas en uppercase agressif) */
#qual-list .qual-card-badge {
  padding: 3px 9px !important;
  font-size: var(--tt-fs-11) !important;
  font-weight: var(--tt-fw-medium) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--tt-r-pill) !important;
}

/* ── Tags contact / parc : aérés (maquette : chips manquants 11px, 3px 9px) ── */
#qual-list .qual-card-info {
  gap: var(--tt-s-2) !important; /* 8px */
  margin: var(--tt-s-3) 0 var(--tt-s-4) !important; /* 12px haut, 16px bas */
}
#qual-list .qual-info-tag {
  gap: 5px !important;
  padding: 4px 10px !important;
  font-size: var(--tt-fs-11) !important;
  font-weight: var(--tt-fw-medium) !important;
  border-radius: var(--tt-r-pill) !important; /* pill comme les chips maquette */
}

/* ── Progression n/5 : barre aérée façon maquette (track haut, plus d'espace) ── */
.qual-progress {
  margin-top: var(--tt-s-4); /* 16px */
  padding: var(--tt-s-3) var(--tt-s-4); /* 12px 16px */
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface-2);
}

.qual-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-s-3);
  margin-bottom: var(--tt-s-3); /* 12px — plus d'air avant la barre */
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-11);
  font-weight: var(--tt-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qual-progress-head strong {
  color: var(--tt-fg);
  letter-spacing: 0;
  font-family: var(--tt-font-mono); /* maquette : compteur en mono */
  font-weight: var(--tt-fw-semi);
}

.qual-progress-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.qual-progress-track span {
  height: 7px; /* maquette : barre 7px */
  border-radius: var(--tt-r-pill);
  background: var(--tt-surface-3);
}

.qual-progress-track span.is-done {
  background: var(--tt-accent);
}

/* ── Bandeau match : aéré, accent bleu (jamais d'ambre) ── */
#qual-list .qual-match-banner {
  gap: var(--tt-s-2) !important;
  padding: var(--tt-s-2) var(--tt-s-3) !important; /* 8px 12px */
  margin: var(--tt-s-3) 0 0 !important;
  border-radius: var(--tt-r-3) !important;
  font-size: var(--tt-fs-12) !important;
}

/* ── Boutons de tri : confortables, plus d'air autour ── */
#qual-list .qual-sort-row {
  gap: var(--tt-s-2) !important; /* 8px */
  margin-top: var(--tt-s-4) !important; /* 16px */
}
#qual-list .qual-sort-btn {
  padding: var(--tt-s-2) var(--tt-s-3) !important; /* 8px 12px */
  font-size: var(--tt-fs-12) !important;
  font-weight: var(--tt-fw-medium) !important;
  border-radius: var(--tt-r-2) !important;
}

/* ── Lien "Ouvrir la fiche" : plus d'espace au-dessus, accent bleu ── */
#qual-list .qual-card-link {
  margin-top: var(--tt-s-3) !important; /* 12px */
  font-size: var(--tt-fs-12) !important;
  font-weight: var(--tt-fw-medium) !important;
}

/* ── Pied de liste "250 premiers affichés" : aéré ── */
.qual-list-more {
  text-align: center;
  padding: var(--tt-s-4);
  color: var(--tt-fg-3);
  font-size: var(--tt-fs-12);
}

/* ── Empty state : centré, généreux (cohérent maquette) ── */
.qual-empty {
  text-align: center;
  padding: var(--tt-s-12) var(--tt-s-5);
  color: var(--tt-fg-3);
}
.qual-empty-title {
  color: var(--tt-fg);
  font-size: var(--tt-fs-14);
  font-weight: var(--tt-fw-semi);
  margin-bottom: var(--tt-s-1);
}
.qual-empty-sub {
  font-size: var(--tt-fs-12);
}

/* ── Alignement icônes/labels inline (conservé de la version précédente) ── */
.qual-card-badge,
.qual-info-tag,
.qual-sort-btn,
.qual-card-link,
.qual-match-banner-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------------------------------------------------------------------------
   Passe finale HANDOFF_2 : file lisible, chips "manquants" et CTA metier.
   Ces surcharges arrivent apres les !important partages pour sortir l'ecran de
   l'effet liste dense tout en gardant les classes/hook existants.
   ------------------------------------------------------------------------- */
#s-qualification .page-inner {
  max-width: 1180px;
}

#s-qualification .qual-actions {
  display: flex;
  gap: var(--tt-s-2);
}

#s-qualification .qual-action-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--tt-border) !important;
  background: var(--tt-surface) !important;
  color: var(--tt-fg-2) !important;
  box-shadow: var(--tt-shadow-1);
}

#s-qualification .qual-help,
#s-qualification .qual-filter-sec {
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-r-3);
  background: var(--tt-surface);
  box-shadow: var(--tt-shadow-1);
}

#s-qualification .qual-filter-sec {
  margin: var(--tt-s-4) var(--tt-s-4) 0;
  padding: var(--tt-s-4) !important;
}

#s-qualification .qual-list-sec {
  padding: var(--tt-s-4) var(--tt-s-4) var(--tt-s-8) !important;
}

#s-qualification .qual-search-wrap {
  margin-bottom: var(--tt-s-3);
}

#s-qualification .qual-filters-main,
#s-qualification .qual-filters-advanced {
  gap: var(--tt-s-3);
}

#qual-list {
  max-width: 1120px;
  margin: 0 auto;
  gap: var(--tt-s-4) !important;
}

#qual-list .qual-row {
  padding: var(--tt-s-5) !important;
}

#qual-list .qual-title {
  letter-spacing: 0 !important;
}

#qual-list .qual-card-header {
  align-items: flex-start !important;
}

#qual-list .qual-card-info {
  margin-bottom: var(--tt-s-3) !important;
}

.qual-missing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--tt-s-3);
}

.qual-missing-row.is-complete {
  margin-top: var(--tt-s-2);
}

.qual-missing-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid var(--tt-warn-border);
  border-radius: var(--tt-r-pill);
  background: var(--tt-warn-soft);
  color: var(--tt-warn);
  font-size: var(--tt-fs-11);
  font-weight: var(--tt-fw-medium);
}

.qual-missing-chip.is-complete {
  border-color: var(--tt-success-border);
  background: var(--tt-success-soft);
  color: var(--tt-success);
}

#qual-list .qual-card-link {
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--tt-s-4) !important;
  border: 1px solid var(--tt-accent-border);
  border-radius: var(--tt-r-2);
  background: var(--tt-accent-soft);
  color: var(--tt-accent) !important;
  text-decoration: none !important;
}

#qual-list .qual-card-link:hover,
#qual-list .qual-card-link:focus-visible {
  border-color: var(--tt-accent);
  background: var(--tt-accent);
  color: var(--tt-fg-on-accent) !important;
  outline: none;
}

@media (max-width: 760px) {
  #qual-list .qual-row {
    padding: var(--tt-s-4) !important;
  }

  #qual-list .qual-card-header,
  #qual-list .qual-sort-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #qual-list .qual-card-badge,
  #qual-list .qual-sort-btn,
  #qual-list .qual-card-link {
    width: 100%;
    justify-content: center;
  }
}