/* Flow Editor Styles */
.react-flow {
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  color: #ffffff;
}

.react-flow__node {
  border-radius: 4px;
  padding: 0;
  width: 180px;
  font-size: 13px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.node {
  display: flex;
  flex-direction: column;
  background-color: #333333;
  border: 1px solid #444444;
  border-radius: 4px;
  overflow: hidden;
}

.node-header {
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid #444444;
}

.node-content {
  padding: 8px 10px;
}

.input-node-header {
  background-color: #2980b9;
}

.adjustment-node-header {
  background-color: #8e44ad;
}

.output-node-header {
  background-color: #27ae60;
}

.slider-container {
  margin-bottom: 8px;
}

.slider-container label {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
}

.slider-container input {
  width: 100%;
  margin: 0;
}

.react-flow__handle {
  width: 8px;
  height: 8px;
}

.react-flow__attribution {
  display: none;
}

.react-flow__controls {
  border-radius: 4px;
  overflow: hidden;
}

.react-flow__controls-button {
  background-color: #333333;
  border-color: #444444;
  color: white;
}

.react-flow__panel {
  background: transparent;
}

.react-flow__background {
  background-color: #1a1a1a;
}

.react-flow__minimap {
  background-color: #333333;
  border-radius: 4px;
}

.react-flow__edge-path {
  stroke: #aaaaaa;
  stroke-width: 2;
}

.react-flow__edge.animated path {
  stroke-dasharray: 5;
  animation: dashdraw 0.5s linear infinite;
}

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}

/* Node Editor Container */
#node-editor-container {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* When in node mode, make the main content area larger */
.nodes-mode .main-content {
  flex: 1 !important;
}

/* Node Graph Container - Simple implementation */
.node-graph-container {
  position: relative;
  height: 100%;
  width: 100%;
  background: #1a1a1a;
  padding: 20px;
  overflow: auto;
}

.node-info {
  font-size: 12px;
  color: #ddd;
  line-height: 1.4;
}

/* Hide top bar when in node mode */
body.node-mode .top-bar {
  display: none;
}

/* Styles for the back to global button */
#back-to-global {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

#back-to-global:hover {
  background: #1d4ed8;
}