/* 添加到 css.css 末尾 */

/* 文件夹工具栏 */
.folder-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

.folder-actions-right {
    display: flex;
    gap: 5px;
}

/* 树形结构样式 */
.tree-node {
    position: relative;
    margin-bottom: 2px;
}

/* 缩进容器 */
.tree-children {
    margin-left: 20px; /* 每一级缩进 20px */
    padding-left: 5px;
    border-left: 1px dashed #ddd;
    display: none; /* 默认折叠 */
}

.tree-children.expanded {
    display: block;
}

/* 文件夹行样式 */
.folder-item {
    display: flex;
    align-items: center;
    padding: 6px;
    background: #f1f3f5;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
}

.folder-item:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.folder-toggle-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: #666;
    transition: transform 0.2s;
}

.tree-children.expanded + .folder-item .folder-toggle-icon, /* 兄弟选择器可能不适用，需根据实际DOM结构调整 */
.folder-item.open .folder-toggle-icon {
    transform: rotate(90deg);
}

.folder-icon {
    color: #f39c12;
    margin-right: 5px;
}

/* 文件夹名称 */
.folder-name {
    flex: 0 1 auto; /* 允许收缩，但不自动放大 */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

/* 轨迹数量计数样式 */
.folder-track-count {
    font-size: 11px;
    color: #888;
    background: rgba(0,0,0,0.05);
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 2px;
    flex-shrink: 0;
}

/* 根节点特殊样式：容纳右侧按钮 */
/* 修改：添加 sticky 定位使其固定在顶部 */
.folder-item.root-item {
    padding-right: 4px;
    /* 新增如下样式 */
    position: sticky;
    top: 0;
    z-index: 100; /* 确保在子节点上方 */
    background-color: #f8f9fa !important; /* 强制使用不透明背景色(与侧边栏底色一致) */
    border-bottom: 1px solid #ddd; /* 添加下边框区分 */
    margin-bottom: 0; /* 移除下边距 */
    padding-top: 8px; /* 增加内部上下间距代替外部 padding */
    padding-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 可选：添加轻微阴影增加层次感 */
}

/* 根节点右侧操作区 */
.root-actions {
    display: flex;
    margin-left: auto; /* 推到最右侧 */
    gap: 2px;
}

.folder-controls {
    display: flex;
    gap: 2px;
    opacity: 0; /* 默认隐藏操作按钮 */
    transition: opacity 0.2s;
    align-items: center; /* 确保垂直居中 */
}

.folder-item:hover .folder-controls {
    opacity: 1;
}

.root-actions .icon-btn,
.folder-controls .icon-btn {
    padding: 3px;
    width: 24px; /* 比轨迹列表的 28px 稍小，适应树形结构 */
    height: 24px;
    cursor: pointer;
    background: transparent; /* 默认透明 */
    color: #666;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.root-actions .icon-btn svg,
.folder-controls .icon-btn svg {
    width: 14px;
    height: 14px;
}

.root-actions .icon-btn:hover,
.folder-controls .icon-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
}

/* 保持与 css.css 中一致的颜色风格 */
.folder-controls .icon-btn.edit:hover {
    background: rgba(156, 39, 176, 0.1);
    color: #9C27B0;
}

.folder-controls .icon-btn.delete:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.folder-controls .icon-btn.visible {
    color: #666;
}
.folder-controls .icon-btn.visible:hover {
    background: rgba(74, 134, 232, 0.1);
    color: #4a86e8;
}

/* 右侧列表为空时的提示 */
.explorer-main .no-tracks {
    color: #999;
    text-align: center;
    padding-top: 50px;
}

/* 轨迹项样式微调 */
.track-item {
    margin-bottom: 2px !important; /* 覆盖原有 margin */
    font-size: 13px;
    border: 1px solid transparent;
}

/* 拖拽相关样式 */
.dragging {
    opacity: 0.5;
}

/* 拖拽目标高亮 */
.drag-over {
    background-color: rgba(74, 134, 232, 0.1) !important;
    border: 1px solid #4a86e8 !important; /* 稍微减小边框以免抖动 */
}

/* --- 新增：插入排序的视觉提示 --- */
/* 插入到上方 */
.drag-over-top {
    border-top: 2px solid #e74c3c !important;
    background-color: transparent !important;
}

/* 插入到下方 */
.drag-over-bottom {
    border-bottom: 2px solid #e74c3c !important;
    background-color: transparent !important;
}

/* 选中当前文件夹的高亮样式 */
.folder-item.selected {
    background-color: #e3f2fd;
    border-color: #4a86e8;
    color: #4a86e8;
    font-weight: bold;
}

.folder-item.selected .folder-icon {
    color: #4a86e8;
}

/* 修复删除按钮样式，确保在 track-item 中可见 */
.track-controls .icon-btn {
    padding: 4px;
    width: 24px;
    height: 24px;
    margin-left: 2px;
}

.track-controls .icon-btn svg {
    width: 14px;
    height: 14px;
}

/* 添加到 css.css 末尾 */

/* 文件夹重命名输入框 */
.folder-name-input {
    flex: 1;
    border: 1px solid #4a86e8;
    border-radius: 2px;
    padding: 2px 4px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background-color: #fff;
    margin: 0 5px;
    width: 100%; /* 占满名称区域 */
    box-shadow: 0 0 0 2px rgba(74, 134, 232, 0.2);
}

/* 编辑模式下隐藏原有名称和图标 */
.folder-item.editing .folder-name,
.track-item.editing .track-name {
    display: none !important;
} 

/* --- 新增：资源管理器布局样式 --- */

.explorer-container {
    display: flex;
    height: 450px; /* 增加高度 */
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

/* 左侧侧边栏 */
.explorer-sidebar {
    width: 280px;
    min-width: 200px;
    border-right: 1px solid #eee;
    background: #f8f9fa;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 5px 0; /* 修改：将顶部 padding 改为 0，防止滚动时顶部有空隙 */
    flex-shrink: 0;
    position: relative; /* 确保定位上下文 */
}

/* 右侧主内容区 */
.explorer-main {
    flex: 1;
    background: #fff;
    overflow-y: auto;
    padding: 5px;
    position: relative;
}

/* 滚动条美化 */
.explorer-sidebar::-webkit-scrollbar,
.explorer-main::-webkit-scrollbar {
    width: 6px;
}
.explorer-sidebar::-webkit-scrollbar-thumb,
.explorer-main::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* 侧边栏树节点样式 */
.explorer-sidebar .folder-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 0;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
}

.explorer-sidebar .folder-item:hover {
    background: #e9ecef;
}

/* 选中状态 */
.explorer-sidebar .folder-item.selected {
    background-color: #cce8ff;
    border-color: #99d1ff;
    color: #000;
}

.explorer-sidebar .tree-children {
    margin-left: 14px; /* 减小缩进 */
    border-left: 1px solid #e0e0e0; /* 实线更像系统风格 */
}

/* 右侧列表项样式调整 */
.explorer-main .track-item {
    margin-bottom: 4px;
    border: 1px solid #eee;
}

.explorer-main .folder-item {
    /* 右侧显示的子文件夹样式 */
    background: #fff;
    border: 1px solid #eee;
    margin-bottom: 4px;
}
.explorer-main .folder-item:hover {
    background: #f1f3f5;
    border-color: #4a86e8;
}

/* 普通文件夹的操作按钮 (鼠标悬停显示) */
.explorer-sidebar .folder-controls {
    display: flex !important;
    opacity: 0;
    transition: opacity 0.2s;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    margin-left: auto;
    /* padding-left: 5px; */
}

.explorer-sidebar .folder-item:hover .folder-controls {
    opacity: 1;
}

/* 按钮通用样式 */
.root-actions button,
.folder-controls button {
    padding: 3px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: transparent;
    color: #666;
    border: none;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.root-actions button:hover,
.folder-controls button:hover {
    background: #ddd;
    color: #333;
}

/* 提示信息 */
.empty-folder-tip {
    color: #999;
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
}

/* 路径导航/返回按钮样式 */
#up-level-btn {
    background: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
}
#up-level-btn:hover {
    background: #e0e0e0;
}
/* 响应式 */
@media (max-width: 768px) {
    .control-panel {
        width: 95vw;
    }
    .explorer-container {
        flex-direction: column;
    }
    .explorer-sidebar {
        width: 100%;
        height: 40%;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    /* 移动端常驻显示操作按钮 */
    .explorer-sidebar .folder-controls {
        opacity: 1;
    }
}

/* 响应式调整 */
@media (max-width: 600px) {
    .explorer-container {
        flex-direction: column;
    }
    .explorer-sidebar {
        width: 100%;
        height: 120px;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}