/* ============================================================
   LCSyncfusion.css — grid COLUMN MENU + COLUMN FILTER styling, ported from the
   sibling Labour product (trpl-labour-web-angular, src/assets/styles/LCSyncfusion.css)
   so every Billing grid's column menu and Excel filter look exactly like Labour's.
   Linked globally from index.html (after LCKendo.css), the same way Labour links it.

   The grid chrome (header, rows, custom pager, empty state, black tooltip, body cap,
   fit-to-container tables) and the column-menu / filter sections are ported, in
   Labour's section order; src/styles.css no longer carries Billing's own versions.
   Labour rules that would reach other Billing UI are scoped (marked "scoped" below):
   the row / header METRICS apply to the shared grids (.grid-wrapper) only, so the
   raw page grids keep their UAT-tuned Kendo-parity rows from styles.css.
   The input-control popups (dropdown list, combo box, multiselect, tree) are ported
   in the INPUT CONTROLS block at the end of this file.

   Body-appended popups (Excel filter, column menu, Custom Filter dialog) must be
   styled globally, which is why this lives in a global stylesheet. This file loads
   BEFORE the Angular styles bundle (which carries the Syncfusion theme), so every
   property that competes with the theme carries !important, exactly as in Labour.
   ============================================================ */

.grid-wrapper {
    position: relative;
}

/* Hide Syncfusion's built-in (black) grid spinner so only the brand loader (#125AAB)
   shows ... except app-loader's OWN pane, which can sit inside a .custom-grid host;
   gating on .e-spin-show keeps ej2's show/hide authoritative. */
.custom-grid .e-spinner-pane {
    display: none !important;
}
.custom-grid app-loader .e-spinner-pane.e-spin-show {
    display: flex !important;
}

/* ----- Header colour layout (parity with the old Kendo ocean-blue grid) -----
   `.custom-grid.e-grid .e-gridheader` out-ranks the theme's `.e-grid .e-gridheader`,
   which loads after this file. */
.custom-grid .e-gridheader,
.custom-grid.e-grid .e-gridheader,
.custom-grid .e-gridheader .e-headercontent,
.custom-grid .e-gridheader .e-headercell,
.custom-grid .e-gridheader .e-headercell.e-stackedheadercell,
.custom-grid .e-gridheader .e-detailheadercell,
.custom-grid .e-gridheader .e-headercell .e-headercelldiv,
.custom-grid .e-gridheader tr th.e-headercell:hover,
.custom-grid .e-gridheader .e-headercell.e-fltr-icon:hover {
    background-color: #ECF5FF;
}

.custom-grid .e-gridheader,
.custom-grid.e-grid .e-gridheader {
    border-top: none;
    border-bottom: 0.997px solid #D9D9D9;
}

/* Header text */
.custom-grid .e-headercell .e-headertext {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
    font-size: 11px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ----- Header filter / column-menu icon colour ----- */
.custom-grid .e-gridheader .e-icons,
.custom-grid .e-gridheader .e-filtermenudiv,
.custom-grid .e-gridheader .e-columnmenu,
.custom-grid .e-gridheader .e-sortfilterdiv {
    color: #5b7089;
}

/* Show the Excel filter funnel glyph (\e7ee) on the column-menu trigger. */
.custom-grid .e-gridheader .e-columnmenu::before {
    content: "\e7ee" !important;
}

/* Active/filtered column — brand-blue filled box with a white funnel */
.custom-grid .e-gridheader .e-filtermenudiv.e-filtered,
.custom-grid .e-gridheader .e-icon-filter.e-filtered,
.custom-grid .e-gridheader .e-columnmenu.e-filtered {
    background-color: #125AAB !important;
    border-radius: 4px;
    padding: 5px;
    color: #ffffff !important;
}
.custom-grid .e-gridheader .e-filtered::before,
.custom-grid .e-grid .e-gridheader .e-filtered::before {
    color: #ffffff !important;
}

/* ----- Cell content (font/colour only — padding is grid-specific) ----- */
.custom-grid .e-rowcell {
    font-family: 'Poppins', sans-serif;
    color: #2B2B2B;
}

/* ----- Shared grids' rows and header (app-grid, app-grid-action-item[-sspf], and the
   raw grids a page wraps in .grid-wrapper). Labour sets these in its ViewEncapsulation.None
   component CSS / globally; scoped here to .grid-wrapper so the raw page grids keep
   their own rows. !important: this file loads before styles.css. ----- */
.grid-wrapper .custom-grid .e-rowcell {
    font-size: 11px !important;
    line-height: 17px !important;
    padding: 6px 6.6px !important;
}
/* With an action/icon column the 24px icons make the row taller, so use tighter
   vertical padding and lock the row height to what the icons produce (24 + 4 + 4 +
   1px border); a td height is a MINIMUM, so hiding the icon column through the column
   chooser keeps the same row height. */
.grid-wrapper.has-action .custom-grid .e-rowcell {
    padding: 4px 6.6px !important;
    height: 33px;
}
/* Labour's header metrics: the theme's 42px header, 11px / 37px label box and no label
   padding (ej2 pads it 0 1.8em 0 .6em on sortable / filterable grids). */
.grid-wrapper .custom-grid.e-grid .e-gridheader .e-columnheader,
.grid-wrapper .custom-grid.e-grid .e-gridheader .e-headercell {
    height: 42px !important;
    padding: 0 21px;
}
.grid-wrapper .custom-grid .e-headercelldiv {
    font-size: 11px !important;
    height: 37px;
}
.grid-wrapper .custom-grid .e-gridheader .e-sortfilter .e-headercelldiv,
.grid-wrapper .custom-grid .e-gridheader .e-stackedheadercelldiv {
    padding: 0 !important;
}

/* ----- Grid body height cap + scroll (.gai-cap) -----
   Cap the scrollable body (.e-content) so a large page size (20 / All) scrolls INSIDE
   the grid instead of growing the page; the pager stays put. ~10 default rows fit, so
   page size 10 shows no scrollbar. On every shared grid's wrapper (app-grid,
   grid-action-item[-sspf], tree-grid, lazy-tree-list) and customer-master. Per-page
   override: `--gai-content-max-height: <px>` on the host. The whole-grid 420px cap the
   raw page grids use (styles.css) does not apply under .gai-cap. */
.gai-cap .custom-grid .e-content {
    max-height: var(--gai-content-max-height, 330px);
    overflow-y: auto;
}
.gai-cap .custom-grid.e-grid {
    max-height: none;
}

/* ----- Table width parity with the old Kendo grid. The table always fills its
   container (no empty space on the right), yet still grows past it and scrolls when
   the columns are genuinely wider. A consumer's [scrollerWidth] (--grid-scroll-width)
   wins when set. The .gai-fit mode overrides this with its own table-layout:fixed. ----- */
.custom-grid .e-content table,
.custom-grid .e-gridheader table {
    min-width: var(--grid-scroll-width, 100%);
}

/* ----- Fit-to-container mode (.gai-fit, the DEFAULT for an action grid without a
   [scrollerWidth]; forced on by [fitColumns]). table-layout:fixed + width:100% makes the
   table exactly the container width; the per-column widths (percentages of the visible
   total, see fitColumnWidth) keep their proportions, so every column stays visible and
   truncates with an ellipsis instead of scrolling. Dropped once the user resizes. ----- */
.grid-wrapper.gai-fit .custom-grid .e-gridheader table,
.grid-wrapper.gai-fit .custom-grid .e-content table {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
}

/* ----- Custom pager (app-grid-pager) — "Page X of Y" layout ----- */
.custom-grid .e-gridpager,
.custom-grid .e-pager {
    padding: 6px 14px;
}

.custom-grid .e-pager {
    position: relative;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.custom-grid .e-pager .e-pagertemplate {
    width: 100%;
}

.custom-pager {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 22px;
    width: 100%;
    min-height: 32px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #424242;
}

.custom-pager .cp-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.custom-pager .cp-goto,
.custom-pager .cp-size {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Nav buttons match the Kendo pager nav links: circular #f5f5f5 button with a
   #ddd border, hover #e0e0e0, using the SAME arrow SVGs as the Kendo grid. */
.custom-pager .cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #f5f5f5;
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s, border-color 0.3s;
}

.custom-pager .cp-btn img {
    width: 14px;
    height: 14px;
    display: block;
}

.custom-pager .cp-btn:hover:not(:disabled) {
    background: #e0e0e0;
    border-color: #ccc;
}

.custom-pager .cp-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.custom-pager .cp-current {
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: #125AAB;
    color: #fff;
    /* Pill radius (= height / 2): a circle for a single digit, a clean stadium
       pill for multi-digit page numbers (e.g. 4998). */
    border-radius: 13px;
    font-weight: 600;
    box-sizing: border-box;
}

.custom-pager .cp-page-input {
    width: 46px;
    height: 28px;
    text-align: center;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 12px;
    color: #424242;
    padding: 2px 4px;
}

/* Page-size selector — a custom DOM dropdown (fully styleable hover/selected). */
.custom-pager .cp-size-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    min-width: 64px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 12px;
    color: #424242;
    padding: 2px 8px;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
}

.custom-pager .cp-size-select:hover,
.custom-pager .cp-size-select.open {
    border-color: #125AAB;
}

.custom-pager .cp-size-value {
    flex: 1;
}

.custom-pager .cp-size-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6b7280;
    transition: transform 0.15s ease;
}
.custom-pager .cp-size-select.open .cp-size-caret {
    transform: rotate(180deg);
}

