Drag and drop working

src/app/globals.css

@@ -217,6 +217,14 @@ body {
   opacity: 0.55;
 }
 
+.tree-grid .circuit-drag-handle {
+  cursor: grab;
+}
+
+.tree-grid .circuit-dragging-block td {
+  opacity: 0.55;
+}
+
 .tree-grid .cell-selected {
   outline: 2px solid #4c7dd9;
   outline-offset: -2px;
@@ -248,6 +256,62 @@ body {
   background: #eef4ff !important;
 }
 
+.tree-grid .drop-target-invalid {
+  box-shadow: inset 0 0 0 2px #d97706;
+  background: #fff7ed !important;
+}
+
+.tree-grid tr.circuit-insert-before td,
+.tree-grid tr.circuit-insert-after td {
+  position: relative;
+}
+
+.tree-grid tr.circuit-insert-before td::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: -2px;
+  border-top: 4px solid #2563eb;
+  pointer-events: none;
+}
+
+.tree-grid tr.circuit-insert-before td:first-child::after {
+  content: "";
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 10px solid #2563eb;
+  pointer-events: none;
+}
+
+.tree-grid tr.circuit-insert-after td::after {
+  content: "";
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  bottom: -2px;
+  border-bottom: 4px solid #2563eb;
+  pointer-events: none;
+}
+
+.tree-grid tr.circuit-insert-after td:first-child::before {
+  content: "";
+  position: absolute;
+  left: -7px;
+  bottom: -7px;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 10px solid #2563eb;
+  pointer-events: none;
+}
+
 .drop-hint {
   font-size: 0.75rem;
   color: #1f4ea3;