/* Shared data-table layout. Do not select bare table/th/td; chart canvases
   inject internal tables and those must keep the library's own geometry. */

.table-scroll,
.research-table-wrap,
.fundamentals-table-wrap,
.fg-research-table-wrap,
.heatmap-scroll,
.trades-scroll,
.yearly-table-scroll,
.compact-table-scroll,
.btc-ledger-scroll,
.star50-table-scroll {
    max-width: 100%;
    overflow: auto;
}

.yearly-table,
.trade-table,
.data-table,
.fundamentals-table,
.performance-table,
.compact-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.yearly-table th,
.trade-table th,
.data-table th,
.fundamentals-table th,
.performance-table th,
.compact-table th {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    hyphens: none;
    line-height: 1.3;
    text-align: right;
    font-family: var(--font-body, inherit);
    letter-spacing: 0;
    text-transform: none;
}

.yearly-table td,
.trade-table td,
.data-table td,
.fundamentals-table td,
.performance-table td,
.compact-table td {
    white-space: nowrap;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.yearly-table th:first-child,
.yearly-table td:first-child,
.trade-table th:first-child,
.trade-table td:first-child,
.data-table th:first-child,
.data-table td:first-child,
.fundamentals-table th:first-child,
.fundamentals-table td:first-child,
.performance-table th:first-child,
.performance-table td:first-child,
.compact-table th:first-child,
.compact-table td:first-child {
    width: 6.25rem;
    text-align: left;
}

.trade-table th:nth-child(2),
.trade-table td:nth-child(2),
.trade-table th:nth-child(4),
.trade-table td:nth-child(4) {
    text-align: left;
}

.heatmap-table,
.monthly-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.heatmap-table th,
.heatmap-table td,
.monthly-table th,
.monthly-table td {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.heatmap-table th:first-child,
.heatmap-table td:first-child,
.monthly-table th:first-child,
.monthly-table td:first-child {
    width: 4.5rem;
    text-align: left;
}

.heatmap-table th:last-child,
.heatmap-table td:last-child,
.monthly-table th:last-child,
.monthly-table td:last-child {
    width: 5.5rem;
}

.heatmap-table td.heat-pos-strong,
.heatmap-table tbody tr:nth-child(even) td.heat-pos-strong,
.heatmap-table tbody tr:hover td.heat-pos-strong {
    background: color-mix(in srgb, var(--accent-positive) 46%, var(--bg-card, var(--bg-panel))) !important;
}

.heatmap-table td.heat-pos-soft,
.heatmap-table tbody tr:nth-child(even) td.heat-pos-soft,
.heatmap-table tbody tr:hover td.heat-pos-soft {
    background: color-mix(in srgb, var(--accent-positive) 20%, var(--bg-card, var(--bg-panel))) !important;
}

.heatmap-table td.heat-neg-strong,
.heatmap-table tbody tr:nth-child(even) td.heat-neg-strong,
.heatmap-table tbody tr:hover td.heat-neg-strong {
    background: color-mix(in srgb, var(--accent-negative) 46%, var(--bg-card, var(--bg-panel))) !important;
}

.heatmap-table td.heat-neg-soft,
.heatmap-table tbody tr:nth-child(even) td.heat-neg-soft,
.heatmap-table tbody tr:hover td.heat-neg-soft {
    background: color-mix(in srgb, var(--accent-negative) 20%, var(--bg-card, var(--bg-panel))) !important;
}

.monthly-table td.heat-positive-1,
.heatmap-table td.heat-positive-1 {
    background: color-mix(in srgb, var(--accent-positive) 10%, transparent) !important;
}

.monthly-table td.heat-positive-2,
.heatmap-table td.heat-positive-2 {
    background: color-mix(in srgb, var(--accent-positive) 20%, transparent) !important;
}

.monthly-table td.heat-positive-3,
.heatmap-table td.heat-positive-3 {
    background: color-mix(in srgb, var(--accent-positive) 32%, transparent) !important;
}

.monthly-table td.heat-negative-1,
.heatmap-table td.heat-negative-1 {
    background: color-mix(in srgb, var(--accent-negative) 10%, transparent) !important;
}

.monthly-table td.heat-negative-2,
.heatmap-table td.heat-negative-2 {
    background: color-mix(in srgb, var(--accent-negative) 20%, transparent) !important;
}

.monthly-table td.heat-negative-3,
.heatmap-table td.heat-negative-3 {
    background: color-mix(in srgb, var(--accent-negative) 32%, transparent) !important;
}

.fundamentals-table--wide {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.fundamentals-table--wide th,
.fundamentals-table--wide td {
    white-space: nowrap;
}

.fundamentals-table--wide th:first-child,
.fundamentals-table--wide td:first-child {
    min-width: 220px;
    width: 240px;
    white-space: normal;
}

.research-table,
.fg-research-table {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.research-table th,
.fg-research-table th {
    font-family: var(--font-body, inherit);
}

@media (max-width: 900px) {
    .yearly-table th:first-child,
    .yearly-table td:first-child,
    .trade-table th:first-child,
    .trade-table td:first-child,
    .data-table th:first-child,
    .data-table td:first-child {
        width: 5rem;
    }

    .heatmap-table th:first-child,
    .heatmap-table td:first-child,
    .monthly-table th:first-child,
    .monthly-table td:first-child {
        width: 3.75rem;
    }
}
