/**
 * Trinity data grid — reusable screener-style table (sticky header, sortable columns, numeric cells).
 * Used by: portfolio list grid (new-portfolio.js). Future: allocations positions table view.
 * Companion: static/js/trinity-data-grid.js (class names + attachSortableHeaders).
 *
 * Canonical classes: .trinity-dg-*
 * Legacy aliases: .portfolio-grid-*, .portfolio-table-wrap-modern (kept for backward compatibility).
 */

.trinity-dg-wrap,
.portfolio-table-wrap-modern {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
}

.trinity-dg-table,
.portfolio-grid-table-modern {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: calc(13px + 2pt);
    color: var(--text-primary);
}

.trinity-dg-table thead,
.portfolio-grid-table-modern thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-tertiary);
    box-shadow: 0 1px 0 var(--border-color);
}

.trinity-dg-th,
.portfolio-grid-th {
    box-sizing: border-box;
    min-height: 44pt;
    height: 44pt;
    padding: 0 8px;
    vertical-align: middle;
    text-align: left;
    font-size: calc(10px + 4pt);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
}

.trinity-dg-th-sortable,
.portfolio-grid-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
    .trinity-dg-th-sortable:hover,
    .portfolio-grid-th-sortable:hover {
        background: color-mix(in srgb, var(--primary) 10%, var(--bg-tertiary));
        color: var(--text-primary);
    }
}

.trinity-dg-th-sortable:focus-visible,
.portfolio-grid-th-sortable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.trinity-dg-th-sortable[aria-sort="ascending"],
.trinity-dg-th-sortable[aria-sort="descending"],
.portfolio-grid-th-sortable[aria-sort="ascending"],
.portfolio-grid-th-sortable[aria-sort="descending"] {
    background: color-mix(in srgb, var(--primary) 24%, var(--bg-tertiary));
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}

.trinity-dg-th-sortable[aria-sort="ascending"]::after,
.trinity-dg-th-sortable[aria-sort="descending"]::after,
.portfolio-grid-th-sortable[aria-sort="ascending"]::after,
.portfolio-grid-th-sortable[aria-sort="descending"]::after {
    content: "";
    display: inline-block;
    margin-left: 5px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    vertical-align: middle;
}

.trinity-dg-th-sortable[aria-sort="ascending"]::after,
.portfolio-grid-th-sortable[aria-sort="ascending"]::after {
    border-bottom: 5px solid currentColor;
}

.trinity-dg-th-sortable[aria-sort="descending"]::after,
.portfolio-grid-th-sortable[aria-sort="descending"]::after {
    border-top: 5px solid currentColor;
}

.trinity-dg-th-num,
.portfolio-grid-th-num {
    text-align: right;
}

.trinity-dg-th-sr,
.portfolio-grid-th-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.trinity-dg-row,
.portfolio-grid-table-row {
    min-height: 40pt;
    height: 40pt;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    transition: background var(--transition-fast);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .trinity-dg-row:hover,
    .portfolio-grid-table-row:hover {
        background: color-mix(in srgb, var(--primary) 6%, var(--bg-secondary));
    }
}

.trinity-dg-td,
.portfolio-grid-td {
    padding: 6px 8px;
    vertical-align: middle;
    color: var(--text-primary);
}

/* Horizontal inset (6pt each side) on first/last cells only — avoids padding on the
   scroll wrapper so row hover + sticky thead backgrounds span the full container. */
.trinity-dg-table .trinity-dg-th:first-child:not(.trinity-dg-th-sr),
.portfolio-grid-table-modern .portfolio-grid-th:first-child:not(.portfolio-grid-th-sr) {
    padding: 0 8px 0 calc(8px + 6pt);
}

.trinity-dg-table .trinity-dg-th:last-child,
.portfolio-grid-table-modern .portfolio-grid-th:last-child {
    padding: 0 calc(8px + 6pt) 0 8px;
}

.trinity-dg-table .trinity-dg-td:first-child,
.portfolio-grid-table-modern .portfolio-grid-td:first-child {
    padding: 6px 8px 6px calc(8px + 6pt);
}

.trinity-dg-table .trinity-dg-td:last-child,
.portfolio-grid-table-modern .portfolio-grid-td:last-child {
    padding: 6px calc(8px + 6pt) 6px 8px;
}

.trinity-dg-table .trinity-dg-th:first-child:last-child:not(.trinity-dg-th-sr),
.portfolio-grid-table-modern .portfolio-grid-th:first-child:last-child:not(.portfolio-grid-th-sr) {
    padding: 0 calc(8px + 6pt);
}

.trinity-dg-table .trinity-dg-td:first-child:last-child,
.portfolio-grid-table-modern .portfolio-grid-td:first-child:last-child {
    padding: 6px calc(8px + 6pt);
}

.trinity-dg-td-name,
.portfolio-grid-td-name {
    font-weight: 700;
    max-width: 200px;
}

.trinity-dg-name-link,
.portfolio-grid-name-link {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trinity-dg-name-link:hover,
.portfolio-grid-name-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.trinity-dg-td-num,
.portfolio-grid-td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trinity-dg-td-dual,
.portfolio-grid-td-dual {
    white-space: normal;
    vertical-align: middle;
}

.trinity-dg-dual-metric,
.portfolio-grid-dual-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.15;
}

.trinity-dg-dual-metric-dollar,
.portfolio-grid-dual-metric-dollar {
    font-size: calc(12px + 2pt);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trinity-dg-dual-metric-dollar.gain,
.portfolio-grid-dual-metric-dollar.gain {
    color: var(--success);
}

.trinity-dg-dual-metric-dollar.loss,
.portfolio-grid-dual-metric-dollar.loss {
    color: var(--danger);
}

.trinity-dg-dual-metric .trinity-dg-num,
.portfolio-grid-dual-metric .portfolio-grid-num {
    font-size: calc(11px + 2pt);
    font-weight: 600;
}

.trinity-dg-td-metric,
.portfolio-grid-td-metric {
    text-align: right;
}

.trinity-dg-metric-link.portfolio-metric-link-modern,
.portfolio-grid-metric-link.portfolio-metric-link-modern {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
    vertical-align: middle;
}

.trinity-dg-metric-link .portfolio-metric-value-modern,
.portfolio-grid-metric-link .portfolio-metric-value-modern {
    font-size: calc(14px + 2pt);
}

.trinity-dg-metric-link:hover .portfolio-metric-icon-modern,
.portfolio-grid-metric-link:hover .portfolio-metric-icon-modern {
    opacity: 1;
    color: var(--primary);
}

.trinity-dg-num.gain,
.portfolio-grid-num.gain {
    color: var(--success);
}

.trinity-dg-num.loss,
.portfolio-grid-num.loss {
    color: var(--danger);
}

.trinity-dg-na,
.portfolio-grid-na {
    color: var(--text-secondary);
    opacity: 0.7;
}

@media (min-width: 1024px) {
    .trinity-dg-table,
    .portfolio-grid-table-modern {
        min-width: 0;
    }
}

/* Mobile: table density (breakpoints.css: --bp-mobile-max 639px) */
@media (max-width: 639px) {
    .trinity-dg-table,
    .portfolio-grid-table-modern {
        min-width: 620px;
        font-size: calc(12px + 2pt);
    }

    .trinity-dg-th,
    .portfolio-grid-th {
        padding: 0 6px;
        min-height: 44pt;
        height: 44pt;
    }

    .trinity-dg-table .trinity-dg-th:first-child:not(.trinity-dg-th-sr),
    .portfolio-grid-table-modern .portfolio-grid-th:first-child:not(.portfolio-grid-th-sr) {
        padding: 0 6px 0 calc(6px + 6pt);
    }

    .trinity-dg-table .trinity-dg-th:last-child,
    .portfolio-grid-table-modern .portfolio-grid-th:last-child {
        padding: 0 calc(6px + 6pt) 0 6px;
    }

    .trinity-dg-td,
    .portfolio-grid-td {
        padding: 6px 6px;
    }

    .trinity-dg-table .trinity-dg-td:first-child,
    .portfolio-grid-table-modern .portfolio-grid-td:first-child {
        padding: 6px 6px 6px calc(6px + 6pt);
    }

    .trinity-dg-table .trinity-dg-td:last-child,
    .portfolio-grid-table-modern .portfolio-grid-td:last-child {
        padding: 6px calc(6px + 6pt) 6px 6px;
    }

    .trinity-dg-table .trinity-dg-th:first-child:last-child:not(.trinity-dg-th-sr),
    .portfolio-grid-table-modern .portfolio-grid-th:first-child:last-child:not(.portfolio-grid-th-sr) {
        padding: 0 calc(6px + 6pt);
    }

    .trinity-dg-table .trinity-dg-td:first-child:last-child,
    .portfolio-grid-table-modern .portfolio-grid-td:first-child:last-child {
        padding: 6px calc(6px + 6pt);
    }
}