/* ============================================================================ * Syncfusion dark-mode overrides * The bootstrap5-dark theme ships near-black surfaces; remap them to our * --s2c-card-bg palette so grids, tabs, inputs, dropdowns and the PDF viewer * blend with the rest of the page in dark mode. * ============================================================================ */ /* ---- Grid ---- */ [data-bs-theme="dark"] .e-grid, [data-bs-theme="dark"] .e-grid .e-gridheader, [data-bs-theme="dark"] .e-grid .e-gridcontent, [data-bs-theme="dark"] .e-grid .e-gridfooter, [data-bs-theme="dark"] .e-grid .e-gridpager, [data-bs-theme="dark"] .e-grid .e-content { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Header: darker purple, distinct from rows; the translucent --surface-alt reads grey against the navy card surface in dark mode. */ [data-bs-theme="dark"] .e-grid .e-gridheader, [data-bs-theme="dark"] .e-grid .e-headercontent, [data-bs-theme="dark"] .e-grid .e-headercell { background: color-mix(in oklab, var(--s2c-card-bg) 72%, black) !important; color: var(--text-muted) !important; border-color: var(--border) !important; } [data-bs-theme="dark"] .e-grid .e-rowcell { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Altrow striping — subtle primary tint over the card surface, applied in both light and dark themes. The 88/12 split for dark uses a lighter purple to stay visible against the navy card; the 95/5 split for light keeps it delicate against white. */ .e-grid .e-altrow .e-rowcell { background: color-mix(in oklab, var(--s2c-card-bg) 95%, var(--s2c-primary)) !important; } /* Vertical (RowTemplate) mode: the .e-rowcell isn't visible — the .ticket-mobile-card fills the row. Stripe it directly. */ .e-grid .e-altrow .ticket-mobile-card { background: color-mix(in oklab, var(--s2c-card-bg) 95%, var(--s2c-primary)) !important; } /* Dark mode override — lighter purple so it pops against the navy surface. */ [data-bs-theme="dark"] .e-grid .e-altrow .e-rowcell, [data-bs-theme="dark"] .e-grid .e-altrow .ticket-mobile-card { background: color-mix(in oklab, var(--s2c-card-bg) 88%, #c8caf0) !important; } /* Adaptive (mobile) grid toolbar — the bar that hosts the Sort button. Syncfusion paints it near-black; lift it to our brand surface. */ [data-bs-theme="dark"] .e-grid .e-toolbar, [data-bs-theme="dark"] .e-grid .e-toolbar .e-toolbar-items, [data-bs-theme="dark"] .e-grid .e-res-toolbar, [data-bs-theme="dark"] .e-grid .e-res-toolbar .e-toolbar-items, [data-bs-theme="dark"] .e-grid .e-grid-responsive-header, [data-bs-theme="dark"] .e-grid .e-responsive-header { background: var(--surface) !important; background-color: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } [data-bs-theme="dark"] .e-grid .e-toolbar .e-tbar-btn, [data-bs-theme="dark"] .e-grid .e-res-toolbar .e-tbar-btn { background: transparent !important; color: var(--text) !important; } [data-bs-theme="dark"] .e-grid .e-toolbar .e-tbar-btn:hover, [data-bs-theme="dark"] .e-grid .e-res-toolbar .e-tbar-btn:hover { background: color-mix(in oklab, var(--s2c-card-bg) 88%, #c8caf0) !important; } [data-bs-theme="dark"] .e-grid .e-row:hover .e-rowcell { background-color: var(--primary-subtle) !important; } [data-bs-theme="dark"] .e-grid .e-row.e-active > .e-rowcell, [data-bs-theme="dark"] .e-grid .e-row.e-selectionbackground > .e-rowcell, [data-bs-theme="dark"] .e-grid .e-rowcell.e-active, [data-bs-theme="dark"] .e-grid .e-rowcell.e-selectionbackground { background-color: rgba(var(--s2c-primary-rgb), .22) !important; color: var(--text) !important; } [data-bs-theme="dark"] .e-grid .e-row.e-active:hover > .e-rowcell, [data-bs-theme="dark"] .e-grid .e-row.e-selectionbackground:hover > .e-rowcell { background-color: rgba(var(--s2c-primary-rgb), .30) !important; } [data-bs-theme="dark"] .e-grid .e-sortfilterdiv, [data-bs-theme="dark"] .e-grid .e-icon-ascending, [data-bs-theme="dark"] .e-grid .e-icon-descending { color: var(--text-muted) !important; } /* ---- Layout — grid takes the available height, built-in pager sits below it ---- */ .ims-grid-wrap { display: flex; flex-direction: column; min-height: 0; height: 100%; position: relative; } .ims-grid-wrap > .e-grid { flex: 1; min-height: 0; } /* Loading overlay — shown by TicketsGrid the moment a sort/filter/page action begins, hidden again when the adapter's response arrives. Sits over the grid AND over Syncfusion's adaptive dialog (z-index above e-popup 2001). */ .ims-grid-wrap .ims-grid-loading { position: absolute; inset: 0; z-index: 2100; background: color-mix(in oklab, var(--surface) 75%, transparent); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } /* When the wrap is in loading state, hide Syncfusion's adaptive sort dialog so the user sees the spinner instead of a stalled overlay. */ .ims-grid-wrap.is-loading ~ .e-dialog.e-customfilterdiv, .ims-grid-wrap.is-loading ~ .e-dialog.e-responsive-dialog, body:has(.ims-grid-wrap.is-loading) .e-dialog.e-customfilterdiv.e-popup-open, body:has(.ims-grid-wrap.is-loading) .e-dialog.e-responsive-dialog.e-popup-open { display: none !important; } /* ============================================================================ * Syncfusion's built-in pager (.e-gridpager) restyled to match the styleguide * pager. We use the built-in one (instead of a custom SfPager template) so * Syncfusion can keep paging/sort/pagesize state in sync with one fetch per * action. CSS below re-skins the default look across light + dark themes. * ============================================================================ */ .e-grid .e-gridpager { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important; padding: .35rem .6rem !important; font-size: .8rem !important; } /* Numeric page buttons — flat by default, primary fill on current. */ .e-grid .e-gridpager .e-numericitem, .e-grid .e-gridpager div.e-link { background: transparent !important; color: var(--text) !important; border: 1px solid transparent !important; border-radius: 6px !important; min-width: 28px !important; height: 28px !important; padding: 0 .55rem !important; margin: 0 1px !important; line-height: 26px !important; box-shadow: none !important; transition: background .12s ease, color .12s ease !important; } .e-grid .e-gridpager .e-numericitem:hover, .e-grid .e-gridpager div.e-link:hover { background: var(--surface-alt) !important; color: var(--text) !important; } .e-grid .e-gridpager .e-numericitem.e-currentitem, .e-grid .e-gridpager .e-numericitem.e-currentitem:hover, .e-grid .e-gridpager div.e-link.e-currentitem, .e-grid .e-gridpager div.e-link.e-currentitem:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; box-shadow: 0 1px 3px rgba(var(--s2c-primary-rgb), .25) !important; cursor: default !important; } /* Navigation arrows (first / prev / next / last) — flat icon buttons */ .e-grid .e-gridpager .e-icons.e-icon-first, .e-grid .e-gridpager .e-icons.e-icon-prev, .e-grid .e-gridpager .e-icons.e-icon-next, .e-grid .e-gridpager .e-icons.e-icon-last, .e-grid .e-gridpager .e-first.e-icons, .e-grid .e-gridpager .e-prev.e-icons, .e-grid .e-gridpager .e-next.e-icons, .e-grid .e-gridpager .e-last.e-icons, .e-grid .e-gridpager .e-firstpage, .e-grid .e-gridpager .e-prevpage, .e-grid .e-gridpager .e-nextpage, .e-grid .e-gridpager .e-lastpage { background: transparent !important; color: var(--text) !important; border-radius: 6px !important; transition: background .12s ease !important; } .e-grid .e-gridpager .e-firstpage:hover, .e-grid .e-gridpager .e-prevpage:hover, .e-grid .e-gridpager .e-nextpage:hover, .e-grid .e-gridpager .e-lastpage:hover { background: var(--surface-alt) !important; } .e-grid .e-gridpager .e-firstpagedisabled, .e-grid .e-gridpager .e-prevpagedisabled, .e-grid .e-gridpager .e-nextpagedisabled, .e-grid .e-gridpager .e-lastpagedisabled { opacity: .35 !important; cursor: not-allowed !important; } /* "1 of 21 pages (502 items)" message and the page-size dropdown trigger */ .e-grid .e-gridpager .e-pagerconstant, .e-grid .e-gridpager .e-parentmsgbar, .e-grid .e-gridpager .e-pagecountmsg, .e-grid .e-gridpager .e-pagenomsg { color: var(--text-muted) !important; font-size: .75rem !important; } /* Page-size dropdown (rendered via Syncfusion's DropDownList inside the pager). Default is wider than it needs to be — shrink the wrap + the inner input together so "10", "25", "100" all fit without overlapping the chevron. */ .e-grid .e-gridpager .e-pagerdropdown, .e-grid .e-gridpager .e-pagerdropdown .e-input-group, .e-grid .e-gridpager .e-pagerdropdown .e-dropdownlist { background: var(--surface-alt) !important; border-color: var(--border) !important; color: var(--text) !important; } /* Outer wrap: fixed size, vertically centered next to the pager buttons. */ .e-grid .e-gridpager .e-pagerdropdown { width: 78px !important; height: 32px !important; min-width: 0 !important; box-sizing: border-box !important; align-self: center !important; } /* Nuke every shadow / outline that any descendant might draw — that's where the dark halo around the dropdown was coming from. */ .e-grid .e-gridpager .e-pagerdropdown, .e-grid .e-gridpager .e-pagerdropdown * { box-shadow: none !important; outline: none !important; } /* Input-group is the visible border around "10 ▾". Match the 32px height of the surrounding pager buttons so they all line up on the same baseline. */ .e-grid .e-gridpager .e-pagerdropdown .e-input-group, .e-grid .e-gridpager .e-pagerdropdown .e-input-group.e-control-wrapper, .e-grid .e-gridpager .e-pagerdropdown .e-input-group.e-input-focus { min-width: 0 !important; width: 78px !important; height: 32px !important; padding: 0 !important; border: 1px solid var(--border) !important; border-radius: 4px !important; background: var(--surface-alt) !important; box-sizing: border-box !important; } /* Syncfusion's ::before/::after pseudo-elements draw the bottom focus underline; in compact mode they leave a darker bar on top/bottom. Drop them. */ .e-grid .e-gridpager .e-pagerdropdown .e-input-group::before, .e-grid .e-gridpager .e-pagerdropdown .e-input-group::after { display: none !important; } .e-grid .e-gridpager .e-pagerdropdown input.e-input { color: var(--text) !important; background: transparent !important; font-size: .8rem !important; padding: 0 6px !important; text-align: left !important; height: 30px !important; min-height: 0 !important; border: 0 !important; } /* Chevron button — transparent, no own border. */ .e-grid .e-gridpager .e-pagerdropdown .e-input-group-icon, .e-grid .e-gridpager .e-pagerdropdown .e-ddl-icon { background: transparent !important; border: 0 !important; height: 30px !important; padding: 0 4px !important; } /* Keep the "Items per page" label on a single line — Syncfusion's default wraps "page" onto a new line as soon as the dropdown shrinks. */ .e-grid .e-gridpager .e-pagerconstant { white-space: nowrap !important; } /* Reset Syncfusion's default focus/active styling on the pager nav buttons — bootstrap5 paints these with an orange-ish accent when focused, which leaks through after a click (the focus ring sticks until you click elsewhere). */ .e-grid .e-gridpager .e-firstpage:focus, .e-grid .e-gridpager .e-firstpage:active, .e-grid .e-gridpager .e-prevpage:focus, .e-grid .e-gridpager .e-prevpage:active, .e-grid .e-gridpager .e-nextpage:focus, .e-grid .e-gridpager .e-nextpage:active, .e-grid .e-gridpager .e-lastpage:focus, .e-grid .e-gridpager .e-lastpage:active, .e-grid .e-gridpager .e-numericitem:focus, .e-grid .e-gridpager .e-numericitem:active, .e-grid .e-gridpager div.e-link:focus, .e-grid .e-gridpager div.e-link:active { background: var(--surface-alt) !important; color: var(--text) !important; outline: none !important; box-shadow: none !important; } /* The currently-active page button retains its primary fill even on focus. */ .e-grid .e-gridpager .e-numericitem.e-currentitem:focus, .e-grid .e-gridpager .e-numericitem.e-currentitem:active, .e-grid .e-gridpager div.e-link.e-currentitem:focus, .e-grid .e-gridpager div.e-link.e-currentitem:active { background: var(--primary) !important; color: #fff !important; } /* Dark-mode tweaks — keep pager on the brand surface, not the bootstrap5-dark grey */ [data-bs-theme="dark"] .e-grid .e-gridpager { background: var(--surface) !important; border-color: var(--border) !important; } [data-bs-theme="dark"] .e-grid .e-gridpager .e-numericitem:hover, [data-bs-theme="dark"] .e-grid .e-gridpager div.e-link:hover, [data-bs-theme="dark"] .e-grid .e-gridpager .e-firstpage:hover, [data-bs-theme="dark"] .e-grid .e-gridpager .e-prevpage:hover, [data-bs-theme="dark"] .e-grid .e-gridpager .e-nextpage:hover, [data-bs-theme="dark"] .e-grid .e-gridpager .e-lastpage:hover { background: color-mix(in oklab, var(--s2c-card-bg) 88%, #c8caf0) !important; } /* ---- Inputs (textbox, textarea, dropdown trigger) ---- */ [data-bs-theme="dark"] .e-input-group, [data-bs-theme="dark"] .e-control-wrapper.e-input-group, [data-bs-theme="dark"] .e-input-group.e-control-wrapper { background: var(--s2c-input-bg) !important; border-color: var(--border) !important; } [data-bs-theme="dark"] input.e-input, [data-bs-theme="dark"] textarea.e-input, [data-bs-theme="dark"] .e-input-group input, [data-bs-theme="dark"] .e-input-group textarea { background: transparent !important; color: var(--text) !important; } [data-bs-theme="dark"] input.e-input::placeholder, [data-bs-theme="dark"] textarea.e-input::placeholder { color: var(--text-muted) !important; } [data-bs-theme="dark"] .e-input-group:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error).e-input-focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--s2c-primary-rgb), .20) !important; } /* ---- Dropdown / popup list ---- */ [data-bs-theme="dark"] .e-popup, [data-bs-theme="dark"] .e-popup-open, [data-bs-theme="dark"] .e-ddl.e-popup, [data-bs-theme="dark"] .e-dropdownbase { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; box-shadow: var(--s2c-shadow-lg) !important; } [data-bs-theme="dark"] .e-list-item { color: var(--text) !important; } [data-bs-theme="dark"] .e-list-item.e-hover, [data-bs-theme="dark"] .e-list-item.e-item-focus { background: var(--surface-alt) !important; color: var(--text) !important; } [data-bs-theme="dark"] .e-list-item.e-active, [data-bs-theme="dark"] .e-list-item.e-active.e-hover { background: var(--primary) !important; color: #fff !important; } /* ---- Tabs ---- */ [data-bs-theme="dark"] .e-tab, [data-bs-theme="dark"] .e-tab .e-tab-header, [data-bs-theme="dark"] .e-tab .e-content, [data-bs-theme="dark"] .e-tab .e-tab-header .e-toolbar-items { background: var(--surface) !important; } [data-bs-theme="dark"] .e-tab .e-tab-header .e-toolbar-item .e-tab-text { color: var(--text-muted) !important; } [data-bs-theme="dark"] .e-tab .e-tab-header .e-toolbar-item:hover .e-tab-text { color: var(--text) !important; } [data-bs-theme="dark"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--primary) !important; } [data-bs-theme="dark"] .e-tab .e-tab-header .e-indicator { background: var(--primary) !important; } /* Non-primary Syncfusion buttons are themed in forms.css with a single rule that uses theme-aware CSS variables (--surface / --text / --border), so it covers light + dark in one place. Nothing extra needed here. */ /* ---- Adaptive sort / filter dialog (EnableAdaptiveUI) ---- Container classes (from devtools): e-dialog.e-customfilterdiv.e-responsive-dialog Row class: e-responsivecoldiv. Default theme paints these with bootstrap-blue accents on grey row buttons — re-skin to our brand palette + theme-aware surfaces so it looks the same in light + dark mode. */ .e-dialog.e-customfilterdiv, .e-dialog.e-responsive-dialog, .e-dialog.e-customfilterdiv .e-dlg-content, .e-dialog.e-customfilterdiv .e-dlg-header-content, .e-dialog.e-customfilterdiv .e-footer-content, .e-dialog.e-responsive-dialog .e-dlg-content, .e-dialog.e-responsive-dialog .e-dlg-header-content, .e-dialog.e-responsive-dialog .e-footer-content { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } .e-dialog.e-customfilterdiv .e-dlg-header, .e-dialog.e-customfilterdiv .e-dlg-header *, .e-dialog.e-responsive-dialog .e-dlg-header, .e-dialog.e-responsive-dialog .e-dlg-header * { color: var(--text) !important; } /* Close (X) icon button — flat, transparent. */ .e-dialog.e-customfilterdiv .e-dlg-closeicon-btn, .e-dialog.e-responsive-dialog .e-dlg-closeicon-btn { background: transparent !important; color: var(--text-muted) !important; border: none !important; box-shadow: none !important; } .e-dialog.e-customfilterdiv .e-dlg-closeicon-btn:hover, .e-dialog.e-responsive-dialog .e-dlg-closeicon-btn:hover { background: var(--surface-alt) !important; color: var(--text) !important; } /* Header action buttons (Clear / OK in the top-right). Match anything that's NOT the close icon button. */ .e-dialog.e-customfilterdiv .e-dlg-header-content .e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn), .e-dialog.e-responsive-dialog .e-dlg-header-content .e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn) { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; border-radius: 6px !important; padding: 4px 14px !important; height: 32px !important; min-width: 64px !important; margin-left: 8px !important; font-size: .85rem !important; font-weight: 500 !important; box-shadow: none !important; } .e-dialog.e-customfilterdiv .e-dlg-header-content .e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn):hover, .e-dialog.e-responsive-dialog .e-dlg-header-content .e-btn:not(.e-icon-btn):not(.e-dlg-closeicon-btn):hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } /* Row containers (one per sortable column). */ .e-dialog.e-customfilterdiv .columndiv, .e-dialog.e-responsive-dialog .columndiv { background: var(--surface) !important; color: var(--text) !important; } .e-dialog.e-customfilterdiv .e-responsivecoldiv, .e-dialog.e-responsive-dialog .e-responsivecoldiv { background: transparent !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; padding: 12px 16px !important; } /* The "None / Ascending / Descending" state button inside each row. Anything that's a