:root {
  --diagram-focus-outline: 3px solid #ff9800;
}

svg .phase:focus,
svg .phase:hover {
  outline: var(--diagram-focus-outline);
}

.diagram-panzoom {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: var(--md-sys-color-surface-container-low, #f8f9fa);
  padding: 1rem;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .diagram-panzoom {
  border-color: rgba(255, 255, 255, 0.16);
  background: #000000; /* Black background in dark mode */
}

/* Additional selector for SVG backgrounds in dark mode */
[data-md-color-scheme="slate"] .diagram-panzoom svg {
  background: #000000 !important; /* Force black background for SVGs in dark mode */
}

.diagram-panzoom__svg {
  width: 100%;
  height: auto;
  display: block;
}

.diagram-panzoom__error {
  margin: 0;
  color: var(--md-sys-color-error, #b00020);
  font-weight: 600;
}

/* Styling for diagram zoom controls */
.diagram-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1; /* Significantly lower than header z-index (4) so controls go under header when scrolling */
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.diagram-controls button {
  width: 28px;
  height: 28px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: white;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: all 0.2s;
}

.diagram-controls button:hover {
  background-color: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.25);
}

.diagram-controls button:active {
  background-color: #e0e0e0;
  transform: scale(0.95);
}

/* Dark mode styles for diagram controls */
[data-md-color-scheme="slate"] .diagram-controls {
  background: rgba(30, 37, 50, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .diagram-controls button {
  background: #1e2532;
  border-color: rgba(255, 255, 255, 0.15);
  color: #edf2ff;
}

[data-md-color-scheme="slate"] .diagram-controls button:hover {
  background-color: #2d3748;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-md-color-scheme="slate"] .diagram-controls button:active {
  background-color: #3a4355;
}

/* Harmonise embedded draw.io colours with MkDocs themes */
:root {
  --diagram-card-stroke: rgba(0, 0, 0, 0.24);
  --diagram-card-fill: #ffffff;
  --diagram-text-color: #0f172a;
}

[data-md-color-scheme="slate"] {
  --diagram-card-stroke: rgba(255, 255, 255, 0.28);
  --diagram-card-fill: #1e2532;
  --diagram-text-color: #edf2ff;
}

.diagram-panzoom svg rect[fill="#ffffff"] {
  fill: var(--diagram-card-fill) !important;
  stroke: var(--diagram-card-stroke) !important;
}

.diagram-panzoom svg foreignObject div,
.diagram-panzoom svg foreignObject div * {
  color: var(--diagram-text-color) !important;
  fill: var(--diagram-text-color) !important;
}


.diagram-panzoom svg [stroke="#000000"],
.diagram-panzoom svg [stroke="#1A1A1A"] {
  stroke: var(--diagram-card-stroke) !important;
}
[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#d5e8d4"] {
  fill: #2f3f2e !important;
  stroke: rgba(130, 179, 102, 0.6) !important;
}

[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#fff2cc"],
[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#ffe6cc"] {
  fill: #4a3f2a !important;
  stroke: rgba(214, 165, 86, 0.6) !important;
}

[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#e1d5e7"] {
  fill: #40354a !important;
  stroke: rgba(150, 115, 166, 0.6) !important;
}

[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#dae8fc"],
[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#b1ddf0"] {
  fill: #274058 !important;
  stroke: rgba(107, 155, 202, 0.6) !important;
}

[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#f5f5f5"],
[data-md-color-scheme="slate"] .diagram-panzoom svg rect[fill="#ffffff"] {
  fill: var(--diagram-card-fill) !important;
}

/* Full-width content */
.md-grid {
  max-width: none;
}

.md-main__inner {
  margin: 0;
}

.md-content {
  max-width: none;
}