/* Mermaid diagram styling */
.mermaid {
    text-align: center;
    margin: var(--spacing-large) 0;
    background: var(--code-background);
    border: 1px solid var(--separator-color);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-medium);
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Dark mode adjustments for Mermaid */
html.dark-mode .mermaid svg {
    filter: none; /* Prevent the general image inversion from affecting Mermaid */
}

@media (prefers-color-scheme: dark) {
    html:not(.light-mode) .mermaid svg {
        filter: none;
    }
}

/* ------------------------------------------------------------------------- */
/* Neutral theme approximation for Mermaid diagrams (light mode only)
 * Based on mermaid-js "theme-neutral" defaults. Key values:
 *   primaryColor = #eeeeee
 *   mainBkg      = #eeeeee
 *   background   = #ffffff
 *   lineColor    = #666666
 *   border1      = #999999
 *   note         = #ffffaa
 *   text         = #333333
 *   done         = #bbbbbb
 *   arrowhead    = #333333
 *
 * We scope these overrides to light mode and the .mermaid container so that
 * dark mode can continue to rely on Mermaid's own theming.
 */

/* Flowchart / general nodes */
html:not(.dark-mode) .mermaid .node rect,
html:not(.dark-mode) .mermaid .node circle,
html:not(.dark-mode) .mermaid .node polygon {
    fill: #eeeeee !important;   /* mainBkg */
    stroke: #999999 !important; /* border1 */
}

/* Subgraphs / clusters */
html:not(.dark-mode) .mermaid .cluster rect {
    fill: #f4f4f4 !important;   /* close to activationBkg/rowEven */
    stroke: #bbbbbb !important; /* lighter secondary border */
}

/* Edges and connectors */
html:not(.dark-mode) .mermaid .edgePath path,
html:not(.dark-mode) .mermaid .flowchart-link,
html:not(.dark-mode) .mermaid .relationshipLine,
html:not(.dark-mode) .mermaid .messageLine0,
html:not(.dark-mode) .mermaid .messageLine1 {
    stroke: #666666 !important; /* lineColor */
}

/* Arrowheads */
html:not(.dark-mode) .mermaid .marker path,
html:not(.dark-mode) .mermaid .marker polygon,
html:not(.dark-mode) .mermaid .arrowheadPath {
    fill: #333333 !important;   /* arrowheadColor */
    stroke: #333333 !important;
}

/* Text labels */
html:not(.dark-mode) .mermaid text,
html:not(.dark-mode) .mermaid .label,
html:not(.dark-mode) .mermaid .cluster-label text {
    fill: #333333 !important;
}

/* ------------------------------------------------------------------------- */
/* Diagram-type specific tuning (neutral palette, light mode only)           */

/* Sequence diagrams */
html:not(.dark-mode) .mermaid .sequence .actor rect,
html:not(.dark-mode) .mermaid .sequence .actor-man,
html:not(.dark-mode) .mermaid .sequence .actor-line {
    fill: #eeeeee !important;   /* actorBkg ≈ mainBkg */
    stroke: #999999 !important; /* actorBorder ≈ border1 */
}

html:not(.dark-mode) .mermaid .sequence .note rect {
    fill: #ffffaa !important;   /* note */
    stroke: #999999 !important; /* noteBorderColor ≈ border1 */
}

/* Sequence activations */
html:not(.dark-mode) .mermaid .sequence .activation,
html:not(.dark-mode) .mermaid .sequence .activation0,
html:not(.dark-mode) .mermaid .sequence .activation1 {
    fill: #f4f4f4 !important;   /* activationBkgColor */
    stroke: #666666 !important; /* activationBorderColor */
}

/* State diagrams */
html:not(.dark-mode) .mermaid .stateGroup rect,
html:not(.dark-mode) .mermaid .stateGroup polygon,
html:not(.dark-mode) .mermaid .stateGroup path {
    fill: #eeeeee !important;
    stroke: #999999 !important;
}

html:not(.dark-mode) .mermaid .state-note rect {
    fill: #ffffaa !important;   /* note */
    stroke: #999999 !important;
}

html:not(.dark-mode) .mermaid .stateGroup text,
html:not(.dark-mode) .mermaid .state-note text {
    fill: #333333 !important;
}

/* Class diagrams */
html:not(.dark-mode) .mermaid .classGroup rect,
html:not(.dark-mode) .mermaid .classGroup polygon {
    fill: #eeeeee !important;
    stroke: #999999 !important;
}

html:not(.dark-mode) .mermaid .classGroup text {
    fill: #333333 !important;
}

/* Gantt charts */
html:not(.dark-mode) .mermaid .gantt .section rect.section0,
html:not(.dark-mode) .mermaid .gantt .section rect.section1,
html:not(.dark-mode) .mermaid .gantt .section rect.section2,
html:not(.dark-mode) .mermaid .gantt .section rect.section3 {
    fill: #f4f4f4 !important;   /* altSectionBkg / rowEven */
    stroke: #bbbbbb !important;
}

html:not(.dark-mode) .mermaid .gantt .task rect.task,
html:not(.dark-mode) .mermaid .gantt .task rect.active,
html:not(.dark-mode) .mermaid .gantt .task rect.done {
    fill: #eeeeee !important;   /* taskBkg ≈ mainBkg */
    stroke: #999999 !important; /* taskBorderColor ≈ border1 */
}

/* Done tasks */
html:not(.dark-mode) .mermaid .gantt .task rect.done {
    fill: #bbbbbb !important;   /* done */
}

html:not(.dark-mode) .mermaid .gantt text {
    fill: #333333 !important;
}

/* Journey (user journey) diagrams */
html:not(.dark-mode) .mermaid .journey-section,
html:not(.dark-mode) .mermaid .journey-task {
    stroke: #999999 !important;
}

html:not(.dark-mode) .mermaid .journey-section rect,
html:not(.dark-mode) .mermaid .journey-task rect {
    fill: #eeeeee !important;
}

/* Requirement diagrams */
html:not(.dark-mode) .mermaid .requirementBox rect,
html:not(.dark-mode) .mermaid .requirementBox polygon {
    fill: #eeeeee !important;
    stroke: #999999 !important;
}

html:not(.dark-mode) .mermaid .requirementBox text {
    fill: #333333 !important;
}

/* Git graphs (nodes and labels) */
html:not(.dark-mode) .mermaid .git-commit,
html:not(.dark-mode) .mermaid .git-branch-label {
    fill: #eeeeee !important;
    stroke: #999999 !important;
}

html:not(.dark-mode) .mermaid .git-commit text,
html:not(.dark-mode) .mermaid .git-branch-label text {
    fill: #333333 !important;
}

/* Keep dark mode behavior unchanged for clusters */
html.dark-mode .mermaid .cluster rect {
    fill: inherit;
}