/* Base container moved to components/NodeEditorBase.module.css */

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--node-editor-background-surface, var(--node-editor-window-background-color));
  user-select: none;
  padding-bottom: var(--node-editor-space-xl);
  /* Space for status bar */
  box-sizing: border-box;
}

/* Canvas element styles moved to components/CanvasBase.module.css */

.nodes {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* Above connections */
}

.node {
  position: absolute;
  background-color: var(--node-editor-control-background);
  border: var(--node-editor-input-border);
  border-radius: var(--node-editor-control-border-radius);
  box-shadow: var(--node-editor-card-box-shadow);
  min-width: 150px;
  min-height: 50px;
  cursor: move;
  transition: box-shadow var(--node-editor-transition-duration);
}

.node:hover {
  box-shadow: var(--node-editor-card-hover-box-shadow);
}

/* Locked nodes: no extra visual highlight beyond the icon */
.node.locked {
}

.node.selected {
  border-color: var(--node-editor-accent-color);
  box-shadow: var(--node-editor-card-focus-box-shadow);
}

.node.dragging {
  opacity: var(--node-editor-dragging-opacity);
  cursor: grabbing;
}

.nodeHeader {
  position: relative;
  padding: 0.5em var(--node-editor-space-md);
  font-weight: var(--node-editor-inspector-font-weight-medium);
  border-bottom: var(--node-editor-input-border);
  background-color: var(--node-editor-table-header-background-color);
  border-radius: var(--node-editor-control-border-radius) var(--node-editor-control-border-radius) 0 0;
  height: 40px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.nodeHeader.interactiveDragHandle {
  cursor: move;
  background-color: var(--node-editor-table-header-background-color-hover);
  transition: background-color var(--node-editor-transition-duration) ease;
}

.nodeHeader.interactiveDragHandle:hover {
  background-color: var(--node-editor-table-header-background-color-active);
}

.nodeHeader.interactiveDragHandle::before {
  content: "⋮⋮";
  position: absolute;
  left: var(--node-editor-space-xs);
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--node-editor-secondary-label-color);
  opacity: 0.6;
  pointer-events: none;
  letter-spacing: -2px;
}

.nodeHeaderInput {
  width: 100%;
  padding: var(--node-editor-space-xs) 0.5em;
  border: var(--node-editor-border-width) solid var(--node-editor-accent-color);
  border-radius: var(--node-editor-card-border-radius);
  background-color: var(--node-editor-window-background-color);
  font-weight: var(--node-editor-inspector-font-weight-medium);
  font-size: inherit;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.lockIcon {
  position: absolute;
  top: var(--node-editor-space-xs);
  right: var(--node-editor-space-xs);
  font-size: var(--node-editor-inspector-font-size-body);
  opacity: 0.8;
  pointer-events: none;
}

.nodeContent {
  padding: var(--node-editor-space-md);
  box-sizing: border-box;
}

.groupNode {
  background-color: color-mix(in srgb, var(--node-editor-separator-color) 6%, transparent);
  border-style: dashed;
  border-width: var(--node-editor-border-width);
  border-color: var(--node-editor-divider-color);
}

.groupNode.collapsed .nodeContent {
  display: none;
}

.groupCollapsed {
  text-align: center;
  color: var(--node-editor-secondary-label-color);
  font-style: italic;
}

.groupExpanded {
  /* moved to components/node/NodeView.module.css */
}

/* Node visual variants moved to components/node/NodeView.module.css */

/* Removed duplicate selectionBox - using selectionBoxOverlay instead */

.toolbar {
  position: absolute;
  top: var(--node-editor-space-lg);
  left: var(--node-editor-space-lg);
  display: flex;
  gap: 0.5em;
  background-color: var(--node-editor-control-background);
  border: var(--node-editor-input-border);
  border-radius: var(--node-editor-control-border-radius);
  padding: 0.5em;
  box-shadow: var(--node-editor-card-box-shadow);
  box-sizing: border-box;
}

/* Toolbar button styles moved to components/elements/NodeEditorToolbar.module.css */

.contextMenu {
  position: absolute;
  background-color: var(--node-editor-control-background);
  border: var(--node-editor-input-border);
  border-radius: var(--node-editor-control-border-radius);
  box-shadow: var(--node-editor-card-hover-box-shadow);
  padding: var(--node-editor-space-xs);
  min-width: 150px;
  box-sizing: border-box;
}

.contextMenuItem {
  padding: 0.5em var(--node-editor-space-md);
  cursor: pointer;
  border-radius: var(--node-editor-card-border-radius);
  transition: background-color var(--node-editor-transition-duration);
  box-sizing: border-box;
}

.contextMenuItem:hover {
  background-color: var(--node-editor-control-hover-background);
}

.grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(var(--node-editor-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--node-editor-grid-color) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: var(--node-editor-grid-opacity);
}

/* Inspector styles moved to components/inspector/InspectorPanel.module.css */

.inspectorRow {
  display: flex;
  gap: 0.5em;
}

.inspectorRow input {
  flex: 1;
}

.editorWithInspector {
  display: flex;
  width: 100%;
  height: 100%;
}

.editorMain {
  flex: 1;
  position: relative;
}

.externalDataInfo {
  padding: 0.5em;
  background-color: var(--node-editor-card-filled-background);
  border-radius: var(--node-editor-card-border-radius);
  font-size: var(--node-editor-inspector-font-size-body);
  margin-bottom: 0.5em;
  box-sizing: border-box;
}

.externalDataInfo > div {
  margin-bottom: var(--node-editor-space-xs);
}

/* Drag guides */
.dragGuides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.dragGuide {
  position: absolute;
  background-color: var(--node-editor-accent-color);
  pointer-events: none;
  opacity: 0.7;
}

.dragGuideVertical {
  width: var(--node-editor-border-width);
  height: 100%;
}

.dragGuideHorizontal {
  width: 100%;
  height: var(--node-editor-border-width);
}

.snapTarget {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--node-editor-accent-color);
  border-radius: 50%;
  transform: translate(-4px, -4px);
  pointer-events: none;
  opacity: 0.8;
}

