/* ========================================
   DATA TABLE — Design System Premium (Steve Jobs Neat)
   ========================================

   Composant table réutilisable pour toutes les surfaces data-heavy :
   admin dashboards, client portal invoices, quotes, projects lists,
   settings pages. Remplace les ~10+ implémentations ad-hoc repérées
   dans boards_page.css, micro_interactions.css, tiptap_editor.css,
   admin views, etc.

   Usage HTML (minimal) :
     <table class="data-table" aria-labelledby="caption-id">
       <caption class="sr-only">Description pour SR</caption>
       <thead>
         <tr>
           <th scope="col">Nom</th>
           <th scope="col" class="text-right">Valeur</th>
         </tr>
       </thead>
       <tbody>
         <tr class="data-row">
           <th scope="row">Row label</th>
           <td class="text-right font-mono">42</td>
         </tr>
       </tbody>
     </table>

   Règles :
   - Séparateurs hairline (--border-width-hairline = 0.5 px)
   - Hover background sur data-row uniquement (pas sur thead)
   - Font-mono disponible sur tabular cells via .font-mono
   - Sticky header pattern via .data-table--sticky-head
   - Respect accent system, dark mode, prefers-reduced-motion

   Cf. plan Sprint 1.4 (2026-04-24).
   ======================================== */

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* Header row — subtle uppercase label, text-tertiary */
.data-table thead {
  background: transparent;
}

.data-table thead th {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  text-align: left;
  border-bottom: var(--border-width-thin) solid var(--border-default);
  white-space: nowrap;
}

.data-table thead th.text-right { text-align: right; }
.data-table thead th.text-center { text-align: center; }

/* Body rows — hairline separator + hover background */
.data-table tbody tr {
  transition: background-color 140ms var(--ease-out-premium);
}

.data-table tbody tr:not(:last-child) td,
.data-table tbody tr:not(:last-child) th {
  border-bottom: var(--border-width-hairline) solid var(--border-light);
}

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

/* Cells — generous padding, baseline aligned */
.data-table td,
.data-table tbody th {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--text-primary);
}

/* Row header (first cell as th scope="row") — semibold but not uppercase */
.data-table tbody th[scope="row"] {
  font-weight: var(--font-medium);
  text-align: left;
}

/* Utility alignment classes */
.data-table .text-right { text-align: right; }
.data-table .text-center { text-align: center; }

/* Mono column (for numbers, IDs, timestamps) */
.data-table .font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Muted cell (secondary info, avoiding a grayed-out column) */
.data-table .cell-muted {
  color: var(--text-secondary);
}

/* Caption — visible or sr-only depending on context */
.data-table caption {
  caption-side: top;
  padding: var(--space-2) var(--space-4);
  text-align: left;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.data-table caption.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   MODIFIER : sticky header for long tables
   ======================================== */
.data-table--sticky-head thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
  box-shadow: 0 1px 0 var(--border-default);
}

/* ========================================
   MODIFIER : compact density (admin dashboards, dense data)
   ======================================== */
.data-table--compact thead th { padding: var(--space-2) var(--space-3); }
.data-table--compact td,
.data-table--compact tbody th { padding: var(--space-2) var(--space-3); }

/* ========================================
   WRAPPER : scroll overflow horizontal pour mobile
   ======================================== */
.data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

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

/* ========================================
   EMPTY STATE dans une table
   ======================================== */
.data-table-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ========================================
   prefers-reduced-motion — désactive hover transitions
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .data-table tbody tr { transition: none; }
}