/* nx-datagrid.css - Local theme override */

.nx-datagrid {
    color: var(--nx-primary-fg) ;
    background: var(--nx-primary-bg) ;
    width: 100% ;
    box-sizing: border-box ;
    grid-column: 1 / -1 ;
}

/* Toolbar */
.nx-datagrid-toolbar {
    display: flex ;
    gap: var(--nx-space) ;
    align-items: center ;
    padding: var(--nx-space-small) 0 ;
    margin-bottom: var(--nx-space-small) ;
    flex-wrap: wrap ;
}

    .nx-datagrid-toolbar label {
        display: flex ;
        gap: var(--nx-space-small) ;
        align-items: center ;
        font-size: 0.95rem ;
    }

    .nx-datagrid-toolbar select,
    .nx-datagrid-toolbar input {
        padding: 0.35rem var(--nx-space-small) ;
        border: 1px solid var(--nx-border-color) ;
        border-radius: var(--nx-border-radius) ;
        background: var(--nx-tertiary-bg) ;
        color: var(--nx-primary-fg) ;
        min-height: 32px ;
        font-size: 0.95rem ;
    }


/* Table (scoped under .nx-datagrid so markup uses plain <table> inside .nx-datagrid) */
.nx-datagrid table {
    width: 100% ;
    border-collapse: collapse ;
    min-width: 640px ;
    background: var(--nx-primary-bg) ;
    box-sizing: border-box ;
    /* IMPORTANT: fix column widths so browser doesn't re-measure columns on each content change */
    table-layout: fixed ;
}

    /* ensure cells don't expand the column; overflow gets ellipsed */
    .nx-datagrid table th,
    .nx-datagrid table td {
        padding: var(--nx-space) ;
        text-align: left ;
        vertical-align: middle ;
        border-bottom: 1px solid var(--nx-border-color) ;
        font-size: 0.95rem ;
        overflow: hidden ;
        text-overflow: ellipsis ;
        white-space: nowrap ;
    }

    /* Header row styling */
    .nx-datagrid table thead th {
        background: var(--nx-secondary-bg) ;
        color: var(--nx-primary-fg) ;
        font-weight: 600 ;
    }

    /* keep filter inputs sized to their column without adding extra width */
    .nx-datagrid table thead input {
        width: 100% ;
        box-sizing: border-box ;
        padding: 0.25rem 0.35rem ;
        border-radius: var(--nx-border-radius) ;
        border: 1px solid var(--nx-border-color) ;
        background: var(--nx-tertiary-bg) ;
        color: var(--nx-primary-fg) ;
    }

/* reserve scrollbar space to avoid width jump when scrollbar appears/disappears */
.nx-datagrid .nx-table-responsive {
    width: 100% ;
    overflow-x: auto ;
    border-radius: var(--nx-border-radius) ;
    scrollbar-gutter: stable ;
}

/* highlighted row/item visuals */
.nx-datagrid table tbody tr:hover {
    background: var(--nx-highlight-bg) ;
    outline: none ;
    box-shadow: none ;
}

.nx-datagrid table tbody tr:focus {
    background: var(--nx-highlight-bg) ;
    outline: none ;
    box-shadow: none ;
}

/* Selected row */
.nx-datagrid table tbody tr.selected {
    background: var(--nx-highlight-bg) ;
}

/* Footer */
.nx-datatable-footer {
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    gap: var(--nx-space) ;
    padding: 0.6rem 0 ;
    margin-top: var(--nx-space-small) ;
    color: var(--nx-muted-fg) ;
    font-size: 0.95rem ;
}