/* Shared data table component: card look, warm header, row hover, sortable headers, best row.
   Markup: <table class="data-table"> (add data-table--roomy for big-number tables, data-sortable for
   client-side sorting via data-table.js). Sortable headers (client or server side) use
   .data-table__sort + .data-table__arrow. Page CSS only adds what is specific to a table. */
/* Wrap a wide table in this: on phones the table scrolls sideways instead of the page. */
.data-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.data-table thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: 11px 16px; background: var(--bg-warm); border-bottom: 1px solid var(--border);
}
.data-table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--ink-2); }
.data-table--roomy thead th { padding: 12px 20px; }
.data-table--roomy tbody td { padding: 15px 20px; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-warm); }
.data-table__row--best td { background: var(--green-light); color: var(--ink); font-weight: 700; }
.data-table tbody tr.data-table__row--best:hover td { background: var(--green-light); }

.data-table__sort { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.data-table__sort:hover, .data-table__sort--active { color: var(--terra); }
.data-table__arrow { font-size: 15px; font-weight: 700; line-height: 1; color: var(--terra); vertical-align: -1px; }