/* Options list — opens UPWARD (the pager sits at the bottom of the grid). */
.custom-pager .cp-size-list {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 20;
    max-height: 180px;
    overflow-y: auto;
}

.custom-pager .cp-size-item {
    padding: 5px 10px;
    font-size: 12px;
    color: #424242;
    cursor: pointer;
    white-space: nowrap;
}

.custom-pager .cp-size-item:hover {
    background: #ebebeb;
    color: #424242;
}

.custom-pager .cp-size-item.selected {
    background: #125AAB;
    color: #ffffff;
}
.custom-pager .cp-size-item.selected:hover {
    background: #0f4d92;
    color: #ffffff;
}

.custom-pager .cp-info {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    white-space: nowrap;
}

/* Optional page-supplied control at the pager's right end ([pagerEndTemplate],
   e.g. a Reload icon), pinned to the far right; the "a - b of c items" count then
   shifts left to make room. Only pagers that render a .cp-end are affected. */
.custom-pager .cp-end {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
}
.custom-pager:has(.cp-end) .cp-info {
    right: 44px;
}

/* ----- No-records template (the boxed look is in the common section below) ----- */
.custom-grid .e-grid-norecords-template,
.custom-grid .e-emptyrow td {
    text-align: center;
    padding: 12px;
    color: #424242;
    font-family: 'Poppins', sans-serif;
}

/* ============================================================
   Filter popup search box — clean bordered box (no material underline)
   ============================================================ */
.e-excelfilter .e-input-group,
.e-excelfilter .e-input-group.e-search,
.e-checkboxfilter .e-input-group,
.e-cc-searchdiv .e-input-group,
.e-filter-popup .e-input-group {
    background: #FEFEFE !important;
    border: 0.997px solid #d9d9d9 !important;
    border-radius: 5px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

.e-excelfilter .e-input-group input.e-input,
.e-excelfilter .e-searchinput,
.e-checkboxfilter .e-input-group input.e-input,
.e-cc-searchdiv .e-input-group input.e-input,
.e-filter-popup input.e-input {
    background: transparent !important;
    border: none !important;
    height: 26px !important;
    padding: 2px !important;
    font-size: 11px !important;
    color: #424242 !important;
}

.e-excelfilter .e-input-group::before,
.e-excelfilter .e-input-group::after,
.e-excelfilter .e-input-group.e-input-focus::before,
.e-excelfilter .e-input-group.e-input-focus::after,
.e-excelfilter .e-input-group.e-control-wrapper.e-input-focus::before,
.e-excelfilter .e-input-group.e-control-wrapper.e-input-focus::after,
.e-checkboxfilter .e-input-group::before,
.e-checkboxfilter .e-input-group::after,
.e-checkboxfilter .e-input-group.e-input-focus::before,
.e-checkboxfilter .e-input-group.e-input-focus::after,
.e-cc-searchdiv .e-input-group::before,
.e-cc-searchdiv .e-input-group::after,
.e-cc-searchdiv .e-input-group.e-input-focus::before,
.e-cc-searchdiv .e-input-group.e-input-focus::after,
.e-filter-popup .e-input-group::before,
.e-filter-popup .e-input-group::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

.e-excelfilter .e-input-group.e-input-focus,
.e-checkboxfilter .e-input-group.e-input-focus,
.e-cc-searchdiv .e-input-group.e-input-focus,
.e-filter-popup .e-input-group.e-input-focus {
    border-color: #125AAB !important;
    box-shadow: none !important;
}

/* ----- Filter checkbox size parity with Kendo (.k-checkbox => 14×14) ----- */
.e-excelfilter .e-checkbox-wrapper .e-frame,
.e-checkboxfilter .e-checkbox-wrapper .e-frame,
.e-grid-menu .e-checkbox-wrapper .e-frame,
.e-grid-popup .e-checkbox-wrapper .e-frame {
    width: 14px !important;
    height: 14px !important;
    line-height: 6px !important;
}
.e-excelfilter .e-checkbox-wrapper .e-check,
.e-checkboxfilter .e-checkbox-wrapper .e-check,
.e-grid-menu .e-checkbox-wrapper .e-check,
.e-grid-popup .e-checkbox-wrapper .e-check {
    font-size: 10px !important;
}

.e-excelfilter .e-checkboxfiltertext,
.e-excelfilter .e-ftrchk .e-label,
.e-checkboxfilter .e-ftrchk .e-label,
.e-grid-menu .e-checkbox-wrapper .e-label {
    font-size: 11px !important;
}

/* ----- Hanging indent for LONG filter values -----
   .e-label sits INLINE inside .e-checkbox-wrapper, so a long value that wraps
   started its 2nd line under the CHECKBOX. Flex the wrapper instead: the frame
   is a fixed gutter and the label a shrinking block, so every wrapped line
   starts at the label's own left edge. Rows auto-grow so the wrapped line
   isn't clipped. */
.e-excelfilter .e-ftrchk,
.e-checkboxfilter .e-ftrchk {
    height: auto !important;
    min-height: 24px;
}
.e-excelfilter .e-ftrchk .e-checkbox-wrapper,
.e-checkboxfilter .e-ftrchk .e-checkbox-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    width: 100%;
}
.e-excelfilter .e-ftrchk .e-checkbox-wrapper .e-frame,
.e-checkboxfilter .e-ftrchk .e-checkbox-wrapper .e-frame {
    flex: 0 0 auto;
    margin-top: 1px;
}
.e-excelfilter .e-ftrchk .e-checkbox-wrapper .e-label,
.e-checkboxfilter .e-ftrchk .e-checkbox-wrapper .e-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.3 !important;
    text-indent: 0 !important;
}

/* ----- Filter popup — brand colour (#125AAB) ----- */
.e-excelfilter .e-checkboxfiltertext,
.e-excelfilter .e-ftrchk .e-label,
.e-excelfilter .e-checkbox-wrapper .e-label,
.e-excelfilter .e-contextmenu-container ul li,
.e-excelfilter .e-contextmenu-container ul li .e-menu-text {
    color: #424242 !important;
    font-family: 'Popins', sans-serif;
}

.e-excelfilter .e-footer-content .e-btn.e-primary,
.e-excelfilter .e-footer-content .e-btn.e-flat.e-primary {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}
.e-excelfilter .e-footer-content .e-btn.e-primary:hover {
    background-color: #0f4d92 !important;
    border-color: #0f4d92 !important;
}

.e-excelfilter .e-footer-content .e-btn:not(.e-primary) {
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    color: #125AAB !important;
}

/* OK / Cancel / Filter / Clear text — match the project's standard buttons:
   normal case (not Syncfusion's uppercase), 12px Poppins. */
.e-excelfilter .e-footer-content .e-btn,
.e-checkboxfilter .e-footer-content .e-btn,
.e-cc .e-footer-content .e-btn,
.e-flmenu .e-footer-content .e-btn,
.e-grid-menu .e-footer-content .e-btn,
.e-xlflmenu .e-footer-content .e-btn {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    text-transform: none !important;
}

