/* ── Tables ───────────────────────────────────────────────────────────── */

.data-table {
  width: 100%;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.data-table thead {
  background: var(--color-bg-warm);
}

.data-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
}

[dir="rtl"] .data-table th {
  text-align: right;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: var(--color-bg-subtle);
}

.data-table .actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  white-space: nowrap;
}

/* Table scroll wrapper for mobile */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.table-scroll .data-table {
  border: none;
  border-radius: 0;
}

/* Variante sans cadre : défilement seul, pour les tableaux déjà stylés inline
   (cotisations, présences, mentions légales…) — aucun changement visuel desktop */
.table-scroll--plain {
  border: none;
  border-radius: 0;
}

/* Enveloppe défilante des tableaux d'engagement / projets admin
   (n'existait qu'inline dans admin/engagement_activities/index) */
.engagement-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tree row indent */
.row--child td:first-child {
  padding-left: var(--space-8);
}

[dir="rtl"] .row--child td:first-child {
  padding-left: var(--space-4);
  padding-right: var(--space-8);
}

/* ── Tables responsive (mobile) ─────────────────────────────────────────────
   Sur téléphone, toute .data-table devient défilable horizontalement au lieu
   de déborder la page. Couvre l'ensemble de la plateforme sans wrapper. */
@media (max-width: 768px) {
  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .data-table th,
  .data-table td {
    padding: var(--space-2) var(--space-3);
  }
  /* Actions empilées pour rester atteignables au doigt */
  .data-table .actions {
    flex-wrap: wrap;
    gap: var(--space-1);
  }
}