/**
 * Composant Tables — Styles des tableaux de données.
 *
 * Tableaux, en-têtes triables, badges de statut, cellules utilisateur,
 * barre de recherche et spinner de chargement.
 *
 * @component tables
 */

/* ─── Conteneur table avec défilement horizontal ─── */
.data-table-wrapper {
  overflow-x: auto;
}

/* ─── Tableau de données ─── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th {
  padding: 12px 16px;
  border-bottom: 2px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.data-table th.sortable-th {
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.data-table th.sortable-th:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.data-table th.sortable-th.sort-asc,
.data-table th.sortable-th.sort-desc {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
}

/* ─── Indicateur de tri ─── */
.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.4;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.sort-asc  .sort-indicator { opacity: 1; }
.sort-desc .sort-indicator { opacity: 1; }

/* ─── Lignes de données ─── */
.data-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--primary-light);
}

/* ─── Badge de statut ─── */
.status-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─── Avatar cercle ─── */
.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}

/* ─── Cellule utilisateur (avatar + nom) ─── */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ─── Barre de recherche table ─── */
.search-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

/* ─── Spinner de chargement ─── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}