/**
 * Mermaid Dark Mode Text Visibility Fix
 *
 * Problem: MkDocs Material's dark mode (slate scheme) uses CSS variables that
 * resolve to light colors for Mermaid text, while node backgrounds remain light.
 * This creates light text on light backgrounds, making diagrams unreadable.
 *
 * Solution: Override the --md-mermaid-* CSS variables in dark mode to use
 * dark text colors that contrast properly against light node backgrounds.
 * Also ensure subgraph backgrounds are light enough for dark text visibility.
 *
 * Note: Direct CSS targeting of Mermaid elements (.nodeLabel, .edgeLabel, etc.)
 * does NOT work because Material for MkDocs passes these variables to Mermaid.js
 * during initialization, which then inlines them into the SVG.
 *
 * References:
 * - https://github.com/squidfunk/mkdocs-material/discussions/4582
 * - https://github.com/squidfunk/mkdocs-material/issues/5681
 */

/* ===== DARK MODE (SLATE SCHEME) VARIABLE OVERRIDES ===== */

[data-md-color-scheme="slate"] {
	/* ----- Core Label Colors ----- */
	/* Dark text for labels on light-colored node backgrounds */
	--md-mermaid-label-fg-color: #1a1a1a;

	/* ----- Edge/Arrow Colors ----- */
	/* Keep edges visible but not too bright */
	--md-mermaid-edge-color: #b0b0b0;

	/* ----- Node Colors ----- */
	/* Dark text inside nodes for contrast against light node backgrounds */
	--md-mermaid-node-fg-color: #1a1a1a;

	/* ----- Sequence Diagram Colors ----- */
	/* Actor boxes - dark text on light backgrounds */
	--md-mermaid-sequence-actor-fg-color: #1a1a1a;
	--md-mermaid-sequence-actor-border-color: #666666;

	/* Box and label text - dark for visibility */
	--md-mermaid-sequence-box-fg-color: #1a1a1a;
	--md-mermaid-sequence-label-fg-color: #1a1a1a;

	/* Loop/alt section text - dark for visibility */
	--md-mermaid-sequence-loop-fg-color: #1a1a1a;
	--md-mermaid-sequence-loop-border-color: #666666;

	/* Messages on arrows - keep lighter for dark page background */
	--md-mermaid-sequence-message-fg-color: #d0d0d0;
	--md-mermaid-sequence-message-line-color: #888888;

	/* Notes - dark text on light note backgrounds */
	--md-mermaid-sequence-note-fg-color: #1a1a1a;
	--md-mermaid-sequence-note-border-color: #666666;

	/* Number badges */
	--md-mermaid-sequence-number-fg-color: #ffffff;
}

/* ===== SUBGRAPH/CLUSTER STYLING ===== */

/*
 * Subgraph/cluster title labels appear on dark backgrounds in dark mode.
 * Use light text (matching edge labels like "Tool Connection") for visibility.
 */
[data-md-color-scheme="slate"] .mermaid .cluster-label,
[data-md-color-scheme="slate"] .mermaid .cluster-label span,
[data-md-color-scheme="slate"] .mermaid g.cluster text,
[data-md-color-scheme="slate"] .mermaid .cluster text {
	fill: #d0d0d0 !important;
	color: #d0d0d0 !important;
}

/* ===== EDGE LABEL STYLING ===== */

/* Edge label backgrounds - ensure contrast */
[data-md-color-scheme="slate"] .mermaid .edgeLabel rect,
[data-md-color-scheme="slate"] .mermaid .labelBkg {
	fill: rgba(255, 255, 255, 0.9) !important;
}

/* Edge label text */
[data-md-color-scheme="slate"] .mermaid .edgeLabel,
[data-md-color-scheme="slate"] .mermaid .edgeLabel span {
	color: #1a1a1a !important;
	background-color: transparent !important;
}