.e-excelfilter .e-contextmenu-container ul li:hover {
    background-color: #eef4fb !important;
}

.e-excelfilter .e-icon-filter-clear::before,
.e-excelfilter .e-contextmenu-container ul li .e-icon-filter-clear::before,
.e-excelfilter .e-filtered::before,
.e-excelfilter .e-contextmenu-container ul li .e-filtered::before,
.e-excelfilter .e-menu-item .e-filtered::before {
    color: #125AAB !important;
}

/* Checked + indeterminate checkboxes — brand blue (not material pink).
   Scoped: Labour also applies this to EVERY checkbox in the app; here it is kept to
   the grid filter / column-menu popups so no other Billing checkbox changes. */
.e-excelfilter .e-checkbox-wrapper .e-frame.e-check,
.e-checkboxfilter .e-checkbox-wrapper .e-frame.e-check,
.e-grid-popup .e-checkbox-wrapper .e-frame.e-check,
.e-grid-menu .e-checkbox-wrapper .e-frame.e-check,
.e-excelfilter .e-checkbox-wrapper .e-frame.e-stop,
.e-checkboxfilter .e-checkbox-wrapper .e-frame.e-stop,
.e-grid-popup .e-checkbox-wrapper .e-frame.e-stop,
.e-grid-menu .e-checkbox-wrapper .e-frame.e-stop,
.e-xlflmenu .e-checkbox-wrapper .e-frame.e-check {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}
.e-excelfilter .e-checkbox-wrapper:hover .e-frame.e-check,
.e-excelfilter .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-checkboxfilter .e-checkbox-wrapper:hover .e-frame.e-check,
.e-checkboxfilter .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-grid-popup .e-checkbox-wrapper:hover .e-frame.e-check,
.e-grid-popup .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-grid-menu .e-checkbox-wrapper:hover .e-frame.e-check,
.e-grid-menu .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-xlflmenu .e-checkbox-wrapper:hover .e-frame.e-check,
.e-xlflmenu .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: #0f4d92 !important;
    border-color: #0f4d92 !important;
}

/* ============================================================
   Column-menu popup (.e-grid-menu) — brand styling (#125AAB)
   ============================================================ */
.e-grid-menu .e-menu-item,
.e-grid-menu .e-menu-item .e-menu-text,
.e-grid-menu .e-menu-item .e-menu-icon,
.e-checkboxfiltertext,
.e-checkboxfilter .e-ftrchk .e-label {
    color: #424242 !important;
    font-family: 'Popins', sans-serif;
}
.e-grid-menu .e-menu-item:hover,
.e-grid-menu .e-menu-item.e-focused {
    background-color: #eef4fb !important;
}

.e-checkboxfilter .e-searchinput:focus,
.e-checkboxfilter .e-input-group.e-input-focus,
.e-cc-searchdiv .e-input-group.e-input-focus,
.e-grid-menu .e-input-group.e-input-focus {
    border-color: #125AAB !important;
    box-shadow: none !important;
}

.e-checkboxfilter .e-footer-content .e-btn.e-primary,
.e-cc .e-footer-content .e-btn.e-primary,
.e-cc-okbtn.e-btn.e-primary,
.e-flmenu .e-footer-content .e-btn.e-primary,
.e-grid-menu .e-footer-content .e-btn.e-primary {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}

.e-checkboxfilter .e-footer-content .e-btn:not(.e-primary),
.e-cc .e-footer-content .e-btn:not(.e-primary),
.e-cc-cancel.e-btn,
.e-flmenu .e-footer-content .e-btn:not(.e-primary),
.e-grid-menu .e-footer-content .e-btn:not(.e-primary) {
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    color: #125AAB !important;
}

/* ============================================================
   Custom Filter dialog (.e-xlflmenu) — brand styling (#125AAB)
   ============================================================ */
.e-xlflmenu .e-radio:checked + label::before,
.e-xlflmenu .e-radio:checked:focus + label::before,
.e-xlflmenu .e-radio:checked + label:hover::before {
    border-color: #125AAB !important;
}
.e-xlflmenu .e-radio:checked + label::after,
.e-xlflmenu .e-radio:checked:focus + label::after,
.e-xlflmenu .e-radio:checked + label:hover::after {
    background-color: #125AAB !important;
    color: #125AAB !important;
}

.e-xlflmenu .e-input-group.e-input-focus,
.e-xlflmenu .e-input-group.e-control-wrapper.e-input-focus {
    border-color: #125AAB !important;
    box-shadow: none !important;
}
.e-xlflmenu .e-input-group.e-input-focus::before,
.e-xlflmenu .e-input-group.e-input-focus::after,
.e-xlflmenu .e-input-group.e-control-wrapper.e-input-focus::before,
.e-xlflmenu .e-input-group.e-control-wrapper.e-input-focus::after {
    background: #125AAB !important;
}

.e-xlflmenu .e-footer-content .e-btn.e-primary,
.e-xlflmenu .e-footer-content .e-btn.e-flat.e-primary {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}
.e-xlflmenu .e-footer-content .e-btn.e-primary:hover {
    background-color: #0f4d92 !important;
    border-color: #0f4d92 !important;
}
.e-xlflmenu .e-footer-content .e-btn:not(.e-primary) {
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    color: #125AAB !important;
}

/* Custom Filter dialog INPUTS — the operator dropdowns and value boxes rendered
   as material UNDERLINE fields. Convert them to the app's bordered f-textbox look:
   grey 1px border, 4px radius, 30px height, 11px font; the underline pseudo-elements
   are removed entirely (their focus state was the accent line). */
.e-xlflmenu .e-input-group,
.e-xlflmenu .e-input-group.e-control-wrapper {
    border: 0.997px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background: #FEFEFE !important;
    height: 30px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}