.distanceIndicator {
  position: absolute;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: var(--node-editor-card-border-radius);
  font-size: 10px;
  font-weight: var(--node-editor-inspector-font-weight-medium);
  white-space: nowrap;
  z-index: 1001;
  box-sizing: border-box;
}

.distanceLine {
  position: absolute;
  border-top: var(--node-editor-border-width) dashed var(--node-editor-secondary-label-color);
  pointer-events: none;
  opacity: 0.6;
}

/* Status bar styles moved to components/StatusBar.module.css and parts/StatusSection.module.css */

/* Port styles */
.nodePort {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--node-editor-control-background);
  border: 3px solid red;
  /* Temporary: make ports visible */
  cursor: crosshair;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
  z-index: 100;
  /* Increased z-index */
  box-shadow: 0 0 var(--node-editor-space-xs) rgba(0, 0, 0, 0.5);
  /* Add shadow for visibility */
}

.nodePort:hover {
  transform: scale(1.2);
  border-color: var(--node-editor-accent-color);
}

.nodePort.portInput {
  border-color: var(--node-editor-node-port-input-color);
}

.nodePort.portOutput {
  border-color: var(--node-editor-node-port-output-color);
}

.portInner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--node-editor-input-border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background-color var(--node-editor-transition-duration);
}

.nodePort:hover .portInner {
  background-color: var(--node-editor-accent-color);
}

.nodePort.portInput .portInner {
  background-color: var(--node-editor-node-port-input-color);
}

.nodePort.portOutput .portInner {
  background-color: var(--node-editor-node-port-output-color);
}

.portLabel {
  position: absolute;
  white-space: nowrap;
  font-size: var(--node-editor-inspector-font-size-meta);
  color: var(--node-editor-secondary-label-color);
  pointer-events: none;
  user-select: none;
}

