/* CloudQubes Mermaid Minimal Styling & Boundary Text Padding */
.mermaid {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 1.75rem 0;
  padding: 1.75rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  overflow-x: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

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

.mermaid foreignObject {
  overflow: visible !important;
}

.mermaid text,
.mermaid .nodeLabel,
.mermaid .edgeLabel {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Edge label pill styling with comfortable padding */
.mermaid .edgeLabel .labelBkg {
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Icon label pill styling with comfortable padding */
.mermaid .icon-shape .labelBkg {
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Subgraph titles */
.mermaid .cluster-label span.nodeLabel {
  font-weight: 700 !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.mermaid .nodeLabel p,
.mermaid .edgeLabel p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Subgraph box rounded borders */
.mermaid .cluster rect {
  rx: 8px !important;
  ry: 8px !important;
}

/* Sequence diagram typography & readability */
.mermaid .actor {
  font-weight: 600 !important;
}

.mermaid .messageText {
  font-weight: 500 !important;
}

.mermaid .noteText {
  font-weight: 500 !important;
}