.tree-container { background: white; padding: 20px; border-radius: 8px; border: 1px solid #ddd; }

.tree-container ul { list-style-type: none; padding-left: 20px; }
.tree-container li { margin: 5px 0; cursor: default; }

/*
    Avoid display: block on the <a>, <span> tag in class .folder, .file:
    If you set it to display: block, it will expand to fill the entire width of the <li>, making the whole row clickable.
*/

/* 1. FOLDER STYLING */
.tree-container .folder { font-weight: bold; cursor: pointer; color: #2c3e50; display: inline; }
.tree-container .folder::before { content: '▶ 📁'; font-size: 10px; color: #7f8c8d; margin-right: 5px; }

/* Change icon when expanded */
.tree-container .expanded > .folder::before { content: '▼ 📁'; }
.tree-container .expanded > .folder { color: #0a58ca; }

/* 2. HIDE NESTED BY DEFAULT */
.tree-container .nested { display: none; }
.tree-container .expanded > .nested { display: block; }

.tree-container .file { color: #212529; text-decoration: none; display: inline; padding-left: 15px; }
.tree-container .file:hover { text-decoration: underline; }
.tree-container .file::before { content: '📄 '; margin-right: 5px; }