/* TABLES — extracted from components.css */

/* ── DATA TABLE HORIZONTAL SCROLL ── */
@media (max-width: 768px) {
    .page-sections-outer table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* ── COMPARISON TABLE ── */
.calc-comparison-table-wrapper {
    margin-bottom: var(--calc-space-12);
    overflow-x: auto;
}

/* ── RESPONSIVE TABLE WRAPPER (generic) ── */
.table-responsive {
    overflow-x: auto;
}

.calc-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--calc-text-sm);
    border-radius: var(--calc-radius-md);
    overflow: hidden;
}

.calc-comparison-table thead th {
    background: var(--calc-bg-card-elevated);
    color: var(--calc-gold);
    font-family: var(--calc-font-mono);
    font-size: var(--calc-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--calc-space-3) var(--calc-space-4);
    text-align: left;
    border-bottom: 2px solid var(--calc-border-gold);
    white-space: nowrap;
}

.calc-comparison-table tbody td {
    padding: var(--calc-space-3) var(--calc-space-4);
    color: var(--calc-text-secondary);
    border-bottom: 1px solid var(--calc-border-subtle);
}

.calc-comparison-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.calc-comparison-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.calc-comparison-table tbody td:first-child {
    color: var(--calc-text-primary);
    font-weight: 500;
}

/* ── Table (amortization / schedules) ── */
.re-calc table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.82rem;
}
.re-calc table th {
    background: var(--re-bg-elevated, #162336);
    color: var(--re-text-faint, #4d6485);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid var(--re-border-card, rgba(255,255,255,0.07));
}
.re-calc table th:first-child { text-align: left; }
.re-calc table td {
    padding: 9px 12px;
    text-align: right;
    color: var(--re-text-body, #8fa5c8);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: var(--calc-font-mono, 'JetBrains Mono', monospace);
}
.re-calc table td:first-child { text-align: left; color: var(--re-text-heading, #e8edf5); }
.re-calc table tr:hover td { background: var(--re-bg-hover, #1c2d44); }
.re-calc table tr:last-child td { border-bottom: none; }

/* ── Sensitivity Matrix / Heatmap Cells ── */
.re-calc .matrix-cell,
.re-calc .heat-cell {
    padding: 7px 10px;
    text-align: center;
    font-family: var(--calc-font-mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    border-radius: 6px;
    font-weight: 600;
    transition: transform var(--re-transition, 250ms ease);
}
.re-calc .matrix-cell:hover,
.re-calc .heat-cell:hover { transform: scale(1.05); }

/* ── ENHANCED COMPARISON TABLE ── */
.comparison-table .best-value::after {
    content: 'BEST';
    font-family: var(--calc-font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--calc-cyan-dim);
    color: var(--calc-cyan);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}