/**
 * 通用樹狀視圖樣式
 * 用於 TreeView 組件的視覺呈現
 */

/* Toolbox 工具列 */
.combo-toolbox {
    background: var(--quote-panel-surface, #1a1a1a);
    border-bottom: 1px solid var(--quote-table-border, rgba(255, 255, 255, 0.1));
    border-radius: 8px 8px 0 0;
    padding: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 工具按鈕 */
.combo-tool-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.combo-tool-btn:hover {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
}

.combo-tool-btn:active {
    transform: scale(0.98) translateY(0);
}

.combo-tool-btn i {
    color: var(--color-accent);
    font-size: 14px;
}

.combo-tool-btn span {
    color: inherit;
}

/* 樹狀視圖容器 */
.price-combo-tree {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--quote-panel-surface, #1a1a1a);
    border-radius: 0 0 8px 8px;
    padding: 8px;
    font-size: 13px;
    color: var(--quote-table-text, #e0e0e0);
}

/* 樹狀根節點容器 */
.tree-root {
    width: 100%;
}

/* 空狀態 */
.tree-empty {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* 載入狀態 */
.tree-loading {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.tree-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid var(--color-border-default);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: tree-loading-spin 0.6s linear infinite;
}

@keyframes tree-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 節點包裝器 */
.tree-node-wrapper {
    width: 100%;
}

/* 節點本身 */
.tree-node {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
    min-height: 32px;
}

.tree-node:hover {
    background: var(--color-bg-hover);
}

.tree-node.active {
    background: var(--color-accent);
    color: white;
}

.tree-node.active .tree-node-count {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
}

/* 展開/收合圖示 */
.tree-toggle {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    font-size: 11px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease, color 0.15s ease;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tree-toggle:hover {
    color: var(--color-accent);
}

.tree-toggle.expanded {
    transform: rotate(90deg);
}

.tree-toggle-placeholder {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* 節點圖標 */
.tree-node-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    font-size: 14px;
    color: var(--color-accent);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tree-node.active .tree-node-icon {
    color: rgba(255, 255, 255, 0.9);
}

/* 聊天選股資料夾自定義圖示 */
.chat-folder-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
}

/* 深色主題適配 */
[data-theme="dark"] .chat-folder-icon {
    filter: brightness(1.1);
}

/* 節點標籤 */
.tree-node-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.4;
}

/* 節點計數 */
.tree-node-count {
    font-size: 11px;
    opacity: 0.6;
    margin-left: 6px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

/* 子節點容器 */
.tree-children {
    overflow: hidden;
    transition: max-height 0.2s ease;
}

/* 不同節點類型的圖標顏色 */
.tree-node-wrapper[data-node-type="category"]>.tree-node .tree-node-icon {
    color: #60a5fa;
    /* 藍色 */
}

.tree-node-wrapper[data-node-type="group"]>.tree-node .tree-node-icon {
    color: #fbbf24;
    /* 黃色 */
}

.tree-node-wrapper[data-node-type="preset"]>.tree-node .tree-node-icon {
    color: #34d399;
    /* 綠色 */
}

.tree-node-wrapper[data-node-type="market"]>.tree-node .tree-node-icon {
    color: #a78bfa;
    /* 紫色 */
}

.tree-node-wrapper[data-node-type="industry"]>.tree-node .tree-node-icon {
    color: #fb923c;
    /* 橘色 */
}

.tree-node-wrapper[data-node-type="smart_filter"]>.tree-node .tree-node-icon {
    color: #8b5cf6;
    /* 紫色 */
}

/* 聊天選股節點 - 紫色（區別於其他節點類型） */
.tree-node-wrapper[data-node-type="chat_filter"]>.tree-node .tree-node-icon {
    color: #8b5cf6;
    /* 紫色，強調 AI 智能功能 */
}

/* 排程圖示（資料夾 + 時鐘角標，CSS 定位） */
.tree-scheduled-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.tree-scheduled-icon > .fa-folder {
    font-size: 14px;
    color: #8b5cf6;
}

.tree-schedule-badge {
    position: absolute;
    right: -5px;
    bottom: -3px;
    font-size: 8px;
    color: #f59e0b;
}

.tree-node.active .tree-scheduled-icon > .fa-folder {
    color: rgba(255, 255, 255, 0.9);
}

.tree-node.active .tree-schedule-badge {
    color: #fbbf24;
}

/* 🇯🇵 日本市場交易所分類節點 - 紅色（日本國旗色） */
.tree-node-wrapper[data-node-type="jp_market"]>.tree-node .tree-node-icon {
    color: #ef4444;
    /* 紅色 */
}

/* 🇯🇵 日本市場產業分類節點 - 粉紅色 */
.tree-node-wrapper[data-node-type="jp_sector"]>.tree-node .tree-node-icon {
    color: #f472b6;
    /* 粉紅色 */
}

/* 智慧選股更新時間 */
.tree-node-update-time {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.tree-node.active .tree-node-update-time {
    color: rgba(255, 255, 255, 0.8);
}

/* 滾動條樣式 */
.price-combo-tree::-webkit-scrollbar {
    width: 6px;
}

.price-combo-tree::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
    border-radius: 3px;
}

.price-combo-tree::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: 3px;
}

.price-combo-tree::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
}

/* 動畫效果 */
@keyframes tree-node-highlight {

    0%,
    100% {
        background: rgba(249, 115, 22, 0.15);
    }

    50% {
        background: rgba(249, 115, 22, 0.3);
    }
}

.tree-node.highlight {
    animation: tree-node-highlight 1s ease;
}

/* =====================================================
   拖曳排序樣式
   ===================================================== */

/* 可拖曳的項目 */
.tree-node-wrapper[data-node-type="chat_filter"] > .tree-node {
    cursor: grab;
}

.tree-node-wrapper[data-node-type="chat_filter"] > .tree-node:active {
    cursor: grabbing;
}

/* 拖曳中的項目 */
.tree-node-wrapper.dragging {
    opacity: 0.5;
}

.tree-node-wrapper.dragging > .tree-node {
    border: 1px dashed #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

/* 放置指示線 - 上方 */
.tree-node-wrapper.drop-above::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 0;
    height: 2px;
    background: #8b5cf6;
    border-radius: 1px;
    z-index: 10;
}

/* 放置指示線 - 下方 */
.tree-node-wrapper.drop-below::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 2px;
    background: #8b5cf6;
    border-radius: 1px;
    z-index: 10;
}

/* 確保 wrapper 有相對定位 */
.tree-node-wrapper {
    position: relative;
}

/* 無效放置位置 */
.tree-node-wrapper.drop-invalid {
    cursor: not-allowed;
}

/* =====================================================
   聊天選股節點 hover 刪除按鈕
   ===================================================== */

/* 刪除按鈕 - 預設隱藏 */
.tree-node-delete {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 4px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 150ms ease;
}

/* hover 節點時顯示刪除按鈕 */
.tree-node-wrapper[data-node-type="chat_filter"] > .tree-node:hover .tree-node-delete {
    display: inline-flex;
}

/* hover 節點時隱藏 count badge（跟側邊欄一樣的互斥效果） */
.tree-node-wrapper[data-node-type="chat_filter"] > .tree-node:hover .tree-node-count {
    display: none;
}

/* 刪除按鈕 hover 變紅 */
.tree-node-delete:hover {
    color: var(--color-danger);
    background-color: var(--color-danger-subtle);
}

/* active 狀態下的刪除按鈕（節點被選中時） */
.tree-node.active .tree-node-delete {
    color: rgba(255, 255, 255, 0.7);
}

.tree-node.active .tree-node-delete:hover {
    color: #fca5a5;
    background-color: rgba(239, 68, 68, 0.2);
}

/* 深色主題 */
[data-theme="dark"] .tree-node-delete {
    color: var(--color-text-muted);
}

[data-theme="dark"] .tree-node-delete:hover {
    color: var(--color-danger);
    background-color: rgba(239, 68, 68, 0.15);
}

/* 淺色主題 */
#quotePanel[data-theme="light"] .tree-node-delete {
    color: var(--color-text-muted);
}

#quotePanel[data-theme="light"] .tree-node-delete:hover {
    color: var(--color-danger);
    background-color: var(--color-danger-subtle);
}

#quotePanel[data-theme="light"] .tree-node.active .tree-node-delete {
    color: rgba(255, 255, 255, 0.7);
}

#quotePanel[data-theme="light"] .tree-node.active .tree-node-delete:hover {
    color: #fca5a5;
    background-color: rgba(239, 68, 68, 0.2);
}