/* Make Mermaid diagrams responsive, styled, and centered */
.mermaid {
    margin: 2rem auto;  /* Center horizontally with auto margins */
    overflow-x: auto;
    background-color: #f9f5ff; /* Light purple background */
    padding: 1.5rem;
    border: 1px solid #e9d5ff; /* Light purple border */
    text-align: center;
    width: 100%;        /* Full width */
    box-sizing: border-box;
    border-radius: 0.25rem;
}

/* Add spacing between diagrams and text */
.mermaid + p, p + .mermaid {
    margin-top: 2rem;
}

/* Make sure SVG is responsive and centered */
.mermaid svg {
    max-width: 100%;
    margin: 0 auto;      /* Center SVG */
    height: auto !important; /* Ensure proper height scaling */
}

/* Style for Mermaid title to look like an H2 */
.mermaid .mermaid-title {
    font-family: 'DM Serif Text', serif;
    font-size: 1.75rem;
    color: #111827;
    margin-bottom: 1.5rem;
    font-weight: normal;
    text-align: center;
}

/* Custom styling for Mermaid diagram title labels */
.mermaid .diagram-title {
    font-family: 'DM Serif Text', serif !important;
    font-size: 1.5rem !important;
    font-weight: normal !important;
    fill: #111827 !important;
}

/* Base styling for all diagrams */
/* Node styling - standard flowchart look with previous color scheme */
.mermaid .node rect,
.mermaid .actor {
    fill: #f3e8ff !important;
    stroke: #9333ea !important;
    stroke-width: 2px !important;
}

/* Circle/diamond styling */
.mermaid .node circle,
.mermaid .node polygon,
.mermaid .node ellipse,
.mermaid .node path {
    fill: #f3e8ff !important;
    stroke: #9333ea !important;
    stroke-width: 2px !important;
}

/* Edge styling - for ALL diagram types */
.mermaid .edgePath .path,
.mermaid .messageLine0,
.mermaid .messageLine1,
.mermaid .actor-line,
.mermaid line:not(.actor-line) {
    stroke: #9333ea !important;
    stroke-width: 2px !important;
}

/* Arrowhead styling */
.mermaid .arrowheadPath,
.mermaid marker path {
    fill: #9333ea !important;
    stroke: #9333ea !important;
}

/* Force all arrows to be colored properly */
.mermaid #arrowhead path,
.mermaid .marker path,
.mermaid defs marker path {
    fill: #9333ea !important;
    stroke: #9333ea !important;
}

/* Base font size for node labels */
.mermaid .nodeLabel, 
.mermaid .edgeLabel,
.mermaid .messageText,
.mermaid .noteText,
.mermaid text:not(.icon) {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: #111827 !important;
    fill: #111827 !important;
    font-family: "IBM Plex Serif", serif !important;
}

/* Edge label styling */
.mermaid .edgeLabel,
.mermaid .messageText {
    background-color: #f9f5ff !important;
    padding: 2px !important;
}

/* Sequence diagram specific styles */
.mermaid .actor {
    fill: #f3e8ff !important;
    stroke: #9333ea !important;
    stroke-width: 2px !important;
}

.mermaid text.actor {
    fill: #111827 !important;
    stroke: none !important;
}

.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
    fill: #f3e8ff !important;
    stroke: #9333ea !important;
    stroke-width: 2px !important;
}

.mermaid .note {
    fill: #fffbeb !important;
    stroke: #9333ea !important;
    stroke-width: 2px !important;
}

/* Specific styling for loop, alt, opt boxes */
.mermaid .loopLine,
.mermaid .alt rect,
.mermaid .opt rect,
.mermaid rect.note,
.mermaid .labelBox {
    fill: #f3e8ff !important;
    stroke: #9333ea !important;
    stroke-width: 2px !important;
}

.mermaid .loopText,
.mermaid .altText,
.mermaid .optText,
.mermaid text.noteText {
    fill: #111827 !important;
    font-family: "IBM Plex Serif", serif !important;
}

/* Fix for missing sequence diagram actor boxes at bottom */
.mermaid .actor-line {
    height: 100% !important;
}

/* Make sure actor boxes at the bottom are visible */
.mermaid .actor + .actor,
.mermaid .actor + line + .actor {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure visibility of bottom actors */
.mermaid svg > rect.actor,
.mermaid svg > g > .actor {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Responsive adjustments for sequence diagrams */
@media (max-width: 768px) {
    .mermaid .messageText,
    .mermaid .noteText,
    .mermaid text.actor {
        font-size: 0.85rem !important;
    }
}

/* Dark Mode Overrides */
.dark .mermaid {
    background-color: rgba(126, 34, 206, 0.08);
    border-color: rgba(126, 34, 206, 0.2);
}

.dark .mermaid .mermaid-title,
.dark .mermaid .diagram-title {
    color: #e5e7eb;
    fill: #e5e7eb !important;
}

.dark .mermaid .nodeLabel,
.dark .mermaid .edgeLabel,
.dark .mermaid .messageText,
.dark .mermaid .noteText,
.dark .mermaid text:not(.icon) {
    color: #e5e7eb !important;
    fill: #e5e7eb !important;
}

.dark .mermaid text.actor {
    fill: #e5e7eb !important;
}

.dark .mermaid .node rect,
.dark .mermaid .actor {
    fill: rgba(126, 34, 206, 0.15) !important;
}

.dark .mermaid .edgeLabel,
.dark .mermaid .messageText {
    background-color: rgba(126, 34, 206, 0.08) !important;
}

.dark .mermaid .note {
    fill: rgba(245, 158, 11, 0.15) !important;
}