/* ===========================================
   Umbel 主题系统 - 黑夜/白天模式
   =========================================== */

:root {
  /* 默认白天模式 */
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-tertiary: #ebebeb;
  --bg-hover: #f0f0f0;
  --bg-active: #e8e8e8;
  --bg-card: #ffffff;
  --bg-modal: #ffffff;
  --bg-dropdown: #ffffff;
  --bg-input: #ffffff;
  --bg-sidebar: #fafafa;
  
  --text-primary: #1a1a1a;
  --text-secondary: #333333;
  --text-tertiary: #666666;
  --text-muted: #999999;
  --text-placeholder: #bbbbbb;
  --text-inverse: #ffffff;
  
  --border-primary: #e0e0e0;
  --border-secondary: #dddddd;
  --border-light: #eeeeee;
  
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  
  --accent-primary: #1890ff;
  --accent-hover: #40a9ff;
  --accent-active: #096dd9;
  
  --success: #52c41a;
  --warning: #faad14;
  --error: #f5222d;
  
  /* 节点和思维导图 */
  --node-bg: #ffffff;
  --node-border: #d9d9d9;
  --node-text: #1a1a1a;
  --canvas-bg: #f5f5f5;
  --line-color: #d9d9d9;
  
  /* 滚动条 */
  --scrollbar-track: #f0f0f0;
  --scrollbar-thumb: #c0c0c0;
  --scrollbar-thumb-hover: #a0a0a0;
  
  /* 上传图标颜色 */
  --upload-icon-color: #999999;
}

/* 黑夜模式 */
:root.dark-mode,
[data-theme="dark"] {
  --bg-primary: #1e1e1e;
  --bg-secondary: #2a2a2a;
  --bg-tertiary: #333333;
  --bg-hover: #3a3a3a;
  --bg-active: #454545;
  --bg-card: #252525;
  --bg-modal: #2a2a2a;
  --bg-dropdown: #2a2a2a;
  --bg-input: #333333;
  --bg-sidebar: #252525; /* 左侧栏 - 稍浅 */
  
  --text-primary: #ffffff;
  --text-secondary: #f0f0f0;
  --text-tertiary: #c0c0c0;
  --text-muted: #888888;
  --text-placeholder: #666666;
  --text-inverse: #1a1a1a;
  
  --border-primary: #4a4a4a;
  --border-secondary: #404040;
  --border-light: #3a3a3a;
  
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  
  --accent-primary: #4da6ff;
  --accent-hover: #7dbfff;
  --accent-active: #2196f3;
  
  --success: #73d13d;
  --warning: #ffc53d;
  --error: #ff4d4f;
  
  /* 节点和思维导图 */
  --node-bg: #1a1a1a; /* 节点背景 = 画布背景，融为一体 */
  --node-border: #383838; /* 节点边框 - 更暗的灰色 */
  --node-text: #ffffff; /* 节点文字 - 白色 */
  --canvas-bg: #1a1a1a; /* 画布背景 - 比左侧栏更深 */
  --line-color: #383838; /* 连线颜色 - 更暗的灰色 */
  
  /* 滚动条 */
  --scrollbar-track: #2a2a2a;
  --scrollbar-thumb: #505050;
  --scrollbar-thumb-hover: #606060;
  
  /* 上传图标颜色 */
  --upload-icon-color: #ffffff;
}

/* ===========================================
   全局样式覆盖
   =========================================== */

/* Body 背景 */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 黑夜模式下的全局样式调整 */
.dark-mode {
  color-scheme: dark;
}

/* 侧边栏 */
.dark-mode .aside,
[data-theme="dark"] .aside {
  background-color: var(--bg-sidebar);
  border-color: var(--border-primary);
}

/* 下拉菜单 */
.dark-mode .rc-menu,
[data-theme="dark"] .rc-menu {
  background-color: var(--bg-dropdown);
  border-color: var(--border-primary);
}

