/* === Light theme: override Mermaid inline SVG styles === */
[data-md-color-scheme="default"] .mermaid svg .node rect,
[data-md-color-scheme="default"] .mermaid svg .node polygon,
[data-md-color-scheme="default"] .mermaid svg .node circle,
[data-md-color-scheme="default"] .mermaid svg g.node rect,
[data-md-color-scheme="default"] .mermaid svg g.node polygon,
[data-md-color-scheme="default"] .mermaid [class*="node"] rect,
[data-md-color-scheme="default"] .mermaid [class*="node"] polygon {
    fill: #7c4dff !important;
    stroke: #ffc107 !important;
}

[data-md-color-scheme="default"] .mermaid svg .nodeLabel,
[data-md-color-scheme="default"] .mermaid svg .node .nodeLabel,
[data-md-color-scheme="default"] .mermaid svg .node span,
[data-md-color-scheme="default"] .mermaid [class*="node"] .nodeLabel,
[data-md-color-scheme="default"] .mermaid [class*="node"] span,
[data-md-color-scheme="default"] .mermaid svg text,
[data-md-color-scheme="default"] .mermaid svg .label {
    color: #fff !important;
    fill: #fff !important;
}

[data-md-color-scheme="default"] .mermaid .flowchart-link {
    stroke: #9e9e9e !important;
}

/* === Dark theme: looks good per user, just ensure white text === */
[data-md-color-scheme="slate"] .mermaid svg .nodeLabel,
[data-md-color-scheme="slate"] .mermaid svg .node span,
[data-md-color-scheme="slate"] .mermaid svg text,
[data-md-color-scheme="slate"] .mermaid svg .label {
    color: #fff !important;
    fill: #fff !important;
}

/* Edge labels readable in both themes */
.mermaid .edgeLabel {
    background-color: transparent !important;
}