/* Mermaid Dark Mode Overrides for 'Slate' theme */
/* Nuclear Option: targeting potentially every element structure used by Mermaid versions */

[data-md-color-scheme="slate"] .mermaid {
  background: transparent !important;
}

/* --- TEXT OVERRIDES --- */

/* Targets: Sequence Diagram messages, loops, notes, and generic labels */
[data-md-color-scheme="slate"] .mermaid text,
[data-md-color-scheme="slate"] .mermaid tspan,
[data-md-color-scheme="slate"] .mermaid .messageText,
[data-md-color-scheme="slate"] .mermaid .signalText,
[data-md-color-scheme="slate"] .mermaid .loopText,
[data-md-color-scheme="slate"] .mermaid .loopText > tspan,
[data-md-color-scheme="slate"] .mermaid .noteText,
[data-md-color-scheme="slate"] .mermaid .labelText,
[data-md-color-scheme="slate"] .mermaid .actor > tspan,
[data-md-color-scheme="slate"] .mermaid .label,
[data-md-color-scheme="slate"] .mermaid .messageLine0,
[data-md-color-scheme="slate"] .mermaid .messageLine1 {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: none !important;
  font-family: inherit !important;
}

/* Targets: Flowcharts and other diagrams using HTML labels via foreignObject */
[data-md-color-scheme="slate"] .mermaid .node .label {
  color: #ffffff !important;
}

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

/* --- LINE & SHAPE OVERRIDES --- */

/* Targets: All lines, paths, arrows */
[data-md-color-scheme="slate"] .mermaid path,
[data-md-color-scheme="slate"] .mermaid line,
[data-md-color-scheme="slate"] .mermaid .edgePath .path,
[data-md-color-scheme="slate"] .mermaid .flowchart-link {
  stroke: #ffffff !important;
}

/* Targets: Arrowheads */
[data-md-color-scheme="slate"] .mermaid marker,
[data-md-color-scheme="slate"] .mermaid marker path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Targets: Loop boxes (Alt, Opt, Loop) */
[data-md-color-scheme="slate"] .mermaid rect.labelBox {
  stroke: #ffffff !important;
  fill: #2da1f3 !important;
  fill-opacity: 0.3 !important;
  /* Semi-transparent to blend */
}

/* Targets: Note boxes */
[data-md-color-scheme="slate"] .mermaid .note {
  fill: #4a4a4a !important;
  stroke: #ffffff !important;
}

/* Targets: Actor boxes */
[data-md-color-scheme="slate"] .mermaid .actor {
  fill: #4a4a4a !important;
  stroke: #ffffff !important;
}

/* Language switcher: highlight the currently active language */
.md-select__link[hreflang]:lang(en)[hreflang="en"],
.md-select__link[hreflang]:lang(fr)[hreflang="fr"] {
  font-weight: 700;
  color: var(--md-accent-fg-color);
}

/* :lang() matches on the html element lang attribute via inheritance */
:lang(en) .md-select__link[hreflang="en"]::after,
:lang(fr) .md-select__link[hreflang="fr"]::after {
  content: " ✓";
}

/* Language switcher icon: replace SVG with current language code (set by lang_switcher.js) */
.md-header__option .md-select > button.md-header__button svg {
  display: none;
}

.md-header__option .md-select > button.md-header__button {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  min-width: 1.6rem;
}

/* Generic: works for any language without CSS changes */
.md-header__option .md-select > button.md-header__button[data-lang]::before {
  content: attr(data-lang);
}