/* React Flow dark theme overrides for RA-H Map */

.rah-map-wrapper .react-flow__background {
  background: #080808 !important;
}

.rah-map-wrapper .react-flow__pane {
  cursor: grab;
}

.rah-map-wrapper .react-flow__pane:active {
  cursor: grabbing;
}

/* Edges */
.rah-map-wrapper .react-flow__edge-path {
  stroke: #374151;
  stroke-width: 1.5;
}

.rah-map-wrapper .react-flow__edge.selected .react-flow__edge-path {
  stroke: #22c55e;
  stroke-width: 2;
}

/* Connection line while dragging */
.rah-map-wrapper .react-flow__connection-path {
  stroke: #22c55e;
  stroke-width: 2;
  stroke-dasharray: 5 3;
}

/* Attribution */
.rah-map-wrapper .react-flow__attribution {
  display: none;
}

/* Controls */
.rah-map-wrapper .react-flow__controls {
  display: none;
}

/* Selection box */
.rah-map-wrapper .react-flow__selection {
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.05);
}

/* Custom node styles */
.rah-map-node {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 12px;
  color: #e5e7eb;
  font-size: 12px;
  min-width: 60px;
  max-width: 180px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.rah-map-node:hover {
  border-color: #3a3a3a;
}

.rah-map-node--selected {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.rah-map-node--top {
  border-color: #166534;
  background: #0a1a0f;
}

.rah-map-node--expanded {
  border-color: #b45309;
  background: #1a150a;
}

.rah-map-node--expanded .rah-map-node__title {
  color: #fbbf24;
}

.rah-map-node__title {
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rah-map-node__dims {
  margin-top: 4px;
  font-size: 10px;
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Handles */
.rah-map-handle {
  width: 8px !important;
  height: 8px !important;
  background: #22c55e !important;
  border: 2px solid #0f0f0f !important;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.rah-map-node:hover .rah-map-handle,
.react-flow__node.selected .rah-map-handle {
  opacity: 1;
}

/* Connecting state: show all handles */
.rah-map-wrapper .react-flow__node.connecting .rah-map-handle,
.rah-map-wrapper.connecting .rah-map-handle {
  opacity: 1;
}

/* Dimmed nodes (not selected or connected to selection) */
.rah-map-wrapper .react-flow__node.dimmed {
  opacity: 0.2;
  transition: opacity 0.2s ease;
}

.rah-map-wrapper .react-flow__node.dimmed:hover {
  opacity: 0.6;
}
