/* Fixed CSS for competences tree */
.tree-view .competence-item {
    margin-bottom: 8px;
    position: relative;
}

.tree-view .children-container {
    margin-left: 25px;
    padding-left: 10px;
    border-left: 1px dotted #ccc;
    margin-top: 5px;
}

.tree-view .root-competence {
    margin-bottom: 15px;
}

.tree-view .toggle-children {
    cursor: pointer;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

/* Make sure checkboxes are clickable */
.tree-view .ui.checkbox {
    display: inline-block;
    vertical-align: middle;
    z-index: 1;
    position: relative;
}

/* Initially hide children */
.tree-view .children-container {
    display: none;
}

/* When expanded */
.tree-view .expanded > .children-container {
    display: block;
}

.tree-view .expanded > .toggle-children .plus.icon:before {
    content: "\f068"; /* Changes plus to minus icon */
}

/* Make sure items are properly padded */
.tree-view .level-1 { padding-left: 5px; }
.tree-view .level-2 { padding-left: 5px; }
.tree-view .level-3 { padding-left: 5px; }