.e-xlflmenu .e-input-group::before,
.e-xlflmenu .e-input-group::after,
.e-xlflmenu .e-input-group.e-control-wrapper::before,
.e-xlflmenu .e-input-group.e-control-wrapper::after {
    content: none !important;
    display: none !important;
}
/* Focus = brand-blue border (the border replaces the removed underline). */
.e-xlflmenu .e-input-group.e-input-focus,
.e-xlflmenu .e-input-group.e-control-wrapper.e-input-focus {
    border-color: #125AAB !important;
}
.e-xlflmenu .e-input-group input.e-input {
    font-size: 11px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
    caret-color: #125AAB !important;
}
.e-xlflmenu .e-input-group .e-input-group-icon {
    color: #5b7089 !important;
    font-size: 11px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ----- "Custom Filter" dialog (.e-xlflmenu) — compact fonts + controls -----
   Material renders this dialog at ~14–18px; match the app's 11–12px typography.
   Only text-bearing elements are targeted (NOT .e-icons). */
.e-xlflmenu .e-dlg-header,
.e-xlflmenu .e-dlg-header-content .e-title {
    font-size: 14px !important;
}
.e-xlflmenu .e-dlg-content,
.e-xlflmenu .e-xlfl-maindiv,
.e-xlflmenu .e-xlfl-dlgfields,
.e-xlflmenu .e-xlfl-fieldset,
.e-xlflmenu .e-xlfl-table,
.e-xlflmenu .e-xlfl-table td,
.e-xlflmenu .e-footer-content .e-btn {
    font-size: 12px !important;
}
.e-xlflmenu .e-input,
.e-xlflmenu input.e-input,
.e-xlflmenu .e-dropdownlist input.e-input,
.e-xlflmenu .e-ddl input.e-input {
    font-size: 11px !important;
}
/* Match Case checkbox + AND/OR radios — 14px controls, 11px labels. */
.e-xlflmenu .e-checkbox-wrapper .e-frame {
    width: 14px !important;
    height: 14px !important;
    line-height: 6px !important;
}
.e-xlflmenu .e-checkbox-wrapper .e-check {
    font-size: 10px !important;
}
.e-xlflmenu .e-radio + label::before {
    width: 14px !important;
    height: 14px !important;
}
.e-xlflmenu .e-radio + label::after {
    width: 6px !important;
    height: 6px !important;
    left: 4px !important;
    top: 4px !important;
}
/* The AND radio sits in a .e-xlfl-radiodiv the theme HARD-CODES to width:117px —
   that is what pushed OR far to the right. Shrink to content for even spacing. */
.e-xlflmenu .e-xlfl-radiodiv {
    width: auto !important;
}
.e-xlflmenu .e-radio + label .e-label {
    padding-left: 18px !important;
    padding-right: 8px !important;
}
.e-xlflmenu .e-radio + label,
.e-xlflmenu .e-radio + label .e-label,
.e-xlflmenu .e-checkbox-wrapper .e-label {
    font-size: 11px !important;
    color: #424242 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ============================================================================
   Custom Filter dialog INNER POPUPS (.app-flt-ddl) — the operator dropdown list
   and value-box autosuggestions the grid's Custom Filter dialog spawns. The
   shared grids inject this cssClass via column.filter.params, so it lands ONLY
   on these controls' body-appended popups. Rules are LIST-scoped (no container
   max-height) because date columns spawn a DatePicker CALENDAR popup carrying
   the same class — capping the container would squash the calendar.
   ============================================================================ */
.e-popup.app-flt-ddl {
    font-size: 11px !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    /* Instant open/close, as Labour's select-type popups (1ms keeps EJ2's
       animationend cleanup firing; opacity:1 avoids a partial-opacity frame). */
    animation-duration: 1ms !important;
    opacity: 1 !important;
}
.e-popup.app-flt-ddl .e-list-item {
    text-indent: 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    min-height: 26px !important;
    height: auto !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    color: #000000 !important;
}
.e-popup.app-flt-ddl .e-list-item.e-hover,
.e-popup.app-flt-ddl .e-list-item.e-navigation,
.e-popup.app-flt-ddl .e-list-item.e-focused {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
}
.e-popup.app-flt-ddl .e-list-item.e-active,
.e-popup.app-flt-ddl .e-list-item.e-active.e-hover,
.e-popup.app-flt-ddl .e-list-item.e-active.e-focused {
    background-color: #125AAB !important;
    color: #ffffff !important;
}
.e-popup.app-flt-ddl .e-list-item *,
.e-bigger .e-popup.app-flt-ddl .e-list-item {
    font-size: 11px !important;
}

/* ============================================================
   Filter popup layout — label ellipsis, list height fit, and rounded popup corners.
   ============================================================ */

/* Truncate long option labels with an ellipsis instead of wrapping to a second line
   when the vertical scrollbar narrows the available width. */
.e-grid-popup .e-checkboxlist .e-ftrchk,
.e-excelfilter .e-checkboxlist .e-ftrchk {
    display: flex;
    align-items: center;
}
.e-grid-popup .e-checkboxlist .e-ftrchk .e-checkbox-wrapper,
.e-excelfilter .e-checkboxlist .e-ftrchk .e-checkbox-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    /* Gap between the checkbox box and its label — the flex layout drops the
       Syncfusion default label margin, leaving the text flush against the box. */
    gap: 8px;
}
/* Neutralise the theme's own label margin so the gap above is the single,
   consistent source of spacing. */
.e-grid-popup .e-checkboxlist .e-ftrchk .e-checkbox-wrapper .e-label,
.e-excelfilter .e-checkboxlist .e-ftrchk .e-checkbox-wrapper .e-label {
    margin-left: 0;
}
/* Keep the checkbox box from being squashed by the flex label. */
.e-grid-popup .e-checkboxlist .e-ftrchk .e-checkbox-wrapper .e-frame,
.e-excelfilter .e-checkboxlist .e-ftrchk .e-checkbox-wrapper .e-frame {
    flex: 0 0 auto;
}

.e-grid-popup .e-checkboxlist .e-ftrchk .e-checkbox-wrapper .e-label,
.e-excelfilter .e-checkboxlist .e-ftrchk .e-checkbox-wrapper .e-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Syncfusion forces a fixed pixel height on the checkbox list (inline style, sized for
   a full page of rows). Let the list grow to fit its content and only scroll once it
   gets genuinely long. */
.e-grid-popup .e-excelfilter .e-checkboxlist,
.e-excelfilter .e-checkboxlist {
    height: auto !important;
    max-height: 135px;
    overflow-y: auto;
    min-height: auto !important;
}

.e-grid-popup .e-excelfilter .e-searchcontainer,
.e-excelfilter .e-searchcontainer {
    height: auto !important;
}

/* Rounded corners on the grid filter popup (Excel filter dialog), the column menu and
   its submenus, and the "Text Filters" flyout. No overflow:hidden — the flyout sits
   outside the dialog's right edge and clipping would cut it off.
   Scoped: Labour rounds every context menu in the app; here only the grid ones (the
   column menu carries .e-grid-menu, and the Excel filter's flyout is appended inside
   the grid element). */
.e-excelfilter.e-dialog,
.e-excelfilter.e-popup,
.e-grid-menu.e-contextmenu,
.e-grid-menu .e-menu-parent.e-ul,
.e-grid-menu ul.e-contextmenu,
.e-contextmenu-wrapper.e-grid-menu,
.e-grid .e-contextmenu-wrapper,
.e-grid .e-contextmenu-wrapper ul.e-contextmenu,
.e-grid .e-contextmenu-wrapper .e-menu-parent.e-ul {
    border-radius: 8px !important;
}

/* Search box inside the filter popup — round its corners too. */
.e-excelfilter .e-searchcontainer .e-input-group,
.e-excelfilter .e-searchcontainer .e-input-group.e-control-wrapper {
    border-radius: 6px !important;
    overflow: hidden;
}

/* ----- Kill the persistent grey cell/row SELECTION highlight ------------------
   EJ2 grids/treegrids default to row selection: a click stamps .e-selectionbackground
   / .e-active on the clicked row's cells and .e-focused on the clicked cell, and it
   STAYS until the next click. The old Kendo grids showed no such lingering highlight
   and no page reads EJ2's selection API, so neutralize it app-wide (every .custom-grid,
   ejs-grid AND ejs-treegrid). Row HOVER (.e-gridhover) is deliberately left intact. */
