/* =============================================================================
 * BOMSync SfGrid Light / Dark theme contract (LOCKED gate for OPERATIONS pages)
 *
 * Scope: Syncfusion SfGrid / TreeGrid chrome — headers, body, alt rows, selection,
 * hover, frozen columns, Excel filter chrome, pager, group captions, empty state,
 * loading overlay host. Work-panel glass row actions stay in bomsync-theme.css
 * (button-effects lock #934) — do not fork them here.
 *
 * Theme selectors (match product + preview + palette boards):
 *   Light  — default :root / no dark attr
 *   Dark   — html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview])
 *            html[data-bomsync-theme-preview="dark"]
 *            .bomsync-sfgrid-shell[data-theme="dark"]  (palette side-by-side fixtures)
 *
 * Agents: do NOT invent page-local competing grid skins. Extend tokens here.
 * Staff: docs/help/staff/sfgrid-light-dark-theme.md
 * Rule:  .cursor/rules/bomsync-sfgrid-theme.mdc
 * ============================================================================= */

:root {
    /* Surface — alt-row is cool sage (NOT blue read-only wash, NOT brand-navy zebra) */
    --bomsync-sfgrid-surface: #ffffff;
    --bomsync-sfgrid-surface-alt: #f0f4f2;
    /* Hard hex — do not alias elevated-surface (Dark remaps that to navy and can
       mix navy rows with Fluent white cells + on-dark muted text). */
    --bomsync-sfgrid-fg: #0f1520;
    --bomsync-sfgrid-fg-muted: #3a4560;
    --bomsync-sfgrid-border: var(--bomsync-border, #c9d2e0);
    --bomsync-sfgrid-border-strong: var(--bomsync-border-strong, #a8b4c6);

    /* Comfortable default row density (Geoffrey 2026-10-11 — Commercial Packages).
       Overrides legacy syncfusion.css .e-rowcell { padding: 2px }. Prefer CSS over
       per-page RowHeight; if Syncfusion needs an explicit px (virtualization), use 42. */
    --bomsync-sfgrid-row-padding-y: 10px;
    --bomsync-sfgrid-row-padding-x: 12px;
    --bomsync-sfgrid-row-min-height: 42px;
    --bomsync-sfgrid-row-line-height: 1.4;
    --bomsync-sfgrid-header-padding-y: 10px;
    --bomsync-sfgrid-header-padding-x: 12px;
    /* Compact exception — CssClass="bomsync-sfgrid--compact" on dense admin grids */
    --bomsync-sfgrid-row-padding-y-compact: 4px;
    --bomsync-sfgrid-row-padding-x-compact: 8px;
    --bomsync-sfgrid-row-min-height-compact: 28px;

    /* Read-only column wash — distinct from alt-row */
    --bomsync-sfgrid-readonly-bg: #e6edf7;
    --bomsync-sfgrid-readonly-fg: var(--bomsync-text-secondary, #3a4560);

    /* Header — branded cool blue (slight tone adjust 2026-10-10) */
    --bomsync-sfgrid-header-bg: var(--bomsync-grid-header-bg, #285F8A);
    --bomsync-sfgrid-header-fg: var(--bomsync-grid-header-fg, #F5F7FB);
    --bomsync-sfgrid-header-border: var(--bomsync-grid-header-border, rgb(255 255 255 / 0.18));

    /* Selection / hover — PATH cyan family (not raw LightCyan / Azure) */
    --bomsync-sfgrid-select-bg: rgb(106 215 255 / 0.22);
    --bomsync-sfgrid-select-edge: rgb(106 215 255 / 0.55);
    --bomsync-sfgrid-hover-bg: rgb(47 102 144 / 0.10);

    /* Frozen lead column */
    --bomsync-sfgrid-frozen-bg: color-mix(in srgb, var(--bomsync-sfgrid-surface) 92%, #285F8A);
    --bomsync-sfgrid-frozen-border: rgb(40 95 138 / 0.35);

    /* Toolbar / pager / filter / group */
    --bomsync-sfgrid-chrome-bg: var(--bomsync-surface-2, #edf0f7);
    /* Search inputs: slightly lifted vs chrome so the box draws attention */
    --bomsync-sfgrid-search-bg: #ffffff;
    --bomsync-sfgrid-pager-bg: var(--bomsync-elevated-surface, #ffffff);
    --bomsync-sfgrid-filter-bg: var(--bomsync-elevated-surface, #ffffff);
    --bomsync-sfgrid-groupdrop-bg: var(--bsx-groupdrop-bg, #e8ecf4);
    --bomsync-sfgrid-groupdrop-fg: var(--bsx-groupdrop-text, var(--bomsync-text-secondary));
    --bomsync-sfgrid-caption-bg: color-mix(in srgb, #285F8A 12%, var(--bomsync-sfgrid-surface));
    --bomsync-sfgrid-caption-fg: var(--bomsync-text, #0f1520);
    --bomsync-sfgrid-caption-border: rgb(40 95 138 / 0.28);

    /* Empty + overlay */
    --bomsync-sfgrid-empty-fg: var(--bomsync-text-muted, #7a8a9c);
    --bomsync-sfgrid-overlay-bg: rgb(245 247 251 / 0.78);
    --bomsync-sfgrid-overlay-fg: var(--bomsync-text-secondary, #5a6b7d);
}

/* Shared dark token pack — product theme, preview QA, and palette boards */
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]),
html[data-bomsync-theme-preview="dark"],
.bomsync-sfgrid-shell[data-theme="dark"] {
    --bomsync-sfgrid-surface: #152033;
    --bomsync-sfgrid-surface-alt: #1A2638;
    --bomsync-sfgrid-fg: #E3EAF2;
    --bomsync-sfgrid-fg-muted: #9DB4CC;
    --bomsync-sfgrid-border: #3A4F6A;
    --bomsync-sfgrid-border-strong: #4A6280;

    --bomsync-sfgrid-header-bg: #285F8A;
    --bomsync-sfgrid-header-fg: #F5F7FB;
    --bomsync-sfgrid-header-border: rgb(106 215 255 / 0.22);
    --bomsync-sfgrid-readonly-bg: #1e3048;
    --bomsync-sfgrid-readonly-fg: #C9D6E3;
    --bomsync-sfgrid-surface-alt: #182636;

    --bomsync-sfgrid-select-bg: rgb(106 215 255 / 0.18);
    --bomsync-sfgrid-select-edge: rgb(106 215 255 / 0.65);
    --bomsync-sfgrid-hover-bg: rgb(47 102 144 / 0.42);

    --bomsync-sfgrid-frozen-bg: #1A2638;
    --bomsync-sfgrid-frozen-border: rgb(106 215 255 / 0.28);

    --bomsync-sfgrid-chrome-bg: #1A2638;
    /* Search: lighter elevated fill than chrome (Geoffrey 2026-10-11 Dark follow-up) */
    --bomsync-sfgrid-search-bg: #2A3A50;
    --bomsync-sfgrid-pager-bg: #1A2638;
    --bomsync-sfgrid-filter-bg: #1A2638;

    /*
     * Remap Fluent2 surface tokens so .e-toolbar / .e-toolbar-items / pager chrome
     * stop painting --color-sf-content-bg-color-alt1 (#fff) on Dark pages.
     * Root cause of “old white toolbar” on /dashboard/home after #1002/#1012.
     *
     * Pager follow-up (Geoffrey 2026-10-11 Manual Entry / dashboard):
     * Fluent paints DISABLED first/prev/next/last with
     * --color-sf-content-bg-color-disabled (#f0f0f0) +
     * --color-sf-icon-color-disabled (#bdbdbd) AFTER alt1 — light-grey blanks
     * with invisible chevrons on 1-page / empty grids. Remap those + flyout
     * so Items-per-page DDL popup (body-teleported .e-ddl.e-popup) is not
     * white-on-white (--color-sf-flyout-bg-color #fff + remapped light text).
     */
    --color-sf-content-bg-color: #152033;
    --color-sf-content-bg-color-alt1: #1A2638;
    --color-sf-content-bg-color-alt2: #152033;
    --color-sf-content-bg-color-alt3: #243247;
    --color-sf-content-bg-color-hover: #334A66;
    --color-sf-content-bg-color-pressed: #152033;
    --color-sf-content-bg-color-focus: #243247;
    --color-sf-content-bg-color-disabled: #1E3048;
    --color-sf-content-text-color: #E3EAF2;
    --color-sf-content-text-color-alt1: #E3EAF2;
    --color-sf-content-text-color-alt2: #9DB4CC;
    --color-sf-content-text-color-hover: #FFFFFF;
    --color-sf-content-text-color-selected: #FFFFFF;
    --color-sf-content-text-color-disabled: #9DB4CC;
    --color-sf-icon-color: #F5F7FB;
    --color-sf-icon-color-hover: #FFFFFF;
    --color-sf-icon-color-disabled: #C9D6E3;
    --color-sf-toolbar-icon-color: #E3EAF2;
    --color-sf-border-light: #3A4F6A;
    --color-sf-flyout-bg-color: #1A2638;
    --color-sf-flyout-bg-color-hover: #334A66;
    --color-sf-flyout-bg-color-focus: #334A66;
    --color-sf-flyout-text-color-hover: #FFFFFF;
    --bomsync-sfgrid-groupdrop-bg: #1A2638;
    --bomsync-sfgrid-groupdrop-fg: #9DB4CC;
    --bomsync-sfgrid-caption-bg: color-mix(in srgb, #015F78 35%, #152033);
    --bomsync-sfgrid-caption-fg: #E3EAF2;
    --bomsync-sfgrid-caption-border: rgb(58 143 160 / 0.45);

    --bomsync-sfgrid-empty-fg: #9DB4CC;
    /* Navy elevated wash — neural busy / BIM sync overlays (not white frost) */
    --bomsync-sfgrid-overlay-bg: rgb(21 32 51 / 0.92);
    --bomsync-sfgrid-overlay-fg: #E3EAF2;

    /* Keep glass row-action tokens readable on dark rows */
    --bomsync-grid-row-badge-bg: rgb(34 135 146 / 0.28);
    --bomsync-grid-row-badge-border: rgb(110 198 205 / 0.55);
    --bomsync-grid-row-badge-highlight: rgb(110 198 205 / 0.45);
    --bomsync-grid-row-badge-fg: #8ed4da;
    --bomsync-grid-row-badge-fg-hover: #b8e8ec;
}

/* ----- Shell (optional host; pages may omit — rules also hit .e-grid globally) ----- */
.bomsync-sfgrid-shell {
    position: relative;
    width: 100%;
    min-width: 0;
}

/* ----- Grid root / content -----
 * Geoffrey lock 2026-10-11 (/dashboard/home “Projects you follow”):
 * 1. Never paint dark-navy / black zebra rows that fight Light cells or a mixed Fluent table.
 * 2. Never leave faint grey (on-dark muted) text on white / light row surfaces — fg tokens
 *    always travel with the same Light or Dark surface pack.
 * Base cells must use an explicit surface !important (not transparent) so Fluent2 white
 * cannot bleed through when the page wash is Dark and text tokens are on-dark.
 */
.e-grid,
.e-treegrid {
    background: var(--bomsync-sfgrid-surface) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-color: var(--bomsync-sfgrid-border) !important;
}

.e-grid .e-gridcontent,
.e-grid .e-content,
.e-treegrid .e-gridcontent,
.e-treegrid .e-content {
    background: var(--bomsync-sfgrid-surface) !important;
    color: var(--bomsync-sfgrid-fg) !important;
}

/* Row chrome — TR + TD share the same surface pack (beats syncfusion.css brand-subtle alt). */
.e-grid .e-row,
.e-treegrid .e-row {
    background-color: var(--bomsync-sfgrid-surface) !important;
    color: var(--bomsync-sfgrid-fg) !important;
}

.e-grid .e-altrow,
.e-treegrid .e-altrow {
    background-color: var(--bomsync-sfgrid-surface-alt) !important;
    color: var(--bomsync-sfgrid-fg) !important;
}

.e-grid .e-rowcell,
.e-treegrid .e-rowcell,
.e-grid .e-row .e-rowcell,
.e-treegrid .e-row .e-rowcell,
/* TreeGrid nests .e-grid under .e-treegrid — beat Fluent2
   .e-treegrid .e-gridcontent .e-rowcell { line-height: 17px } (Hosts gold cue). */
.e-treegrid .e-grid .e-rowcell,
.e-treegrid .e-gridcontent .e-rowcell,
.e-treegrid .e-grid .e-gridcontent .e-rowcell {
    background-color: var(--bomsync-sfgrid-surface) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-color: var(--bomsync-sfgrid-border) !important;
    /* Comfortable default — beats syncfusion.css padding: 2px */
    padding: var(--bomsync-sfgrid-row-padding-y) var(--bomsync-sfgrid-row-padding-x) !important;
    min-height: var(--bomsync-sfgrid-row-min-height) !important;
    line-height: var(--bomsync-sfgrid-row-line-height) !important;
    box-sizing: border-box;
    vertical-align: middle;
}

.e-grid .e-altrow .e-rowcell,
.e-treegrid .e-altrow .e-rowcell,
.e-treegrid .e-grid .e-altrow .e-rowcell {
    background-color: var(--bomsync-sfgrid-surface-alt) !important;
    color: var(--bomsync-sfgrid-fg) !important;
}

/* Tree column label — Fluent2 sets .e-treecell { line-height: 19px }. */
.e-treegrid .e-treecell,
.e-treegrid .e-treecolumn-container .e-treecell {
    line-height: var(--bomsync-sfgrid-row-line-height) !important;
    vertical-align: middle;
}

/* Content rows — shared min-height so TreeGrid/SfGrid stay aligned with frozen/header. */
.e-grid .e-gridcontent tr.e-row,
.e-treegrid .e-gridcontent tr.e-row,
.e-treegrid .e-grid .e-gridcontent tr.e-row {
    min-height: var(--bomsync-sfgrid-row-min-height);
}

/* Header cells share the same vertical rhythm as content rows (frozen stays aligned). */
.e-grid .e-gridheader .e-headercell,
.e-treegrid .e-gridheader .e-headercell,
.e-treegrid .e-grid .e-gridheader .e-headercell {
    padding: var(--bomsync-sfgrid-header-padding-y) var(--bomsync-sfgrid-header-padding-x) !important;
    box-sizing: border-box;
    vertical-align: middle;
}

/*
 * Compact density exception — opt-in for dense admin / high-volume grids that
 * already use a tight RowHeight (e.g. ItemGrid RowHeight="25").
 * Usage: <SfGrid CssClass="bomsync-sfgrid--compact" …>
 */
.e-grid.bomsync-sfgrid--compact .e-rowcell,
.e-treegrid.bomsync-sfgrid--compact .e-rowcell,
.e-grid.bomsync-sfgrid--compact .e-row .e-rowcell,
.e-treegrid.bomsync-sfgrid--compact .e-row .e-rowcell,
.e-treegrid.bomsync-sfgrid--compact .e-gridcontent .e-rowcell,
.e-treegrid.bomsync-sfgrid--compact .e-grid .e-rowcell {
    padding: var(--bomsync-sfgrid-row-padding-y-compact) var(--bomsync-sfgrid-row-padding-x-compact) !important;
    min-height: var(--bomsync-sfgrid-row-min-height-compact) !important;
    line-height: 1.25 !important;
}

.e-grid.bomsync-sfgrid--compact .e-gridheader .e-headercell,
.e-treegrid.bomsync-sfgrid--compact .e-gridheader .e-headercell {
    padding: var(--bomsync-sfgrid-row-padding-y-compact) var(--bomsync-sfgrid-row-padding-x-compact) !important;
}

.e-grid.bomsync-sfgrid--compact .e-gridcontent tr.e-row,
.e-treegrid.bomsync-sfgrid--compact .e-gridcontent tr.e-row {
    min-height: var(--bomsync-sfgrid-row-min-height-compact);
}

/* Nested / template text in cells — inherit row fg (no muted-on-white bleed). */
.e-grid .e-rowcell a:not(.bomsync-grid-row-action-btn),
.e-grid .e-rowcell .home-brief-proj-link,
.e-grid .e-rowcell .home-brief-meta,
.e-treegrid .e-rowcell a:not(.bomsync-grid-row-action-btn) {
    color: inherit;
}

.e-grid .e-rowcell .home-brief-meta,
.e-grid .e-rowcell .bomsync-sfgrid-muted {
    color: var(--bomsync-sfgrid-fg-muted) !important;
}

/* ----- Headers (token-driven; aligns with existing --bomsync-grid-header-*) ----- */
.e-grid .e-gridheader,
.e-grid .e-gridheader .e-headercell,
.e-grid .e-gridheader .e-headercontent,
.e-grid .e-gridheader .e-stackedheadercell,
.e-treegrid .e-gridheader,
.e-treegrid .e-gridheader .e-headercell,
.e-treegrid .e-gridheader .e-headercontent {
    background-color: var(--bomsync-sfgrid-header-bg) !important;
    color: var(--bomsync-sfgrid-header-fg) !important;
    border-color: var(--bomsync-sfgrid-header-border) !important;
}

.e-grid .e-gridheader .e-headercelldiv,
.e-grid .e-gridheader .e-headercell .e-headertext,
.e-grid .e-gridheader .e-icons,
.e-grid .e-gridheader .e-sortfilterdiv .e-icons,
.e-grid .e-gridheader .e-filtermenudiv .e-icons,
.e-treegrid .e-gridheader .e-headercelldiv,
.e-treegrid .e-gridheader .e-headercell .e-headertext,
.e-treegrid .e-gridheader .e-icons {
    color: var(--bomsync-sfgrid-header-fg) !important;
    fill: var(--bomsync-sfgrid-header-fg) !important;
}

/* ----- Selection + hover (PATH cyan language; overrides layout.css LightCyan/Azure) ----- */
.e-grid .e-row:hover .e-rowcell,
.e-treegrid .e-row:hover .e-rowcell {
    background-color: var(--bomsync-sfgrid-hover-bg) !important;
}

.e-grid .e-row[aria-selected="true"] .e-rowcell,
.e-grid .e-selectionbackground,
.e-grid .e-selectionbackground .e-rowcell,
.e-treegrid .e-row[aria-selected="true"] .e-rowcell,
.e-treegrid .e-selectionbackground,
.e-treegrid .e-selectionbackground .e-rowcell {
    background-color: var(--bomsync-sfgrid-select-bg) !important;
    box-shadow: inset 0 0 0 1px var(--bomsync-sfgrid-select-edge);
}

/* ----- Frozen columns ----- */
.e-grid .e-frozenheader .e-table,
.e-grid .e-frozencontent .e-table,
.e-grid .e-leftfreeze .e-rowcell,
.e-grid .e-freezeleftborder,
.e-grid td.e-leftfreeze,
.e-grid th.e-leftfreeze {
    background-color: var(--bomsync-sfgrid-frozen-bg) !important;
}

.e-grid .e-freezeleftborder,
.e-grid .e-frozen-left-border {
    border-right-color: var(--bomsync-sfgrid-frozen-border) !important;
}

.e-grid .e-frozencontent .e-altrow .e-rowcell,
.e-grid .e-leftfreeze.e-altrow .e-rowcell {
    background-color: color-mix(in srgb, var(--bomsync-sfgrid-frozen-bg) 70%, var(--bomsync-sfgrid-surface-alt)) !important;
}

.e-grid .e-row[aria-selected="true"] .e-leftfreeze,
.e-grid .e-selectionbackground .e-leftfreeze {
    background-color: var(--bomsync-sfgrid-select-bg) !important;
}

/* ----- Toolbar -----
 * Fluent2 paints .e-toolbar AND .e-toolbar-items with
 * var(--color-sf-content-bg-color-alt1) (#fff). Override both + wrappers.
 */
.e-grid .e-gridtoolbar,
.e-grid .e-toolbar,
.e-treegrid .e-gridtoolbar,
.e-grid .e-toolbar .e-toolbar-items,
.e-grid .e-toolbar .e-toolbar-wrapper,
.e-treegrid .e-toolbar .e-toolbar-items {
    background: var(--bomsync-sfgrid-chrome-bg) !important;
    background-color: var(--bomsync-sfgrid-chrome-bg) !important;
    border-color: var(--bomsync-sfgrid-border) !important;
    color: var(--bomsync-sfgrid-fg) !important;
}

.e-grid .e-toolbar .e-tbar-btn-text,
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn-text,
.e-grid .e-toolbar .e-icons {
    color: var(--bomsync-sfgrid-fg) !important;
}

/* Search — slightly lighter fill than chrome (token); theme-wide grid toolbars */
.e-grid .e-toolbar .e-input-group,
.e-grid .e-toolbar .e-input-group.e-control-wrapper,
.e-grid .e-toolbar .e-input-group input.e-input,
.e-grid .e-toolbar .e-search .e-input-group,
.e-grid .e-toolbar .e-searchbox .e-input-group,
.e-grid .e-toolbar .e-search .e-input,
.e-grid .e-toolbar .e-searchinput,
.e-treegrid .e-toolbar .e-input-group,
.e-treegrid .e-toolbar .e-input-group input.e-input {
    background: var(--bomsync-sfgrid-search-bg, var(--bomsync-sfgrid-surface)) !important;
    background-color: var(--bomsync-sfgrid-search-bg, var(--bomsync-sfgrid-surface)) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-color: var(--bomsync-sfgrid-border-strong) !important;
}

.e-grid .e-toolbar .e-input-group .e-input::placeholder,
.e-grid .e-toolbar .e-search .e-input::placeholder {
    color: var(--bomsync-sfgrid-fg-muted) !important;
    opacity: 1;
}

/*
 * Fluent2 column-chooser glyph is .e-columnchooser (no hyphen) → content \e21e.
 * Hyphenated .e-column-chooser has no ::before → empty square after Search.
 * Alias both so custom ItemModel PrefixIcon and built-in ColumnChooser stay visible.
 */
.e-icons.e-column-chooser::before,
.e-btn-icon.e-column-chooser::before,
.e-toolbar .e-icons.e-column-chooser::before,
.e-grid .e-toolbar .e-btn-icon.e-column-chooser::before {
    content: "\e21e";
}

/*
 * Dark: 1px temperature-white / on-dark border per toolbar icon button + centered glyphs.
 * Geoffrey 2026-10-11 — CNC library Dark annotations (system-wide grid toolbars).
 */
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridtoolbar,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridtoolbar,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridtoolbar,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-toolbar-items,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-toolbar-items,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-toolbar-items,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-toolbar-wrapper,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-toolbar-wrapper,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-toolbar-wrapper {
    background: #1A2638 !important;
    background-color: #1A2638 !important;
    color: #E3EAF2 !important;
    border-color: #3A4F6A !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn {
    background: #1A2638 !important;
    background-color: #1A2638 !important;
    border: 1px solid rgb(232 237 245 / 0.55) !important; /* --bomsync-on-dark-text family */
    border-color: rgb(232 237 245 / 0.55) !important;
    color: var(--bomsync-sfgrid-fg, #E3EAF2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-input-group,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-input-group,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-input-group,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-input-group input.e-input,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-input-group input.e-input,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-input-group input.e-input {
    background: #2A3A50 !important;
    background-color: #2A3A50 !important;
    color: #E3EAF2 !important;
    border-color: #4A6280 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn .e-icons,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn .e-icons,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn .e-icons,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn .e-btn-icon,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn .e-btn-icon,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn .e-btn-icon,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn .bi,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn .bi,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn .bi {
    color: var(--bomsync-sfgrid-fg, #E3EAF2) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn:hover,
html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn:hover,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-toolbar .e-tbar-btn:hover {
    border-color: rgb(232 237 245 / 0.78) !important;
    background: rgb(106 215 255 / 0.12) !important;
}

/* ----- Excel / filter menu (popup may render under body — also themed via html dark) ----- */
.e-filter-popup,
.e-excelfilter,
.e-grid-popup.e-popup,
.e-checkboxfilter,
.e-excel-menu {
    background: var(--bomsync-sfgrid-filter-bg) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-color: var(--bomsync-sfgrid-border-strong) !important;
    box-shadow: 0 8px 24px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.28) !important;
}

.e-filter-popup .e-header,
.e-excelfilter .e-dlg-header,
.e-filter-popup .e-footer-content,
.e-excelfilter .e-footer-content {
    background: var(--bomsync-sfgrid-chrome-bg) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-color: var(--bomsync-sfgrid-border) !important;
}

.e-filter-popup .e-ftrchk,
.e-filter-popup .e-checkbox-wrapper .e-label,
.e-excelfilter .e-checkboxfiltertext,
.e-filter-popup input.e-input,
.e-excelfilter input.e-input {
    color: var(--bomsync-sfgrid-fg) !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-filter-popup,
html[data-bomsync-theme-preview="dark"] .e-filter-popup,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-excelfilter,
html[data-bomsync-theme-preview="dark"] .e-excelfilter,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid-popup.e-popup,
html[data-bomsync-theme-preview="dark"] .e-grid-popup.e-popup,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-checkboxfilter,
html[data-bomsync-theme-preview="dark"] .e-checkboxfilter,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-excel-menu,
html[data-bomsync-theme-preview="dark"] .e-excel-menu {
    --bomsync-sfgrid-filter-bg: #1A2638;
    --bomsync-sfgrid-chrome-bg: #1A2638;
    --bomsync-sfgrid-fg: #E3EAF2;
    --bomsync-sfgrid-border: #3A4F6A;
    --bomsync-sfgrid-border-strong: #4A6280;
}

/* ----- Pager ----- */
.e-grid .e-gridpager,
.e-grid .e-pager,
.e-treegrid .e-gridpager {
    background: var(--bomsync-sfgrid-pager-bg) !important;
    background-color: var(--bomsync-sfgrid-pager-bg) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-color: var(--bomsync-sfgrid-border) !important;
}

.e-grid .e-pager .e-pagercontainer,
.e-grid .e-pager .e-numericcontainer,
.e-grid .e-pager .e-pagesizes,
.e-grid .e-pager .e-pagerdropdown,
.e-grid .e-pager .e-parentmsgbar,
.e-grid .e-pager .e-pagerconstant,
.e-grid .e-pager .e-pagermsgdiv {
    background: transparent !important;
    color: var(--bomsync-sfgrid-fg) !important;
}

.e-grid .e-pager .e-pagercontainer,
.e-grid .e-pager .e-numericitem,
.e-grid .e-pager .e-currentitem,
.e-grid .e-pager .e-icons,
.e-grid .e-pager .e-pagerconstant,
.e-grid .e-pager .e-pagerdropdown,
.e-grid .e-pager .e-parentmsgbar,
.e-grid .e-pager .e-pagermsgdiv,
.e-grid .e-pager .e-pagesizes,
.e-grid .e-pager .e-pagecountmsg,
.e-grid .e-pager span {
    color: var(--bomsync-sfgrid-fg) !important;
}

/* First/prev/next/last chevrons — Fluent2 can leave glyphs near-invisible on Dark */
.e-grid .e-pager .e-firstpage,
.e-grid .e-pager .e-prevpage,
.e-grid .e-pager .e-nextpage,
.e-grid .e-pager .e-lastpage,
.e-grid .e-pager .e-firstpagedisabled,
.e-grid .e-pager .e-prevpagedisabled,
.e-grid .e-pager .e-nextpagedisabled,
.e-grid .e-pager .e-lastpagedisabled,
.e-grid .e-pager .e-icons::before,
.e-treegrid .e-pager .e-firstpage,
.e-treegrid .e-pager .e-prevpage,
.e-treegrid .e-pager .e-nextpage,
.e-treegrid .e-pager .e-lastpage,
.e-treegrid .e-pager .e-icons::before {
    color: var(--bomsync-sfgrid-fg) !important;
    opacity: 1 !important;
}

.e-grid .e-pager .e-firstpage svg,
.e-grid .e-pager .e-prevpage svg,
.e-grid .e-pager .e-nextpage svg,
.e-grid .e-pager .e-lastpage svg,
.e-grid .e-pager .e-firstpagedisabled svg,
.e-grid .e-pager .e-prevpagedisabled svg,
.e-grid .e-pager .e-nextpagedisabled svg,
.e-grid .e-pager .e-lastpagedisabled svg,
.e-grid .e-pager .e-icons svg {
    fill: currentColor !important;
    color: var(--bomsync-sfgrid-fg) !important;
    opacity: 1 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpagedisabled {
    color: var(--bomsync-sfgrid-fg-muted, #9DB4CC) !important;
    opacity: 0.55 !important;
}

.e-grid .e-pager .e-numericitem {
    background: transparent !important;
    color: var(--bomsync-sfgrid-fg) !important;
}

.e-grid .e-pager .e-currentitem,
.e-grid .e-pager .e-numericitem:hover {
    background: rgb(47 102 144 / 0.35) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-radius: 6px;
}

.e-grid .e-pager .e-currentitem {
    box-shadow: 0 0 0 1px var(--bomsync-sfgrid-select-edge);
}

.e-grid .e-pager .e-pagerdropdown .e-input-group,
.e-grid .e-pager .e-pagerdropdown .e-input-group.e-control-wrapper,
.e-grid .e-pager .e-pagerdropdown input,
.e-grid .e-pager .e-pagerdropdown .e-ddl .e-input-group {
    background: var(--bomsync-sfgrid-search-bg, var(--bomsync-sfgrid-surface)) !important;
    background-color: var(--bomsync-sfgrid-search-bg, var(--bomsync-sfgrid-surface)) !important;
    color: var(--bomsync-sfgrid-fg) !important;
    border-color: var(--bomsync-sfgrid-border-strong) !important;
}

/* Dark pager — hard surfaces so Fluent2 white numeric/dropdown shells cannot bleed */
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager {
    background: #1A2638 !important;
    background-color: #1A2638 !important;
    color: #E3EAF2 !important;
    border-color: #3A4F6A !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-pagercontainer,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-pagercontainer,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-pagercontainer,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-pagercontainer,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-pagercontainer,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-pagercontainer {
    background: #152033 !important;
    background-color: #152033 !important;
    border: 1px solid #3A4F6A !important;
    border-radius: 6px;
    padding: 2px !important;
    gap: 2px;
}

/*
 * Dark pager NAV BUTTONS (Geoffrey 2026-10-11 Manual Entry):
 * Fluent2 left first/prev/numeric/next/last as flat light-grey squares with
 * near-invisible glyphs after #1015 only painted the container + text color.
 * Each nav control needs its own elevated fill + high-contrast fg.
 */
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-numericitem,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-numericitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-numericitem,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-numericitem,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-numericitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-numericitem,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-firstpage,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-firstpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-firstpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-prevpage,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-prevpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-prevpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-nextpage,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-nextpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-nextpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-lastpage,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-lastpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-lastpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-firstpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-prevpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-nextpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-lastpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-lastpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-lastpagedisabled {
    background: #2A3A50 !important;
    background-color: #2A3A50 !important;
    color: #F5F7FB !important;
    border: 1px solid #4A6280 !important;
    border-radius: 4px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 1px !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-numericitem,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-numericitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-numericitem,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-numericitem .e-link,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-numericitem .e-link,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-numericitem .e-link,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-numericitem a,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-numericitem a,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-numericitem a,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-numericitem span,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-numericitem span,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-numericitem span,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-numericitem,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-numericitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-numericitem {
    color: #F5F7FB !important;
    font-weight: 600 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-icons,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-icons,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-icons,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-icons::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-icons::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-icons::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpage::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpage::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpage::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpage::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpage::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpage::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpage::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpage::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpage::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpage::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpage::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpage::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpagedisabled::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpagedisabled::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpagedisabled::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpagedisabled::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-icons::before,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-icons::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-icons::before {
    color: #F5F7FB !important;
    opacity: 1 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-icons svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-icons svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-icons svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpage svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpage svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpage svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpage svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpage svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpage svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpage svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpage svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpage svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpage svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpage svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpage svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpagedisabled svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpagedisabled svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpagedisabled svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpagedisabled svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpagedisabled svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpagedisabled svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpagedisabled svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpagedisabled svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpagedisabled svg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpagedisabled svg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpagedisabled svg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpagedisabled svg {
    fill: #F5F7FB !important;
    color: #F5F7FB !important;
    opacity: 1 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-numericitem:hover,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-numericitem:hover,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-numericitem:hover,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpage:hover,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpage:hover,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpage:hover,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpage:hover,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpage:hover,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpage:hover,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpage:hover,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpage:hover,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpage:hover,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpage:hover,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpage:hover,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpage:hover {
    background: #334A66 !important;
    background-color: #334A66 !important;
    color: #FFFFFF !important;
    border-color: #6E83A0 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-currentitem,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-currentitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-currentitem,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-treegrid .e-pager .e-currentitem,
html[data-bomsync-theme-preview="dark"] .e-treegrid .e-pager .e-currentitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-treegrid .e-pager .e-currentitem {
    background: #2F6690 !important;
    background-color: #2F6690 !important;
    color: #FFFFFF !important;
    border-color: rgb(106 215 255 / 0.55) !important;
    box-shadow: 0 0 0 1px rgb(106 215 255 / 0.35) !important;
    font-weight: 700 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpagedisabled {
    background: #1E3048 !important;
    background-color: #1E3048 !important;
    color: #9DB4CC !important;
    border-color: #3A4F6A !important;
    opacity: 0.85 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-firstpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-firstpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-firstpagedisabled::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-prevpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-prevpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-prevpagedisabled::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-nextpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-nextpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-nextpagedisabled::before,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-lastpagedisabled::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-lastpagedisabled::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-lastpagedisabled::before {
    color: #9DB4CC !important;
    opacity: 1 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-parentmsgbar,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-parentmsgbar,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-parentmsgbar,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-pagerconstant,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-pagerconstant,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-pagerconstant,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-pagecountmsg,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-pagecountmsg,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-pagecountmsg,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-pagesizes,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-pagesizes,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-pagesizes {
    color: #E3EAF2 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-pagerdropdown .e-input-group,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-pagerdropdown .e-input-group,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-pagerdropdown .e-input-group,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-pager .e-pagerdropdown input,
html[data-bomsync-theme-preview="dark"] .e-grid .e-pager .e-pagerdropdown input,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-pager .e-pagerdropdown input {
    background: #2A3A50 !important;
    background-color: #2A3A50 !important;
    color: #E3EAF2 !important;
    border-color: #4A6280 !important;
}

/*
 * Fluent wins on disabled chevrons via:
 *   .e-pager .e-firstpagedisabled { background-color: var(--color-sf-content-bg-color-disabled) }
 *   .e-pager div.e-icons.e-disable { color: var(--color-sf-icon-color-disabled) }
 * Token remap above is the primary fix; these !important rules beat Fluent specificity
 * on .e-gridpager.e-pager (both classes on the same node).
 */
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-icons.e-disable,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-icons.e-disable,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-icons.e-disable,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager div.e-icons.e-pager-default.e-disable,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager div.e-icons.e-pager-default.e-disable,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager div.e-icons.e-pager-default.e-disable,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-icons.e-disable::before,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-icons.e-disable::before,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-icons.e-disable::before {
    color: #C9D6E3 !important;
    opacity: 1 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-firstpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-firstpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-firstpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-prevpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-prevpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-prevpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-nextpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-nextpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-nextpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-lastpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-lastpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-lastpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-firstpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-firstpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-firstpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-prevpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-prevpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-prevpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-nextpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-nextpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-nextpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-lastpage,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-lastpage,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-lastpage,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-numericitem,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-numericitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-numericitem {
    background: #2A3A50 !important;
    background-color: #2A3A50 !important;
    color: #F5F7FB !important;
    border: 1px solid #4A6280 !important;
    opacity: 1 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-firstpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-firstpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-firstpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-prevpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-prevpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-prevpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-nextpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-nextpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-nextpagedisabled,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-lastpagedisabled,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-lastpagedisabled,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-lastpagedisabled {
    background: #1E3048 !important;
    background-color: #1E3048 !important;
    color: #C9D6E3 !important;
    border-color: #3A4F6A !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-gridpager.e-pager .e-currentitem,
html[data-bomsync-theme-preview="dark"] .e-grid .e-gridpager.e-pager .e-currentitem,
.bomsync-sfgrid-shell[data-theme="dark"] .e-grid .e-gridpager.e-pager .e-currentitem {
    background: #2F6690 !important;
    background-color: #2F6690 !important;
    color: #FFFFFF !important;
    border-color: rgb(106 215 255 / 0.55) !important;
}

/*
 * Items-per-page DDL popup is teleported to <body> — not under .e-pager.
 * Remapped --color-sf-flyout-bg-color is primary; hard paint beats Fluent white
 * when list text already uses remapped on-dark --color-sf-content-text-color.
 */
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl,
html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdownbase.e-popup,
html[data-bomsync-theme-preview="dark"] .e-dropdownbase.e-popup {
    background: #1A2638 !important;
    background-color: #1A2638 !important;
    color: #E3EAF2 !important;
    border-color: #3A4F6A !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-dropdownbase,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-dropdownbase,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-content,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-content,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-parent,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-parent {
    background: #1A2638 !important;
    background-color: #1A2638 !important;
    color: #E3EAF2 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdownbase .e-list-item,
html[data-bomsync-theme-preview="dark"] .e-dropdownbase .e-list-item,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl .e-list-item,
html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl .e-list-item {
    background: transparent !important;
    background-color: transparent !important;
    color: #E3EAF2 !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item.e-hover,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item.e-hover,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item.e-item-focus,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item.e-item-focus,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdownbase .e-list-item.e-hover,
html[data-bomsync-theme-preview="dark"] .e-dropdownbase .e-list-item.e-hover,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdownbase .e-list-item.e-item-focus,
html[data-bomsync-theme-preview="dark"] .e-dropdownbase .e-list-item.e-item-focus {
    background: #334A66 !important;
    background-color: #334A66 !important;
    color: #FFFFFF !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item.e-active,
html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item.e-active,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdownbase .e-list-item.e-active,
html[data-bomsync-theme-preview="dark"] .e-dropdownbase .e-list-item.e-active {
    background: #2F6690 !important;
    background-color: #2F6690 !important;
    color: #FFFFFF !important;
}

/* ----- Selection Info (Selected: N chip + trailing actions) — Dark contrast ----- */
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-selection-info__chip,
html[data-bomsync-theme-preview="dark"] .bomsync-grid-selection-info__chip,
.bomsync-sfgrid-shell[data-theme="dark"] .bomsync-grid-selection-info__chip,
.system-pallete-sfgrid[data-theme="dark"] .bomsync-grid-selection-info__chip {
    background: rgb(16 185 129 / 0.48) !important;
    border-color: rgb(167 243 208 / 0.55) !important;
    color: var(--bomsync-on-dark-text, #e8edf5) !important; /* not dark-on-green */
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-selection-info__chip .bi,
html[data-bomsync-theme-preview="dark"] .bomsync-grid-selection-info__chip .bi,
.bomsync-sfgrid-shell[data-theme="dark"] .bomsync-grid-selection-info__chip .bi,
.system-pallete-sfgrid[data-theme="dark"] .bomsync-grid-selection-info__chip .bi {
    color: var(--bomsync-on-dark-text, #e8edf5) !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-selection-info__status,
html[data-bomsync-theme-preview="dark"] .bomsync-grid-selection-info__status,
.bomsync-sfgrid-shell[data-theme="dark"] .bomsync-grid-selection-info__status,
.system-pallete-sfgrid[data-theme="dark"] .bomsync-grid-selection-info__status {
    color: var(--bomsync-sfgrid-fg, #E3EAF2) !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-selection-info__trailing .btn,
html[data-bomsync-theme-preview="dark"] .bomsync-grid-selection-info__trailing .btn,
.bomsync-sfgrid-shell[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn,
.system-pallete-sfgrid[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn,
html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-selection-info__trailing .btn-outline-secondary,
html[data-bomsync-theme-preview="dark"] .bomsync-grid-selection-info__trailing .btn-outline-secondary,
.bomsync-sfgrid-shell[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn-outline-secondary,
.system-pallete-sfgrid[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn-outline-secondary {
    color: var(--bomsync-on-dark-text, #e8edf5) !important;
    border-color: rgb(232 237 245 / 0.55) !important;
    background: rgb(232 237 245 / 0.06) !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-selection-info__trailing .btn:hover:not(:disabled),
html[data-bomsync-theme-preview="dark"] .bomsync-grid-selection-info__trailing .btn:hover:not(:disabled),
.bomsync-sfgrid-shell[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn:hover:not(:disabled),
.system-pallete-sfgrid[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn:hover:not(:disabled) {
    color: var(--bomsync-on-dark-text, #e8edf5) !important;
    border-color: rgb(232 237 245 / 0.78) !important;
    background: rgb(106 215 255 / 0.14) !important;
}

html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-selection-info__trailing .btn:disabled,
html[data-bomsync-theme-preview="dark"] .bomsync-grid-selection-info__trailing .btn:disabled,
.bomsync-sfgrid-shell[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn:disabled,
.system-pallete-sfgrid[data-theme="dark"] .bomsync-grid-selection-info__trailing .btn:disabled {
    color: var(--bomsync-sfgrid-fg-muted, #9DB4CC) !important;
    border-color: rgb(232 237 245 / 0.28) !important;
    opacity: 0.65;
}

/* ----- Group drop + captions ----- */
.e-grid .e-groupdroparea,
.e-treegrid .e-groupdroparea {
    background: var(--bomsync-sfgrid-groupdrop-bg) !important;
    color: var(--bomsync-sfgrid-groupdrop-fg) !important;
    border-color: var(--bomsync-sfgrid-border) !important;
}

.e-grid tr.e-groupcaptionrow td.e-groupcaption,
.e-grid .e-groupcaption,
.e-grid .e-groupcaption .e-grouptext,
.e-grid .my-grid-group-caption,
.e-treegrid tr.e-groupcaptionrow td.e-groupcaption {
    background: var(--bomsync-sfgrid-caption-bg) !important;
    color: var(--bomsync-sfgrid-caption-fg) !important;
    border-color: var(--bomsync-sfgrid-caption-border) !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

tr.e-groupcaptionrow td.e-groupcaption {
    width: 100% !important;
    min-width: max-content !important;
}

/* ----- Empty records ----- */
.e-grid .e-emptyrow,
.e-grid .e-emptyrow .e-rowcell,
.e-grid .e-gridcontent .e-emptyrow td {
    background: var(--bomsync-sfgrid-surface) !important;
    color: var(--bomsync-sfgrid-empty-fg) !important;
    font-size: 1rem;
    line-height: 1.5;
}

/* ----- Loading overlay host (pair with PanelNeuralBusy / DataBound pattern) -----
 * Canonical class: .bomsync-sfgrid-overlay / .bomsync-neural-busy-overlay
 * Legacy aliases (Consolidated BOM, Manage Items, BIM raw grids) inherit the same
 * Light frost / Dark navy elevated wash so captions stay legible.
 */
.bomsync-sfgrid-overlay,
.bomsync-neural-busy-overlay,
.consolidated-grid-overlay,
.manage-items-grid-overlay,
.consolidated-grid-outer > .bomsync-sfgrid-overlay,
.consolidated-grid-outer > .consolidated-grid-overlay,
.consolidated-grid-outer > .bomsync-neural-busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    min-width: 100%;
    background: var(--bomsync-sfgrid-overlay-bg) !important;
    color: var(--bomsync-sfgrid-overlay-fg) !important;
    pointer-events: none;
}

.bomsync-sfgrid-overlay__msg {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bomsync-sfgrid-overlay-fg);
    margin: 0;
}

/* PanelNeuralBusy captions inside grid overlays — never Bootstrap muted-on-frost */
.bomsync-sfgrid-overlay .bs-busy-caption__primary,
.bomsync-neural-busy-overlay .bs-busy-caption__primary,
.consolidated-grid-overlay .bs-busy-caption__primary,
.manage-items-grid-overlay .bs-busy-caption__primary,
.bomsync-sfgrid-overlay .bs-busy-caption__detail,
.bomsync-neural-busy-overlay .bs-busy-caption__detail,
.consolidated-grid-overlay .bs-busy-caption__detail,
.manage-items-grid-overlay .bs-busy-caption__detail,
.bomsync-sfgrid-overlay .text-muted,
.bomsync-neural-busy-overlay .text-muted,
.consolidated-grid-overlay .text-muted,
.manage-items-grid-overlay .text-muted {
    color: var(--bomsync-sfgrid-overlay-fg) !important;
}

/* ----- Column chooser / dialogs spawned by grid ----- */
.e-ccdlg.e-dialog,
.e-grid-popup .e-dlg-content {
    background: var(--bomsync-sfgrid-filter-bg);
    color: var(--bomsync-sfgrid-fg);
}

/* ----- Read-only cells — blue wash, darker text than former muted wash ----- */
.e-grid td.e-rowcell.col-readonly {
    background-color: var(--bomsync-sfgrid-readonly-bg) !important;
    color: var(--bomsync-sfgrid-readonly-fg) !important;
}

.e-grid td.e-rowcell.col-readonly * {
    background-color: transparent !important;
    color: inherit !important;
}

/* Person audit cell (shared BomsyncGridPersonCell) — company line readable */
.e-grid .bomsync-grid-person__company {
    color: var(--bomsync-sfgrid-fg-muted) !important;
}

.e-grid .bomsync-grid-person__name {
    color: var(--bomsync-sfgrid-fg) !important;
}