.portLeft .portLabel {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.portRight .portLabel {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.portTop .portLabel {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.portBottom .portLabel {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Connection overlay styles */
.connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  /* Higher than nodes but below floating elements */
}

.connections svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* SVG container should not block events */
}

/* Dash animation for drag connections */
@keyframes dashAnimation {
  to {
    stroke-dashoffset: -10;
  }
}

.inspectorTabs {
  display: flex;
  gap: 0.5em;
  padding: 0;
}

.inspectorTab {
  flex: 1;
  padding: 0.5em 1em;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: var(--node-editor-inspector-font-weight-medium);
  color: var(--node-editor-secondary-label-color);
  cursor: pointer;
  transition: all var(--node-editor-transition-duration) ease;
}

.inspectorTab:hover {
  color: var(--node-editor-label-color);
  background: var(--node-editor-quaternary-system-fill-color);
}

.inspectorTab.active {
  color: var(--node-editor-accent-color);
  border-bottom-color: var(--node-editor-accent-color);
  background: transparent;
}

.inspectorTab.active:hover {
  background: var(--node-editor-quaternary-system-fill-color);
}

.inspectorContentNoPadding {
  padding: 0;
}

.inspectorSection h4 {
  margin: 0 0 var(--node-editor-space-md) 0;
  font-size: var(--node-editor-inspector-font-size-body);
  font-weight: 600;
  color: var(--node-editor-secondary-label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inspectorField {
  margin-bottom: var(--node-editor-space-md);
}

.inspectorField label {
  display: block;
  margin-bottom: var(--node-editor-space-xs);
  font-size: var(--node-editor-inspector-font-size-body);
  font-weight: var(--node-editor-inspector-font-weight-medium);
  color: var(--node-editor-text-color);
}

.inspectorInput,
.inspectorTextarea {
  width: 100%;
  padding: 3px 0.25em;
  border: var(--node-editor-input-border);
  border-radius: var(--node-editor-card-border-radius);
  font-size: var(--node-editor-inspector-font-size-body);
  background: var(--node-editor-control-background);
  color: var(--node-editor-text-color);
  box-sizing: border-box;
}

.inspectorInput:focus,
.inspectorTextarea:focus {
  outline: none;
  border-color: var(--node-editor-accent-color);
}

.inspectorTextarea {
  resize: vertical;
  min-height: 60px;
}

.inspectorPositionInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--node-editor-inspector-space-xs);
  row-gap: var(--node-editor-inspector-space-sm);
  width: 100%;
}

.inspectorNumberInput {
  flex: 1;
  /* Compact padding for small width usability */
  padding: 3px 0.25em;
  border: var(--node-editor-input-border);
  border-radius: var(--node-editor-card-border-radius);
  font-size: var(--node-editor-inspector-font-size-body);
  background: var(--node-editor-control-background);
  color: var(--node-editor-text-color);
  box-sizing: border-box;
  min-width: 0;
  /* Allow shrinking inside flex container */
}

.inspectorNumberInput:focus {
  outline: none;
  border-color: var(--node-editor-accent-color);
}

.inspectorInput:hover,
.inspectorTextarea:hover,
.inspectorNumberInput:hover {
  border-color: var(--node-editor-input-border-hover);
}

/* Unified section title for inspector */
.inspectorSectionTitle {
  margin: 0 0 var(--node-editor-space-sm) 0;
  font-size: var(--node-editor-inspector-font-size-body);
  font-weight: 600;
  color: var(--node-editor-secondary-label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inspectorReadOnlyField {
  display: block;
  padding: 6px 0.5em;
  font-size: var(--node-editor-inspector-font-size-body);
  color: var(--node-editor-secondary-label-color);
  background: var(--node-editor-tertiary-system-background);
  border-radius: var(--node-editor-card-border-radius);
  border: var(--node-editor-input-border);
  box-sizing: border-box;
}

.inspectorEmptyState {
  text-align: center;
  padding: var(--node-editor-inspector-empty-padding-vertical) var(--node-editor-inspector-empty-padding-horizontal);
  color: var(--node-editor-secondary-label-color);
  font-size: var(--node-editor-inspector-font-size-body);
  box-sizing: border-box;
}

/* Canvas container/grid styles moved to components/CanvasBase.module.css */

/* Editor Layout */
.editorLayout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}

.editorToolbar {
  flex: 0 0 auto;
  background: var(--node-editor-control-background);
  border-bottom: var(--node-editor-input-border);
  padding: 0.5em var(--node-editor-space-lg);
  display: flex;
  align-items: center;
  min-height: 4.5em;
  box-sizing: border-box;
}

.editorContent {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.editorMain {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.editorSidebar {
  flex: 0 0 auto;
}

/* Custom Node Content */
.customNodeContent {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Resize Handles - Transparent by default, accent color fill on hover */
.resizeHandle {
  position: absolute;
  background-color: transparent;
  border: none;
  opacity: 0;
  transition:
    opacity 0.1s ease,
    transform 0.1s ease,
    background-color 0.1s ease;
  z-index: 15;
  pointer-events: all;
  /* Corner-specific border radius - only bottom-right is rounded */
  border-radius: 0 0 var(--node-editor-card-border-radius) 0;
}

/* Show handle when node is hovered or selected */
.nodeView:hover .resizeHandle,
.nodeView.selected .resizeHandle {
  opacity: 0.6;
}

/* Accent color fill on hover */
.resizeHandle:hover {
  background-color: var(--node-editor-accent-color);
  opacity: 1;
  transform: scale(1.1);
}

/* Active state during resize */
.resizeHandleActive {
  background-color: var(--node-editor-accent-color);
  opacity: 1;
  transform: scale(1.1);
}

/* Minimap Styles */
.minimapContainer {
  position: absolute;
  top: var(--node-editor-space-lg);
  right: var(--node-editor-space-lg);
  z-index: 100;
  pointer-events: all;
}

.minimap {
  width: 200px;
  background: var(--node-editor-control-background);
  border: var(--node-editor-input-border);
  border-radius: var(--node-editor-control-border-radius);
  box-shadow: var(--node-editor-card-hover-box-shadow);
  backdrop-filter: blur(0.5em);
  overflow: hidden;
}

.minimapTitle {
  padding: 0.5em var(--node-editor-space-md);
  background: var(--node-editor-table-header-background-color);
  font-size: var(--node-editor-inspector-font-size-body);
  font-weight: 600;
  color: var(--node-editor-text-color);
  border-bottom: var(--node-editor-input-border);
}

.minimapContent {
  padding: var(--node-editor-space-md);
}

.minimapViewport,
.minimapNodes {
  font-size: var(--node-editor-inspector-font-size-meta);
  color: var(--node-editor-secondary-label-color);
  margin-bottom: var(--node-editor-space-xs);
}

.minimapViewport:last-child,
.minimapNodes:last-child {
  margin-bottom: 0;
}

/* Theme-specific styles */
:global([data-node-editor-root="true"][data-theme="dark"]) {
  background-color: var(--node-editor-dark-background-color);
  color: var(--node-editor-dark-text-color);
}

:global([data-node-editor-root="true"][data-theme="dark"]) .minimap {
  background: var(--node-editor-dark-control-background);
  border-color: var(--node-editor-dark-input-border);
}

:global([data-node-editor-root="true"][data-theme="dark"]) .minimapTitle {
  background: var(--node-editor-dark-table-header-background);
  color: var(--node-editor-dark-text-color);
  border-bottom-color: var(--node-editor-dark-input-border);
}

:global([data-node-editor-root="true"][data-theme="dark"]) .minimapViewport,
:global([data-node-editor-root="true"][data-theme="dark"]) .minimapNodes {
  color: var(--node-editor-dark-secondary-text-color);
}

/* Smooth animations - selective only for non-performance critical elements */
:global([data-node-editor-root="true"][data-smooth-animations="true"]) :global([data-status-section="true"]) {
  transition: opacity var(--node-editor-transition-duration) ease;
}

:global([data-node-editor-root="true"][data-smooth-animations="true"]) .minimap {
  transition: opacity var(--node-editor-transition-duration) ease;
}

/* Remove all transform transitions to prevent janky movement */

/* Disable all transitions during drag operations for smooth experience */
.nodeView.dragging,
.nodeView.dragging * {
  transition: none;
}

/* Status bar saving indicator */
.statusSaving {
  color: var(--node-editor-accent-color);
  font-weight: 600;
}

/* UI Overlay Container - Fixed position, non-interactive overlay for UI customization */
.uiOverlayContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  /* Never trap events - allows interaction with underlying elements */
  z-index: 2000;
  /* Above everything else in the editor */
  overflow: visible;
  /* Ensure children can be positioned absolutely within this container */
}

/* Allow individual UI overlay elements to be interactive if needed */
.uiOverlayContainer > * {
  pointer-events: auto;
  /* Children can choose to be interactive */
}

/* TabNav styles moved to components/TabNav.module.css */