/* Core Diagrams System (cdiag) Stylesheet */

:root,
[data-theme="light"],
.theme-light,
.cdiag-root[data-theme="light"] {
  --cdiag-bg: #ffffff;
  --cdiag-surface: #f6f8fa;
  --cdiag-surface-hover: #eaeef2;
  --cdiag-border: #d0d7de;
  --cdiag-border-subtle: #e1e4e8;
  --cdiag-text: #1f2328;
  --cdiag-text-muted: #656d76;
  --cdiag-line: #8c959f;
  --cdiag-line-active: #0969da;
  --cdiag-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cdiag-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --cdiag-series-1: #0969da;
  --cdiag-series-1-surface: #ddf4ff;
  --cdiag-series-2: #1a7f37;
  --cdiag-series-2-surface: #dafbe1;
  --cdiag-series-3: #d97706;
  --cdiag-series-3-surface: #fff8c5;
  --cdiag-series-4: #8250df;
  --cdiag-series-4-surface: #fbefff;
  --cdiag-series-5: #cf222e;
  --cdiag-series-5-surface: #ffebe9;
}

[data-theme="dark"],
.theme-dark,
.cdiag-root[data-theme="dark"] {
  --cdiag-bg: #0d1117;
  --cdiag-surface: #161b22;
  --cdiag-surface-hover: #21262d;
  --cdiag-border: #30363d;
  --cdiag-border-subtle: #21262d;
  --cdiag-text: #e6edf3;
  --cdiag-text-muted: #8b949e;
  --cdiag-line: #6e7681;
  --cdiag-line-active: #58a6ff;

  --cdiag-series-1: #58a6ff;
  --cdiag-series-1-surface: #10243e;
  --cdiag-series-2: #3fb950;
  --cdiag-series-2-surface: #102e1b;
  --cdiag-series-3: #d29922;
  --cdiag-series-3-surface: #2b2210;
  --cdiag-series-4: #bc8cff;
  --cdiag-series-4-surface: #241838;
  --cdiag-series-5: #f85149;
  --cdiag-series-5-surface: #351618;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cdiag-bg: #0d1117;
    --cdiag-surface: #161b22;
    --cdiag-surface-hover: #21262d;
    --cdiag-border: #30363d;
    --cdiag-border-subtle: #21262d;
    --cdiag-text: #e6edf3;
    --cdiag-text-muted: #8b949e;
    --cdiag-line: #6e7681;
    --cdiag-line-active: #58a6ff;

    --cdiag-series-1: #58a6ff;
    --cdiag-series-1-surface: #10243e;
    --cdiag-series-2: #3fb950;
    --cdiag-series-2-surface: #102e1b;
    --cdiag-series-3: #d29922;
    --cdiag-series-3-surface: #2b2210;
    --cdiag-series-4: #bc8cff;
    --cdiag-series-4-surface: #241838;
    --cdiag-series-5: #f85149;
    --cdiag-series-5-surface: #351618;
  }
}

.cdiag-root {
  display: flex;
  flex-direction: column;
  background: var(--cdiag-bg);
  color: var(--cdiag-text);
  font-family: var(--cdiag-font);
  border: 1px solid var(--cdiag-border);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 0;
  box-sizing: border-box;
  overflow-x: auto;
}

.cdiag-root svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

/* Connectors & Lines */
.cdiag-root .cdiag-edge-path,
.cdiag-root .cdiag-edge-line {
  fill: none;
  stroke: var(--cdiag-line);
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.cdiag-root .cdiag-edge-dashed { stroke-dasharray: 4 3; }

.cdiag-root text.cdiag-edge-label {
  fill: var(--cdiag-text);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--cdiag-font);
  text-anchor: middle;
  dominant-baseline: central;
}

.cdiag-root .cdiag-edge-label-bg {
  fill: var(--cdiag-bg);
  stroke: var(--cdiag-border);
  stroke-width: 1;
  rx: 9px;
}

.cdiag-root text.cdiag-sequence-msg-label {
  fill: var(--cdiag-text);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--cdiag-font);
  text-anchor: middle;
}

/* Arrowhead Markers */
.cdiag-root marker path { fill: var(--cdiag-line); }

