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

/* ----- No-records template ----- */
.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;
}

/* ============================================================
   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;
}
.custom-grid.e-treegrid .e-gridheader .e-headercell .e-headercelldiv {
    height: 100% !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Header-template content (this grid uses #headerTemplate per column) renders
   inside .e-headercelldiv — make its wrapper fill + centre so it isn't pushed
   down, which left an empty band at the top of the header. */
.custom-grid.e-treegrid .e-gridheader .e-headercell .e-headercelldiv > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.custom-grid.e-treegrid .e-gridheader .e-columnmenu,
.custom-grid.e-treegrid .e-gridheader .e-filtermenudiv,
.custom-grid.e-treegrid .e-gridheader .e-sortfilterdiv {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}
.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;
}