/* Siren flow for DokuWiki Mermaid plugin */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon,
.mermaid .cluster rect { /* Node and cluster shapes */
  fill: rgba(0, 0, 0, 0.8) !important; /* Dark fill */
  stroke: var(--main-color) !important; /* Red border */
  stroke-width: 2px !important;
}

.mermaid svg path { /* All paths (edges) */
  stroke: var(--main-color) !important; /* Red lines */
  stroke-width: 2px !important;
  fill: none !important; /* Prevent accidental fill */
}

.mermaid svg marker path, /* Arrowheads in flowchart */
.mermaid .arrowheadPath {
  stroke: var(--main-color) !important; /* Match line color */
  fill: white !important;               /* Arrowhead fill white */
  stroke-width: 2px !important;
}

.mermaid .edgeLabel {
  background: rgba(0, 0, 0, 0.8) !important; /* Label background */
  color: white !important;
}

.mermaid .label,
.mermaid .nodeLabel,
.mermaid text { /* All text */
  color: white !important;
  fill: white !important;
}

.mermaid svg {
  width: 100%;
  height: 40vh; /* Diagram height */
}