.dark-mode .rc-menu-item,
[data-theme="dark"] .rc-menu-item {
  color: var(--text-secondary);
}

.dark-mode .rc-menu-item:hover,
[data-theme="dark"] .rc-menu-item:hover {
  background-color: var(--bg-hover);
}

/* 输入框 */
.dark-mode input,
.dark-mode textarea,
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-placeholder);
}

/* 卡片 */
.dark-mode .card,
[data-theme="dark"] .card {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

/* 模态框 */
.dark-mode .modal,
.dark-mode .dialog,
[data-theme="dark"] .modal,
[data-theme="dark"] .dialog {
  background-color: var(--bg-modal);
  color: var(--text-primary);
}

/* 滚动条 */
.dark-mode ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
}

.dark-mode ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
}

.dark-mode ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* 分割线 */
.dark-mode hr,
.dark-mode .divider,
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
  border-color: var(--border-primary);
}

/* 提示框 */
.dark-mode .tooltip,
[data-theme="dark"] .tooltip {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* 按钮 - 次要按钮 */
.dark-mode .btn-secondary,
[data-theme="dark"] .btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* 链接 */
.dark-mode a,
[data-theme="dark"] a {
  color: var(--accent-primary);
}

/* 表格 */
.dark-mode table,
.dark-mode th,
.dark-mode td,
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
  border-color: var(--border-primary);
}

.dark-mode th,
[data-theme="dark"] th {
  background-color: var(--bg-secondary);
}

.dark-mode tr:hover,
[data-theme="dark"] tr:hover {
  background-color: var(--bg-hover);
}

/* ===========================================
   搜索框样式
   =========================================== */
