/* Diagram CSS - SVG elements, nodes, links, and visual styles */

/* Node styles */
.node {
  cursor: pointer !important;
}

.node:hover {
  cursor: pointer;
}

.node.selected {
  stroke: #6B46C1;
  stroke-width: 4px;
}

/* Shadow node variant */
.node.shadow .node-label {
  fill: #999;
  font-style: italic;
}

/* Node labels */
.node-label {
  font-size: 11px;
  font-weight: normal;
  text-anchor: middle;
  fill: black;
  pointer-events: none;
  user-select: none;
}

/* Node info icon for variables with documentation */
.node-info-icon {
  opacity: 0.7;
  pointer-events: none;
}

.node-info-icon circle {
  fill: white;
  fill-opacity: 0.8;
  stroke: #999;
  stroke-width: 0.5;
}

.node-info-icon text {
  font-family: serif;
  font-style: italic;
  fill: #666;
}

/* Link styles */
.link {
  fill: none;
  opacity: 0.8;
}

.link.positive {
  stroke: #4a90e2;
}

.link.negative {
  stroke: #e74c3c;
}

/* Comment styles */
.comment-group {
  cursor: default;
}

.comment-group:hover {
  cursor: pointer;
}

/* Preview mode - clickable comments with loop data */
.comment-group.clickable {
  cursor: pointer !important;
}

.comment-group.clickable:hover {
  cursor: pointer !important;
}

/* Loop-label comment styles */
.loop-label-comment {
  cursor: default;
}

.loop-label-comment:hover {
  cursor: default;
}

/* Preview mode - clickable loop-label comments with loop data */
.loop-label-comment.clickable {
  cursor: pointer !important;
}

.loop-label-comment.clickable:hover {
  cursor: pointer !important;
}

.loop-label-circle {
  transition: all 0.2s ease;
}

.loop-label-comment:hover .loop-label-circle {
  /* No shadow, just cursor change handled by parent */
}

.loop-label-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: normal;
  fill: #000;
  pointer-events: none;
  user-select: none;
}

.loop-direction-arrow {
  fill: none;
  pointer-events: none;
}

.loop-direction-arrowhead {
  pointer-events: none;
}

/* Basic comment styles (for future use) */
.basic-comment {
  cursor: default;
}

.basic-comment:hover {
  cursor: default;
}

/* Preview mode - clickable basic comments with loop data */
.basic-comment.clickable {
  cursor: pointer !important;
}

.basic-comment.clickable:hover {
  cursor: pointer !important;
}

.basic-comment-rect {
  transition: all 0.2s ease;
}

.basic-comment:hover .basic-comment-rect {
  /* No shadow, just cursor change handled by parent */
}

.basic-comment-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  fill: #333;
  pointer-events: none;
  user-select: none;
}

.link.none {
  stroke: #888888;
}

/* Link path styles */
.link-path {
  /* No cursor styling - links are not directly clickable */
}

/* Highlighting system (preview mode) */
.highlighted {
  opacity: 1 !important;
}

.suppressed {
  opacity: var(--diagram-suppressed-opacity, 0.2) !important;
}

/* Alternative display mode (configurable) */
.suppressed.hidden-mode {
  display: none !important;
}

/* Selected link style - no shadow, just opacity */
.link-path.selected {
  opacity: 1;
}

/* Control point styles - REMOVED for circular arc implementation */
/* Circular arcs don't use control points or handles, only midpoints (M points) */

/* Midpoint styles (edit mode only) */
.midpoint {
  fill: white;
  stroke-width: 2;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.midpoint.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.midpoint:hover {
  cursor: pointer;
}

.midpoint:not(.draggable) {
  cursor: default !important;
}

.midpoint:not(.draggable):hover {
  cursor: default !important;
}

/* Preview mode - clickable midpoints with loop data */
.midpoint.clickable {
  cursor: pointer !important;
}

.midpoint.clickable:hover {
  cursor: pointer !important;
}

.midpoint.selected .midpoint-circle {
  stroke: #6B46C1;
  stroke-width: 3px;
}

.midpoint-circle {
  fill: white;
  stroke-width: 2;
}

.midpoint-text {
  fill: #333;
  font-weight: bold;
  font-family: Arial, sans-serif;
  user-select: none;
  pointer-events: none;
}

/* Debug line styles */
.debug-line {
  stroke: inherit;
  stroke-width: 1;
  fill: none;
  pointer-events: none;
  opacity: 0.8;
}

/* Selection rectangle */
.selection-rect {
  fill: rgba(128, 128, 128, 0.1);
  stroke: rgba(128, 128, 128, 0.3);
  stroke-width: 1px;
  stroke-dasharray: 3,3;
  pointer-events: none;
}

/* Highlighted elements (for loop highlighting) */
.dimmed {
  opacity: 0.2;
}

.highlighted {
  opacity: 1;
}

/* Arrow marker base styles - will be dynamically created */
marker path {
  fill: currentColor;
}

/* Arrowhead styles */
.arrowhead {
  /* No cursor styling - arrowheads are not clickable */
}

/* View switching - disable transitions during view changes to prevent visual delays */
.view-switching .comment-group,
.view-switching .node-group,
.view-switching .link-path,
.view-switching .midpoint,
.view-switching .loop-label-circle,
.view-switching .basic-comment-rect {
  transition: none !important;
}

/* Drop shadow effect for nodes and comments */
.node-drop-shadow,
.comment-drop-shadow {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}