/* Web-only opt-in for primary lists, not detail/editor grids or native Forms.
   Paint plus the approved 14px data/header font only: vendor row metrics,
   frozen positioning, virtual tracks and control metrics stay intact. */
.e-grid.wfx-primary-grid {
    --primary-grid-bg: #1f1e22;
    --primary-grid-surface: #282828;
    --primary-grid-raised: #353434;
    --primary-grid-text: #f3f4f6;
    --primary-grid-muted: #b8bdc7;
    --primary-grid-border: rgba(255, 255, 255, .14);
    --primary-grid-accent: #75b9fa;
    background-color: var(--primary-grid-bg);
    border-color: var(--primary-grid-border);
}

.e-grid.wfx-primary-grid > .e-gridheader,
.e-grid.wfx-primary-grid > .e-gridheader .e-headercontent:where(:not(.e-grid .e-grid *)),
.e-grid.wfx-primary-grid > .e-gridheader .e-headercell:where(:not(.e-grid .e-grid *)),
.e-grid.wfx-primary-grid > .e-gridheader .e-detailheadercell:where(:not(.e-grid .e-grid *)) {
    background-color: var(--primary-grid-raised);
    border-color: var(--primary-grid-border);
}

/* Keep the theme's Roboto-first fallback stack. Header text has its own font-size. */
.e-grid.wfx-primary-grid > .e-gridheader .e-headercelldiv:where(:not(.e-grid .e-grid *)) {
    font-size: 14px;
    color: var(--primary-grid-muted);
}

.e-grid.wfx-primary-grid > .e-gridcontent,
.e-grid.wfx-primary-grid > .e-gridcontent > .e-content {
    background-color: var(--primary-grid-bg);
    border-color: var(--primary-grid-border);
}

/* Frozen rows also live in gridheader. Do not cross into nested grids/editors.
   Preserve all existing QueryCellInfo status fills and inline semantic colors. */
.e-grid.wfx-primary-grid > :is(.e-gridheader, .e-gridcontent) .e-rowcell:where(:not(.e-grid .e-grid *, .e-editedrow *, .e-addedrow *)) {
    font-size: 14px;
    border-color: var(--primary-grid-border);
}

.e-grid.wfx-primary-grid > :is(.e-gridheader, .e-gridcontent) .e-rowcell:where(:not(.e-grid .e-grid *, .e-editedrow *, .e-addedrow *, [class*="status-"], [class*="statusr-"], [class*="Invstatus-"], [style*="background"], [style*="color"])) {
    background-color: var(--primary-grid-surface);
    color: var(--primary-grid-text);
}

.e-grid.wfx-primary-grid > :is(.e-gridheader, .e-gridcontent) .e-row:hover > .e-rowcell:where(:not(.e-grid .e-grid *, .e-editedrow *, .e-addedrow *, [class*="status-"], [class*="statusr-"], [class*="Invstatus-"], [style*="background"], [style*="color"])) {
    background-color: var(--primary-grid-raised);
}

/* Opaque selected/frozen cells keep scrolled text from showing through.
   An inset outline distinguishes selection from hover without changing borders. */
.e-grid.wfx-primary-grid > :is(.e-gridheader, .e-gridcontent) .e-rowcell.e-selectionbackground:where(:not(.e-grid .e-grid *, .e-editedrow *, .e-addedrow *, [class*="status-"], [class*="statusr-"], [class*="Invstatus-"], [style*="background"], [style*="color"])) {
    background-color: var(--primary-grid-raised);
}

.e-grid.wfx-primary-grid > :is(.e-gridheader, .e-gridcontent) .e-rowcell.e-selectionbackground:where(:not(.e-grid .e-grid *)) {
    outline: 1px solid var(--primary-grid-accent);
    outline-offset: -1px;
}

.e-grid.wfx-primary-grid > :is(.e-gridheader, .e-gridcontent) :is(.e-rowcell, .e-headercell):is(.e-focused, .e-focus):where(:not(.e-grid .e-grid *)) {
    outline: 2px solid var(--primary-grid-accent);
    outline-offset: -2px;
}

/* Grid toolbar surface only. Button variants, disabled states and icon fonts
   retain their existing styles. Popups opt in separately below. */
.e-grid.wfx-primary-grid > .e-toolbar,
.e-grid.wfx-primary-grid > .e-toolbar > .e-toolbar-items,
.e-grid.wfx-primary-grid > .e-toolbar > .e-toolbar-items > .e-toolbar-item {
    background-color: var(--primary-grid-surface);
    border-color: var(--primary-grid-border);
}

.e-grid.wfx-primary-grid > .e-toolbar > .e-toolbar-items > .e-toolbar-item.e-separator {
    border-color: var(--primary-grid-border);
}

/* CssClass also reaches the filter trigger: require the actual popup root.
   Portal roots need their own tokens rather than inheritance from the grid.
   No typography, geometry, checkbox or button variant overrides here. */
