frontend/src/styles/components/_mermaid.css

.mermaid .nodeLabel p {
    color: var(--text-color) !important;
}

.mermaid .cluster-label .nodeLabel {
    color: var(--text-color) !important;
}

/* Styles pour le texte des subgraphs/clusters - gérer les foreignObject */
.mermaid .cluster-label text,
.mermaid .cluster-label .nodeLabel text,
.mermaid .cluster-label foreignObject,
.mermaid .cluster-label foreignObject div,
.mermaid .cluster-label foreignObject span {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
}

/* Styles spécifiques pour les clusters/subgraphs */
.mermaid .cluster rect {
    fill: transparent !important;
    stroke: var(--border-color) !important;
    stroke-width: 1px !important;
}

.mermaid .cluster-label {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
}

/* Masquer le flicker pendant la conversion */
.mermaid-zoom-wrapper.converting {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.mermaid-zoom-wrapper.converting .mermaid {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Assurer que les diagrammes Mermaid prennent toute la largeur */
.mermaid {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    background: none !important;
}

/* Dark mode: ensure Mermaid SVG elements use theme-aware colors */
[data-theme="dark"] .mermaid .edgePath .path,
[data-theme="dark"] .mermaid .flowchart-link {
    stroke: rgba(255, 255, 255, .4) !important;
}

[data-theme="dark"] .mermaid .arrowheadPath,
[data-theme="dark"] .mermaid .edgePath marker path {
    fill: rgba(255, 255, 255, .4) !important;
    stroke: rgba(255, 255, 255, .4) !important;
}

[data-theme="dark"] .mermaid .edgeLabel,
[data-theme="dark"] .mermaid .edgeLabel rect {
    background-color: transparent !important;
    fill: transparent !important;
}

[data-theme="dark"] .mermaid .edgeLabel span {
    color: var(--text-color) !important;
}

[data-theme="dark"] .mermaid text {
    fill: var(--text-color) !important;
}

[data-theme="dark"] .mermaid .label foreignObject div {
    color: var(--text-color) !important;
}

/* Styles pour les SVG Mermaid */
.mermaid svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Styles pour les wrappers de zoom Mermaid */
.mermaid-zoom-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    cursor: zoom-in;
    position: relative;
}

.mermaid-zoom-wrapper .mermaid {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.mermaid-zoom-wrapper .mermaid svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Styles pour les nœuds avec bords arrondis et bordure interne */
.mermaid rect:not(.flowchart-link),
.mermaid .node rect,
.mermaid .nodeLabel rect,
.mermaid .cluster rect {
    rx: 8px !important;
    ry: 8px !important;
    stroke: color-mix(in srgb, var(--text-color) 20%, transparent) !important;
    stroke-width: 1px !important;
    /* Décalage pour créer l'effet de bordure interne */
}

/* Styles pour les diagrammes Mermaid zoomables */
.mermaid-zoom-wrapper:hover {
    opacity: 0.95;
    transition: opacity 0.2s ease;
}

/* Appliquer le même style que les images zoomables */
.mermaid-zoom-wrapper[data-zoomable="1"] {
    cursor: zoom-in;
}

/* Styles pour le mode zoom ouvert */
.medium-zoom--opened .mermaid-zoom-wrapper {
    cursor: zoom-out;
}

/* Exclude Mermaid images from dark mode inversion filter */
[data-theme="dark"] .mermaid-zoom-wrapper img.medium-zoom-image--opened {
    filter: none !important;
}

[data-theme="dark"] .mermaid-zoom-wrapper .medium-zoom-image--opened {
    filter: none !important;
}

[data-theme="dark"] .mermaid-zoom-wrapper img[data-zoomable="1"].medium-zoom-image--opened {
    filter: none !important;
}

.medium-zoom-overlay {
    z-index: 9999999 !important;
}

.medium-zoom-image--opened {
    z-index: 10000000 !important;
}

[data-theme="dark"] .mermaid-zoom-image.medium-zoom-image--opened {
    filter: none !important;
}

.medium-zoom-overlay:has(.mermaid-zoom-wrapper) {
    z-index: 9999999 !important;
}

.mermaid-zoom-image.medium-zoom-image--opened {
    z-index: 10000000 !important;
}

.mermaid-zoom-wrapper:has(.medium-zoom-image--opened) {
    z-index: 10000000 !important;
}

.medium-zoom--opened .mermaid-zoom-wrapper {
    opacity: 0;
    z-index: calc(var(--z-base) - 1);
    transition: opacity 0.3s ease;
}

.medium-zoom--opened .mermaid-zoom-wrapper:has(.medium-zoom--opened) {
    opacity: 1;
    z-index: var(--z-overlay);
}

.medium-zoom--opened .mermaid-zoom-wrapper.zoom-active {
    opacity: 1 !important;
    z-index: var(--z-overlay) !important;
}

/* Styles spécifiques pour différents types de diagrammes */

/* Flowchart/Graph - styles généraux */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .label rect {
    rx: 8px !important;
    ry: 8px !important;
}

/* Flowchart - nœuds principaux */
.mermaid .flowchart-node rect,
.mermaid .flowchart-label rect {
    rx: 8px !important;
    ry: 8px !important;
}

/* Sequence diagram */
.mermaid .actor rect,
.mermaid .participant rect {
    rx: 8px !important;
    ry: 8px !important;
}

/* ER diagram */
.mermaid .entityBox rect,
.mermaid .er .entityBox rect {
    rx: 6px !important;
    ry: 6px !important;
}

/* Gantt chart */
.mermaid .section0 rect,
.mermaid .section1 rect,
.mermaid .section2 rect,
.mermaid .section3 rect {
    rx: 4px !important;
    ry: 4px !important;
}

/* Gitgraph */
.mermaid .commit rect {
    rx: 12px !important;
    ry: 12px !important;
}

/* Mindmap */
.mermaid .mindmap-node rect {
    rx: 10px !important;
    ry: 10px !important;
}

/* Sankey */
.mermaid .sankey .node rect {
    rx: 4px !important;
    ry: 4px !important;
}

/* Timeline */
.mermaid .timeline rect {
    rx: 6px !important;
    ry: 6px !important;
}

/* Pie chart */
.mermaid .pieTitleText {
    rx: 8px !important;
    ry: 8px !important;
}

/* Journey */
.mermaid .journey .section0 rect,
.mermaid .journey .section1 rect,
.mermaid .journey .section2 rect,
.mermaid .journey .section3 rect {
    rx: 8px !important;
    ry: 8px !important;
}