/* ==========================================================================
   Data table
   Figma source: Summary block (3462:17886) in Narrative / Discount:
   label column ~216px, 8px cell padding, 16px text, right-aligned
   amounts, and a 1px text-colour top rule on the total row.
   Real <table> semantics — this is genuine tabular data (CLAUDE.md a11y
   floor). Amounts inherit tabular-nums from base.css.
   ========================================================================== */

.data-table {
  border-collapse: collapse;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  align-self: flex-start; /* hug the label column inside flex columns, per Figma */
}

.data-table th,
.data-table td {
  padding: var(--space-2);
  font-weight: var(--weight-regular);
}

.data-table th {
  text-align: left;
  min-width: 216px; /* Figma label column */
}

.data-table td {
  text-align: right;
}

/* Report variant — wide multi-column report (Gross to Net, 2288:10053):
   muted column headers, generous row height, horizontal scroll wrapper */
.table-scroll {
  overflow-x: auto;
  width: 100%;
}

.data-table--report {
  width: 100%;
  align-self: stretch;
}

.data-table--report thead th {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  text-align: left;
  white-space: nowrap;
  min-width: 0;
}

.data-table--report th,
.data-table--report td {
  text-align: left;
  min-width: 86px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
}

/* Total row: dark rule above, per Figma */
.data-table tfoot th,
.data-table tfoot td {
  border-top: var(--border-width) solid var(--color-text);
}

@media (max-width: 480px) {
  .data-table th { min-width: 0; }
}