/* App overrides for @ganethra/datagrid (loaded as static CSS — not via PostCSS/Tailwind). */ /* Package hides filter/pin until header hover; keep them always discoverable on result grids. */ .gds-result-grid.ganethra-data-grid .datatable-header-cell > div > div.absolute.right-0 { pointer-events: auto; } .gds-result-grid.ganethra-data-grid .datatable-header-cell > div > div.absolute.right-0 > div { opacity: 1; } /* Deterministic screenshot/export capture: hide hover-only chrome so PNGs never depend on real cursor position or which rows happened to receive hover/focus. */ .gds-capture-mode .datatable-header-cell > div > div.absolute.right-0, .gds-capture-mode [class*="group-hover:opacity"], .gds-capture-mode [class*="group-hover:pointer-events"] { opacity: 0 !important; pointer-events: none !important; } /* * Always-visible filter/pin sit in an absolute cluster on the right. Reserve space so * the truncated column label never draws underneath those icons. */ .gds-result-grid.ganethra-data-grid .datatable-header-cell > div.flex { padding-right: 2.75rem; box-sizing: border-box; } /* * Filter popovers portal to with class "ganethra-data-grid bg-white z-50 …" on the * same node. Vendor utilities are nested as *descendants* of .ganethra-data-grid, so * bg-white / z-50 / text-neutral-900 / w-72 never apply on the popover root. */ .ganethra-data-grid[data-slot="popover-content"], .ganethra-data-grid.bg-white { background-color: #ffffff; color: #171717; z-index: 50; width: 14rem; max-width: min(14rem, calc(100vw - 1.5rem)); min-width: 12rem; padding: 0; box-sizing: border-box; } .ganethra-data-grid[data-slot="popover-content"] > div { width: 100%; max-width: 100%; box-sizing: border-box; } html.dark .ganethra-data-grid[data-slot="popover-content"], html.dark .ganethra-data-grid.bg-white, .ganethra-data-grid.gdg-theme-dark[data-slot="popover-content"], .ganethra-data-grid.gdg-theme-dark.bg-white { background-color: var(--gdg-cell-bg, #1e2229); color: #e5e7eb; } /* * Filter search field: package uses absolute icon + top-1/2/-translate-y-1/2, but those * utilities are missing from the vendored CSS. translateY(-50%) without a reliable * containing block pulls the icon upward. Lay out icon + input with flex instead. * Scope to .relative that wraps both svg and input so range/date filters are untouched. */ .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) { display: flex; align-items: center; gap: 0.375rem; position: relative; box-sizing: border-box; min-height: 1.75rem; padding-left: 0.5rem; padding-right: 0.5rem; border: 1px solid #d4d4d4; border-radius: 0.25rem; background-color: #ffffff; } html.dark .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input), .ganethra-data-grid.gdg-theme-dark[data-slot="popover-content"] .relative:has(> svg):has(> input) { border-color: var(--gdg-cell-border-color, #383f48); background-color: var(--gdg-cell-bg, #1e2229); } .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) > svg { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; flex-shrink: 0; width: 0.75rem !important; height: 0.75rem !important; margin: 0 !important; transform: none !important; pointer-events: none; } .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) > input[type="search"], .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) > input[type="text"] { flex: 1 1 auto; box-sizing: border-box; width: 100%; min-width: 0; height: 1.75rem; margin: 0; border: none !important; border-radius: 0; padding: 0 !important; line-height: 1.75rem; background: transparent; appearance: none; -webkit-appearance: none; outline: none; box-shadow: none; } .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) > input[type="search"]::-webkit-search-decoration, .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) > input[type="search"]::-webkit-search-cancel-button, .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) > input[type="search"]::-webkit-search-results-button, .ganethra-data-grid[data-slot="popover-content"] .relative:has(> svg):has(> input) > input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }