/* ============================================================
   LCSyncfusion.css — COMMON Syncfusion grid styling (shared by app-grid,
   app-grid-action-item, and any future Syncfusion grid that uses the
   .custom-grid / .custom-pager markup). Linked globally from index.html,
   the sibling of LCKendo.css.

   Body-appended popups (Excel filter, column menu, custom filter dialog)
   must be styled globally, which is why this lives in a global stylesheet
   rather than a component's (encapsulated) CSS.
   ============================================================ */

.grid-wrapper {
    position: relative;
}

/* Keep the shared <app-spinner> overlay INSIDE the grid (its own CSS makes it
   position:fixed / full-screen). .grid-wrapper is the relative anchor. */
.grid-wrapper app-spinner .overlay {
    position: absolute !important;
    z-index: 10 !important;
}

/* Hide Syncfusion's built-in (black) grid spinner so only the brand
   <app-spinner> (#125AAB) shows. Scoped to .custom-grid so it never hits the
   app-spinner's own spinner (a sibling of the grid, not inside it). */
.custom-grid .e-spinner-pane {
    display: none !important;
}

.custom-grid {
    font-family: 'Popins', sans-serif;
}

/* ----- Header colour layout (parity with the old Kendo ocean-blue grid) ----- */
.custom-grid .e-gridheader,
.custom-grid .e-gridheader .e-headercell,
.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 {
    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: 'Popins', sans-serif;
    font-size: 12px;
    color: #2B2B2B;
}

/* ----- Table width parity with the old Kendo grid (global, so it covers app-grid-action-item,
   its server-side twin AND app-tree-grid). The table always fills its container — no empty
   space on the right when the columns are narrower than the container (no-width columns flex
   to absorb the slack) — yet it still grows past the container and shows a horizontal scrollbar
   when the columns are genuinely wider. A consumer's [scrollerWidth] (--grid-scroll-width) wins
   when set; otherwise the var falls back to 100%. The .gai-fit (fitColumns) mode overrides this
   with its own table-layout:fixed / min-width:0, so it is unaffected. ----- */
.custom-grid .e-content table,
.custom-grid .e-gridheader table {
    min-width: var(--grid-scroll-width, 100%);
}

/* ----- Custom pager (#pagerTemplate) — "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: 'Popins', 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. Compliance Assignment's Reload icon). Pinned to the far right — the OLD
   Kendo grid hosted this control inside its pager, after the count. When present,
   the "a - b of c items" count shifts left to make room. Only pagers that render
   a .cp-end are affected, so no other grid changes. */
.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 -----
   Boxed empty state lives in src/styles.css (bundled, hot-reloads, loads last)
   so it isn't defeated by this file's hard browser cache / earlier load order. */
.custom-grid .e-grid-norecords-template,
.custom-grid .e-emptyrow td {
    text-align: center;
    padding: 12px;
    color: #424242;
    font-family: 'Popins', 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) -----
   !important is required: this file is linked in index.html and loads BEFORE
   the Angular bundle + Syncfusion bootstrap5 theme, which set a larger checkbox
   and would otherwise win on equal specificity (making the box big again). */
.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;
}

/* ----- 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) */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check,
.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-checkbox-wrapper .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-frame.e-stop,
.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 {
    background-color: #125AAB !important;
    border-color: #125AAB !important;
    color: #ffffff !important;
}
.e-checkbox-wrapper:hover .e-frame.e-check,
.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-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover {
    color: #125AAB !important;
    background-color: #e7f0fa !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 (a bare line under "Equal" / "Enter the value").
   Convert them to the app's bordered f-textbox look, same as every other filter
   control: 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;
}

/* ============================================================
   Filter popup layout (moved here from the global styles.css) — label
   ellipsis, list height fit, and rounded popup corners.
   ============================================================ */

/* Syncfusion grid Excel/checkbox filter popup — truncate long option labels
   with an ellipsis instead of wrapping to a second line when the vertical
   scrollbar narrows the available width. Popup is appended to body, so this
   must live in global styles (component ::ng-deep cannot reach it). */
.e-grid-popup .e-checkboxlist .e-ftrchk,
.e-excelfilter .e-checkboxlist .e-ftrchk {
    display: flex;
    align-items: center;
}
.e-dialog .e-dlg-content{
        height: 200px;
}
.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 (otherwise it stacks into too much indent). */
.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). With only a couple of options that height
   is taller than the content, so the dialog overflows and shows a needless
   scrollbar + empty gap. 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 / checkbox filter dialog)
   and the column-menu / text-filter context menus, to match the app's rounded
   UI. No overflow:hidden on purpose — the "Text Filters" submenu flyout sits
   outside the dialog's right edge and clipping would cut it off. */
/* Rounded corners on the grid filter popup (Excel / checkbox filter dialog),
   the column-menu, and the "Text Filters" flyout submenu. The .e-menu-parent
   .e-ul / .e-contextmenu-wrapper selectors are the ones that actually match the
   live DOM (verified in DevTools). !important is required — this file loads
   before the Angular bundle + Syncfusion bootstrap5 theme, which set
   border-radius: 0 and would override on equal specificity.
   No overflow:hidden — the "Text Filters" submenu flyout sits outside the
   dialog's right edge and clipping would cut it off. */
.e-excelfilter.e-dialog,
.e-excelfilter.e-popup,
.e-grid-menu.e-contextmenu,
.e-menu-parent .e-ul,
.e-contextmenu-wrapper,
.e-contextmenu-wrapper ul.e-contextmenu,
ul.e-contextmenu.e-menu-parent {
    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;
}

/* ============================================================
   Shared Syncfusion TreeGrid chrome (app-tree-grid + app-lazy-tree-list).
   The <ejs-treegrid> host is a thin wrapper; the REAL grid is the inner .e-grid
   child. Put the rounded frame on that inner grid, normalise the inflated header
   height, and vertically centre the column-menu icon. Global so both tree grids
   — including lazy-tree-list, which has no component stylesheet — pick it up.
   ============================================================ */
.custom-grid.e-treegrid {
    border: none;
    border-radius: 0;
    overflow: visible;
}
.custom-grid.e-treegrid > .e-grid {
    border: 0.997px solid #D9D9D9;
    border-radius: 10px;
    overflow: hidden;
}
.custom-grid.e-treegrid .e-toolbar {
    display: none !important;
}
.custom-grid.e-treegrid .e-gridheader .e-columnheader,
.custom-grid.e-treegrid .e-gridheader .e-headercell {
    height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
    position: relative;
}
/* IMPORTANT: do NOT override .e-headercelldiv (no display:flex, no line-height,
   no height). This grid uses per-column #headerTemplate (a .tg-header-text span),
   exactly like the action grid's .gai-header-text — and the action grid works
   because it leaves .e-headercelldiv on the theme's own metrics
   (`.e-grid .e-headercelldiv{height:37px}` + theme `line-height:30px`). The sort
   arrow's float is lifted onto the title line by `.e-sortfilterdiv{margin:-16px…}`
   tuned to THAT 30px line; an earlier flex/line-height:normal override on
   .e-headercelldiv killed the line, so the arrow dropped onto a SECOND ROW under
   the title (PremiseMaster bug). We also do NOT reposition the sort arrow /
   column-menu / filter icons — the theme's native float layout centres them in
   the 42px header (= the theme's default header height), same as the action grid.
   The only header override kept is the .e-headercell height/padding/border/colour
   above, which does not disturb the float metrics. */
.custom-grid.e-treegrid .e-gridheader,
.custom-grid.e-treegrid .e-gridheader .e-headercontent {
    background-color: #ECF5FF !important;
}

/* ===== Lazy tree list (app-lazy-tree-list) — compact cell sizing to match the
   old Kendo treelist. Scoped via .custom-tooltip (which only the lazy tree list
   sets) so it doesn't change app-tree-grid (premise-master). Syncfusion's
   default 8px 21px rowcell padding made the rows taller/wider than the old grid;
   tighten it so the row height matches now that the -12px margin hack is gone. */
.custom-grid.custom-tooltip.e-treegrid .e-rowcell {
    padding: 0px 8px !important;
    font-size: 11px !important;
    color: #2B2B2B;
    line-height: normal;
}
/* Tree (first) column — tight left + right padding so the toggle/text use the
   full column width (Syncfusion's own indent still offsets nested levels). */
