/* ==========================================================================
   Tabel — rustige tabel met statuslabels
   Op mobiel wordt elke rij een gestapeld blok; de labels komen dan uit
   data-label op elke cel.
   ========================================================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.data-table caption {
  padding-bottom: var(--space-4);
  color: var(--fg-2);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-label);
  text-align: left;
  text-transform: uppercase;
}

.data-table td {
  color: var(--fg-body);
  vertical-align: top;
}

.data-table td:first-child {
  color: var(--fg-1);
  font-weight: var(--fw-medium);
}

.data-table .is-number {
  font-variant-numeric: tabular-nums;
}

/* Status met gekleurde stip; kleuren uit de statustokens. */
.data-table__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-ui);
}

.data-table__status::before {
  content: "";
  flex: none;
  width: 5px;  /* kleine stip, ontwerp */
  height: 5px;
  border-radius: var(--radius-round);
  background: var(--status-active);
}

.data-table__status--soon::before { background: var(--status-soon); }
.data-table__status--done::before { background: var(--status-done); }

.data-table__note {
  max-width: 56ch;
  margin-top: var(--space-6);
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

/* Mobiel: gestapeld ------------------------------------------------------
   Bewust max-width: zo blijft de tabel vanaf 768px een gewone tabel en
   hoeven display-waarden niet teruggezet te worden. */

@media (max-width: 767px) {
  .data-table thead {
    /* Visueel weg, voor schermlezers blijft de tabel een tabel. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .data-table tr {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-bottom: var(--border-width) solid var(--border);
  }

  .data-table td::before {
    content: attr(data-label) " · ";
    color: var(--fg-2);
    font-size: var(--fs-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
  }

  .data-table td:first-child {
    font-family: var(--font-display);
    font-size: var(--fs-body-l);
    font-weight: var(--fw-regular);
  }

  .data-table td:first-child::before {
    content: none;
  }
}

/* Tablet en groter: echte tabel ------------------------------------------ */

@media (min-width: 48em) {
  .data-table th {
    padding: 0 var(--space-5) var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--fg-1);
    color: var(--fg-2);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    letter-spacing: var(--tr-label);
    text-align: left;
    text-transform: uppercase;
  }

  .data-table td {
    padding: var(--space-4) var(--space-5) var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--border);
  }

  .data-table td:first-child,
  .data-table .is-number {
    white-space: nowrap;
  }

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