/* .data-table: uppercase column labels on a subtle band, roomy rows, a hover highlight. */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-align: left;
  text-transform: uppercase;
}

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

.data-table tbody th {
  background: none;
  text-transform: none;
  letter-spacing: normal;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: var(--space-6);
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: var(--space-6);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: var(--surface-subtle);
}

.data-table a {
  color: var(--text);
  text-decoration: none;
}

.data-table a:hover {
  color: var(--text-accent);
}

.data-table small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.data-table form {
  margin: 0;
}

.panel-body > .data-table:not(:first-child) {
  border-top: 1px solid var(--border-subtle);
}

/*
 * Phones: each row becomes a card of label/value lines. ux.js copies each column's heading into
 * its cells (data-label) and sets explicit table roles, so screen readers still hear a table.
 */
@media (max-width: 820px) {
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td,
  .data-table tbody th {
    display: block;
    width: 100%;
  }

  .data-table tr {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
  }

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

  .data-table td,
  .data-table th:first-child,
  .data-table td:first-child,
  .data-table th:last-child,
  .data-table td:last-child {
    display: flow-root;
    padding: var(--space-1) 0;
    border: 0;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .data-table td[data-label]::before {
    content: attr(data-label);
    float: left;
    margin-right: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-align: left;
    text-transform: uppercase;
  }

  .data-table td form {
    display: inline-flex;
  }

  .empty-row td {
    text-align: center;
  }
}

/* The row for "now" in a time-ordered table (the current contract year). */
.data-table tr.current-row {
  background: var(--accent-soft);
}

/* A worked calculation: its lines, then a total row set apart. */
.data-table.calculation td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.data-table .total-row td {
  border-top: 2px solid var(--border-strong);
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* A table with a column per month: tight numeric columns that stay on one line. Wrapped in .table-scroll,
   it scrolls sideways inside its panel when the months don't fit. */
.table-scroll {
  overflow-x: auto;
}

.month-table th.num,
.month-table td.num {
  padding-right: var(--space-2);
  padding-left: var(--space-2);
  white-space: nowrap;
}

.month-table th.num:last-child,
.month-table td.num:last-child {
  padding-right: var(--space-6);
}