.custom-grid.custom-tooltip.e-treegrid .e-rowcell.e-treerowcell {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
/* Trim Syncfusion's base tree-cell indent so root rows don't have a big left gap
   before the toggle (nested levels keep their per-level indent). */
.custom-grid.custom-tooltip.e-treegrid .e-rowcell.e-treerowcell .e-treecell {
    margin-left: 0 !important;
}
/* Action / eye icon cells — keep the icons at the old 24px size. */
.custom-grid.custom-tooltip.e-treegrid .cell-content img {
    height: 24px;
    width: 24px;
}

/* Header select-all + row checkbox: centre each within its own cell. (Header
   cell padding is left untouched so the other column titles aren't disturbed.) */
.custom-grid.custom-tooltip.e-treegrid .lt-checkbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.custom-grid.custom-tooltip.e-treegrid .lt-checkbox-cell input[type="checkbox"] {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
/* Zero the padding on the checkbox column's HEADER and ROW cells (identified by
   containing .lt-checkbox-cell) so the two centred checkboxes share the exact
   same x-position. :has targets only that column, leaving other headers alone. */
.custom-grid.custom-tooltip.e-treegrid .e-headercell:has(.lt-checkbox-cell),
.custom-grid.custom-tooltip.e-treegrid .e-rowcell:has(.lt-checkbox-cell) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

/* ----- Custom tree toggle + per-row loader (app-lazy-tree-list) ----- */
.custom-grid.custom-tooltip.e-treegrid .lt-tree-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding-left: 5px !important;
}
/* flex:1 + min-width:0 lets the text take the remaining width and only show the
   ellipsis when it genuinely overflows (without min-width:0 the flex item
   collapsed and showed just "…"). */
.custom-grid.custom-tooltip.e-treegrid .lt-tree-text {
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}
/* Tree toggle: uses Syncfusion's native tree glyph (e-icons e-treegridexpand /
   e-treegridcollapse) so it looks identical to the premise tree grid. The glyph
   itself flips between the collapsed/expanded chevron via the [ngClass] in the
   template, so no CSS rotation is needed. */
.custom-grid.custom-tooltip.e-treegrid .lt-toggle {
    flex: 0 0 auto;
    cursor: pointer;
}
/* Per-row spinner shown in place of the toggle while children are fetched. */
.custom-grid.custom-tooltip.e-treegrid .lt-row-spinner {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 2px solid #c7d3e3;
    border-top-color: #125AAB;
    border-radius: 50%;
    animation: lt-spin 0.7s linear infinite;
}
@keyframes lt-spin {
    to { transform: rotate(360deg); }
}
/* Hide Syncfusion's own tree toggle + the empty leaf placeholder (.e-icons.e-none)
   — we render our own toggle, and the placeholder was adding height that pushed
   the tree-column content down. Scoped to THIS grid (e-none is a generic class
   used elsewhere, so it must not be hidden globally). */
.custom-grid.custom-tooltip.e-treegrid .e-treegridexpand:not(.lt-toggle),
.custom-grid.custom-tooltip.e-treegrid .e-treegridcollapse:not(.lt-toggle),
.custom-grid.custom-tooltip.e-treegrid .e-icons.e-none {
    display: none !important;
}

/* Vertically centre the tree-column content so it lines up with the other
   columns' text (it was sitting lower because the tree cell/placeholder used
   baseline alignment). */
.custom-grid.custom-tooltip.e-treegrid .e-rowcell.e-treerowcell {
    vertical-align: middle !important;
}
.custom-grid.custom-tooltip.e-treegrid .e-rowcell.e-treerowcell .e-treecell {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}
.e-grid .e-gridheader .e-sortfilter .e-headercelldiv, .e-grid .e-gridheader .e-stackedheadercelldiv {
    padding: 0 !important;
}
.e-grid .e-rowcell {
    font-size: 11px !important;
    line-height: 17px !important;
}
.e-grid .e-headercelldiv {
    font-size: 11px !important;
    height: 37px;
}

/* ----- Kill the persistent grey cell/row SELECTION highlight ------------------
   EJ2 grids/treegrids default to row selection: a click stamps .e-selectionbackground
   / .e-active (grey) on the clicked row's cells and .e-focused (grey box) 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 the
   selection/focus background app-wide (scoped to the shared .custom-grid — covers
   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;
}

/* ############################################################################
   COMMON Syncfusion overrides consolidated from src/styles.css (2026-07).
   NOTE: this file is linked from index.html and loads BEFORE the Angular styles
   bundle (which imports the Syncfusion material theme), so every property that
   competes with the theme MUST carry !important to win. This file is also a
   static asset with no content hash — 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;
}

/* ----- 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).
   These components use ViewEncapsulation.None where :host is a no-op, so the
   hosts are targeted by tag name. */
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 (all shared grids) ----- */
.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;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
}
/* TreeGrid variant — ejs-treegrid (v27) does NOT support emptyRecordTemplate (the
   #emptyRecordTemplate in the tree components is ignored) and renders its default
   "No records to display" text. Recreate the SAME boxed empty state purely in CSS:
   hide the native text (font-size:0) and draw the box + message with a ::before.
   Scoped to .e-treegrid so normal grids' real templates are untouched. */
