/* Mermaid Diagram Styling - v12
   Global fix: 1600px Mermaid diagrams WITH horizontal scrollbar (MkDocs Material)
   ==========================================================================

   Root cause (MkDocs Material):
   - Content area uses flexbox; flex items default to min-width:auto and will expand
     to fit wide children, preventing overflow from existing.
   Fix strategy:
   1) Force the content column to be shrinkable (min-width:0 on relevant containers)
   2) Wrap each .mermaid block in a constrained, scrollable wrapper (.mermaid-scroll)
      via a small global JS helper (see javascripts/mermaid-scroll-wrapper.js)
*/

/* 1) Critical: allow MkDocs Material content column to shrink so overflow can exist */
.md-main__inner,
.md-content,
.md-content__inner,
article.md-content__inner,
.md-typeset {
  min-width: 0 !important;
}

/* 2) Scroll container (injected globally via JS wrapper) */
.mermaid-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1.5rem 0;
  padding-bottom: 0.5rem;          /* keep scrollbar from overlaying captions/links */
  overscroll-behavior-x: contain;  /* prevent horizontal scroll chaining */
  -webkit-overflow-scrolling: touch;
}

/* 3) Mermaid block stays 1600px wide */
.mermaid {
  display: block !important;
  width: 1600px !important;
  min-width: 1600px !important;
  max-width: none !important;

  /* Keep all spacing inside the fixed-width block so wrapper can scroll cleanly */
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1.5rem !important;

  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;

  /* Ensure wrapper (not the mermaid element) is the scroll owner */
  overflow: visible !important;
}

/* Dark mode */
[data-md-color-scheme="slate"] .mermaid {
  background: #2d2d2d !important;
  border-color: #444 !important;
}