/* ============================================================
 * Responsive Table — Phase 10 Sprint 0 (2026-05-09)
 *
 * Deux patterns selon contenu :
 *
 * 1) `.responsive-table-wrap` : wrapper scroll horizontal pour
 *    tables larges qui doivent rester denses (analytics, leaderboard
 *    avec beaucoup de colonnes). Ombre indicative droite si du
 *    contenu est masqué + ARIA region scrollable.
 *
 *    Usage HTML :
 *      <div class="responsive-table-wrap" role="region"
 *           aria-label="Tableau scrollable" tabindex="0">
 *        <table>…</table>
 *      </div>
 *
 *    Helper Ruby : `responsive_table do …`
 *
 * 2) `.table-stack` : transforme le tableau en cartes empilées
 *    sur mobile via `data-label` sur chaque <td>. Utile pour
 *    listes simples (factures, projets) où l'utilisateur veut
 *    lire plutôt que comparer.
 *
 *    Usage HTML :
 *      <table class="table-stack">
 *        <thead><tr><th>Client</th><th>Montant</th><th>Statut</th></tr></thead>
 *        <tbody>
 *          <tr>
 *            <td data-label="Client">ACME</td>
 *            <td data-label="Montant">€1 200</td>
 *            <td data-label="Statut">Payée</td>
 *          </tr>
 *        </tbody>
 *      </table>
 * ============================================================ */

/* ---- Pattern 1 : scroll horizontal ----------------------------- */
.responsive-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Ombre indicative droite — disparaît quand on a scrollé jusqu'à la fin
     grâce au background-attachment local + linear-gradient mask. */
  background:
    linear-gradient(to right, var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) left center / 20px 100% no-repeat local,
    linear-gradient(to left,  var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) right center / 20px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) right center / 14px 100% no-repeat scroll;
  background-color: var(--bg-surface, #fff);
}

.responsive-table-wrap:focus-visible {
  outline: 2px solid var(--accent, #FF7B54);
  outline-offset: 2px;
  border-radius: 8px;
}

.responsive-table-wrap > table {
  min-width: 100%;
  /* Sur mobile, on accepte une min-width un peu large pour garder lisibilité. */
}

/* Sur dark mode, ajuster les ombres pour rester perceptibles */
[data-mode="dark"] .responsive-table-wrap,
.dark .responsive-table-wrap {
  background:
    linear-gradient(to right, var(--bg-surface) 30%, rgba(15, 23, 42, 0)) left center / 20px 100% no-repeat local,
    linear-gradient(to left,  var(--bg-surface) 30%, rgba(15, 23, 42, 0)) right center / 20px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) right center / 14px 100% no-repeat scroll;
  background-color: var(--bg-surface);
}

/* ---- Pattern 2 : stack en cards mobile ------------------------- */
@media (max-width: 767.98px) {
  table.table-stack,
  table.table-stack > thead,
  table.table-stack > tbody,
  table.table-stack > thead > tr,
  table.table-stack > tbody > tr,
  table.table-stack th,
  table.table-stack td {
    display: block;
    width: 100%;
  }

  /* Hide thead visually but keep for screen readers */
  table.table-stack > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.table-stack > tbody > tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    background: var(--bg-surface, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  table.table-stack > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0;
    border: none;
    text-align: right;
  }

  table.table-stack > tbody > tr > td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    text-align: left;
    margin-right: auto;
  }

  /* First cell — make it a "title" of the card */
  table.table-stack > tbody > tr > td:first-child {
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
  }

  table.table-stack > tbody > tr > td:first-child::before {
    display: none;
  }

  table.table-stack > tbody > tr > td:first-child {
    text-align: left;
    justify-content: flex-start;
  }
}