/* QSales uses the same token-based collection theming as QCRM. Load after the vendor
   theme: its literal white table/card/list colors do not follow data-theme.
   Keep this app-local and color-only so every online/offline Card and Grid is covered
   without changing shared controls, responsive layouts, or printed documents. */
@media screen {
    /* Card-view ListViews and shared Card controls also have light vendor shells, even when their templates are themed. */
    .k-listview,
    .k-listview .k-listview-content,
    .k-card,
    .k-card .k-card-body,
    .k-card .k-card-actions {
        background-color: var(--surface-alt);
        color: var(--text-primary);
        border-color: var(--border);
    }

    /* Theme header/footer bands separately so cards remain visually grouped in both appearances. */
    .k-listview .k-listview-header,
    .k-listview .k-listview-footer,
    .k-card .k-card-header,
    .k-card .k-card-footer {
        background-color: var(--surface);
        color: var(--text-primary);
        border-color: var(--border);
    }

    /* Titles/captions inherit readable semantic colors without recoloring links or warning actions. */
    .k-card .k-card-title {
        color: var(--text-heading);
    }

    .k-card .k-card-subtitle {
        color: var(--text-secondary);
    }

    /* Loading an empty Card list must keep the dark surface while the existing spinner remains visible. */
    .k-listview .k-loading-mask .k-loading-color {
        background-color: var(--surface-alt);
    }

    /* Offline Card actions use real buttons; their warning color must win over the later neutral vendor button theme. */
    .k-button.qs-offline2-danger,
    .k-button.qs-offline2-remove {
        color: var(--qbm-danger, var(--danger));
    }

    /* Paint every nested surface, including empty, scrollable and locked bodies. */
    .k-grid,
    .k-grid .k-table,
    .k-grid .k-table-tbody,
    .k-grid .k-grid-container,
    .k-grid .k-grid-content,
    .k-grid .k-grid-content-locked,
    .k-grid .k-grid-norecords,
    .k-grid .k-grid-norecords-template,
    .k-grid .k-detail-row,
    .k-grid .k-detail-cell {
        background-color: var(--surface-alt);
        color: var(--text-primary);
        border-color: var(--border);
    }

    /* Header/filter cells can be td or th; theme the thead itself as well. */
    .k-grid .k-grid-header,
    .k-grid .k-grid-header-wrap,
    .k-grid .k-table-thead,
    .k-grid .k-table-thead .k-table-row,
    .k-grid .k-table-thead .k-table-th,
    .k-grid .k-header,
    .k-grid .k-filter-row,
    .k-grid .k-filter-row .k-table-td,
    .k-grid .k-filtercell,
    .k-grid .k-grid-header-sticky,
    .k-grid .k-grid-toolbar,
    .k-grid .k-grouping-header,
    .k-grid .k-grouping-row,
    .k-grid .k-grid-footer,
    .k-grid .k-grid-footer-wrap,
    .k-grid .k-grid-footer .k-table-td,
    .k-grid .k-grid-footer-sticky {
        background-color: var(--surface);
        color: var(--text-heading);
        border-color: var(--border);
    }

    /* Column links and sort/filter icons must stay readable on dark headers. */
    .k-grid .k-column-title,
    .k-grid .k-header .k-link,
    .k-grid .k-table-th .k-link,
    .k-grid .k-grid-filter {
        color: var(--text-heading);
    }

    /* Explicit cell fills also cover the vendor's white sticky-column styles. */
    .k-grid .k-table-tbody > .k-table-row,
    .k-grid .k-table-tbody > .k-table-row > .k-table-td {
        background-color: var(--surface-alt);
        color: var(--text-primary);
        border-color: var(--border);
    }

    /* Retain distinguishable striping without bringing back pale vendor rows. */
    .k-grid .k-table-tbody > .k-table-alt-row,
    .k-grid .k-table-tbody > .k-table-alt-row > .k-table-td {
        background-color: color-mix(in srgb, var(--surface) 50%, var(--surface-alt));
    }

    /* Hover is a subtle accent; a selected row keeps its stronger selection. */
    .k-grid .k-table-tbody > .k-table-row:is(:hover, .k-hover),
    .k-grid .k-table-tbody > .k-table-row:is(:hover, .k-hover) > .k-table-td {
        background-color: color-mix(in srgb, var(--accent) 8%, var(--surface-alt));
    }

    .k-grid .k-table-tbody > .k-table-row.k-selected,
    .k-grid .k-table-tbody > .k-table-row.k-selected > .k-table-td,
    .k-grid .k-table-tbody > .k-table-row.k-selected:is(:hover, .k-hover) > .k-table-td,
    .k-grid .k-table-tbody > .k-table-row > .k-table-td.k-selected {
        background-color: color-mix(in srgb, var(--accent) 20%, var(--surface-alt));
        color: var(--text-primary);
    }

    /* Theme pager surfaces and neutral buttons without recoloring primary actions. */
    .k-grid .k-pager,
    .k-grid .k-pager-wrap {
        background-color: var(--surface);
        color: var(--text-secondary);
        border-color: var(--border);
    }

    .k-grid .k-button-solid-base:not(.qs-button-primary),
    .k-grid .k-pager .k-link {
        background-color: var(--surface-alt);
        border-color: var(--border);
    }

    /* Keep destructive action text red and branded actions filled; only neutral controls get neutral text. */
    .k-grid :is(.k-button-solid-base, .k-button-flat-base, .k-button-outline-base):not(:where(.qs-button-primary, .qs-offline2-danger, .qs-offline2-remove)),
    .k-grid .k-pager :is(.k-button, .k-link) {
        color: var(--text-primary);
    }

    /* Delete/remove controls carry a semantic warning color, not the grid's neutral text color. */
    .k-grid .qs-offline2-danger,
    .k-grid .qs-offline2-remove {
        color: var(--qbm-danger, var(--danger));
    }

    .k-grid .k-button-solid-base:not(.qs-button-primary):is(:hover, .k-hover),
    .k-grid .k-button-flat-base:not(.qs-button-primary):is(:hover, .k-hover),
    .k-grid .k-pager .k-link:is(:hover, .k-hover) {
        background-color: color-mix(in srgb, var(--accent) 12%, var(--surface-alt));
    }

    .k-grid .k-pager .k-selected,
    .k-grid .k-pager .k-state-selected {
        background-color: var(--accent-strong);
        color: var(--accent-contrast);
        border-color: var(--accent-strong);
    }

    /* Filter fields, page-size selectors and inline editors inherit the grid theme. */
    .k-grid .k-input,
    .k-grid .k-textbox,
    .k-grid .k-picker {
        background-color: var(--surface-alt);
        color: var(--text-primary);
        border-color: var(--border);
    }

    .k-grid .k-input-inner,
    .k-grid .k-input-value-text {
        color: var(--text-primary);
    }

    .k-grid .k-input-inner::placeholder {
        color: var(--text-secondary);
        opacity: 1;
    }

    /* Keep the loading mask dark without disabling its existing spinner. */
    .k-grid .k-loading-mask .k-loading-color,
    .k-grid .k-loader-container .k-loader-container-overlay {
        background-color: var(--surface-alt);
    }
}