/* ============================================================
   tree-view.css - 树状图视图样式
   ============================================================ */

#treeView{padding:10px 0;overflow-x:auto}
.tree-request{margin-bottom:24px;background:var(--c-surface);border-radius:var(--radius-lg);padding:16px 20px;box-shadow:var(--shadow-sm);min-width:max-content}
.tree-request-title{font-size:15px;font-weight:600;color:var(--c-gray-900);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.tree-request-title .badge{font-size:11px;padding:2px 8px}
.tree-request-id{font-size:12px;color:var(--c-gray-400)}

.tree-row{display:flex;align-items:flex-start;gap:0}
.tree-dept-col{display:flex;flex-direction:column;gap:8px;margin-left:0}
.tree-task-col{display:flex;flex-direction:column;gap:6px;margin-left:0}

.tree-branch{display:flex;align-items:center;position:relative}
.tree-card{min-width:140px;max-width:200px;padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--c-gray-100);background:var(--c-surface);font-size:13px;position:relative;z-index:2;transition:all 0.2s ease}
.tree-card .label{font-size:11px;margin-bottom:2px;font-weight:500}
.tree-card .name{font-weight:500;color:var(--c-gray-800);line-height:1.4;word-break:break-all}
.tree-card .meta{font-size:11px;color:var(--c-gray-400);margin-top:4px}

/* Clickable cards */
.tree-card.clickable{cursor:pointer}
.tree-card.clickable:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--c-primary)}
.tree-card-hint{font-size:10px;color:var(--c-primary);margin-top:4px;opacity:0;transition:opacity 0.2s}
.tree-card.clickable:hover .tree-card-hint{opacity:1}

/* Connectors */
.tree-connector{width:32px;height:2px;background:var(--c-primary);position:relative;flex-shrink:0;opacity:0.4}
.tree-connector::after{content:'';position:absolute;right:0;top:50%;width:8px;height:8px;background:var(--c-primary);border-radius:50%;transform:translate(50%,-50%);opacity:0.6}
.tree-branch:hover>.tree-connector{opacity:0.8}
.tree-branch:hover>.tree-connector::after{opacity:1}

/* Request card */
.tree-card.request{border-left:4px solid var(--c-primary);background:var(--c-primary-light)}
.tree-card.request .name{color:var(--c-primary-dark)}

/* Department cards */
.tree-card.dept{border-left:4px solid var(--c-warning)}
.tree-card.dept.accepted{border-left-color:var(--c-success)}
.tree-card.dept.rejected{border-left-color:var(--c-danger)}

/* Task cards */
.tree-card.task{border-left:4px solid var(--c-gray-200)}
.tree-card.task.done{border-left-color:var(--c-success)}
.tree-card.task.pending{border-left-color:var(--c-warning)}
.tree-card.task.failed{border-left-color:var(--c-danger)}

/* Dark mode for tree view */
html[data-theme="dark"] .tree-card{background:var(--c-gray-800);border-color:var(--c-gray-600)}
html[data-theme="dark"] .tree-connector,html[data-theme="dark"] .tree-connector::after{background:var(--c-primary)}
html[data-theme="dark"] .tree-card.clickable:hover{border-color:var(--c-primary)}