/* Mermaid diagram text color fixes for light and dark themes */
/* Ensures text remains readable against light-colored node backgrounds */

/*
 * CONTEXT: Our Mermaid diagrams use light pastel fill colors:
 * - #B3E5FC (light blue), #FFE0B2 (light orange), #E1BEE7 (light purple)
 * - #FFCDD2 (light red), #FFF9C4 (light yellow), #C8E6C9 (light green)
 * - #B2DFDB (light teal), #90CAF9 (medium blue)
 *
 * These light fills work with black text in BOTH light and dark modes
 * because Mermaid preserves node fill colors regardless of theme.
 */

/* Light mode: Black text on light pastel backgrounds */
.mermaid .node text,
.mermaid .nodeLabel,
.mermaid .label,
.mermaid .edgeLabel,
.mermaid text,
.mermaid .actor,
.mermaid .messageText,
.mermaid .loopText,
.mermaid .noteText,
.mermaid tspan {
    fill: #000000 !important;
    color: #000000 !important;
}

/* Ensure subgraph labels are readable */
.mermaid .cluster-label text,
.mermaid .cluster text {
    fill: #000000 !important;
}

/* Sequence diagram specific fixes */
.mermaid .actor-line {
    stroke: #666666 !important;
}

/*
 * Dark mode: Keep black text because our node fills are light pastels
 * The light fill colors (#B3E5FC, #FFE0B2, etc.) remain the same
 * regardless of theme - only the page background changes.
 *
 * Black text (#000) on light pastel fills (#B3E5FC ~87% luminance)
 * provides excellent contrast ratio (>10:1) exceeding WCAG AAA.
 */
[data-md-color-scheme="slate"] .mermaid .node text,
[data-md-color-scheme="slate"] .mermaid .nodeLabel,
[data-md-color-scheme="slate"] .mermaid .label,
[data-md-color-scheme="slate"] .mermaid text,
[data-md-color-scheme="slate"] .mermaid tspan {
    fill: #000000 !important;
    color: #000000 !important;
}

/* Dark mode: Subgraph/cluster labels */
[data-md-color-scheme="slate"] .mermaid .cluster-label text,
[data-md-color-scheme="slate"] .mermaid .cluster text {
    fill: #ffffff !important;  /* White for subgraph titles on dark background */
}

/* Ensure edge labels (arrows) remain readable */
.mermaid .edgeLabel .label rect {
    fill: #ffffff !important;
    opacity: 0.9 !important;
}

/* Dark mode: Edge labels need white background */
[data-md-color-scheme="slate"] .mermaid .edgeLabel .label rect {
    fill: #333333 !important;
    opacity: 0.95 !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel {
    color: #ffffff !important;
    fill: #ffffff !important;
}