/* Mermaid Diagram Styles */
.mermaid {
  display: block;
  margin: 2rem auto;
  padding: 1rem;
  max-width: 100%;
  overflow-x: auto;
  background: #f5f5f5;
  border: 1px solid var(--bordercl);
  border-radius: 4px;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
  min-height: 400px;
  display: block;
  margin: 0 auto;
}

/* Ensure mermaid diagrams are readable */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  fill: #fff;
  stroke: var(--bordercl);
  stroke-width: 2px;
}

.mermaid .node .label {
  color: #232333;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
}

.mermaid .edgeLabel {
  background-color: #f5f5f5;
  font-family: 'Roboto Mono', monospace;
}

/* Gantt chart specific styles */
.mermaid .grid .tick {
  stroke: #ddd;
}

.mermaid .taskText {
  fill: #232333 !important;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .mermaid {
    background: #1a1a1a;
  }

  .mermaid .node .label {
    color: #fff;
  }

  .mermaid .edgeLabel {
    background-color: #1a1a1a;
    color: #fff;
  }

  .mermaid .taskText {
    fill: #fff !important;
  }
}