.e-dropdown-popup.wfx-primary-filter,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg,
.e-dialog.e-ccdlg.wfx-primary-column-chooser {
    --primary-popup-surface: #282828;
    --primary-popup-raised: #353434;
    --primary-popup-text: #f3f4f6;
    --primary-popup-muted: #b8bdc7;
    --primary-popup-border: rgba(255, 255, 255, .14);
    --primary-popup-accent: #75b9fa;
    background-color: var(--primary-popup-surface);
    border-color: var(--primary-popup-border);
    color: var(--primary-popup-text);
    border-radius: 12px !important;
    box-shadow: 0 0 0 1px var(--primary-popup-border), 0 10px 26px rgba(0, 0, 0, .42);
}

/* The vendor can omit DialogInstance on first opening. Its grid-owned dialog
   still receives paint immediately; the marker covers later portaled instances. */
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg,
.e-dialog.e-ccdlg.wfx-primary-column-chooser {
    background-color: #1e1d21;
}

.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-header-content,
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-footer-content,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-header-content,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-footer-content {
    background-color: var(--primary-popup-raised);
    border-color: var(--primary-popup-border);
}

.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-header-content .e-dlg-header,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-header-content .e-dlg-header {
    color: var(--primary-popup-text);
}

.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content {
    background-color: var(--primary-popup-surface);
    color: var(--primary-popup-text);
}

/* Frame the actual input wrappers rather than merely recoloring Material underlines.
   Inset paint preserves existing widths, heights, padding and font metrics.
   Validation and disabled fields retain their native state treatment. */
/* The approved text inset must not enlarge the popup's intrinsic auto width. */
.e-dropdown-popup.wfx-primary-filter .e-input-group.e-control-wrapper input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.e-dropdown-popup.wfx-primary-filter .e-delim-view {
    text-indent: 8px;
}

.e-dropdown-popup.wfx-primary-filter :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning)),
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning)),
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning)) {
    background-color: var(--primary-popup-raised) !important;
    border-color: transparent !important;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--primary-popup-border) !important;
}

.e-dropdown-popup.wfx-primary-filter :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning)):is(.e-input-focus, :focus-within),
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning)):is(.e-input-focus, :focus-within),
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning)):is(.e-input-focus, :focus-within) {
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--primary-popup-accent), 0 0 0 2px rgba(117, 185, 250, .16) !important;
}

/* Suppress the extra Material underline without removing its nodes or changing layout. */
.e-dropdown-popup.wfx-primary-filter :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning))::before,
.e-dropdown-popup.wfx-primary-filter :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning))::after,
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning))::before,
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning))::after,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning))::before,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content :is(.e-input-group, .e-float-input):where(:not(.e-disabled, .e-error, .e-success, .e-warning))::after {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.e-dropdown-popup.wfx-primary-filter input:is(.e-input, .e-multiselect, .e-daterangepicker):where(:not(:disabled, [aria-disabled="true"], .e-disabled, .e-error, .e-success, .e-warning, .e-disabled *)),
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content input.e-input:where(:not(:disabled, [aria-disabled="true"], .e-disabled, .e-error, .e-success, .e-warning, .e-disabled *)),
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content input.e-input:where(:not(:disabled, [aria-disabled="true"], .e-disabled, .e-error, .e-success, .e-warning, .e-disabled *)) {
    color: var(--primary-popup-text) !important;
}

.e-dropdown-popup.wfx-primary-filter input:is(.e-input, .e-multiselect, .e-daterangepicker):where(:not(:disabled, .e-disabled *))::placeholder,
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content input.e-input:where(:not(:disabled, .e-disabled *))::placeholder,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content input.e-input:where(:not(:disabled, .e-disabled *))::placeholder {
    color: var(--primary-popup-muted) !important;
    opacity: 1;
}

.e-dropdown-popup.wfx-primary-filter .e-float-text:where(:not(.e-disabled *, .e-error *, .e-success *, .e-warning *)),
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content .e-float-text:where(:not(.e-disabled *, .e-error *, .e-success *, .e-warning *)),
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content .e-float-text:where(:not(.e-disabled *, .e-error *, .e-success *, .e-warning *)) {
    color: var(--primary-popup-muted) !important;
}

.e-dropdown-popup.wfx-primary-filter .e-input-focus:where(:not(.e-disabled, .e-error, .e-success, .e-warning)) > .e-float-text,
.e-dialog.e-ccdlg.wfx-primary-column-chooser > .e-dlg-content .e-input-focus:where(:not(.e-disabled, .e-error, .e-success, .e-warning)) > .e-float-text,
.e-grid.wfx-primary-grid .e-dialog.e-ccdlg > .e-dlg-content .e-input-focus:where(:not(.e-disabled, .e-error, .e-success, .e-warning)) > .e-float-text {
    color: var(--primary-popup-accent) !important;
}