/* Complete TreeView Toggle Icon Fix */

/* STEP 1: Make toggle icons visible with explicit styling */
.parttree-treeview .k-treeview-toggle,
.k-treeview.parttree-treeview .k-treeview-toggle {
    /* Reset all positioning */
    margin-inline-start: 0 !important;
    margin-left: 0 !important;
    margin-right: 6px !important;
    
    /* Make it visible */
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Give it size */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    
    /* Make it stand out */
    background-color: #dee2e6 !important;
    border: 2px solid #6c757d !important;
    border-radius: 3px !important;
    
    /* Make it clickable */
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    position: relative !important;
    
    /* Center the icon */
    align-items: center !important;
    justify-content: center !important;
}

/* STEP 2: Style the SVG inside */
.parttree-treeview .k-treeview-toggle svg,
.parttree-treeview .k-treeview-toggle .k-icon,
.parttree-treeview .k-treeview-toggle .k-svg-icon {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    fill: #212529 !important;
    color: #212529 !important;
}

.parttree-treeview .k-treeview-toggle svg path {
    fill: #212529 !important;
}

/* STEP 3: Hover effect */
.parttree-treeview .k-treeview-toggle:hover {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.parttree-treeview .k-treeview-toggle:hover svg path {
    fill: white !important;
}

/* STEP 4: Fix TreeView container alignment */
.parttree-treeview,
.parttree-treeview.k-treeview {
    margin: 0 !important;
    padding: 0 !important;
}

.parttree-treeview .k-treeview-lines {
    margin: 0 !important;
    padding: 0 !important;
}

/* STEP 5: Fix tree groups and items */
.parttree-treeview .k-treeview-group {
    margin: 0 !important;
    padding-left: 0 !important;
}

.parttree-treeview .k-treeview-group .k-treeview-group {
    padding-left: 26px !important;
}

.parttree-treeview .k-treeview-item {
    margin: 0 !important;
    padding: 2px 0 !important;
}

/* STEP 6: Ensure text doesn't overlap icon */
.parttree-treeview .k-treeview-leaf-text {
    margin-left: 4px !important;
}