/* ═══════════════════════════════════════════════════════════════════════════
   xf-adaptive-table.css · adaptive data table (part of the XupaFin design system)
   ---------------------------------------------------------------------------
   Desktop  → full data table.
   Narrow   → each row becomes a self-labelling CARD (the enterprise-standard
              responsive-table pattern), driven by the data-label the SmartTable
              writes onto every <td>. No per-table work: any table with the
              .st-adaptive class transforms automatically.

   Themeable & accessible: colours come from the Fluent tokens so cards re-theme
   in dark / high-contrast; the header row is clipped (not display:none) so the
   table's semantics remain available to screen readers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A wide table should never force the whole page to scroll sideways. */
.st-adaptive { width: 100%; border-collapse: collapse; }

@media (max-width: 760px) {
  .st-adaptive,
  .st-adaptive tbody,
  .st-adaptive tr,
  .st-adaptive td {
    display: block;
    width: 100%;
  }

  /* Keep the header for assistive tech, remove it visually (cells self-label). */
  .st-adaptive thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .st-adaptive tr.smart-table-row,
  .st-adaptive tbody > tr {
    margin: 0 0 12px;
    padding: 6px 14px;
    border: 1px solid var(--xf-stroke-1, #d8dce3);
    border-radius: 12px;
    background: var(--xf-bg-surface, #fff);
    box-shadow: var(--xf-shadow-2, 0 1px 3px rgba(0,0,0,.08));
  }
  .st-adaptive tr.smart-table-row { cursor: pointer; }

  .st-adaptive td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--xf-stroke-2, #eceef2);
    text-align: right;
    min-height: 40px;               /* comfortable touch target */
  }
  .st-adaptive td:last-child { border-bottom: 0; }

  /* The column name, from the data-label the component wrote onto the cell. */
  .st-adaptive td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    text-align: left;
    font-weight: 600;
    color: var(--xf-fg-2, #5a6273);
  }
  /* Empty-state / colspan rows have no label. */
  .st-adaptive td[colspan]::before,
  .st-adaptive td:not([data-label])::before { content: ""; }
  .st-adaptive td[colspan] { text-align: center; }
}

/* Respect reduced-motion: no layout animation on the reflow. */
@media (prefers-reduced-motion: no-preference) {
  .st-adaptive tr.smart-table-row { transition: box-shadow .12s ease, border-color .12s ease; }
}