/* ==========================================================================
   Data Grid / Tables — MBA ACT
   Responsive table with horizontal scroll on mobile, header styling,
   alternating rows.
   ========================================================================== */

.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-neutral-lighter);
}

/* Header */
.data-table thead th {
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  background-color: var(--color-neutral-lightest);
  border-bottom: 2px solid var(--color-navy-lighter);
  white-space: nowrap;
}

/* Alternating rows */
.data-table tbody tr:nth-child(even) {
  background-color: var(--color-neutral-lightest);
}

/* Hover */
.data-table tbody tr:hover {
  background-color: var(--color-tangerine-lightest);
}

/* Dark scheme */
.scheme-navy .data-table th {
  background-color: var(--color-navy-dark);
  color: var(--color-white);
  border-bottom-color: var(--color-navy-light);
}

.scheme-navy .data-table td {
  color: var(--color-white);
  border-bottom-color: var(--color-navy-light);
}

.scheme-navy .data-table tbody tr:nth-child(even) {
  background-color: var(--color-navy-dark);
}

.scheme-navy .data-table tbody tr:hover {
  background-color: var(--color-navy-light);
}