/* ============================================================
   FORCE MERMAID DIAGRAMS TO RENDER FULL WIDTH
   Works for ERD, flowchart, sequence, class diagrams, etc.
   ============================================================ */

/* Make the Mermaid container expand fully */
.mermaid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem 0 !important;
    overflow: visible !important;
}

/* Force the SVG to scale responsively */
.mermaid svg {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}

/* Prevent MkDocs Material from shrinking the diagram */
.md-typeset .mermaid > svg {
    max-width: 100% !important;
    width: 100% !important;
}

/* Fix for flex/grid containers that collapse SVGs */
.md-typeset__scrollwrap .mermaid svg {
    flex: 1 1 auto !important;
}

/* Ensure text remains readable */
.mermaid svg text {
    font-size: 16px !important;
}

/* Prevent parent containers from clipping the diagram */
.md-typeset__scrollwrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
}