.fx-datagrid {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--nx-border-radius);
    border: var(--nx-border-width) solid var(--nx-border-color);
    overflow: hidden;
    font-family: var(--nx-font);
    color: var(--nx-primary-fg);
    background: var(--nx-tertiary-bg);
}

    .fx-datagrid tr:has(> th) {
        background-color: var(--nx-secondary-bg);
    }

    .fx-datagrid th,
    .fx-datagrid td {
        padding: var(--nx-space-small) var(--nx-space);
        text-align: left;
        border-bottom: var(--nx-border-width) solid var(--nx-border-color);
        vertical-align: middle;
    }

        .fx-datagrid th button,
        .fx-datagrid td button {
            margin-bottom: 0;
        }

    .fx-datagrid th {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--nx-secondary-fg);
        white-space: nowrap;
    }

    .fx-datagrid tr:last-child td {
        border-bottom: none;
    }

    .fx-datagrid tr.fx-datagrid__row--clickable {
        cursor: pointer;
        transition: background-color 0.12s ease;
    }

        .fx-datagrid tr.fx-datagrid__row--clickable:hover {
            background-color: color-mix(in srgb, var(--nx-highlight-bg) 35%, transparent);
        }

/* ── Empty state ───────────────────────────────────────────── */
.fx-datagrid__empty-cell {
    padding: var(--nx-space) !important;
    text-align: center;
    color: var(--nx-muted-fg);
    font-style: italic;
}

/* ── Comments sub-row (FxDataGridRowComments) ─────────────────────── */
.fx-datagrid-row-comments__cell {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-small);
    border: none !important;
    padding-left: 20px !important;
    color: var(--nx-muted-fg);
    white-space: pre-wrap;
    word-break: break-word;
}


/* FxDataGrid: row and cell theme variants (background-color only) */

.fx-datagrid__row--alert td,
.fx-datagrid__row--alert th {
    background-color: var(--nx-alert-bg);
}

.fx-datagrid__row--positive td,
.fx-datagrid__row--positive th {
    background-color: var(--nx-positive-bg);
}

.fx-datagrid__row--negative td,
.fx-datagrid__row--negative th {
    background-color: var(--nx-negative-bg);
}

.fx-datagrid__row--highlight td,
.fx-datagrid__row--highlight th {
    background-color: var(--nx-highlight-bg);
}

.fx-datagrid__row--muted td,
.fx-datagrid__row--muted th {
    background-color: var(--nx-muted-bg);
}

.fx-datagrid__cell--alert {
    background-color: var(--nx-alert-bg);
}

.fx-datagrid__cell--positive {
    background-color: var(--nx-positive-bg);
}

.fx-datagrid__cell--negative {
    background-color: var(--nx-negative-bg);
}

.fx-datagrid__cell--highlight {
    background-color: var(--nx-highlight-bg);
}

.fx-datagrid__cell--muted {
    background-color: var(--nx-muted-bg);
}

.fx-datagrid-row-comments {
    color: var(--nx-muted-fg);
}

.fx-datagrid-row-comments__cell {
}

.fx-datagrid .button