/* Node Solid Base (Guarantees zero background bleed) */
.cdiag-root .cdiag-node-base {
  fill: var(--cdiag-bg);
  stroke: none;
}

/* Node Shapes */
.cdiag-root .cdiag-node-rect {
  fill: var(--cdiag-surface);
  stroke: var(--cdiag-border);
  stroke-width: 1.5;
  rx: 6px;
}

.cdiag-root .cdiag-node-pill {
  fill: var(--cdiag-surface);
  stroke: var(--cdiag-border);
  stroke-width: 1.5;
}

.cdiag-root .cdiag-node-diamond {
  fill: var(--cdiag-surface);
  stroke: var(--cdiag-border);
  stroke-width: 1.5;
}

.cdiag-root .cdiag-node-circle {
  fill: var(--cdiag-surface);
  stroke: var(--cdiag-border);
  stroke-width: 2;
}
.cdiag-root .cdiag-node-initial {
  fill: var(--cdiag-text);
  stroke: var(--cdiag-text);
}

/* Typography */
.cdiag-root text.cdiag-title {
  fill: var(--cdiag-text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--cdiag-font);
}

.cdiag-root text.cdiag-node-text {
  fill: var(--cdiag-text);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--cdiag-font);
  text-anchor: middle;
  dominant-baseline: central;
}

.cdiag-root text.cdiag-node-subtext {
  fill: var(--cdiag-text-muted);
  font-size: 10px;
  font-family: var(--cdiag-font);
  text-anchor: middle;
  dominant-baseline: central;
}

.cdiag-root text.cdiag-attr-text {
  fill: var(--cdiag-text);
  font-size: 11px;
  font-family: var(--cdiag-font-mono);
  dominant-baseline: central;
}

.cdiag-root .cdiag-header-rect { fill: var(--cdiag-series-1); rx: 6px; }
.cdiag-root .cdiag-header-divider { stroke: var(--cdiag-border); stroke-width: 1; }
.cdiag-root text.cdiag-header-text { fill: var(--cdiag-bg); font-size: 11px; font-weight: 700; font-family: var(--cdiag-font); text-anchor: middle; dominant-baseline: central; }


/* Architecture Layer Boxes */
.cdiag-root .cdiag-layer-box {
  fill: var(--cdiag-surface);
  fill-opacity: 0.35;
  stroke: var(--cdiag-border);
  stroke-dasharray: 5 3;
  stroke-width: 1;
  rx: 6px;
}

.cdiag-root text.cdiag-layer-title {
  fill: var(--cdiag-text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--cdiag-font);
  dominant-baseline: central;
}

/* Matrix Quadrants */
.cdiag-root .cdiag-matrix-axis {
  stroke: var(--cdiag-border);
  stroke-width: 1.5;
}

.cdiag-root .cdiag-quadrant-bg {
  fill: var(--cdiag-surface);
  fill-opacity: 0.25;
}

/* Timeline Elements */
.cdiag-root .cdiag-timeline-spine { stroke: var(--cdiag-line); stroke-width: 2.5; stroke-linecap: round; }
.cdiag-root .cdiag-timeline-stem { stroke: var(--cdiag-line); stroke-width: 1.5; stroke-linecap: round; }
.cdiag-root .cdiag-timeline-marker { fill: var(--cdiag-bg); stroke: var(--cdiag-line); stroke-width: 2.5; }
.cdiag-root .cdiag-timeline-marker-dot { fill: var(--cdiag-line); stroke: none; }
.cdiag-root .cdiag-timeline-phase { fill: var(--cdiag-surface); fill-opacity: 0.35; stroke: var(--cdiag-border); stroke-dasharray: 4 3; stroke-width: 1; rx: 6px; }
.cdiag-root text.cdiag-timeline-phase-label { fill: var(--cdiag-text-muted); font-size: 11px; font-weight: 600; font-family: var(--cdiag-font); text-anchor: middle; dominant-baseline: central; }

