/* Files Pane, File Tree, Folder Tree */

.files-pane-inner {
    display: flex; flex-direction: column; height: 100%;
    background: var(--color-bg-secondary);
}

.files-subheader {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--color-border);
}
.files-subheader h3 {
    font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; color: var(--color-text-muted);
}
.files-actions { display: flex; gap: var(--space-4); }

.file-tree { flex: 1; overflow-y: auto; padding: var(--space-8); }

.file-item {
    display: flex; align-items: center; gap: var(--space-8);
    padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--font-size-md);
    transition: var(--transition-fast); position: relative;
}
.file-item:hover { background: var(--color-bg-hover); }
.file-item.active { background: var(--color-accent-primary); color: white; }
.file-item.main::after {
    content: 'main'; position: absolute; right: var(--space-8);
    font-size: var(--font-size-xs); padding: var(--space-2) var(--space-6);
    background: var(--color-accent-secondary); border-radius: var(--space-10); color: white;
}
.file-item i { font-size: var(--font-size-lg); width: var(--space-16); color: var(--color-text-muted); }
.file-item.active i { color: white; }
.file-item .file-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#templatesBtn { color: var(--color-accent-primary); }
#templatesBtn:hover { color: var(--color-text-primary); }

/* Folder Tree */
.file-tree-folder { margin-bottom: var(--space-2); }
.folder-header {
    display: flex; align-items: center; gap: var(--space-6);
    padding: var(--space-6) var(--space-8); border-radius: var(--radius-sm);
    cursor: pointer; font-size: var(--font-size-md); color: var(--color-text-secondary);
    transition: var(--transition-fast); user-select: none;
}
.folder-header:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.folder-header .folder-chevron { font-size: var(--font-size-xs); transition: transform 0.15s; width: var(--space-12); }
.folder-header.collapsed .folder-chevron { transform: rotate(-90deg); }
.folder-header .folder-icon { color: var(--color-accent-warning); font-size: var(--font-size-lg); }
.folder-children { padding-left: var(--space-16); overflow: hidden; }
.folder-children.collapsed { display: none; }