/* Table — une liste en lignes et colonnes.
   Référence : docs/design-system.md. */

.table {
  --table-row-bg: var(--color-surface);

  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-13);
}

/* Cellules sous :where() entier (spécificité nulle) : un utilitaire, un
   élément d'ici ou un autre block posé sur la cellule (`td.empty`) gagne. */
:where(.table th) {
  text-align: left;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-11);
  font-weight: var(--weight-medium);
  color: var(--table-head-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--table-head-border);
  background: var(--table-head-bg);
}

:where(.table tbody tr:nth-child(even)) {
  --table-row-bg: var(--table-row-alt-bg);

  background: var(--table-row-bg);
}

:where(.table td) {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-13);
  color: var(--color-text);
  vertical-align: middle;
}

:where(.table tr:last-child td) {
  border-bottom: none;
}

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

/* --- Taille --- */

.table--sm {
  font-size: var(--text-12);
}

:where(.table--sm th, .table--sm td) {
  padding: var(--space-1-5) var(--space-3);
}

:where(.table--sm td) {
  font-size: var(--text-12);
}

/* --- Lignes --- */

.table__row--clickable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.table__row--clickable:hover td {
  background: var(--color-bg-subtle);
}

/* Focus clavier sur les lignes cliquables (conventions §13) : les lignes
   sont rendues focalisables par static/js/table-rows.js. */
.table__row--clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.table__row--clickable:focus-visible td {
  background: var(--color-bg-subtle);
}

/* Une ligne à fond (un total, une teinte par rôle) pose `--table-row-bg`
   et le lit ; la cellule collante le lit aussi, pour qu'elle reprenne la
   teinte de sa ligne au lieu de rester sur la surface (#293 : au
   prévisionnel, la teinte d'un sous-total s'arrêtait à la cellule collante,
   restée blanche). Le block pose la valeur par défaut : la surface. */
.table__row--total,
:is(.table__row--danger, .table__row--warning, .table__row--info, .table__row--muted) {
  --table-row-bg: var(--tone-bg);

  background: var(--table-row-bg);
}

.table__row--total {
  --table-row-bg: var(--color-bg-subtle);

  border-top: 2px solid var(--color-border);
  font-weight: var(--weight-semibold);
}

.table__row--inactive {
  opacity: 0.5;
}

/* --- Cellules --- */

.table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Collante : le fond est celui de sa ligne (`--table-row-bg`), opaque pour
   masquer ce qui défile dessous. Même largeur sur toutes les lignes — un
   `colspan` sur la cellule collante d'une ligne l'élargit et masque des
   colonnes que les autres lignes montrent (#293). */
.table__cell--sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 200px;
  background: var(--table-row-bg);
}

th.table__cell--sticky {
  z-index: 2;
  background: var(--color-bg-subtle);
}

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

/* Largeurs de colonne, sur le <th> : quatre paliers (B-17). */
.table__cell--w-xs {
  width: 40px;
}

.table__cell--w-sm {
  width: 80px;
}

.table__cell--w-md {
  width: 120px;
}

.table__cell--w-lg {
  width: 160px;
}

.table__cell--truncate {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table__link {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.table__link:hover {
  color: var(--color-primary);
}

.table__sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

/* --- Téléphone : `table--stack` devient une pile de cartes, les autres défilent --- */

@media (width <= 480px) {
  .table:not(.table--stack) {
    display: block;
    overflow-x: auto;
  }

  :where(.table--stack thead) {
    display: none;
  }

  :where(.table--stack tr) {
    display: block;
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
  }

  :where(.table--stack td) {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1-5) 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  :where(.table--stack td:last-child) {
    border-bottom: none;
  }

  :where(.table--stack td[data-label])::before {
    content: attr(data-label);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    margin-right: var(--space-3);
  }
}

/* --- Tons (sortis de tone.css au passage au harness 0.13) : chaque ton pose les seules
   propriétés `--tone-*` que ce composant lit, d'après les tokens du ton. --- */

.table__row--warning {
  --tone-bg: var(--badge-warning-bg);
}

.table__row--danger {
  --tone-bg: var(--badge-danger-bg);
}

.table__row--info {
  --tone-bg: var(--badge-info-bg);
}

.table__row--muted {
  --tone-bg: var(--color-bg-subtle);
}