/* 基础Mermaid样式覆盖 */
.mermaid {
  background-color: transparent !important;
}

/* Mermaid文本颜色统一 */
.mermaid .label,
.mermaid text,
.mermaid span,
.mermaid .messageText,
.mermaid .loopText,
.mermaid .noteText,
.mermaid .taskText {
  color: var(--color-secondary-800) !important;
  fill: var(--color-secondary-800) !important;
  font-family: inherit !important;
}

/* 节点样式设置 */
.mermaid .node rect, 
.mermaid .node circle, 
.mermaid .node ellipse, 
.mermaid .node polygon,
.mermaid .node path {
  fill: var(--color-gray-100) !important;
  stroke: var(--color-gray-400) !important;
  stroke-width: 1px !important;
}

/* 连接线样式 */
.mermaid .edgePath .path,
.mermaid .flowchart-link,
.mermaid line,
.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: var(--color-gray-600) !important;
  stroke-width: 1px !important;
  fill: none !important; /* 确保线条没有填充 */
}

/* 箭头填充 */
.mermaid .arrowheadPath,
.mermaid marker path {
  fill: var(--color-gray-600) !important;
  stroke: none !important;
}

/* 文本标签背景 */
.mermaid .edgeLabel rect,
.mermaid .labelBox {
  fill: white !important;
  background-color: white !important;
}

/* 标题样式 */
.mermaid .titleText,
.mermaid .classTitle,
.mermaid .cluster-label text {
  fill: var(--color-secondary-900) !important;
  color: var(--color-secondary-900) !important;
  font-weight: bold !important;
}

/* 集群/子图样式 */
.mermaid .cluster rect,
.mermaid .cluster polygon {
  fill: var(--color-gray-50) !important;
  stroke: var(--color-gray-400) !important;
  stroke-width: 1px !important;
  opacity: 0.8 !important;
}

/* 序列图特殊样式 */
.mermaid .actor {
  fill: var(--color-gray-100) !important;
  stroke: var(--color-gray-400) !important;
  stroke-width: 1px !important;
}

.mermaid .note {
  fill: var(--color-primary-500) !important;
  opacity: 0.7 !important;
}

/* 甘特图特殊样式 */
.mermaid .section0,
.mermaid .section2 {
  fill: var(--color-gray-50) !important;
  opacity: 0.5 !important;
}

.mermaid .section1,
.mermaid .section3 {
  fill: var(--color-gray-100) !important;
  opacity: 0.4 !important;
}

.mermaid .task0,
.mermaid .task1,
.mermaid .task2,
.mermaid .task3 {
  fill: var(--color-primary-600) !important;
  stroke: var(--color-gray-400) !important;
}

/* 类图特殊样式 */
.mermaid .classLabel .label {
  fill: var(--color-secondary-800) !important;
  color: var(--color-secondary-800) !important;
}

/* 暗色模式样式 */
[data-theme='dark'] .mermaid .label,
[data-theme='dark'] .mermaid text,
[data-theme='dark'] .mermaid span,
[data-theme='dark'] .mermaid .messageText,
[data-theme='dark'] .mermaid .loopText,
[data-theme='dark'] .mermaid .noteText,
[data-theme='dark'] .mermaid .taskText,
[data-theme='dark'] .mermaid .classLabel .label {
  color: var(--color-secondary-300) !important;
  fill: var(--color-secondary-300) !important;
}

[data-theme='dark'] .mermaid .node rect, 
[data-theme='dark'] .mermaid .node circle, 
[data-theme='dark'] .mermaid .node ellipse, 
[data-theme='dark'] .mermaid .node polygon,
[data-theme='dark'] .mermaid .node path,
[data-theme='dark'] .mermaid .actor {
  fill: var(--color-dark-hover) !important;
  stroke: var(--color-gray-600) !important;
}

/* 暗色模式连接线样式 - 分开处理 */
[data-theme='dark'] .mermaid .edgePath .path,
[data-theme='dark'] .mermaid .flowchart-link,
[data-theme='dark'] .mermaid line,
[data-theme='dark'] .mermaid .messageLine0,
[data-theme='dark'] .mermaid .messageLine1 {
  stroke: var(--color-gray-400) !important;
  fill: none !important; /* 确保线条没有填充 */
}

/* 暗色模式箭头样式 - 分开处理 */
[data-theme='dark'] .mermaid .arrowheadPath,
[data-theme='dark'] .mermaid marker path {
  fill: var(--color-gray-400) !important;
  stroke: none !important;
}

[data-theme='dark'] .mermaid .edgeLabel rect,
[data-theme='dark'] .mermaid .labelBox {
  fill: var(--color-dark-surface) !important;
  background-color: var(--color-dark-surface) !important;
}

[data-theme='dark'] .mermaid .titleText,
[data-theme='dark'] .mermaid .classTitle,
[data-theme='dark'] .mermaid .cluster-label text {
  fill: var(--color-secondary-100) !important;
  color: var(--color-secondary-100) !important;
}

[data-theme='dark'] .mermaid .cluster rect,
[data-theme='dark'] .mermaid .cluster polygon,
[data-theme='dark'] .mermaid .section0,
[data-theme='dark'] .mermaid .section2 {
  fill: var(--color-dark-card) !important;
  stroke: var(--color-gray-600) !important;
}

[data-theme='dark'] .mermaid .section1,
[data-theme='dark'] .mermaid .section3 {
  fill: var(--color-dark-hover) !important;
}

[data-theme='dark'] .mermaid .note {
  fill: var(--color-primary-300) !important;
}

[data-theme='dark'] .mermaid .task0,
[data-theme='dark'] .mermaid .task1,
[data-theme='dark'] .mermaid .task2,
[data-theme='dark'] .mermaid .task3 {
  fill: var(--color-primary-400) !important;
  stroke: var(--color-gray-600) !important;
}