.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;
}

/* ----- "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;   /* dialog title: "Custom Filter" */
}
.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;   /* "Show rows where:", field name, OK/Cancel */
}
.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;   /* operator dropdown + value inputs */
}
/* Match Case checkbox + AND/OR radios — 14px controls, 11px labels (radio dims
   mirror Syncfusion's own .e-small variant: 14px ring / 6px dot, 4px offset). */
.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;
}

/* ----- Grid header: no vertical separators between header cells (app-wide).
   Row/body gridlines + the header's bottom separator stay untouched. ----- */
.custom-grid .e-gridheader th.e-headercell,
.custom-grid .e-gridheader .e-headercell {
    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). ----- */
.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;
}
/* SORTED column (EJ2 stamps aria-sort on the th): the sort arrow renders over the
   tail of a full-width label (LCSyncfusion zeroes the theme's header padding that
   normally reserves icon room), e.g. Minimum Wages → Notifications → sort
   Notification Id. Shorten the label so it truncates 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 {
    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
   here: EJ2 manages their overflow itself with an inline viewport-based
   max-height + scroll, and forcing our own overflow onto ul.e-menu-parent
   conflicted with that (the Filter submenu could render out of view /
   unclickable on some grids). ----- */
.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 — "Filter not
       showing" on some grids. 480px caps only pathological cases. */
    max-height: min(75vh, 480px);
    overflow-y: auto;
}
/* Page-scoped override — LCMyComplianceDocumentComponent ONLY (marker class added
   to <body> by that component): pin the column menu at a fixed top there. */
body.lc-compliance-doc-page .e-grid-menu ul.e-menu-parent,
body.lc-compliance-doc-page .e-grid-menu ul.e-contextmenu {
    top: 220px !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;
    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-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;
}
/* 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 {
    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 {
    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;
    /* 300px matches the old Kendo checkbox popup (~9 rows + search visible). */
    max-height: 300px !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-msd .e-list-item {
    font-size: 11px !important;
    line-height: 1.35 !important;
    /* Long labels WRAP (parity with app-ddl/app-cbx) instead of clipping. */
    min-height: 28px !important;
    height: auto !important;
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    color: #000000 !important;
    background: transparent;
}
/* 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 {
    height: 14px !important;
    width: 14px !important;
    line-height: 12px !important;
    font-size: 9px !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;
}
.e-popup.app-msd .e-selectall-parent .e-checkbox-wrapper {
    margin-right: 6px;
}

/* 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;
} */

/* 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-kendo-datepicker (ejs-datepicker) CALENDAR POPUP — keyed exclusively on the
   unique `.app-dp` cssClass the wrapper stamps on ITS popup. Same treatment as
   `.app-ddl`/`.app-cbx`: undoes the .f-textbox squash ej2 copies onto the popup
   element (height:29px!important/padding:8px from the global .f-textbox rule would
   otherwise crush the whole calendar) and renders a compact, Kendo-like calendar
   at 11px. Keyed on `.e-popup.app-dp` so it matches ONLY this wrapper's popup.
   ============================================================================ */
