/* ========================================================================== customfilter.css — Custom View editor (DesktopModules/CustomFilter.ascx) Body class: body.page-custom-filter (Default.master.cs, /CustomFilter.aspx) -------------------------------------------------------------------------- CustomFilter.aspx is the "Custom View" editor, reached from the GridViewSelector toolbar on every refreshed grid page (?r=). Its main surface is `modCustomFilter` — a V1 (width=890) rendered INLINE as the page card. It is NOT a popup, so the §9.10 .modPopPnl chrome never reaches it: it renders fully legacy (navy #2D3663 title ribbon, #003366 .modInnerContainer border, slate-50 .modMain, #ddd .modFooter2). This file replicates the §9.10 / §16.12 card chrome mapped onto the V1 class names and re-skins the form body, footer buttons, and the inline schedules grid. SCOPING — the page carries SEVEN .modContainerStd cards (this editor, two ScheduleDetailModal popups, the Colors popup, and three confirm dialogs). The three confirm dialogs are rendered INSIDE modCustomFilter's DOM (their markup lives in this template's , so they sit under pnlFooter2) and are already skinned globally (components.css §9.11). Chrome rules here anchor on the editor's OWN unique id-suffixes (…_modCustomFilter_modInnerContainer / _modTitle / _pnlTitleLeft / _pnlMain / _pnlFooter2), so the structural elements never collide — the dialogs render as …_modFormChanged_* etc. The one exception is the §8 footer base rule `[id$='_pnlFooter2'] a.LinkButton`, which IS a descendant selector and so also matches the nested dialog buttons; that is harmless because §9.11's dialog rules are higher specificity (0,5,1 > 0,3,1) and re-assert every shared property with !important. The per-button colour rules here target `[id$='_lbSave/_lbDelete/_lbCancel/_lbViewSchedule/_lbAddSchedule']`, none of which the dialog buttons (lbContinueEditing / lbConfirmDeleteYes / …) match. The Colors popup (gridColorsCriteriaModal) is intentionally OUT OF SCOPE here (shared control, also used by Q88Search — deferred to its own pass). Literal hex (not var()) on border/background/button colours: these fight the legacy MainWhiteout !important shorthands and per DESIGN.md §32.2–§32.3 a var() inside a shorthand+!important either drops the next declaration or loses the cascade. Values mirror the resolved refresh tokens (slate-200 #e2e8f0, text #0f172a, label #475569/#334155, teal #0d9488 / #0f766e, destructive #dc2626 / #b91c1c). Background/border use LONGHAND, never shorthand. ========================================================================== */ /* §1 — Outer: release the 890px fixed width; full-width q88-card with 48px side gutters (§16.2). The card now FILLS the content area so the inline schedules grid (§10, server width=1239) fits in full instead of scrolling — the grid is fitted to the card width in §10. The stretched form controls (§11) fill the wider card too. margin:24px 48px keeps the left gutter aligned with every refresh page; calc(100% - 96px) is the gutter-aware full width (a plain width:100% would overflow by the 96px of margins). */ body.page-custom-filter [id$='modCustomFilter_divMod'] { /* divMod is the ModuleTemplate's single-column wrapper . width is a gutter-aware calc (not auto — an auto table shrink-wraps to its widest child; not 100% — that ignores the table's own margins and overflows). table-layout:fixed keeps the single column honouring the calc width. */ width: calc(100% - 96px) !important; max-width: none !important; table-layout: fixed !important; margin: 24px 48px !important; background-color: transparent !important; border: 0 !important; } body.page-custom-filter [id$='modCustomFilter_divMod'] > tbody > tr > td { background-color: transparent !important; border: 0 !important; padding: 0 !important; } /* §2 — Inner card: white surface, slate-200 border, 12px radius, NO shadow (page card, not a popup — §6.1 universal card-shadow rule). overflow stays visible so the criteria-pattern hint tooltips (position:absolute, negative offsets) are not clipped. */ body.page-custom-filter [id$='modCustomFilter_modInnerContainer'] { box-sizing: border-box; background-color: #ffffff !important; border: 1px solid var(--border-default) !important; border-radius: 12px !important; box-shadow: none !important; color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* §3 — Title: strip the navy ribbon -> flat header, dark Inter title. force border-box so the 28px side padding stays inside the rounded card. */ body.page-custom-filter [id$='modCustomFilter_modTitle'] { box-sizing: border-box !important; width: 100% !important; display: block !important; background-color: transparent !important; border: 0 !important; height: auto !important; padding: 22px 28px 14px 28px !important; } body.page-custom-filter [id$='modCustomFilter_pnlTitleLeft'] { float: none !important; background-color: transparent !important; color: var(--text-primary) !important; font-size: 18px !important; line-height: 28px !important; font-weight: 600 !important; padding: 0 !important; } /* the view-name part ("Edit View" / "Add New View") is a normal-weight span */ body.page-custom-filter [id$='modCustomFilter_pnlTitleLeft'] span { font-weight: 400 !important; color: var(--text-muted) !important; } /* §4 — Body */ body.page-custom-filter [id$='modCustomFilter_pnlMain'] { box-sizing: border-box !important; width: 100% !important; background-color: transparent !important; padding: 4px 28px 8px 28px !important; color: var(--text-primary); } /* legacy body labels (.NormalBold section headers + inline labels, .Normal hint) */ body.page-custom-filter [id$='modCustomFilter_pnlMain'] .NormalBold { font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 600 !important; color: var(--text-secondary) !important; } body.page-custom-filter [id$='modCustomFilter_pnlMain'] .Normal { font-family: 'Inter', sans-serif; font-size: 13px !important; color: #64748b !important; } /* "Who can see this view?" radios (RepeatLayout=Flow: input + label siblings) */ body.page-custom-filter [id$='_rblViewType'] input[type='radio'] { accent-color: var(--primary); width: 15px; height: 15px; /* The legacy markup gives each radio an asymmetric margin (3px top / 0 bottom). Under vertical-align:middle the *margin box* is centred, so the extra 3px on top drops the visible circle ~1.5-2px below its label and the row centre. Zero the vertical margins (keep the 5px/3px horizontal spacing) so the circle seats exactly on the text centre. */ margin: 0 3px 0 5px !important; vertical-align: middle !important; } body.page-custom-filter [id$='_rblViewType'] label { font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 400 !important; color: var(--text-primary) !important; margin: 0 14px 0 4px; vertical-align: middle; } /* §5 — Text inputs + textarea: the raw render native 2px inset; bring them to the §16.8 refresh control. (The criteria selects + ComboBox are already skinned by the global select/combobox rules.) */ body.page-custom-filter [id$='_txtGridViewName'], body.page-custom-filter #tblCriteria input[type='text'] { box-sizing: border-box !important; height: 36px !important; padding: 0 12px !important; background-color: #ffffff !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; font: 14px/20px 'Inter', sans-serif !important; color: var(--text-primary) !important; } body.page-custom-filter [id$='modCustomFilter_pnlMain'] textarea { box-sizing: border-box !important; background-color: #ffffff !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; padding: 8px 12px !important; font: 14px/20px 'Inter', sans-serif !important; color: var(--text-primary) !important; } body.page-custom-filter [id$='_txtGridViewName']:focus, body.page-custom-filter #tblCriteria input[type='text']:focus, body.page-custom-filter [id$='modCustomFilter_pnlMain'] textarea:focus { outline: 2px solid var(--ring-brand, #5eead4) !important; outline-offset: 1px; border-color: var(--primary) !important; } /* §6 — Available / Selected multi-select listboxes. The global select rule forces height:32px !important, collapsing these get the global teal primary skin; demote to ghost secondary so the only primary teal on the page is Save (§16.7). */ body.page-custom-filter #btnAddSelected, body.page-custom-filter #btnMoveUp, body.page-custom-filter #btnMoveDown, body.page-custom-filter #btnRemoveSelected, body.page-custom-filter #openColorCriteriasModalButton { background-color: #ffffff !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; border-radius: 8px !important; min-height: 36px !important; padding: 0 12px !important; /* Override the markup's inline width:90px — at 14px Inter + 12px side padding the longest labels ("Move Up"/"Move Down") overflowed 90px and clipped. 110px fits every label with room to spare and keeps the four stacked buttons a uniform width; nowrap stops any single-line wrap. */ width: 110px !important; white-space: nowrap !important; /* 14px Inter to match the footer ghost buttons (was 13px — looked inconsistent next to the 14px footer). text-align:center keeps the label centred in the fixed width. */ font: 500 14px/1 'Inter', sans-serif !important; text-align: center !important; cursor: pointer; box-sizing: border-box; } body.page-custom-filter #btnAddSelected:hover, body.page-custom-filter #btnMoveUp:hover, body.page-custom-filter #btnMoveDown:hover, body.page-custom-filter #btnRemoveSelected:hover, body.page-custom-filter #openColorCriteriasModalButton:hover { background-color: var(--surface-muted) !important; border-color: var(--border-strong) !important; } /* §8 — Footer: strip the #ddd gray band -> transparent flex row. Schedule actions (View Schedule(s) / Add Schedule) stay left; Cancel/Delete/Save are pushed to the right edge by margin-left:auto on the first right-group button. flex-wrap lets the inline schedules grid (§10) drop to its own line. Footer rules are deliberately high-specificity (footer-id + a.LinkButton + id-suffix) to beat the global `body.sidebar-nav a.LinkButton` teal (0,2,1). */ body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] { box-sizing: border-box !important; width: 100% !important; background-color: transparent !important; border-top: 1px solid var(--border-default) !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 28px !important; text-align: left !important; height: auto !important; } body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton { display: inline-flex !important; align-items: center; justify-content: center; height: 36px; padding: 0 16px !important; border-radius: 8px !important; font-family: 'Inter', sans-serif; font-size: 14px !important; font-weight: 500 !important; margin: 0 !important; line-height: 1; text-decoration: none; box-sizing: border-box; } /* asp:LinkButton renders   — hide so the label stays centred */ body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton > ins { display: none !important; } /* right cluster begins at Cancel */ body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbCancel'] { margin-left: auto !important; } /* Save = teal primary */ body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbSave'] { background-color: var(--primary) !important; border: 1px solid var(--primary) !important; color: #ffffff !important; } body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbSave']:hover { background-color: var(--button-primary-hover) !important; border-color: var(--button-primary-hover) !important; } /* Delete = destructive red pill (§16.7) */ body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbDelete'] { background-color: var(--red-600) !important; border: 1px solid var(--red-600) !important; color: #ffffff !important; } body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbDelete']:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; } /* Cancel + the two schedule actions = ghost secondary */ body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbCancel'], body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbViewSchedule'], body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbAddSchedule'] { background-color: #ffffff !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; } body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbCancel']:hover, body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbViewSchedule']:hover, body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] a.LinkButton[id$='_lbAddSchedule']:hover { background-color: var(--surface-muted) !important; border-color: var(--border-strong) !important; } /* §9 — Icon swaps (scoped to this page; questionSmall.png also recurs on Q88Search / CustomSearchColumns — candidate for a future global icon-swaps.css pass per §16.13). Opaque rasters are REPLACED via content:url (masking leaks the pixmap — §32.5); the slate / red is baked into the inline SVG. */ /* Criteria-pattern help "?" -> slate-500 Lucide circle-help */ body.page-custom-filter [id$='modCustomFilter_pnlMain'] img[src$='/questionSmall.png'] { content: url("data:image/svg+xml;utf8,") !important; width: 16px !important; height: 16px !important; vertical-align: middle; } /* Required/invalid validator icon -> destructive Lucide triangle-alert */ body.page-custom-filter [id$='modCustomFilter_pnlMain'] img.ValImage, body.page-custom-filter [id$='modCustomFilter_pnlMain'] img[src$='/alertVal.png'] { content: url("data:image/svg+xml;utf8,") !important; width: 16px !important; height: 16px !important; vertical-align: middle; } /* §10 — Inline "View Schedule(s)" grid (#tblSchedules holds the DevExpress ASPxGridView #grd). It is a direct child of the footer flex; drop it to its own full-width line below the buttons and let it scroll horizontally inside the card. Re-skin the navy header -> slate, the empty row, and the pager. */ body.page-custom-filter [id$='modCustomFilter_pnlFooter2'] > #tblSchedules { flex: 0 0 100%; width: 100% !important; /* flex items default to min-width:auto and refuse to shrink below their content; min-width:0 lets the table take the line width. The grid is fitted to this width below, so overflow-x is a safety net for very narrow viewports rather than the normal state. */ min-width: 0 !important; order: 10; display: block; margin-top: 16px; overflow-x: auto; } body.page-custom-filter #tblSchedules .dxgvControl, body.page-custom-filter #tblSchedules .dxgvTable { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; border-color: var(--border-default) !important; } /* Fit the grid to the (now full-width) card instead of scrolling: #grd carries an inline width:1239px; release it to 100% so its DXMainTable (table-layout: fixed, width:100%) compresses the columns to the container — every column is visible with no horizontal scrollbar, and the grid simply fills a wider card on larger viewports. Header + data share one table, so they stay aligned. */ body.page-custom-filter #tblSchedules table[id$='_grd'], body.page-custom-filter #tblSchedules #grd { width: 100% !important; } /* Header band — matches the canonical grid.css ASPxGridView header: #f5f5f5 muted band, 11px/16px padding. */ body.page-custom-filter #tblSchedules .dxgvHeader { background-color: #f5f5f5 !important; background-image: none !important; /* Column dividers must NOT run top-to-bottom. The DevExpress default paints border-left/right on every header cell, drawing a full-height line across the 40px band. Drop them and keep only the header's bottom rule (canonical grid.css §header has no vertical header dividers); a SHORT separator at text height is painted by the + .dxgvHeader::before rule below. */ border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid #e2e8f0 !important; height: 40px !important; padding: 11px 16px !important; text-align: left; position: relative; } /* Short vertical divider between adjacent header columns — text height only, vertically centred. Sits on the left edge of every header cell except the first, so it reads as a separator BETWEEN columns. */ body.page-custom-filter #tblSchedules .dxgvHeader + .dxgvHeader::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background-color: #e2e8f0; } /* Header TEXT must match grid.css exactly: 14px/20px Inter, weight 500, slate-900. The caption is a sort-link + a
that DXR.axd hard-sets to `font: tahoma 12px` and `color:#fff` (legacy navy-header carryover); a bare `.dxgvHeader` rule leaves the label at 12px white. Hit `.dxgvHeader *` to beat the per-element DXR.axd font (same technique as grid.css §header). NOTE: the bare `.dxgvHeader` is deliberately NOT in this group — this rule sets `background-color: transparent` for the inner caption cells, and at equal specificity the later rule wins, so listing `.dxgvHeader` here would override the #f5f5f5 band above and paint the header white. Descendants only. */ body.page-custom-filter #tblSchedules .dxgvHeader *, body.page-custom-filter #tblSchedules .dxgvHeader a, body.page-custom-filter #tblSchedules .tblColHeader td a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: #0f172a !important; background-color: transparent !important; text-decoration: none !important; letter-spacing: 0; } body.page-custom-filter #tblSchedules .dxgvHeader a:hover { color: var(--text-link) !important; } /* Data + empty rows — grid.css values: 14px/20px Inter, weight 400, slate-900. `*` beats DXR.axd's per-cell tahoma the same way the header does. */ body.page-custom-filter #tblSchedules .dxgvDataRow td, body.page-custom-filter #tblSchedules .dxgvDataRow td *, body.page-custom-filter #tblSchedules .dxgv td { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; } body.page-custom-filter #tblSchedules .dxgvEmptyDataRow, body.page-custom-filter #tblSchedules .dxgvEmptyDataRow * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px !important; color: #64748b !important; text-align: center; padding: 16px !important; } /* Pager — port the canonical grid.css §8 pager LAYOUT onto the schedules grid so its pagination matches every other refreshed grid. The schedules grid renders the IDENTICAL GridPager.ascx markup (`dxgvPagerBottomPanel GridPager`, Img-Pgr arrow sprites, input#txtPage, select#dlGridPageSizes, the same _tdExtraPagerText / _tdPagerButtons / _tdPageSizeOptions cells), but grid.css scopes its §8 rules — AND its --q88-grid-* tokens — to `body.page-grid`, which this page is NOT, so the canonical skin never reaches it and the pager renders legacy: tiny sprite arrows + "Page [N] of M" on the LEFT, "Show [N ▾]" on the RIGHT. The canonical layout is the reverse: "Show [N ▾]" LEFT, "‹ Previous / page-chip / Next ›" RIGHT, First/Last hidden. Per this file's convention (§10 already replicates grid.css header/row values with literal hex rather than referencing the body.page-grid-scoped tokens), the ports below use literal hex mirroring the resolved tokens (grid.css L13-24): fg #0f172a, muted #f5f5f5, muted-fg #475569, border #e2e8f0, card #ffffff, primary #0d9488. Anchored on `.GridPager` to mirror the canonical selectors. */ body.page-custom-filter #tblSchedules .GridPager { background-color: #f5f5f5 !important; background-image: none !important; border-top: 1px solid #e2e8f0 !important; padding: 6px 16px !important; min-height: 48px; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #0f172a; font-size: 14px; } body.page-custom-filter #tblSchedules .GridPager > div { padding: 0 !important; } body.page-custom-filter #tblSchedules .GridPager table { border: 0 !important; border-collapse: collapse !important; background: transparent !important; } body.page-custom-filter #tblSchedules .GridPager table td { background: transparent !important; padding: 0 !important; border: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; vertical-align: middle !important; color: #475569; white-space: nowrap; } /* Split-row flex: "Show [N ▾]" pushed LEFT (order:-1 + margin-right:auto), Prev/page/Next pushed RIGHT. The GridPager.ascx markup emits the size cell AFTER the buttons cell, so the flex re-order restores the canonical order. */ body.page-custom-filter #tblSchedules .GridPager > div > table > tbody > tr { display: flex !important; align-items: center !important; width: 100% !important; } body.page-custom-filter #tblSchedules .GridPager > div > table > tbody > tr > td[id*='_tdExtraPagerText'] { width: 0 !important; padding: 0 !important; } body.page-custom-filter #tblSchedules .GridPager > div > table > tbody > tr > td[id*='_tdPageSizeOptions'] { order: -1 !important; margin-right: auto !important; width: auto !important; text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-custom-filter #tblSchedules .GridPager > div > table > tbody > tr > td[id*='_tdPagerButtons'] { width: auto !important; text-align: right !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-custom-filter #tblSchedules .GridPager > div > table > tbody > tr > td[id*='_tdPagerText'] { width: auto !important; padding-right: 12px !important; text-align: right !important; } body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPagerButtons'] > table { display: inline-table !important; } body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPagerButtons'] > table td { padding: 0 2px !important; } /* Arrow sprites -> bordered text pills (base Img-Pgr; Prev/Next refined below). */ body.page-custom-filter #tblSchedules .GridPager a.Img-Pgr { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; height: 32px !important; min-width: 36px; padding: 0 10px !important; background-image: none !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; color: #0f172a !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-decoration: none !important; box-sizing: border-box !important; vertical-align: middle; text-indent: 0 !important; transition: background-color 0.12s ease, border-color 0.12s ease; } body.page-custom-filter #tblSchedules .GridPager a.Img-Pgr:hover { background-color: #f5f5f5 !important; border-color: #cbd5e1 !important; } /* Hide First + Last (and their wrapper TDs, so no phantom   whitespace). */ body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrFirst'], body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrLast'], body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPagerButtons'] > table td:has(> a[class*='Img-PgrFirst']), body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPagerButtons'] > table td:has(> a[class*='Img-PgrLast']) { display: none !important; } /* Prev/Next text labels via ::before/::after ("‹ Previous" / "Next ›"). */ body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrPrev']::before { content: '‹'; margin-right: 6px; font-size: 16px; line-height: 1; color: #475569; } body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrPrev']::after { content: 'Previous'; } body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrNext']::before { content: 'Next'; } body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrNext']::after { content: '›'; margin-left: 6px; font-size: 16px; line-height: 1; color: #475569; } /* Prev/Next = ghost pills (transparent until hover). */ body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrPrev'], body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrNext'] { border: 0 !important; background: transparent !important; height: 36px !important; padding: 0 12px !important; border-radius: 8px !important; color: #0f172a !important; font-weight: 500 !important; } body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrPrev']:hover, body.page-custom-filter #tblSchedules .GridPager a[class*='Img-PgrNext']:hover { background: #e5e7eb !important; border: 0 !important; color: #0f172a !important; } /* Disabled First/Prev/Next/Last (on page 1 / empty grid). */ body.page-custom-filter #tblSchedules .GridPager a.Img-PgrFirstDis, body.page-custom-filter #tblSchedules .GridPager a.Img-PgrPrevDis, body.page-custom-filter #tblSchedules .GridPager a.Img-PgrNextDis, body.page-custom-filter #tblSchedules .GridPager a.Img-PgrLastDis { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Page input = active-page chip (36x36 white, 1px border, rounded). */ body.page-custom-filter #tblSchedules .GridPager input#txtPage, body.page-custom-filter #tblSchedules .GridPager input[id*='txtPage'] { width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 4px; border: 1px solid #e5e5e5 !important; border-radius: 8px !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 500 !important; color: #0f172a !important; text-align: center; box-sizing: border-box !important; background: #ffffff !important; } body.page-custom-filter #tblSchedules .GridPager input#txtPage:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary) !important; } /* Hide the unused extra-pager-text / pager-text slots (typically empty). */ body.page-custom-filter #tblSchedules .GridPager td[id*='_tdExtraPagerText'], body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPagerText'] { display: none !important; } /* "Page" / "of N" text around the input — muted, matching the chip layout. */ body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPagerButtons'] > table > tbody > tr > td:nth-child(3) { color: #475569 !important; font-size: 14px !important; padding: 0 4px !important; } /* Rows-per-page selector: "Show [15 ▾] results per page" (grid.css §8c). */ body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPageSizeOptions'] .grdRecordsToShow { display: inline-flex !important; align-items: center; gap: 6px; color: #475569 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; line-height: 20px; white-space: nowrap; } body.page-custom-filter #tblSchedules .GridPager select#dlGridPageSizes, body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPageSizeOptions'] select { height: 32px; min-width: 64px; padding: 0 28px 0 10px !important; margin: 0 !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; background-color: #ffffff !important; background-image: linear-gradient(45deg, transparent 50%, #475569 50%), linear-gradient(-45deg, transparent 50%, #475569 50%) !important; background-position: right 12px center, right 7px center !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #0f172a !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; cursor: pointer; box-sizing: border-box; transition: background-color 0.12s ease, border-color 0.12s ease; } body.page-custom-filter #tblSchedules .GridPager select#dlGridPageSizes:hover, body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPageSizeOptions'] select:hover { background-color: #f5f5f5 !important; border-color: #cbd5e1 !important; } body.page-custom-filter #tblSchedules .GridPager select#dlGridPageSizes:focus, body.page-custom-filter #tblSchedules .GridPager td[id*='_tdPageSizeOptions'] select:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary) !important; } /* §11 — Stretch the top row (View Name + radios) and the column selectors to fill the card. The legacy form-layout
has no width, so it shrink-wraps to ~745px inside a ~922px card body: the 250px View Name input and the two 250px listboxes sit short with dead space on the right. Make the table fill the card, grow the input beside its fixed 92px "View Name:" label, and grow both listboxes to fill their cells. Table-cell semantics are preserved — no display:flex on a
(that drops the cell out of the table model, risky with this 5-column mismatched-colspan layout). SCOPING: anchor on `> tbody > tr > td > select[…_ddlColumnListAvailable]` — the listbox is a DIRECT cell child only in THIS inner form table. A `:has()` on the View Name input would also match the OUTER divMod card table (descendant axis), which §1 sizes with table-layout:fixed; this direct-child path can't. */ body.page-custom-filter table:has(> tbody > tr > td > select[id$='_ddlColumnListAvailable']) { width: 100% !important; } /* View Name input fills its colspan-3 cell beside the 92px bold label (92 + nbsp + a little slack ≈ 110px reserved). */ body.page-custom-filter input[id$='_txtGridViewName'] { width: calc(100% - 110px) !important; max-width: 100% !important; vertical-align: middle; } /* The two column-selector cells take the bulk of the row; listboxes + the Available autocomplete filter fill them. */ body.page-custom-filter td[id$='_availColumnTD'], body.page-custom-filter td:has(> select[id$='_ddlColumnListSelected']) { width: 42% !important; } body.page-custom-filter select[id$='_ddlColumnListAvailable'], body.page-custom-filter select[id$='_ddlColumnListSelected'] { width: 100% !important; } body.page-custom-filter td[id$='_availColumnTD'] > input { width: 100% !important; box-sizing: border-box; } /* §12 — "Specify Criteria to Filter Records" table cells render at the legacy 12px; bump them to the 14px refresh body size (slate-900) to match the rest of the form. Scope to DIRECT cells (`> tbody > tr > td`) so the nested date-picker calendar + ComboBox widgets inside a value cell keep their own 12px sizing — forcing 14px on those would break their fixed-size layout. The field/operator/ value