/* ── Mermaid dark-mode polish ──────────────────────────────────────────────
   MkDocs Material auto-themes flowcharts/sequence/ER diagrams, but edge labels
   and a few accents need help to stay legible on the slate (dark) scheme. */

.mermaid {
  /* center diagrams and give them breathing room */
  text-align: center;
}

/* Edge/relationship labels: match the page background and use foreground text
   so they don't render as dark-on-dark. */
[data-md-color-scheme="slate"] .mermaid .edgeLabel,
[data-md-color-scheme="slate"] .mermaid .edgeLabel p,
[data-md-color-scheme="slate"] .mermaid .edgeLabel rect {
  background-color: var(--md-default-bg-color) !important;
  fill: var(--md-default-bg-color) !important;
  color: var(--md-default-fg-color) !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel text,
[data-md-color-scheme="slate"] .mermaid .edgeLabel span {
  fill: var(--md-default-fg-color) !important;
  color: var(--md-default-fg-color) !important;
}

/* Node label text: ensure high contrast in dark mode. */
[data-md-color-scheme="slate"] .mermaid .nodeLabel,
[data-md-color-scheme="slate"] .mermaid .label,
[data-md-color-scheme="slate"] .mermaid span.nodeLabel {
  color: var(--md-default-fg-color) !important;
}

/* Subgraph titles and cluster labels. */
[data-md-color-scheme="slate"] .mermaid .cluster-label .nodeLabel {
  color: var(--md-default-fg-color) !important;
}