.custom-grid td.e-rowcell.e-selectionbackground,
.custom-grid td.e-rowcell.e-active,
.custom-grid td.e-cellselectionbackground,
.custom-grid tr.e-row.e-active > td.e-rowcell,
.custom-grid td.e-rowcell.e-focused,
.custom-grid td.e-rowcell.e-focus,
.custom-grid td.e-active {
    background-color: transparent !important;
    color: #2B2B2B !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ----- All shared grid component hosts must be display:block -----
   Angular component hosts default to display:inline; an inline host wrapping the
   block grid generates a line-box strut (thin line + gap above/below the grid). */
app-grid,
app-grid-action-item,
app-grid-action-item-sspf,
app-tree-grid,
app-lazy-tree-list {
    display: block;
}

/* ----- Boxed "No records available." empty state (every grid) ----- */
.custom-grid .e-emptyrow td {
    text-align: center !important;
    padding: 24px 12px !important;
}
.custom-grid .e-grid-norecords-template {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20em;
    max-width: 90%;
    min-height: 4em;
    margin: 0 auto !important;
    padding: 12px !important;
    text-align: center !important;
    color: #424242 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
}
/* TreeGrid variant — ejs-treegrid (v27) does NOT support emptyRecordTemplate and
   renders its own "No records to display". Recreate the SAME boxed empty state in CSS:
   hide the native text (font-size:0) and draw the box + message with a ::before. */
.custom-grid.e-treegrid .e-emptyrow td {
    font-size: 0 !important;
    text-align: center !important;
    padding: 24px 12px !important;
}
.custom-grid.e-treegrid .e-emptyrow td::before {
    content: 'No records available.';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #424242;
    font-family: 'Poppins', sans-serif;
    width: 20em;
    max-width: 90%;
    min-height: 4em;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
}

/* ----- Shared grid black tooltip (cssClass="gai-icon-tooltip") -----
   Popup is body-appended, so it is styled globally. Non-selectable and
   non-interactive: pure hover tooltips, so pointer-events:none is safe. */
.e-tooltip-wrap.gai-icon-tooltip,
.e-tooltip-wrap.gai-icon-tooltip .e-tip-content {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
}

/* ----- Grid header: no vertical separators between header cells (app-wide).
   Row/body gridlines + the header's bottom separator stay untouched. Stacked
   .gird-colspan headers keep their full box through their own rule in styles.css. ----- */
.custom-grid .e-gridheader th.e-headercell,
.custom-grid .e-gridheader .e-headercell,
.custom-grid .e-gridheader .e-stackedheadercell {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
}

/* ----- Grid header labels — ellipsis ("…") when the title doesn't fit.
   .gai-header-text (action grids) / .tg-header-text (tree-grid); the raw page grids'
   .custom-tooltip header spans are blocks that ellipsize the same way. ----- */
.custom-grid .gai-header-text,
.custom-grid .tg-header-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.custom-grid .e-headercell .custom-tooltip {
    display: block;
}
/* SORTED column (EJ2 stamps aria-sort on the th): the sort arrow renders over the
   tail of a full-width label, so shorten the label to truncate BEFORE the arrow. */
.custom-grid .e-headercell[aria-sort="ascending"] .gai-header-text,
.custom-grid .e-headercell[aria-sort="descending"] .gai-header-text,
.custom-grid .e-headercell[aria-sort="ascending"] .tg-header-text,
.custom-grid .e-headercell[aria-sort="descending"] .tg-header-text,
.custom-grid .e-headercell[aria-sort="ascending"] .custom-tooltip,
.custom-grid .e-headercell[aria-sort="descending"] .custom-tooltip {
    max-width: calc(100% - 20px);
}

/* ----- Grid column menu — cap the ROOT menu so it never runs past the viewport
   bottom. SUBMENUS (Columns checkbox list / Filter) are deliberately NOT capped:
   EJ2 manages their overflow itself with an inline viewport-based max-height. ----- */
.e-grid-menu ul.e-contextmenu {
    /* Must comfortably fit the standard 7-item menu (~350px): a tighter cap put a
       scrollbar on every column menu and the LAST item (Filter) sat on the scroll
       boundary, where the hover-submenu opens and instantly closes. */
    max-height: min(75vh, 480px);
    overflow-y: auto;
}

/* ============================================================================
   Grid filter / column-menu popups vs dialogs. EJ2 computes the column menu's
   z-index only from BODY-LEVEL siblings, so a grid inside a dialog could open its
   menu BEHIND the dialog. Lift the grid menu, and the body-appended Custom Filter
   dialog, above every dialog. The Custom Filter dialog must also clear its own
   modal overlay (EJ2 puts that at menu + 0), hence 100010.
   ============================================================================ */
.e-contextmenu-wrapper.e-grid-menu,
.e-contextmenu-wrapper.e-grid-menu ul {
    z-index: 100000 !important;
}
.e-dialog.e-xlflmenu {
    z-index: 100010 !important;
}

/* ############################################################################
   INPUT CONTROLS — app-dropdown-list, app-combo-box(-free-text),
   app-multi-select-dropdown, app-multi-select-tree. Ported from Labour's
   LCSyncfusion.css (same sections, same order) so the Billing input controls and
   their body-appended popups look and behave like Labour's. This is the single
   source for these popups — src/styles.css no longer carries them. Static file:
   hard refresh (Ctrl+F5) after edits.
   ############################################################################ */

/* ----- Dropdown / list selected + hover — brand blue (#125AAB) app-wide ----- */
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover,
.e-popup .e-list-item.e-active,
.e-popup .e-list-item.e-active.e-hover {
    background-color: #125AAB !important;
    color: #ffffff !important;
}
.e-dropdownbase .e-list-item.e-hover,
.e-popup .e-list-item.e-hover {
    background-color: #e7f0fa !important;
    color: #125AAB !important;
}

/* ============================================================================
   app-dropdown-list (ejs-dropdownlist) POPUP — keyed exclusively on the unique
   `.app-ddl` cssClass the wrapper stamps on ITS popup. Undoes the .f-textbox
   squash ej2 copies onto the popup element and renders a compact Kendo-like list.
   ============================================================================ */
/* NOTE: ej2 copies the wrapper cssClass onto the popup, so the popup ALSO carries
   `.f-textbox` — whose global height:29px!important/padding:8px SQUASH the popup.
   This file loads BEFORE styles.css (where .f-textbox lives), so equal-specificity
   !important would LOSE here; the `.e-popup.app-ddl.f-textbox` variant (0,3,0)
   beats `.f-textbox` (0,1,0) regardless of load order. */
.e-popup.app-ddl,
.e-popup.app-ddl.f-textbox {
    height: auto !important;
    max-height: 160px !important;
    width: auto;
    padding: 0 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.e-popup.app-ddl .e-list-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    /* Long options WRAP (parity with the old Kendo list) instead of truncating,
       but stay COMPACT — tight line-height, small vertical padding and a reduced
       LEFT padding so rows read like the old dropdown, not tall/loose. */
    min-height: 22px !important;
    height: auto !important;
    /* The theme INDENTS item text via text-indent (padding overrides don't touch
       it) — zero it so labels start from the LEFT edge, 2px in. */
    text-indent: 0 !important;
    padding: 3px 3px 3px 4px !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #000000 !important;
}
/* Hover / keyboard-focus — light grey, matching the old Kendo list */
.e-popup.app-ddl .e-list-item.e-hover,
.e-popup.app-ddl .e-list-item.e-navigation,
.e-popup.app-ddl .e-list-item.e-focused {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
}
/* Selected item — brand blue (#125AAB), white text; wins over hover/focus combos. */
.e-popup.app-ddl .e-list-item.e-active,
.e-popup.app-ddl .e-list-item.e-active.e-hover,
.e-popup.app-ddl .e-list-item.e-active.e-focused,
.e-popup.app-ddl .e-list-item.e-active.e-item-focus,
.e-popup.app-ddl .e-list-item.e-active.e-navigation {
    background-color: #125AAB !important;
    color: #ffffff !important;
}
/* Bulletproof 11px for popup list text — any child node, any e-bigger variant. */
.e-popup.app-ddl,
.e-popup.app-ddl .e-list-item,
.e-popup.app-ddl .e-list-item *,
.e-bigger .e-popup.app-ddl .e-list-item,
.e-popup.app-ddl.e-bigger .e-list-item {
    font-size: 11px !important;
}
/* app-dropdown-list CONTROL (closed box) — 11px selected-value font. */
.e-input-group.app-ddl,
.e-input-group.app-ddl input.e-input,
.e-input-group.app-ddl .e-input,
.e-bigger .e-input-group.app-ddl input.e-input {
    font-size: 11px !important;
}
/* Popup search box ([allowFiltering] mode) — compact, f-textbox-like. Without
   these the EJ2 DropDownList filter input rendered with its default material
   look (tall box + heavy blue/animated underline on focus) — user-reported
   2026-07-27, Paycode Mapping → Paycode dropdown. Mirrors the app-msd filter
   styling so every filterable dropdown/combo/multiselect search box matches. */
.e-popup.app-ddl .e-filter-parent {
    padding: 4px 6px !important;
    border-bottom: 1px solid #eeeeee;
}
.e-popup.app-ddl .e-filter-parent .e-input-group {
    font-size: 11px !important;
    height: 26px !important;
    min-height: 0 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    padding: 0 6px !important;
    background: #FEFEFE !important;
}
.e-popup.app-ddl .e-filter-parent .e-input-group::before,
.e-popup.app-ddl .e-filter-parent .e-input-group::after,
.e-popup.app-ddl .e-filter-parent .e-input-group.e-input-focus::before,
.e-popup.app-ddl .e-filter-parent .e-input-group.e-input-focus::after {
    /* Material's animated underline — its FOCUS state is the heavy blue line. */
    content: none !important;
    display: none !important;
}
.e-popup.app-ddl .e-filter-parent .e-input-group.e-input-focus {
    border-color: #125AAB !important;
    box-shadow: none !important;
}
.e-popup.app-ddl .e-filter-parent .e-input-group input.e-input {
    font-size: 11px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    caret-color: #125AAB !important;
}
.e-popup.app-ddl .e-filter-parent .e-input-group-icon {
    color: #5b7089 !important;
    font-size: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
/* Empty popup: the wrapper's #noRecordsTemplate ("No data found"). Styled here
   (globally) because the popup is appended to <body>, outside the component's
   view-encapsulation. Centred grey message with breathing room, like the old
   Kendo empty list. Applies to both the dropdown-list and combo-box popups. */
.e-popup.app-ddl .no-data,
.e-popup.app-cbx .no-data,
.e-popup.app-ddl .e-nodata,
.e-popup.app-cbx .e-nodata,
/* app-msd (multiselect): its "No records found" fell back to EJ2's default
   (14px, different padding), so it didn't match the dropdown-list/combo-box
   empty state — user-reported 2026-07-22, paycode popup Client Template Header. */
.e-popup.app-msd .no-data,
.e-popup.app-msd .e-nodata {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px !important;
    padding: 16px !important;
    font-size: 11px !important;
    color: #9AA0A6 !important;
}

/* app-dropdown-list host normalisation lives at the END of this file (next to the
   app-combo-box host rule). NOTE: this static file is hard-cached — a Ctrl+F5 is
   required to see edits here. */

/* ============================================================================
   app-combo-box (ejs-combobox) POPUP — keyed exclusively on the unique `.app-cbx`
   cssClass the wrapper stamps on ITS popup. Same treatment as `.app-ddl`: undoes
   the .f-textbox squash ej2 copies onto the popup element and renders a compact
   Kendo-like list. Keyed on `.e-popup.app-cbx` so it matches ONLY this wrapper's
   popup and nothing else in the app.
   ============================================================================ */
.e-popup.app-cbx,
.e-popup.app-cbx.f-textbox {
    height: auto !important;
    max-height: 160px !important;
    width: auto;
    padding: 0 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.e-popup.app-cbx .e-list-item {
    text-indent: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    /* Wrap long options but stay compact — tight line-height + reduced left
       padding, matching the old Kendo list. */
    min-height: 22px !important;
    height: auto !important;
    padding: 3px 6px !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #000000 !important;
}
/* Hover / keyboard-focus — light grey, matching the old Kendo list */
.e-popup.app-cbx .e-list-item.e-hover,
.e-popup.app-cbx .e-list-item.e-navigation,
.e-popup.app-cbx .e-list-item.e-focused {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
}
/* Selected item — brand blue (#125AAB), white text; wins over hover/focus combos. */
.e-popup.app-cbx .e-list-item.e-active,
.e-popup.app-cbx .e-list-item.e-active.e-hover,
.e-popup.app-cbx .e-list-item.e-active.e-focused,
.e-popup.app-cbx .e-list-item.e-active.e-item-focus,
.e-popup.app-cbx .e-list-item.e-active.e-navigation {
    background-color: #125AAB !important;
    color: #ffffff !important;
}
/* Bulletproof 11px for popup list text — any child node, any e-bigger variant. */
.e-popup.app-cbx,
.e-popup.app-cbx .e-list-item,
.e-popup.app-cbx .e-list-item *,
.e-bigger .e-popup.app-cbx .e-list-item,
.e-popup.app-cbx.e-bigger .e-list-item {
    font-size: 11px !important;
}
/* app-combo-box CONTROL (closed box) — 11px value font. */
.e-input-group.app-cbx,
.e-input-group.app-cbx input.e-input,
.e-input-group.app-cbx .e-input,
.e-bigger .e-input-group.app-cbx input.e-input {
    font-size: 11px !important;
}

/* ============================================================================
   app-multi-select-dropdown (ejs-multiselect, CheckBox mode) POPUP — keyed
   exclusively on the unique `.app-msd` cssClass the wrapper stamps on ITS popup.
   Undoes the .f-textbox squash ej2 copies onto the popup element and renders a
   compact Kendo-like checkbox list. Matches ONLY this wrapper's popup.
   ============================================================================ */
.e-popup.app-msd,
.e-popup.app-msd.f-textbox,
.e-multi-select-list-wrapper.app-msd {
    height: auto !important;
    /* Kept in sync with the template's popupHeight="200px" — this !important cap
       BEATS the inline max-height EJ2 writes from popupHeight, so the two must
       always match. */
    max-height: 200px !important;
    width: auto;
    padding: 0 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
/* Kendo parity: the old wrapper opened its popup with popupSettings animate:false.
   EJ2 fades the popup in/out via an inline style.animation (FadeIn/FadeOut) — a
   1ms !important duration makes it imperceptible while still firing animationend
   (animation:none would strand EJ2's end-of-animation cleanup).

   Applied to EVERY select-type popup, not just app-msd. Only app-msd had this
   override, so the dropdown-list / combo-box / tree popups still ran EJ2's default
   fade on CLOSE — the "~1s to close after picking a value" the user reported
   (2026-07-21). Kendo closed instantly; this restores that across the board.
   The datepicker calendar (app-dp) is intentionally EXCLUDED — its popup is a
   different animation and was never reported as laggy. */
.e-popup.app-msd,
.e-popup.app-msd.f-textbox,
.e-popup.app-ddl,
.e-popup.app-cbx,
.e-popup.app-cbx-ft,
.e-popup.app-etd,
.e-popup.app-flt-ddl,
:is(.e-popup.app-mst, .e-ddt.e-popup) {
    /* 1ms keeps EJ2's FadeIn/FadeOut firing `animationend` (its cleanup + popup
       DETACH hangs off it) — but a 1ms fade still paints ONE partial-opacity frame,
       which read as a FLICKER on close (user, 2026-07-21). Pinning opacity:1
       overrides the fade's keyframes so no partial frame is ever drawn: the popup
       stays fully opaque for its ~1ms life, then EJ2 detaches it from the DOM
       (these popups are recreated per open, so opacity can never strand it visible).
       Result: instant appear / instant disappear, no fade, no flicker. */
    animation-duration: 1ms !important;
    opacity: 1 !important;
}
/* Values tuned live in DevTools (2026-07-15): tighter rows (25px, line-height 1,
   no vertical padding); long labels still WRAP (white-space normal). */
.e-popup.app-msd .e-list-item {
    font-size: 11px !important;
    line-height: 1.2 !important;
    min-height: 25px !important;
    height: auto !important;
    /* HANGING INDENT for wrapped labels (2026-07-22): the checkbox is pinned into
       a fixed left gutter (position:absolute, below) and the item reserves that
       gutter via padding-left. A label that wraps to a 2nd line (e.g. "Pending for
       Performer Action") therefore starts every line at the SAME x — flush under the
       first line's text, not under the checkbox. A flex row let the wrapped line fall
       back to the item's left edge (under the checkbox); block + gutter can't.
       Gutter = checkbox left (6px) + 14px box + ~1px = 21px, so the text hugs the
       checkbox and every wrapped line hangs flush under the first line's text. */
    /* 37px = the 21px checkbox gutter + the 16px gap ej2's text-indent used to add to the
       FIRST line only; with text-indent 0 a wrapped line (e.g. "Regtrack PVT LMTD / Pune")
       now starts under the first line's text, not under the checkbox (QA). */
    padding: 4px 8px 4px 37px !important;
    text-indent: 0 !important;
    display: block !important;
    position: relative !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    color: #000000 !important;
    background: transparent;
}
/* Checkbox wrapper: pinned to the left gutter, vertically centred on the whole
   (possibly multi-line) row. `left:6px` + 14px box ends at 20px, ~1px before the
   21px text start, so the text sits close to the checkbox. Absolute so it never
   consumes inline flow — that is what lets the label hang cleanly to its right.
   (Was flex-in-row + margin, which broke wrap.) */
.e-popup.app-msd .e-list-item .e-checkbox-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-indent: 0;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: 1 !important;
}
/* Hover / keyboard-focus — light grey, matching the old Kendo checkbox list */
.e-popup.app-msd .e-list-item.e-hover,
.e-popup.app-msd .e-list-item.e-item-focus,
.e-popup.app-msd .e-list-item.e-focused {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
}
/* Checked items keep plain text (Kendo checkbox mode never blue-filled rows —
   the checkbox itself shows the state). */
.e-popup.app-msd .e-list-item.e-active,
.e-popup.app-msd .e-list-item.e-active.e-hover,
.e-popup.app-msd .e-list-item.e-active.e-item-focus {
    background-color: transparent !important;
    color: #000000 !important;
}
.e-popup.app-msd .e-list-item.e-active.e-hover {
    background-color: #f0f0f0 !important;
}
/* Checkbox — compact 14px box; checked = BRAND BLUE #125AAB (project standard,
   same as the grid filter checkboxes — not pink, not bootstrap #0275d8). */
.e-popup.app-msd .e-checkbox-wrapper {
    margin-right: 6px;
}
.e-popup.app-msd .e-checkbox-wrapper .e-frame {
    /* The global `* { font-family: Poppins !important }` (styles.css) also reaches the
       frame; restate the icon font so the tick glyph renders (Billing addition). */
    font-family: 'e-icons' !important;
    height: 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Flex-centre the check glyph so the tick sits dead-centre of the box in either
       loaded theme (bootstrap5/material), instead of relying on line-height nudging. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 10px !important;
    border: 1px solid #B3B3B3;
    border-radius: 2px;
    background: #FFFFFF;
}
.e-popup.app-msd .e-checkbox-wrapper .e-frame.e-check {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}
/* Material's checkbox RIPPLE renders as a big pink/grey halo — remove it. */
.e-popup.app-msd .e-checkbox-wrapper .e-ripple-container,
.e-popup.app-msd .e-checkbox-wrapper .e-ripple-element {
    display: none !important;
}
/* Popup search box (allowFiltering mode) — compact, f-textbox-like. */
.e-popup.app-msd .e-filter-parent {
    padding: 4px 6px !important;
    border-bottom: 1px solid #eeeeee;
}
.e-popup.app-msd .e-filter-parent .e-input-group {
    font-size: 11px !important;
    height: 26px !important;
    min-height: 0 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    padding: 0 6px !important;
    background: #FEFEFE !important;
}
.e-popup.app-msd .e-filter-parent .e-input-group::before,
.e-popup.app-msd .e-filter-parent .e-input-group::after,
.e-popup.app-msd .e-filter-parent .e-input-group.e-input-focus::before,
.e-popup.app-msd .e-filter-parent .e-input-group.e-input-focus::after {
    /* Material's animated underline — its FOCUS state renders as the pink line. */
    content: none !important;
    display: none !important;
}
.e-popup.app-msd .e-filter-parent .e-input-group.e-input-focus {
    border-color: #125AAB !important;
    box-shadow: none !important;
}
.e-popup.app-msd .e-filter-parent .e-input-group input.e-input {
    font-size: 11px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    caret-color: #125AAB !important;
}
.e-popup.app-msd .e-filter-parent .e-input-group-icon {
    color: #5b7089 !important;
    font-size: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
/* Native "Select All" header (showSelectAll mode) — same row look as the list
   items; its .e-checkbox-wrapper picks up the checkbox rules above. */
.e-popup.app-msd .e-selectall-parent {
    font-size: 11px !important;
    min-height: 0 !important;
    height: 28px !important;
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    color: #000000 !important;
    border-bottom: 1px solid #eeeeee;
}
.e-popup.app-msd .e-selectall-parent .e-all-text {
    font-size: 11px !important;
    color: #000000 !important;
    /* ej2 indents this label 17px; with it the "Select All" text sat right of the items'. */
    text-indent: 0 !important;
}
/* 16px = the gap between an item's checkbox and its text, so "Select All" lines up with
   the options below it. */
.e-popup.app-msd .e-selectall-parent .e-checkbox-wrapper {
    margin-right: 16px;
}

/* Bulletproof 11px for popup list text — any child node, any e-bigger variant. */
.e-popup.app-msd,
.e-popup.app-msd .e-list-item,
.e-popup.app-msd .e-list-item *,
.e-bigger .e-popup.app-msd .e-list-item,
.e-popup.app-msd.e-bigger .e-list-item {
    font-size: 11px !important;
}

/* app-multi-select-dropdown host normalisation — same inline-block treatment as
   the other converted dropdown hosts below. */
app-multi-select-dropdown {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.e-popup.app-msd .e-list-item .e-checkbox-wrapper {
    pointer-events: none !important;
}
/* app-combo-box host normalisation — the <app-combo-box>/<ejs-combobox> hosts are
   INLINE custom elements: height rules pages put on them are silently ignored on
   inline boxes and the inline line-box adds a baseline strut below the 29px
   control. inline-block, NOT block — a block host forces a LINE BREAK, stacking
   filter-bar controls vertically on inline-flow pages (same bug the dropdown-list
   host fix below addresses). inline-block accepts the height clamps, kills the
   strut (vertical-align: middle), and is blockified automatically inside flex
   containers, so flex-laid pages behave exactly as with block. */
app-combo-box,
app-combo-box ejs-combobox,
app-combo-box-free-text,
app-combo-box-free-text ejs-combobox {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
/* app-dropdown-list host normalisation — the <app-dropdown-list>/<ejs-dropdownlist>
   hosts are INLINE custom elements: height rules pages put on them (e.g.
   .dropdown-setting{height:30px!important}) are silently IGNORED on inline boxes,
   and the inline line-box adds a baseline strut below the 29px control.
   inline-block, NOT block: a block host forces a LINE BREAK, stacking filter-bar
   controls vertically on pages that lay them out in inline flow (e.g. Designation
   Master's search + select + buttons row). inline-block still accepts the pages'
   height clamps, avoids the baseline strut (vertical-align: middle), and is
   blockified automatically inside flex containers — so flex-laid pages behave
   exactly as with the earlier block fix. */
app-dropdown-list,
app-dropdown-list ejs-dropdownlist {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
/* Clamp anything EJ2 leaves inside the host besides the visible control (e.g. the
   hidden value <select>) so it can never contribute flow height. */
app-dropdown-list ejs-dropdownlist > select.e-ddl-hidden {
    display: none !important;
}


/* ============================================================================
   app-multi-select-tree (ejs-dropdowntree, checkbox tree) POPUP — keyed
   exclusively on the unique `.app-mst` cssClass the wrapper stamps on ITS popup.
   Undoes the .f-textbox squash ej2 copies onto the popup element and renders a
   compact, Kendo-like checkbox tree at 11px. Matches ONLY this wrapper's popup.
   ============================================================================ */
/* Matched via BOTH the wrapper's `.app-mst` cssClass AND the generic
   `.e-ddt.e-popup` — every ejs-dropdowntree in this app comes from this wrapper,
   so the generic hook is equivalent and immune to cssClass propagation quirks. */
:is(.e-popup.app-mst, .e-ddt.e-popup),
:is(.e-popup.app-mst, .e-ddt.e-popup).f-textbox {
    height: auto !important;
    /* 350px ≈ the old Kendo popup (search row + ~7 rows before scrolling). */
    max-height: 350px !important;
    /* AUTO-width popups (popupWidth:'auto' — the Kendo `{width:'NaNpx'}` no-op)
       size to the longest node. Bound them so a deep/long entity name can't run
       off-screen and a short list can't collapse narrower than the control. */
    width: auto;
    min-width: 240px;
    max-width: 620px;
    padding: 0 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    font-size: 11px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
/* Node text must not wrap — an auto-width popup grows to fit it instead (Kendo).
   The tree scrolls vertically only; a horizontal scrollbar was the tell that the
   popup had been squashed to the control width. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-text {
    white-space: nowrap !important;
}
/* --- Search box (allowFiltering): bordered compact input like the old Kendo
   filter row — NOT the material underline, whose focus state is the PINK line. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap {
    padding: 6px 8px !important;
    border-bottom: 1px solid #EAEAEA !important;
    background: #FFFFFF !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group.e-control-wrapper {
    font-size: 11px !important;
    height: 30px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0.997px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background: #FEFEFE !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}
/* Material's animated underline is ::before + ::after on the SAME element (its
   focus state is the PINK line). ::after is killed outright; ::before is
   REPURPOSED below as the search glyph, so it must be fully reset, not hidden. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group::after,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group.e-input-focus::after {
    content: none !important;
    display: none !important;
}
/* Search magnifier INSIDE the filter box, left of the caret (Kendo parity — the
   old filter row rendered a magnifier). Declared for the focus state too: the
   theme's `.e-input-group.e-input-focus::before` is more specific than
   `.e-input-group::before` and would otherwise repaint the underline on focus. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group::before,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group.e-input-focus::before {
    content: "\e993" !important;
    font-family: 'e-icons' !important;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #5b7089 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Undo every underline property the theme sets on this pseudo. */
    position: static !important;
    inset: auto !important;
    background: none !important;
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    order: -1;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group.e-input-focus {
    border-color: #125AAB !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap input.e-input {
    font-size: 11px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    caret-color: #125AAB !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group-icon {
    color: #5b7089 !important;
    font-size: 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
/* --- Tree rows: COMPACT, matching the user-approved app-msd geometry (25px
   rows, line-height 1-ish, 11px). Row height comes from .e-fullrow (the
   absolutely-positioned row background) and the .e-list-text/.e-text-content
   line-height. IMPORTANT: selectors are scoped by the POPUP only — NOT via
   `.e-treeview` — the tree root inside this popup does not reliably carry that
   class (rules chained through it silently failed: big text/rows while the
   unscoped checkbox rules worked). --- */
/* ROOT list: 18px left gutter — the expand toggle of a top-level parent node is
   pulled into this space (negative margin below), so its checkbox aligns with a
   leaf node's checkbox. Vertical 4px keeps the compact list padding. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-ul {
    padding: 4px 0 4px 18px !important;
}
/* NESTED child lists: a further 18px indent PER LEVEL. ej2 normally does this via
   `.e-treeview .e-list-item .e-ul{padding-left:24px}` but that selector is chained
   through `.e-treeview`, which does NOT reliably apply inside this popup — so the
   hierarchy rendered flat. Re-declared here scoped to the popup; paddings compound
   through the nested <ul>s so each level steps right (classic tree indentation). */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item .e-ul {
    padding: 0 0 0 18px !important;
    margin: 0 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item {
    padding: 0 !important;
    min-height: 0 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-fullrow {
    height: 25px !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-text {
    font-size: 11px !important;
    line-height: 24px !important;
    min-height: 0 !important;
    padding: 0 5px !important;
    color: #000000 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item .e-text-content {
    /* No left padding — the `.e-ul` gutter above is the sole indent mechanism, so
       the toggle-in-gutter geometry (below) stays consistent at every level. */
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 24px !important;
    margin-left: -20px !important;
    display: flex !important;
    align-items: center !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper {
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    height: auto !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item * {
    font-size: 11px !important;
}
/* --- Expand / collapse TOGGLE (parent → child) -------------------------------
   ej2 paints the toggle glyph ONLY via `.e-treeview .e-icon-expandable::before`,
   a selector chained through `.e-treeview` — which does NOT reliably apply inside
   this DropDownTree popup, so the arrow was invisible and the tree looked flat
   ("toggle missing"). Re-declared scoped to the popup so it always renders.
   Both states share ej2's glyph `\e22f` (a right chevron ▸); the expanded state
   (`.e-icon-collapsible`) rotates it 90° to point down ▾ — identical to Kendo. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item .e-icons.e-icon-expandable,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item .e-icons.e-icon-collapsible {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 24px !important;
    /* Pull left into the 18px `.e-ul` gutter so the checkbox that follows aligns
       with a leaf node's checkbox (leaves have no toggle, just the gutter). */
    margin: 0 0 0 -18px !important;
    padding: 0 !important;
    color: #5b7089 !important;
    vertical-align: middle;
    cursor: pointer;
    flex: 0 0 auto !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item .e-icons.e-icon-expandable::before,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item .e-icons.e-icon-collapsible::before {
    content: "\e22f" !important;
    font-family: 'e-icons' !important;
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 0 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item .e-icons.e-icon-collapsible {
    transform: rotate(90deg) !important;
}
/* Hover / focus row — light grey via the fullrow background (that IS the row). */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item.e-hover > .e-fullrow,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item.e-node-focus > .e-fullrow {
    background-color: #f0f0f0 !important;
    border-color: transparent !important;
}
/* Active (selected) row keeps plain text — the checkbox shows the state, never a
   blue-filled row (parity with the old default-ocean-blue Kendo checkbox tree). */
/* The app-wide flat-dropdown rule `.e-popup .e-list-item.e-active { #125AAB/#fff }`
   (the "Dropdown / list selected + hover" block above) also matches TREE popup nodes and painted the selected row solid
   brand-blue — it targets the <li> ITSELF, so the .e-fullrow neutralisation below
   never caught it. Same li-level kill the app-msd checkbox list already has. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item.e-active,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item.e-active.e-hover {
    background-color: transparent !important;
    color: #000000 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item.e-active > .e-fullrow {
    background-color: transparent !important;
    border-color: transparent !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item.e-active > .e-text-content .e-list-text {
    color: #000000 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-list-item.e-active.e-hover > .e-fullrow {
    background-color: #f0f0f0 !important;
}
/* Checkbox — compact 14px box; checked = BRAND BLUE #125AAB (project standard).
   Flex-centre the tick GLYPH inside the frame — with line-height metrics alone
   the ✓ sat visibly LOW in the box. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-frame {
    height: 14px !important;
    width: 14px !important;
    font-size: 9px !important;
    padding: 0 !important;
    border: 1px solid #B3B3B3;
    border-radius: 2px;
    background: #FFFFFF;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Pin the tick / dash GLYPH size to the box. ej2's material theme sizes the
   check (`e-check::before`) and indeterminate dash (`e-stop::before`) glyphs from
   its OWN font-size (~11px), which overflowed the compact 14px frame and made the
   checkmark look oversized / clipped. 10px sits cleanly centred inside the 12px
   inner box. Covers both the base ::before and the state-specific ::before that
   ej2 declares separately (higher specificity, so it must be named explicitly). */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-frame::before,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-frame.e-check::before,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-frame.e-stop::before {
    font-size: 10px !important;
    line-height: 1 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-frame.e-check {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}
/* Indeterminate (parent with SOME children checked) — DISTINCT from checked: keep
   the brand-blue fill but the glyph is ej2's dash, so a half-selected State reads
   differently from a fully-checked one. (A global .e-frame.e-stop rule already
   paints it blue; this just guarantees the dash sits right inside our compact box.) */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-frame.e-stop {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}
/* Material's checkbox RIPPLE renders as a big pink/grey halo — remove it. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-ripple-container,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-ripple-element {
    display: none !important;
}
/* CLOSED BOX toggle caret — the theme pins it flush against the right border
   corner; inset + compact it like every other dropdown's caret. */
/* Colour is BLACK #000000, matching app-combo-box: every dropdown / multiselect /
   tree wrapper shares one toggle colour so mixed filter bars read as a set.
   (The popup FILTER magnifiers stay #5b7089 — those are search icons, not toggles.) */
.e-ddt.app-mst .e-input-group-icon,
.e-ddt.app-mst .e-ddt-icon,
.app-mst .e-input-group-icon.e-ddt-icon {
    color: #000000 !important;
    font-size: 11px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 8px 0 4px !important;
    border: none !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Built-in "Select All" header row (showSelectAll) — same compact row look. */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-selectall-parent {
    font-size: 11px !important;
    min-height: 0 !important;
    height: 28px !important;
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    color: #000000 !important;
    border-bottom: 1px solid #eeeeee !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-selectall-parent .e-all-text {
    font-size: 11px !important;
    color: #000000 !important;
}

/* Template-driven (radio-list) consumer — a projected node template renders its
   OWN checkbox that does the selecting (single-select radio semantics), so hide
   ej2's built-in checkbox exactly as Kendo hid `.k-treeview-md .k-checkbox-wrap`.
   Scoped to the `app-mst-tpl` popup only (added by the wrapper's mstCssClass when
   a #nodeTemplate is projected) so normal checkbox trees keep their checkbox. */
.e-popup.app-mst-tpl .e-checkbox-wrapper {
    display: none !important;
}

/* app-multi-select-tree host normalisation — same inline-block treatment as the
   other converted dropdown hosts so page width/height rules apply and no baseline
   strut appears below the 29px control. */
app-multi-select-tree,
app-multi-select-tree ejs-dropdowntree {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    width: 100%;
}

/* Clickable grid chrome shows the hand cursor (QA). The column-menu / filter icons inherit
   ej2's header cursor:default, and an Excel-filter checkbox row toggles on a click anywhere
   in it, not only on the box. */
.e-grid .e-headercell .e-columnmenu,
.e-grid .e-headercell .e-filtermenudiv,
.e-filter-popup .e-ftrchk {
    cursor: pointer;
}