/**
 * .ww-table — shared base for DataTable and ComparisonTable. Wrapped in
 * .ww-table-scroll so wide tables scroll within themselves rather than
 * breaking the page's horizontal layout (required on 375px viewports).
 */

.ww-table-scroll {
    overflow-x: auto;
    border-radius: var(--ww-radius-lg);
    border: var(--ww-border-width) solid var(--ww-border-color);
}

.ww-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wp--preset--font-size--small);
}

.ww-table th,
.ww-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: var(--ww-border-width) solid var(--ww-border-color);
    white-space: nowrap;
}

.ww-table thead th {
    background: var(--wp--preset--color--surface-alt);
    color: var(--wp--preset--color--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--caption);
    letter-spacing: 0.02em;
}

.ww-table tbody tr:last-child td {
    border-bottom: none;
}

.ww-table tbody tr:hover {
    background: var(--wp--preset--color--surface-alt);
}

/* Comparison table: highlight the best value in a row, never by color
   alone (an icon/label always accompanies it, added at the markup level). */
.ww-table td.ww-table__cell--best {
    background: color-mix(in srgb, var(--wp--preset--color--success) 8%, transparent);
    font-weight: 700;
}

.ww-table--loading tbody td {
    color: transparent;
    background: var(--wp--preset--color--surface-alt);
}

.ww-table__empty-row td {
    text-align: center;
    color: var(--wp--preset--color--muted);
    padding: 2rem 1rem;
}