/* Series Color Themes for Nodes */
.cdiag-root [data-series="1"] .cdiag-node-rect,
.cdiag-root [data-series="1"] .cdiag-node-pill,
.cdiag-root [data-series="1"] .cdiag-timeline-phase { fill: var(--cdiag-series-1-surface); stroke: var(--cdiag-series-1); }
.cdiag-root [data-series="1"] .cdiag-header-rect { fill: var(--cdiag-series-1); }
.cdiag-root [data-series="1"] .cdiag-edge-path,
.cdiag-root [data-series="1"] .cdiag-timeline-marker { stroke: var(--cdiag-series-1); }
.cdiag-root [data-series="1"] .cdiag-timeline-marker-dot { fill: var(--cdiag-series-1); }

.cdiag-root [data-series="2"] .cdiag-node-rect,
.cdiag-root [data-series="2"] .cdiag-node-pill,
.cdiag-root [data-series="2"] .cdiag-timeline-phase { fill: var(--cdiag-series-2-surface); stroke: var(--cdiag-series-2); }
.cdiag-root [data-series="2"] .cdiag-header-rect { fill: var(--cdiag-series-2); }
.cdiag-root [data-series="2"] .cdiag-edge-path,
.cdiag-root [data-series="2"] .cdiag-timeline-marker { stroke: var(--cdiag-series-2); }
.cdiag-root [data-series="2"] .cdiag-timeline-marker-dot { fill: var(--cdiag-series-2); }

.cdiag-root [data-series="3"] .cdiag-node-rect,
.cdiag-root [data-series="3"] .cdiag-node-pill,
.cdiag-root [data-series="3"] .cdiag-timeline-phase { fill: var(--cdiag-series-3-surface); stroke: var(--cdiag-series-3); }
.cdiag-root [data-series="3"] .cdiag-header-rect { fill: var(--cdiag-series-3); }
.cdiag-root [data-series="3"] .cdiag-edge-path,
.cdiag-root [data-series="3"] .cdiag-timeline-marker { stroke: var(--cdiag-series-3); }
.cdiag-root [data-series="3"] .cdiag-timeline-marker-dot { fill: var(--cdiag-series-3); }

.cdiag-root [data-series="4"] .cdiag-node-rect,
.cdiag-root [data-series="4"] .cdiag-node-pill,
.cdiag-root [data-series="4"] .cdiag-timeline-phase { fill: var(--cdiag-series-4-surface); stroke: var(--cdiag-series-4); }
.cdiag-root [data-series="4"] .cdiag-header-rect { fill: var(--cdiag-series-4); }
.cdiag-root [data-series="4"] .cdiag-edge-path,
.cdiag-root [data-series="4"] .cdiag-timeline-marker { stroke: var(--cdiag-series-4); }
.cdiag-root [data-series="4"] .cdiag-timeline-marker-dot { fill: var(--cdiag-series-4); }

.cdiag-root [data-series="5"] .cdiag-node-rect,
.cdiag-root [data-series="5"] .cdiag-node-pill,
.cdiag-root [data-series="5"] .cdiag-timeline-phase { fill: var(--cdiag-series-5-surface); stroke: var(--cdiag-series-5); }
.cdiag-root [data-series="5"] .cdiag-header-rect { fill: var(--cdiag-series-5); }
.cdiag-root [data-series="5"] .cdiag-edge-path,
.cdiag-root [data-series="5"] .cdiag-timeline-marker { stroke: var(--cdiag-series-5); }
.cdiag-root [data-series="5"] .cdiag-timeline-marker-dot { fill: var(--cdiag-series-5); }

/* Root Topic / Center Node Highlight */
.cdiag-root .cdiag-root-node .cdiag-node-rect {
  fill: var(--cdiag-surface);
  stroke: var(--cdiag-series-4);
  stroke-width: 2.5;
}

/* Interactive States */
.cdiag-root [role="graphics-symbol"]:hover,
.cdiag-root [role="graphics-symbol"]:focus {
  filter: brightness(1.12);
  outline: none;
  cursor: pointer;
}

/* Empty State */
.cdiag-root.cdiag-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--cdiag-text-muted);
  font-size: 13px;
}

/* Accessible Screen-Reader Semantic Outline */
.cdiag-root .cdiag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cdiag-root * {
    transition: none !important;
  }
}