Drag and drop working

src/app/globals.css

@@ -106,6 +106,11 @@ body {
   background: #edf3ff;
 }
 
+.project-device-item.dragging {
+  opacity: 0.55;
+  border-style: dashed;
+}
+
 .sidebar-actions {
   display: flex;
   flex-direction: column;
@@ -158,6 +163,30 @@ body {
   font-weight: 600;
 }
 
+.tree-grid .section-drop-cell {
+  padding: 0.45rem 0.6rem;
+}
+
+.tree-grid .section-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.tree-grid .section-actions {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.tree-grid .section-actions button {
+  border: 1px solid #c4cddc;
+  background: #fff;
+  padding: 0.2rem 0.45rem;
+  border-radius: 3px;
+  font-size: 0.78rem;
+}
+
 .tree-grid .summary-row td {
   background: #f3f7fd;
 }
@@ -180,6 +209,14 @@ body {
   cursor: text;
 }
 
+.tree-grid .device-drag-handle {
+  cursor: grab;
+}
+
+.tree-grid .device-drag-handle.device-dragging {
+  opacity: 0.55;
+}
+
 .tree-grid .cell-selected {
   outline: 2px solid #4c7dd9;
   outline-offset: -2px;
@@ -206,6 +243,17 @@ body {
   font-size: 0.78rem;
 }
 
+.tree-grid .drop-target-active {
+  box-shadow: inset 0 0 0 2px #4c7dd9;
+  background: #eef4ff !important;
+}
+
+.drop-hint {
+  font-size: 0.75rem;
+  color: #1f4ea3;
+  font-weight: 600;
+}
+
 .notice {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;