/* ════════════════════════════════════════════════════════════════════════ COMMITTEE SEARCH WINDOW — CFTxnLkup Loaded only by pages that host the CommitteeSearch View Component (TransactionSearchByEntity, future AdvancedSearch). These rules cannot use Razor CSS isolation because the Kendo Window is appended to at runtime, outside any page's b-* scope marker. Loaded after Kendo theme stylesheets (see _Layout.cshtml) so they win the cascade for matching specificity. All selectors are scoped to .comm-search-panel / .k-window[aria-labelledby*="commSearchWindow"] / named button classes & ids to limit blast radius. !important is retained where Kendo's widget initialisation injects inline styles that would otherwise take precedence. ════════════════════════════════════════════════════════════════════════ */ /* ── Window positioning — flush-right, full viewport height ──────────────── */ /* Kendo wraps the window content in a .k-window element — target by aria-labelledby which includes the window's Name ("commSearchWindow"). */ html.comm-search-scroll-lock, body.comm-search-scroll-lock { overflow-y: hidden !important; overscroll-behavior-y: none; } .k-window[aria-labelledby*="commSearchWindow"] { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; height: 100vh !important; height: 100dvh !important; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; transform: none !important; } /* Desktop: window takes 40% width */ @media (min-width: 768px) { .k-window[aria-labelledby*="commSearchWindow"] { width: 40% !important; } } /* Mobile: window takes full width, overlaying the page */ @media (max-width: 767px) { .k-window[aria-labelledby*="commSearchWindow"] { width: 100% !important; } } /* Desktop: main content shrinks to left 60% when committee search is open */ @media (min-width: 768px) { .ibox.float-e-margins.comm-search-open { max-width: 60%; transition: max-width 0.3s ease; } } /* Default transition for smooth close animation */ .ibox.float-e-margins { transition: max-width 0.3s ease; } /* ── WCAG AA contrast overrides ───────────────────────────────────────────── Kendo's Bootstrap 5 theme renders gray text on a gray (#dddddd) window background — all fail 4.5:1. Setting the window content background to white gives sufficient contrast for all inherited text colours. Grid header/pager sections have their own backgrounds so those are also reset here. */ .k-window[aria-labelledby*="commSearchWindow"] .k-window-content { flex: 1 1 auto; min-height: 0; background-color: #ffffff !important; color: #ffffff !important; overflow-x: hidden; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .k-window[aria-labelledby*="commSearchWindow"] .k-grid-content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .k-window[aria-labelledby*="commSearchWindow"] .k-grid-content, .k-window[aria-labelledby*="commSearchWindow"] .k-grid-norecords, .k-window[aria-labelledby*="commSearchWindow"] .k-pager { background-color: #ffffff !important; color: #1a1a1a !important; } .k-window[aria-labelledby*="commSearchWindow"] .k-grid-header { background-color: #c4e2f7 !important; color: #1a1a1a !important; } .k-window[aria-labelledby*="commSearchWindow"] .k-column-title, .k-window[aria-labelledby*="commSearchWindow"] .k-pager *, .k-window[aria-labelledby*="commSearchWindow"] .k-input-value-text, .k-window[aria-labelledby*="commSearchWindow"] .form-control, .k-window[aria-labelledby*="commSearchWindow"] .form-check-label, .k-window[aria-labelledby*="commSearchWindow"] .form-label { color: #1a1a1a !important; } .k-window[aria-labelledby*="commSearchWindow"] .comm-search-description { color: #1a1a1a !important; } /* ── Panel layout ──────────────────────────────────────────────────────── */ /* Panel content area fills available height */ .comm-search-panel { display: flex; flex-direction: column; height: 100%; min-height: 100%; padding: 10px; box-sizing: border-box; } /* Checkbox row — flex so items wrap and stay vertically centred across lines */ .comm-search-panel .comm-check-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } /* ── "Search In" fieldset — remove default chrome (WCAG 1.3.1 — defect 657) ── */ .comm-search-in-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .comm-search-in-fieldset > legend { font-size: inherit; float: none; width: auto; padding: 0; margin-bottom: 0.25rem; } /* ── Panel buttons — WCAG AA contrast overrides ───────────────────────────── Inline styles on the buttons in the Razor page are the authoritative source; these rules serve as a fallback. */ #btnCommSearchSubmit, #btnCommSearchSubmit:hover, #btnCommSearchSubmit:focus, #btnCommSearchSubmit:active, #btnCommSelect, #btnCommSelect:hover, #btnCommSelect:focus, #btnCommSelect:active { background-color: #0e6aa8 !important; border-color: #0e6aa8 !important; color: #ffffff !important; opacity: 1 !important; } #btnCommSearchSubmit:disabled, #btnCommSearchSubmit[disabled], #btnCommSelect:disabled, #btnCommSelect[disabled] { background-color: #7fb5d4 !important; border-color: #7fb5d4 !important; color: #ffffff !important; opacity: 0.7 !important; cursor: not-allowed; } /* Results grid fills remaining space */ #commSearchResultsContainer { /* Keep a usable grid viewport when enlarged text consumes the fixed-height window. The window content then scrolls as a whole instead of collapsing this flex item to zero height. */ flex: 1 0 12rem; min-height: 12rem; min-width: 0; /* Kendo's .k-grid-content owns the results scroll position. Avoid creating a second vertical scrollbar around it when the window has room. */ overflow: hidden; overscroll-behavior: contain; border-bottom: 1px solid #e5e5e5 !important; } /* Action buttons at bottom */ .comm-search-actions { padding: 10px 0; border-top: 1px solid #e5e5e5; } /* Ensure grid rows have visible height for text */ #commSearchResultsContainer .k-grid td { padding: 8px 10px; font-size: 13px; line-height: 1.4; white-space: normal; } /* Row separators — subtle dark borders on each data row */ #commSearchResultsContainer .k-grid-table tr > td, #commSearchResultsContainer .k-grid-table tr > .k-table-td, #commSearchResultsContainer .k-table-row > td, #commSearchResultsContainer .k-table-row > .k-table-td { border-bottom: 1px solid #e5e5e5 !important; } /* Selected row border repair — Kendo's selected-state styling can suppress the top/left edges of the blue highlight box in this popup grid. Re-apply those edges for both legacy and newer Kendo row markup without changing the row selection behavior. */ #commSearchResultsContainer .k-grid-table tr.k-selected > td, #commSearchResultsContainer .k-grid-table tr.k-selected > .k-table-td, #commSearchResultsContainer .k-table-row.k-selected > td, #commSearchResultsContainer .k-table-row.k-selected > .k-table-td { border-top: 1px solid #7fb5d4 !important; } #commSearchResultsContainer .k-grid-table tr.k-selected > td:first-child, #commSearchResultsContainer .k-grid-table tr.k-selected > .k-table-td:first-child, #commSearchResultsContainer .k-table-row.k-selected > td:first-child, #commSearchResultsContainer .k-table-row.k-selected > .k-table-td:first-child { border-left: 1px solid #7fb5d4 !important; } /* ── Row selection indicator (WCAG 1.4.1 — defect 662) ────────────────── Radio/checkbox in each row provides a non-color indication of selection. Checked state is toggled by JS when the Kendo Grid selection changes. */ .comm-select-indicator { text-align: center; vertical-align: middle; padding: 0 !important; } .comm-row-radio, .comm-row-check { display: block; width: 16px; height: 16px; margin: 0 auto; accent-color: #0e6aa8; } .comm-row-radio:focus, .comm-row-radio:focus-visible, .comm-row-check:focus, .comm-row-check:focus-visible, .comm-row-radio:active, .comm-row-check:active { outline: 2px solid #1a1a1a !important; outline-offset: -2px !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } /* Ensure placeholder text meets WCAG AA contrast (4.5:1 on white) */ #commSearchName::placeholder { color: #595959; } #commSearchResultsContainer .k-grid th { padding: 8px 10px; } /* ── Form controls inside the panel ────────────────────────────────────── */ /* Text input for the committee name field — #1a1a1a on #ffffff = 17.6:1 */ .comm-search-panel .form-control { color: #1a1a1a !important; background-color: #ffffff !important; border-color: #909090 !important; } /* Kendo Grid column header titles ("ID", "Committee Name") — #1a1a1a on #dadada = 12.5:1 */ .comm-search-panel .k-column-title { color: #1a1a1a !important; } /* "No committees found" no-records row — #1a1a1a on #ffffff = 17.6:1 */ .comm-search-panel .k-grid-norecords { color: #1a1a1a !important; background-color: #ffffff !important; } /* Kendo Pager: page-size dropdown text and "items per page" label — #1a1a1a on #ffffff = 17.6:1 */ .comm-search-panel .k-pager { background-color: #ffffff !important; color: #1a1a1a !important; } .comm-search-panel .k-pager *, .comm-search-panel .k-input-value-text { color: #1a1a1a !important; } /* Mobile: center the grid pager buttons. The Kendo pager is a flex row that left-aligns its nav controls by default, leaving them hugging the left edge on narrow screens. Center them so the pager reads balanced in the full-width mobile window. Desktop layout is unaffected. */ @media (max-width: 767px) { .k-window[aria-labelledby*="commSearchWindow"] .k-window-content { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .comm-search-panel .k-pager { justify-content: center; /* Let the page-size selector wrap to a second line instead of being clipped/hidden when the pager content exceeds the narrow window. */ flex-wrap: wrap; row-gap: .25rem; } /* Kendo assigns the page-number strip a 300px width when responsive mode is disabled. Constrain that strip to the pager so it cannot position the navigation buttons outside the visible window. */ .comm-search-panel .k-pager .k-pager-numbers-wrap { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; max-width: 100%; overflow-x: auto; justify-content: center; } .comm-search-panel .k-pager .k-pager-nav { flex: 0 0 30px; min-width: 30px; } /* Guarantee the "items per page" selector stays visible on mobile even if Kendo's adaptive logic tries to hide it. Higher specificity + !important beats Kendo's k-hidden/inline display:none. */ .comm-search-panel .k-pager .k-pager-sizes { display: inline-flex !important; margin-left: 0; } .comm-search-panel { padding: 6px; } .comm-search-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .comm-search-actions > * { margin-left: 0 !important; } .comm-search-description { margin-bottom: 0.5rem !important; font-size: 0.92rem; line-height: 1.25; } .comm-search-form { margin-bottom: 0.25rem !important; } .comm-search-in-fieldset { margin-bottom: 0.25rem !important; } .comm-search-panel .mb-2 { margin-bottom: 0.25rem !important; } .comm-search-panel .k-grid-header th, .comm-search-panel .k-grid td { padding-top: 4px; padding-bottom: 4px; } #commSearchResultsContainer .k-grid td { font-size: 12px; line-height: 1.25; } } /* At the narrowest effective layout widths, the grid table already fits its container. The remaining truncation comes from Kendo's cell ellipsis and centered pager children, so reflow those contents without changing the table width or grid sizing behavior used at ordinary mobile widths. */ @media (max-width: 360px) { /* At the high-zoom viewport measured on Android, the panel can be taller than the window. Restore an outer escape scroll only where that space constraint is real; ordinary desktop and mobile use the grid scrollbar. */ #commSearchResultsContainer { overflow: auto; } #commSearchResultsContainer .k-grid-header th[data-field="OrgName"], #commSearchResultsContainer .k-grid-content td[data-field="OrgName"], #commSearchResultsContainer .comm-name-cell { white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; word-break: break-word; text-overflow: clip; } #commSearchResultsContainer .k-grid-header th[data-field="OrgName"] .k-column-title { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; text-overflow: clip; } .comm-search-panel .k-pager { justify-content: flex-start; align-content: flex-start; } .comm-search-panel .k-pager .k-pager-numbers-wrap { justify-content: flex-start; } .comm-search-panel .k-pager .k-pager-sizes, .comm-search-panel .k-pager .k-pager-info { flex: 1 1 100%; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Keep page-size selection available at high zoom, but remove only the nonessential total-items status to recover vertical space. */ .comm-search-panel .k-pager .k-pager-sizes { display: inline-flex !important; flex: 0 0 4rem; width: 4rem; min-width: 4rem; max-width: 4rem; /* Kendo renders the "items per page" caption as a text node in this container. Hide that caption at the extreme narrow width while restoring the control's own font size below. */ font-size: 0; } .comm-search-panel .k-pager .k-pager-sizes .k-dropdownlist { flex: 0 0 4rem; width: 4rem !important; min-width: 4rem; font-size: 1rem; } .comm-search-panel .k-pager .k-pager-sizes .k-input-value-text { flex: 0 0 auto; min-width: 1.5rem; width: auto; font-size: 1rem; } .comm-search-panel .k-pager .k-pager-info { display: none !important; } /* Preserve the complete search header at high zoom while returning only excess vertical spacing to the results area. */ .comm-search-description { margin-bottom: .25rem !important; line-height: 1.1; } .comm-search-form > .mb-2, .comm-search-form > .mb-2 > .mb-2 { margin-bottom: .15rem !important; } .comm-search-form .form-label { margin-bottom: .15rem; } .comm-search-panel .comm-check-group { row-gap: 0; } .comm-search-form > .mb-3.text-center { margin-bottom: .15rem !important; } } /* Search button — custom class avoids Kendo Bootstrap theme rules targeting .btn-primary. #ffffff on #0e6aa8 = 5.65:1 */ .comm-search-btn, .comm-search-btn:hover, .comm-search-btn:focus, .comm-search-btn:active { background-color: #0e6aa8 !important; border-color: #0e6aa8 !important; color: #ffffff !important; } .comm-search-btn:disabled, .comm-search-btn[disabled] { background-color: #7fb5d4 !important; border-color: #7fb5d4 !important; color: #ffffff !important; opacity: 0.7 !important; cursor: not-allowed; } /* Cancel button — #ffffff on #595959 = 7.0:1 */ .comm-cancel-btn, .comm-cancel-btn:hover, .comm-cancel-btn:focus, .comm-cancel-btn:active { background-color: #595959 !important; border-color: #595959 !important; color: #ffffff !important; } /* ── Close (X) button — WCAG 1.4.11 (defect 654) ─────────────────────────── Hover: dark background so the X icon has 3:1+ contrast against it. Focus: solid dark outline, Kendo's own box-shadow suppressed. Selectors cover .k-window-action class AND direct button/a targeting so the rule fires regardless of Kendo version or element type. */ /* Hover — #595959 bg, white icon: #fff on #595959 = 7.0:1 ✓ */ .k-window[aria-labelledby*="commSearchWindow"] .k-window-action:hover, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action.k-hover, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar button:hover, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar a:hover { background-color: #595959 !important; color: #ffffff !important; } /* Icon fill on hover — SVG paths inherit color but fill must also be forced */ .k-window[aria-labelledby*="commSearchWindow"] .k-window-action:hover .k-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action:hover .k-svg-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action:hover .k-svg-icon path, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action.k-hover .k-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action.k-hover .k-svg-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action.k-hover .k-svg-icon path, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar button:hover .k-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar button:hover .k-svg-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar button:hover .k-svg-icon path, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar a:hover .k-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar a:hover .k-svg-icon, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar a:hover .k-svg-icon path { color: #ffffff !important; fill: #ffffff !important; } /* Focus — #1a1a1a outline, Kendo box-shadow cleared: #1a1a1a on any light bg ≥17:1 ✓ */ .k-window[aria-labelledby*="commSearchWindow"] .k-window-action:focus, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action:focus-visible, .k-window[aria-labelledby*="commSearchWindow"] .k-window-action.k-focus, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar button:focus, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar button:focus-visible, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar a:focus, .k-window[aria-labelledby*="commSearchWindow"] .k-window-titlebar a:focus-visible { outline: 3px solid #1a1a1a !important; outline-offset: 2px !important; box-shadow: none !important; } /* ── Pager focus indicators (WCAG 1.4.11 — defect 660) ───────────────── Page number, next/prev buttons, and items-per-page dropdown inside the committee search panel show a visible 3:1+ contrast focus ring. */ .comm-search-panel .k-pager .k-button:focus, .comm-search-panel .k-pager .k-button:focus-visible, .comm-search-panel .k-pager .k-pager-nav:focus, .comm-search-panel .k-pager .k-pager-nav:focus-visible, .comm-search-panel .k-pager .k-dropdownlist:focus-within, .comm-search-panel .k-pager input:focus, .comm-search-panel .k-pager .k-input-inner:focus { outline: 3px solid #1a1a1a !important; outline-offset: -2px; }