/* ============================================================================= ibinderbook-grid.css - global, conservative token treatment for Telerik RadGrid. Modernizes the grid CHROME (header, borders, hover/selected, pager/footer) on every RadGrid app-wide with NO markup changes - including the bare legacy grids that have no .ibb-grid-list / .pas-list-grid wrapper. Deliberately does NOT force base row backgrounds: pages that color individual cells for status (e.g. a red "overdue" cell) keep their colors. The modern wrapper pages add the fuller white-rows + zebra treatment on top via their own more-specific scoped rules. Telerik injects its skin CSS into at render time. We win the cascade with !important on color properties (Telerik skin rules are not !important), while keeping selector specificity LOW so the modern scoped rules (which carry an extra wrapper class, or load later per-page) still take precedence on the pages that already have a tailored look. Load after bootstrap + design-tokens.css (wired in the masters). ========================================================================== */ @import url("design-tokens.css"); /* ---------- borders / frame ---------- */ .RadGrid, .RadGrid .rgMasterTable, .RadGrid .rgRow td, .RadGrid .rgAltRow td, .RadGrid .rgHeader { border-color: var(--ibb-border) !important; } /* ---------- header (the biggest "default skin" tell) ---------- */ .RadGrid .rgHeader { background-color: var(--ibb-surface-alt) !important; color: var(--ibb-text-secondary) !important; font-weight: 600 !important; } .RadGrid .rgHeader a { color: var(--ibb-text-secondary) !important; } /* Zebra (white rows + faint alt-row tint) was trialed and removed: too subtle to notice, and the !important on row cells risked overriding per-cell status colors on other grids. The brand-aware hover/selected below carries the row feedback. */ /* ---------- hover + selected (faint, brand-aware via color-mix) ---------- */ .RadGrid .rgRow:hover td, .RadGrid .rgAltRow:hover td, .RadGrid .rgHoveredRow td { background-color: color-mix(in srgb, var(--ibb-primary) 7%, var(--ibb-surface)) !important; } .RadGrid .rgSelectedRow td { background-color: color-mix(in srgb, var(--ibb-primary) 12%, var(--ibb-surface)) !important; color: var(--ibb-text) !important; } /* ---------- pager + footer ---------- */ .RadGrid .rgPager, .RadGrid .rgPager td { background-color: var(--ibb-surface) !important; color: var(--ibb-text-secondary) !important; border-color: var(--ibb-border) !important; } .RadGrid .rgFooter td { background-color: var(--ibb-surface-alt) !important; color: var(--ibb-text) !important; font-weight: 600 !important; border-color: var(--ibb-border) !important; }