/* =============================================================
   A2W list-view restyle — DO11961
   --------------------------------------------------------------
   Scoped under .main-content. Styles the XAF Blazor ListView grid:
   tint the header row (column captions) and the bottom panel
   (pager + "Page size" selector) with a frame accent tint; the
   selected row uses a lighter accent tint so it reads as a lifted
   item over the frame. A 3px accent bar on the first cell of the
   selected row is a form marker that stays visible regardless of
   accent hue coincidences.

   Real DOM facts (DevExpress 25.2.x):
   - grid root:     <dxbl-grid>.dxbl-grid
   - header row:    TR.dxbl-grid-header-row  (wraps the TH cells)
   - header cell:   TH.dxbl-grid-header
   - bottom panel:  DIV.dxbl-grid-bottom-panel.dxbl-pager-container
                    (contains page-size dropdown + pager buttons)
   - selected row:  tr.dxbl-grid-selected-row
   ============================================================= */

.main-content .dxbl-grid {
    /* Reuse the same palette logic as the detail-view layer so
       accent presets and Light/Dark switch propagate together.
       Two intensity levels:
         accent-frame (12%)    → frame rows (header, pager)
         accent-selection (6%) → selected row — lighter, "floats"
       The frame is the primary informative surface; the selected
       row is lighter so it reads as a lifted item, disambiguated
       by the 3px accent bar on its left edge. */
    --a2w-lv-accent: var(--dxds-color-surface-primary-default-rest);
    --a2w-lv-accent-frame: color-mix(in srgb, var(--a2w-lv-accent) 12%, transparent);
    --a2w-lv-accent-selection: color-mix(in srgb, var(--a2w-lv-accent) 6%, transparent);
}

/* =============================================================
   Header row + bottom panel — frame accent tint
   Header cells (<th>) carry their own background by default so
   the row's bg would be hidden; we tint the cells themselves.
   ============================================================= */
.main-content .dxbl-grid .dxbl-grid-header-row > .dxbl-grid-header {
    background-color: var(--a2w-lv-accent-frame) !important;
    color: var(--a2w-lv-accent) !important;
}

.main-content .dxbl-grid .dxbl-grid-bottom-panel {
    background-color: var(--a2w-lv-accent-frame);
    color: var(--a2w-lv-accent);
}

/* =============================================================
   Selected row — lighter accent tint + 3px accent bar on the left
   The bar (inset box-shadow on the first cell) doesn't alter row
   geometry, so no shift or reflow on selection.
   ============================================================= */
.main-content .dxbl-grid tr.dxbl-grid-selected-row {
    background-color: var(--a2w-lv-accent-selection) !important;
}

.main-content .dxbl-grid tr.dxbl-grid-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--a2w-lv-accent) !important;
}