/* Remove default Syncfusion icons */
.e-treeview .e-list-item div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
.e-treeview .e-list-item div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
    content: none !important;
}

.e-treeview .e-list-item .e-icons.e-icon-expandable,
.e-treeview .e-list-item .e-icons.e-icon-collapsible {
    display: none !important;
}
/* Flex layout: space between content and caret */
.treeview-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
}
/* Node content with icon and text */
.node-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* Allow content to shrink */
    min-width: 0; /* Critical for flex items to shrink below content size */
    overflow: hidden; /* Clip overflowing content */
}

.menu-list .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

/* Node text with truncation support */
.node-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1; /* Allow text to shrink within flex container */
    min-width: 0; /* Critical for flex items to allow shrinking below content size */
}
/* Caret icon styling - flex item (not absolute) to participate in layout */
.custom-caret {
    color: white !important;
    font-size: 20px;
    pointer-events: none;
    flex-shrink: 0; /* Never shrink the chevron */
    margin-left: auto; /* Push to right edge */
    padding-right: 8px; /* Small padding from edge */
    transform: rotate(0deg);
    transition: transform 0.3s ease !important;
}

/* Target parent li element that contains e-icon-expandable (collapsed) */
.e-treeview .e-list-item:has(.e-icon-expandable) > .e-text-content .custom-caret,
.e-treeview .e-list-item:has(> .e-icons.e-icon-expandable) .custom-caret {
    transform: rotate(0deg) !important;
}

/* Target parent li element that contains e-icon-collapsible (expanded) */
.e-treeview .e-list-item:has(.e-icon-collapsible) > .e-text-content .custom-caret,
.e-treeview .e-list-item:has(> .e-icons.e-icon-collapsible) .custom-caret {
    transform: rotate(90deg) !important;
}
 
.treeview-node .node-content {
    white-space: nowrap;
}

/* Text content wrapper */
.e-treeview .e-text-content {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    overflow: hidden; /* Clip overflowing content */
}

/* Syncfusion text wrapper - ensure it doesn't overflow */
.e-treeview .e-list-text {
    overflow: hidden;
    width: 100%;
}

.full-width-tree {
    width: 100%;
}

/* Default separator color */
.e-splitter .e-split-bar.e-split-bar-horizontal {
    background: #e2e3e5;
}

    /* Hover and active states */
    .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover,
    .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
        background: var(--foo-blue2);
    }
e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
    background: #fff;
    color: #e2e3e5; /* light gray */
    z-index: 10;
    transition: color 0.2s ease; /* smooth transition */
}

/* Hover state */
.e-splitter .e-split-bar.e-split-bar-horizontal:hover .e-resize-handler {
    color: var(--foo-blue2); /* brand color on hover */
}
/* site.css */
/*.app-splitter,*/ /* root splitter */
/*.app-splitter .e-pane,*/ /* every pane inside it           */
/*.relative-sidebar,*/ /* the sidebar component itself   */
/*.relative-sidebar .e-sidebar-content {*/ /* its scrollable area     */
    /*height: calc(100vh - 56px) !important;*/ /* fill below 56‑px header */
/*}*/
    /* site.css */
    /*.app-splitter .e-pane {
        overflow-x: hidden;*/ /* no horizontal scrolling */
        /*overflow-y: auto;*/ /* keep vertical scrolling */
    /*}*/

        /* OPTIONAL – remove the blank track that remains in WebKit */
        /*.app-splitter .e-pane::-webkit-scrollbar {
            height: 0;
        }*/

.e-sidebar.relative-sidebar {
    position: relative !important;
    height: 100% !important;
}