.e-popup.app-dp,
.e-popup.app-dp.f-textbox {
    height: auto !important;
    width: auto !important;
    padding: 0 !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;
    font-size: 11px !important;
}
/* 11px throughout the calendar (title, weekday headers, day cells) — matches the
   old `.f-textbox .k-calendar { font-size: 11px }` rules. */
.e-popup.app-dp .e-calendar,
.e-popup.app-dp .e-calendar .e-header .e-title,
.e-popup.app-dp .e-calendar .e-header .e-date-icon-prev,
.e-popup.app-dp .e-calendar .e-header .e-date-icon-next,
.e-popup.app-dp .e-calendar th,
.e-popup.app-dp .e-calendar td,
.e-popup.app-dp .e-calendar td span.e-day {
    font-size: 11px !important;
}
/* Selected day — brand blue (#125AAB), white text (consistent with app-ddl/app-cbx
   selected item + the default-ocean-blue Kendo look). */
.e-popup.app-dp .e-calendar .e-content td.e-selected span.e-day,
.e-popup.app-dp .e-calendar .e-content td.e-selected:hover span.e-day,
.e-popup.app-dp .e-calendar .e-content td.e-focused-date.e-selected span.e-day {
    background-color: #125AAB !important;
    color: #ffffff !important;
    border: none !important;
}
/* Today marker keeps a blue outline, not a filled cell. */
.e-popup.app-dp .e-calendar .e-content td.e-today span.e-day,
.e-popup.app-dp .e-calendar .e-content td.e-focused-date.e-today span.e-day {
    border: 1px solid #125AAB !important;
    color: #125AAB !important;
}

/* app-kendo-datepicker host normalisation — the <app-kendo-datepicker>/
   <ejs-datepicker> hosts are INLINE custom elements: width/height rules pages put
   on them (and the wrapper's `class="uniform-size"`) are silently ignored on inline
   boxes and the inline line-box adds a baseline strut below the 29px control.
   inline-block accepts the pages' size clamps, avoids the baseline strut, and is
   blockified automatically inside flex containers — matching app-dropdown-list. */
/* app-kendo-datepicker,
app-kendo-datepicker ejs-datepicker {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
} */

/* ============================================================================
   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;
    max-height: 320px !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;
}
/* --- 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;
}
: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::after,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-filter-wrap .e-input-group.e-input-focus::before,
: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;
}
: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. EJ2 treeview row height comes from .e-fullrow (the
   absolutely-positioned row background) and .e-list-text line-height — the
   material theme makes both ~36-48px tall, which is the "huge rows" look.  --- */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-ul {
    padding: 4px 0 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-list-item {
    padding: 0 !important;
    min-height: 0 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-fullrow {
    height: 28px !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-list-text {
    font-size: 11px !important;
    line-height: 26px !important;
    min-height: 0 !important;
    padding: 0 5px !important;
    color: #000000 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-list-item .e-text-content {
    padding: 1px 0 1px 2px !important;
    min-height: 0 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-list-item * {
    font-size: 11px !important;
}
/* Hover / focus row — light grey via the fullrow background (that IS the row). */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-list-item.e-hover > .e-fullrow,
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .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). */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .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-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: #000000 !important;
}
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
    background-color: #f0f0f0 !important;
}
/* Checkbox — compact 14px box; checked = BRAND BLUE #125AAB (project standard). */
:is(.e-popup.app-mst, .e-ddt.e-popup) .e-checkbox-wrapper .e-frame {
    height: 14px !important;
    width: 14px !important;
    line-height: 12px !important;
    font-size: 9px !important;
    border: 1px solid #B3B3B3;
    border-radius: 2px;
    background: #FFFFFF;
}
: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;
}
/* 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;
}
/* 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%;
} */

/* ============================================================================
   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. Compact 11px list, same look as the
   app-ddl 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;
}
.e-popup.app-flt-ddl .e-list-item {
    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;
}
/* Bulletproof 11px for any child node / e-bigger variant. */
.e-popup.app-flt-ddl .e-list-item *,
.e-bigger .e-popup.app-flt-ddl .e-list-item {
    font-size: 11px !important;
}