/* Futello compact data tables (Points & Voyages). Tokens only — see docs/design_system.md « Data tables ».
   A wrapper with border and radius, an uppercase muted head, tabular numbers, tight lines, sortable headers with
   aria-sort, an optional detail row (<details>, works without scripts) and a collapsed group behind a counter.
   Desktop: the head sticks to the top of the page. Narrow screens: the wrapper scrolls sideways with the lead column
   pinned, so the page itself never overflows. */

.data-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-align: left;
}

.data-table--compact { font-size: 0.875rem; line-height: 1.25; }

.data-table--compact th,
.data-table--compact td { padding: 0.35rem var(--space-3); }

/* On wide screens the lead column keeps room for a two-line place name instead of pushing rows to four lines. */
@media (min-width: 80rem) {
  .data-table--compact tbody th { min-width: 12rem; }
}

.data-table--compact .data-table__secondary { line-height: 1.2; }

.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  overflow-wrap: normal; /* a host panel's `anywhere` would crush the lead column; the wrapper scrolls instead */
}

.data-table tbody th { min-width: 8rem; }

.data-table thead th {
  background: var(--color-surface-alt);
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:last-child > * { border-bottom: 0; }

.data-table tbody th { font-weight: 600; }

.data-table__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

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

.data-table__nowrap { white-space: nowrap; }

.data-table .programs-pill { white-space: nowrap; }

.data-table__pill-cell { white-space: nowrap; }

.data-table__primary {
  display: block;
  color: var(--color-navy);
  font-weight: 700;
}

.data-table__secondary {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.data-table__hint {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.data-table__links {
  display: grid;
  gap: 0.15rem;
  white-space: nowrap;
}

.data-table__links .text-link { font-size: var(--text-xs); }

/* Sortable headers: a real button, the column's name, and a direction mark driven by aria-sort on the <th>. */
.data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.data-table__sort::after {
  content: "\2195";
  opacity: 0.45;
  font-size: 0.85em;
}

.data-table th[aria-sort="ascending"] .data-table__sort::after { content: "\2191"; opacity: 1; }
.data-table th[aria-sort="descending"] .data-table__sort::after { content: "\2193"; opacity: 1; }
.data-table th[aria-sort] .data-table__sort { color: var(--color-navy); }
.data-table__sort:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Detail row: sits under its data row, borderless at the seam; the <details> keeps the long text out of the grid. */
.data-table__row--with-detail > * { border-bottom: 0; }

.data-table__detail > td {
  padding: 0 var(--space-3) var(--space-2);
}

.data-table__detail > td > details > summary {
  display: inline-block;
  color: var(--color-blue-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.data-table__detail > td > details[open] > summary { margin-bottom: var(--space-2); }

.data-table__detail-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.data-table__detail-body p,
.data-table__detail-body ul { margin: 0; }

.data-table__detail-body ul { padding-left: 1.1rem; }

.data-table__detail-body h4,
.data-table__detail-body h5 {
  margin: 0;
  font-size: var(--text-sm);
}

.data-table__detail-body h5 { color: var(--color-muted); font-weight: 600; }

/* Scripted enhancement: the detail row hides behind a chevron button at the start of the data row (44×44 px touch target). */
.data-table__toggle {
  display: inline-grid;
  place-items: center;
  float: left;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.2rem var(--space-2) 0 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-navy);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.data-table__toggle::after { content: "\25B6"; transition: transform 120ms ease; }
.data-table__toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
.data-table__toggle:hover { border-color: var(--color-blue); color: var(--color-blue-dark); }
.data-table-enhanced tbody th > .data-table__primary,
.data-table-enhanced tbody th > .data-table__secondary { margin-left: 3.25rem; }
.data-table__toggle:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

.data-table__mobile-prepare { display: none; }

.data-table__toggle[hidden],
.data-table__detail[hidden],
.data-table__row[hidden] { display: none; }

.data-table-enhanced .data-table__detail > td > details > summary { display: none; }
.data-table-enhanced .data-table__detail > td { padding-top: var(--space-2); }

/* Toolbar of quick filters above a table; the apply button only serves without scripts. */
.data-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.data-table-toolbar__field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.data-table-toolbar__field select {
  min-width: 11rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}

/* The « Trier » select is the mobile sort (the header buttons sort on desktop): after `.data-table-toolbar__field`, whose
   `display: grid` would otherwise show it at every width. */
.data-table-toolbar__field--mobile-sort { display: none; }

.data-table-toolbar__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.data-table-toolbar__check input { margin: 0; }

.data-table-toolbar__check small { color: var(--color-muted); }

.data-table-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.data-table-toolbar__group legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.data-table-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-left: auto;
}

.data-table-toolbar__actions .button { min-height: 2.25rem; padding-block: 0.35rem; }
.data-table-toolbar__actions .button[hidden] { display: none; }

.data-table-toolbar__reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-blue-dark);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.data-table-status {
  margin: var(--space-2) 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Legend: short reading keys under the table, one line each. */
.data-table-legend {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.data-table-legend > summary {
  color: var(--color-blue-dark);
  font-weight: 750;
  cursor: pointer;
}

.data-table-legend p { margin: 0; }

/* A group of rows folded behind an explicit counter (for example routes only sold, operator unverified). */
.data-table-folded { margin-top: var(--space-4); }

.data-table-folded > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.35rem var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.data-table-folded[hidden] { display: none; }
.data-table-folded--more { margin-top: var(--space-3); }
.data-table-folded > summary::before { content: "\25B8"; }
.data-table-folded[open] > summary::before { content: "\25BE"; }
.data-table-folded > .data-table-status { margin-top: var(--space-2); }
.data-table-folded > .data-table-wrap { margin-top: var(--space-2); }

/* Section head of a table: eyebrow, title and a one-line count, in the site's heading pattern. */
.data-table-heading {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
}

.data-table-heading .eyebrow { margin: 0; }
.data-table-heading h3 { margin: 0; font-size: var(--text-lg); text-align: left; }
.data-table-heading p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

.data-table-subheading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
}

.data-table-subheading h4 { margin: 0; font-size: var(--text-base); }
.data-table-subheading p { margin: 0; }

.data-table-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}

.data-table-preset {
  min-height: 2.75rem;
  padding: 0.35rem var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
  cursor: pointer;
}

.data-table-preset[aria-pressed="true"] {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: var(--color-surface);
}

/* Desktop (≥ 48rem / 768px, including 1024px): now that the table has 5 columns (≤ 958px at 1024px viewport),
   we remove `overflow-x: auto` from `.data-table-wrap--sticky-head` by setting `overflow: visible`.
   Why: any ancestor with `overflow-x: auto` or `overflow-x: scroll` creates an internal scroll container,
   which prevents `position: sticky` on `thead th` from sticking relative to the page viewport during vertical scroll. */
@media (min-width: 48rem) {
  .data-table-wrap--sticky-head { overflow: visible; }
  .data-table-wrap--sticky-head thead th {
    position: sticky;
    top: var(--data-table-sticky-top, 0);
    z-index: 2;
    box-shadow: 0 1px 0 var(--color-border);
  }
}

/* Narrow screens, every data table (funding plans, card comparison, fixed-points charts…): sideways scroll inside the
   wrapper, lead column pinned, secondary columns folded into the detail. */
@media (max-width: 47.99rem) {
  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 11rem;
    background: var(--color-surface);
    box-shadow: 1px 0 0 var(--color-border);
  }

  .data-table thead th:first-child { z-index: 3; background: var(--color-surface-alt); }
  .data-table__detail > td { position: static; max-width: none; box-shadow: none; }
  /* The detail spans the whole (scrolling) table: pin its content to the visible width of the page instead. */
  .data-table__detail > td > details { position: sticky; left: 0; max-width: calc(100vw - 2rem - 2px - (2 * var(--space-3))); }
  .data-table__col--secondary { display: none; }
  .data-table-toolbar { padding: var(--space-3); }
  .data-table-toolbar__field { width: 100%; }
  .data-table-toolbar__field select { width: 100%; min-width: 0; min-height: 2.75rem; }
  .data-table-toolbar__actions { width: 100%; margin-left: 0; }
}

/* Mobile (< 48rem / 768px), the explorer's route tables only: one card per route instead of horizontal scrolling, with
   destination, coverage pill, points, stops, verification, Details (≥ 44px) and "Préparer ce voyage". */
@media (max-width: 47.99rem) {
  [data-exploration-results] .data-table-toolbar__field--mobile-sort { display: grid; width: 100%; }
  [data-exploration-results] .data-table-toolbar__field--mobile-sort select { min-height: 2.75rem; }
  [data-exploration-results] .data-table-wrap { border: 0; background: transparent; overflow-x: visible; }
  [data-exploration-results] .data-table,
  [data-exploration-results] .data-table tbody { display: grid; gap: var(--space-3); }
  [data-exploration-results] .data-table thead { display: none; }
  [data-exploration-results] .data-table th:first-child,
  [data-exploration-results] .data-table td:first-child { position: static; max-width: none; background: none; box-shadow: none; }
  [data-exploration-results] .data-table__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  [data-exploration-results] .data-table__row[hidden] { display: none; }
  [data-exploration-results] .data-table__row > th,
  [data-exploration-results] .data-table__row > td {
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  [data-exploration-results] .data-table__row > th { grid-column: 1; min-width: 0; }
  [data-exploration-results] .data-table__row > td[data-row-gap] { grid-column: 2; justify-self: end; align-self: start; }
  [data-exploration-results] .data-table__row > td[data-row-points],
  [data-exploration-results] .data-table__row > td[data-network-state],
  [data-exploration-results] .data-table__row > td[data-row-state-cell] { grid-column: 1 / -1; }
  [data-exploration-results] .data-table__row > td[data-row-state-cell] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }
  [data-exploration-results] .data-table__mobile-prepare { display: inline-block; margin: 0; }
  [data-exploration-results] .data-table__mobile-prepare-btn { min-height: 2.75rem; padding: 0.35rem var(--space-3); font-size: var(--text-xs); }
  [data-exploration-results] .data-table__detail { display: block; }
  [data-exploration-results] .data-table__detail[hidden] { display: none; }
  [data-exploration-results] .data-table__detail > td { display: block; padding: 0; border: 0; }
  [data-exploration-results] .data-table__detail > td > details { position: static; max-width: none; }
  /* Without scripts the mobile sort select cannot act (data-table controller): it stays hidden and each table keeps its
     header buttons, which resubmit the private form, as a row of sort buttons above the cards. */
  [data-exploration-results]:not(.data-table-enhanced) .data-table-toolbar__field--mobile-sort { display: none; }
  [data-exploration-results]:not(.data-table-enhanced) .data-table thead { display: block; }
  [data-exploration-results]:not(.data-table-enhanced) .data-table thead tr { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
  [data-exploration-results]:not(.data-table-enhanced) .data-table thead th { padding: 0; border: 0; background: none; }
}