/* fx-datagrid.css */

.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 {
        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;
    }