/* NexGrid on the app's own palette.

   The grid ships its own tokens (--tbx-*). Pointing them at theme.css's tokens means a grid looks
   like every other card here, and follows body.dark-mode without a second dark palette to keep in
   step — theme.css already redefines --color-* under dark mode. The .tbx-dark selector is listed so
   these win over the grid's own dark palette too, which nexgrid-interop.js switches on alongside. */

.nexgrid-host .tbx-root,
.nexgrid-host .tbx-root.tbx-dark {
    --tbx-bg: var(--color-surface);
    --tbx-card: var(--color-surface);
    --tbx-card-2: var(--color-surface-alt);
    --tbx-border: var(--color-border);
    --tbx-border-subtle: var(--color-surface-alt);
    --tbx-fg: var(--color-text);
    --tbx-muted: var(--color-surface-alt);
    --tbx-muted-fg: var(--color-text-muted);
    --tbx-primary: var(--color-primary);
    --tbx-primary-active: var(--color-primary-active);
    --tbx-primary-fg: var(--color-on-primary);
    --tbx-selected-bg: var(--color-primary-soft);
    --tbx-danger: var(--color-danger);
    --tbx-radius-outer: var(--radius-lg);
    --tbx-shadow-card: var(--shadow-sm);
    --tbx-font: inherit;

    /* The grid's 24px suits a page with nothing else on it; here it sits under a page header. */
    padding: 16px;
}

/* <NexGrid Flat="true">: a grid inside a card of the page's own, which already draws the frame. */
.nexgrid-host .tbx-root.nexgrid-flat {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

/* Icon-only toolbar at every width: Columns, Density and Export show their icon, and the name moves
   to the tooltip. This is the grid's own phone layout (tablex.css, max-width 639px) applied
   everywhere. nexgrid-interop.js gives each button a title and aria-label, because hiding the
   label span would otherwise leave a screen reader with an unnamed button. */
.nexgrid-host .tbx-toolbar .tbx-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
}

.nexgrid-host .tbx-toolbar .tbx-btn span:not(.tbx-sr-only):not(.tbx-sort-order),
.nexgrid-host .tbx-toolbar .tbx-btn .tbx-chevron {
    display: none;
}

/* An image cell with no picture: the same circle as .grid-avatar (theme.css), with an icon. It
   replaces the external default-avatar URL the old grid loaded from a third-party site. */
.nexgrid-avatar-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-subtle);
    font-size: 18px;
}

.nexgrid-link {
    color: var(--color-primary);
    text-decoration: none;
}

    .nexgrid-link:hover { text-decoration: underline; }

    .nexgrid-link i { margin-right: 4px; }

.nexgrid-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

/* No scrollbar of the table's own on the vertical axis. The wrapper scrolls sideways
   (overflow-x: auto), which forces its vertical overflow to auto as well, and at fractional display
   scaling the table comes out a fraction of a pixel taller than the box around it — so every grid
   drew a second vertical scrollbar inside the page's own. The one thing that genuinely hangs out
   of the table is a column's filter popover, on a short list; while one is open the wrapper
   scrolls again so it can be reached. */
.nexgrid-host .tbx-table-wrap { overflow-y: hidden; }
.nexgrid-host .tbx-table-wrap:has(.tbx-filter-popover) { overflow-y: auto; }

@media (max-width: 767.98px) {
    .nexgrid-host .tbx-root { padding: 10px; }
}