/* =============================================================================
   TerraTrack — Liste Clients en cards mobile (TD-025 Phase 3)
   =============================================================================
   Cible : viewport ≤ 1023px.
   Active uniquement quand clients.js render via clientsCards(rows) (mobile).

   Convention TD-028 : nouveau fichier dans styles/screens/, pas dans
   design_v2.css (4486 lignes, god file).
   ========================================================================= */

/* ---------- Cartes mobile : liste verticale aérée ---------- */
.cli-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.cli-card-mobile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.cli-card-mobile:active {
  transform: scale(0.99);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cli-card-mobile.is-selected {
  border-color: var(--tt-accent);
  background: var(--tt-accent-soft);
}

/* ---------- Ligne 1 : checkbox + nom + score étoiles ---------- */
.cli-card-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cli-card-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--tt-accent);
}
.cli-card-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cli-card-score {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: #F59E0B;
}

/* ---------- Ligne 2 : secteur + statut ---------- */
.cli-card-row2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cli-card-sector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tt-fg-2);
}
.cli-card-sector .sector-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cli-card-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- Adresse + contact ---------- */
.cli-card-addr,
.cli-card-contact {
  font-size: 12px;
  color: var(--tt-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cli-card-contact {
  color: var(--tt-fg-2);
}

/* ---------- KPI inline ---------- */
.cli-card-kpis {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed var(--tt-border);
}
.cli-card-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cli-card-kpi span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tt-fg-3);
  font-weight: 600;
}
.cli-card-kpi strong {
  font-size: 14px;
  color: var(--tt-fg);
  font-weight: 600;
}
.cli-card-kpi .cli-gap.is-danger  { color: #EF4444; }
.cli-card-kpi .cli-gap.is-warn    { color: #F59E0B; }
.cli-card-kpi .cli-gap.is-success { color: #10B981; }

/* ---------- Actions en bas ---------- */
.cli-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.cli-card-actions .btn {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.cli-card-actions .cli-delete {
  flex: 0 0 44px;
}

/* ---------- Mobile uniquement : padding propre dans card-body ---------- */
@media (max-width: 1023px) {
  .client-table-card .card-body-flush {
    padding: 12px !important;
  }
  /* Cache la toolbar de filtres avancée en mobile par défaut, accessible via le bouton "Filtres" */
  .client-toolbar .client-tools {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .client-toolbar .input-wrap {
    flex: 1 1 100%;
  }
}

/* ---------- Hide on desktop ---------- */
@media (min-width: 1024px) {
  .cli-cards-list {
    display: none !important;
  }
}