/* Mermaid-specific styling for TQC documentation */

/* Custom theme variables for Mermaid diagrams */
:root {
  --mermaid-primary-color: #673ab7;
  --mermaid-secondary-color: #9c27b0;
  --mermaid-tertiary-color: #1976d2;
  --mermaid-background: #ffffff;
  --mermaid-text-color: #333333;
  --mermaid-line-color: #666666;
}

[data-md-color-scheme="slate"] {
  --mermaid-background: #1e1e1e;
  --mermaid-text-color: #ffffff;
  --mermaid-line-color: #999999;
}

/* Mermaid diagram container styling */
.mermaid {
  text-align: center;
  margin: 2em 0;
  padding: 1em;
  background: var(--mermaid-background);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow-x: auto;
}

/* Dark mode adjustments for Mermaid */
[data-md-color-scheme="slate"] .mermaid {
  box-shadow: 0 2px 8px rgba(255,255,255,0.05);
}

/* Responsive Mermaid diagrams */
@media screen and (max-width: 768px) {
  .mermaid {
    font-size: 12px;
    padding: 0.5em;
  }
}

/* Specific styling for different diagram types */

/* Flowcharts - for compilation flow */
.mermaid .node rect {
  fill: var(--mermaid-primary-color);
  stroke: var(--mermaid-secondary-color);
  stroke-width: 2px;
}

.mermaid .node .label {
  color: white;
  font-weight: bold;
}

/* Sequence diagrams - for quantum operations */
.mermaid .actor {
  fill: var(--mermaid-tertiary-color);
  stroke: var(--mermaid-primary-color);
  stroke-width: 2px;
}

.mermaid .messageLine0 {
  stroke: var(--mermaid-secondary-color);
  stroke-width: 2px;
}

/* State diagrams - for quantum state evolution */
.mermaid .state {
  fill: var(--mermaid-primary-color);
  stroke: var(--mermaid-secondary-color);
  stroke-width: 2px;
}

.mermaid .stateText {
  fill: white;
  font-weight: bold;
}

/* Class diagrams - for API structure */
.mermaid .class {
  fill: var(--mermaid-background);
  stroke: var(--mermaid-primary-color);
  stroke-width: 2px;
}

.mermaid .classText {
  fill: var(--mermaid-text-color);
}

/* Gantt charts - for project timelines */
.mermaid .grid .tick {
  stroke: var(--mermaid-line-color);
}

.mermaid .today {
  fill: var(--mermaid-secondary-color);
  opacity: 0.3;
}

/* Custom classes for specific TQC concepts */
.mermaid .quantum-gate {
  fill: #4caf50 !important;
}

.mermaid .topological-operation {
  fill: #ff9800 !important;
}

.mermaid .error-correction {
  fill: #f44336 !important;
}

.mermaid .simulation-step {
  fill: #2196f3 !important;
}

/* Animation for interactive diagrams */
@keyframes mermaid-pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.mermaid .interactive:hover {
  animation: mermaid-pulse 1s ease-in-out;
}

/* Accessibility improvements */
.mermaid text {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}

/* Print styles */
@media print {
  .mermaid {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}