.dark-mode .searchInput,
.dark-mode .search-input,
[data-theme="dark"] .searchInput,
[data-theme="dark"] .search-input {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.dark-mode .searchInput:hover,
.dark-mode .search-input:hover,
[data-theme="dark"] .searchInput:hover,
[data-theme="dark"] .search-input:hover {
  background-color: var(--bg-hover) !important;
}

.dark-mode .searchInput:focus,
.dark-mode .search-input:focus,
[data-theme="dark"] .searchInput:focus,
[data-theme="dark"] .search-input:focus {
  background-color: var(--bg-input) !important;
  border-color: var(--accent-primary) !important;
}

/* ===========================================
   思维导图节点样式
   =========================================== */
/* 只针对特定的节点圆圈类，不覆盖所有圆圈，保持原有的显示/隐藏逻辑 */
/* 注意：不要强制设置 fill 和 stroke，让 JS 控制 */

/* 所有 SVG 文字 - 白色 */
.dark-mode svg text,
.dark-mode svg tspan,
body.dark-mode svg text,
body.dark-mode svg tspan,
body.dark svg text,
body.dark svg tspan,
[data-theme="dark"] svg text,
[data-theme="dark"] svg tspan {
  fill: #ffffff !important;
}

/* 节点名称文字 - 节点内的 */
.dark-mode .nodeNameInCircle,
.dark-mode .nodeName,
body.dark-mode .nodeNameInCircle,
body.dark-mode .nodeName,
body.dark .nodeNameInCircle,
body.dark .nodeName,
[data-theme="dark"] .nodeNameInCircle,
[data-theme="dark"] .nodeName {
  fill: #ffffff !important;
}

/* 连线 - 需要排除节点内部的 path */
.dark-mode svg path.nodeArc,
.dark-mode svg line,
.dark-mode svg path:not(.markPoint),
body.dark-mode svg path.nodeArc,
body.dark-mode svg line,
body.dark-mode svg path:not(.markPoint),
body.dark svg path.nodeArc,
body.dark svg line,
body.dark svg path:not(.markPoint),
[data-theme="dark"] svg path.nodeArc,
[data-theme="dark"] svg line,
[data-theme="dark"] svg path:not(.markPoint) {
  stroke: var(--line-color, #383838);
}

/* 节点内文字 - 白色 */
.dark-mode .nodeText,
.dark-mode .node-text,
.dark-mode .textImg text,
.dark-mode foreignObject,
.dark-mode foreignObject div,
.dark-mode foreignObject span,
body.dark-mode .nodeText,
body.dark-mode .node-text,
body.dark-mode .textImg text,
body.dark-mode foreignObject,
body.dark-mode foreignObject div,
body.dark-mode foreignObject span,
body.dark .nodeText,
body.dark .node-text,
body.dark .textImg text,
body.dark foreignObject,
body.dark foreignObject div,
body.dark foreignObject span,
[data-theme="dark"] .nodeText,
[data-theme="dark"] .node-text,
[data-theme="dark"] .textImg text,
[data-theme="dark"] foreignObject,
[data-theme="dark"] foreignObject div,
[data-theme="dark"] foreignObject span {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 画布上的标题文字 */
.dark-mode .canvasTitle,
body.dark-mode .canvasTitle,
body.dark .canvasTitle,
[data-theme="dark"] .canvasTitle {
  color: #ffffff !important;
}

/* 编辑框文字 */
.dark-mode #editableText,
body.dark-mode #editableText,
body.dark #editableText,
[data-theme="dark"] #editableText {
  color: #ffffff !important;
  background-color: var(--node-bg, #1a1a1a) !important;
}

/* 节点圆形背景 - 由 JS 控制，这里不强制覆盖，保持原有显示/隐藏逻辑 */

/* ===========================================
   按钮样式
   =========================================== */
.dark-mode button,
.dark-mode .btn,
[data-theme="dark"] button,
[data-theme="dark"] .btn {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.dark-mode button:hover,
.dark-mode .btn:hover,
[data-theme="dark"] button:hover,
[data-theme="dark"] .btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-secondary);
}

.dark-mode button:active,
.dark-mode .btn:active,
[data-theme="dark"] button:active,
[data-theme="dark"] .btn:active {
  background-color: var(--bg-active);
}

/* 主要按钮保持强调色 */
.dark-mode .btn-primary,
[data-theme="dark"] .btn-primary {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

.dark-mode .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ===========================================
   左侧栏图标样式 - 夜间模式
   =========================================== */
body.dark-mode .tab,
body.dark .tab,
html.dark-mode .tab {
  background-color: #333 !important;
}

body.dark-mode .tab .tabItem img,
body.dark .tab .tabItem img,
html.dark-mode .tab .tabItem img {
  filter: brightness(0) saturate(100%) invert(100%) !important;
  opacity: 0.75;
}

body.dark-mode .tab .tabItem:hover,
body.dark .tab .tabItem:hover,
html.dark-mode .tab .tabItem:hover {
  background-color: #444 !important;
}

body.dark-mode .tab .tabItem:hover img,
body.dark .tab .tabItem:hover img,
html.dark-mode .tab .tabItem:hover img {
  opacity: 1;
}

/* ===========================================
   右侧图片栏上传框加号 - 夜间模式
   =========================================== */
body.dark-mode .uploadCardFloating .uploadCardInner,
body.dark .uploadCardFloating .uploadCardInner,
html.dark-mode .uploadCardFloating .uploadCardInner,
[data-theme="dark"] .uploadCardFloating .uploadCardInner {
  color: #ffffff !important;
  border-color: #4a4a4a !important;
  background-color: #2a2a2a !important;
}

body.dark-mode .uploadCardFloating .uploadCardInner svg,
body.dark .uploadCardFloating .uploadCardInner svg,
html.dark-mode .uploadCardFloating .uploadCardInner svg,
[data-theme="dark"] .uploadCardFloating .uploadCardInner svg {
  stroke: #858585 !important;
}

body.dark-mode .uploadCardFloating .uploadCardInner svg line,
body.dark-mode .uploadCardFloating .uploadCardInner svg path,
body.dark-mode .uploadCardFloating .uploadCardInner svg polyline,
body.dark .uploadCardFloating .uploadCardInner svg line,
body.dark .uploadCardFloating .uploadCardInner svg path,
body.dark .uploadCardFloating .uploadCardInner svg polyline,
html.dark-mode .uploadCardFloating .uploadCardInner svg line,
html.dark-mode .uploadCardFloating .uploadCardInner svg path,
html.dark-mode .uploadCardFloating .uploadCardInner svg polyline,
[data-theme="dark"] .uploadCardFloating .uploadCardInner svg line,
[data-theme="dark"] .uploadCardFloating .uploadCardInner svg path,
[data-theme="dark"] .uploadCardFloating .uploadCardInner svg polyline {
  stroke: #858585 !important;
}

body.dark-mode .uploadCardFloating:hover .uploadCardInner,
body.dark .uploadCardFloating:hover .uploadCardInner,
html.dark-mode .uploadCardFloating:hover .uploadCardInner,
[data-theme="dark"] .uploadCardFloating:hover .uploadCardInner {
  background-color: #353535 !important;
  border-color: #5a5a5a !important;
  color: #ffffff !important;
}

/* 拖拽状态 - 红色（夜间模式也一样） */
body.dark-mode .uploadCardFloating.dragOver .uploadCardInner,
body.dark .uploadCardFloating.dragOver .uploadCardInner,
html.dark-mode .uploadCardFloating.dragOver .uploadCardInner,
[data-theme="dark"] .uploadCardFloating.dragOver .uploadCardInner,
body.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner,
body.dark .uploadCardFloating.dragOverDelete .uploadCardInner,
html.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner,
[data-theme="dark"] .uploadCardFloating.dragOverDelete .uploadCardInner {
  background-color: rgba(248, 42, 73, 0.15) !important;
  border-color: #F82A49 !important;
  color: #F82A49 !important;
}

body.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg,
body.dark .uploadCardFloating.dragOver .uploadCardInner svg,
html.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg,
[data-theme="dark"] .uploadCardFloating.dragOver .uploadCardInner svg,
body.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg,
body.dark .uploadCardFloating.dragOverDelete .uploadCardInner svg,
html.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg,
[data-theme="dark"] .uploadCardFloating.dragOverDelete .uploadCardInner svg {
  stroke: #F82A49 !important;
}

body.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg line,
body.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg path,
body.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg polyline,
body.dark .uploadCardFloating.dragOver .uploadCardInner svg line,
body.dark .uploadCardFloating.dragOver .uploadCardInner svg path,
body.dark .uploadCardFloating.dragOver .uploadCardInner svg polyline,
html.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg line,
html.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg path,
html.dark-mode .uploadCardFloating.dragOver .uploadCardInner svg polyline,
[data-theme="dark"] .uploadCardFloating.dragOver .uploadCardInner svg line,
[data-theme="dark"] .uploadCardFloating.dragOver .uploadCardInner svg path,
[data-theme="dark"] .uploadCardFloating.dragOver .uploadCardInner svg polyline,
body.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg line,
body.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg path,
body.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg polyline,
body.dark .uploadCardFloating.dragOverDelete .uploadCardInner svg line,
body.dark .uploadCardFloating.dragOverDelete .uploadCardInner svg path,
body.dark .uploadCardFloating.dragOverDelete .uploadCardInner svg polyline,
html.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg line,
html.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg path,
html.dark-mode .uploadCardFloating.dragOverDelete .uploadCardInner svg polyline,
[data-theme="dark"] .uploadCardFloating.dragOverDelete .uploadCardInner svg line,
[data-theme="dark"] .uploadCardFloating.dragOverDelete .uploadCardInner svg path,
[data-theme="dark"] .uploadCardFloating.dragOverDelete .uploadCardInner svg polyline {
  stroke: #F82A49 !important;
}

/* ===========================================
   主页头部区域 - 夜间模式（已移除，改用 CSS 变量）
   =========================================== */