Totally remove Dragula in Favor of the modern SortableJS library, updated the Kanban

css/itflow_custom.css

@@ -20,11 +20,11 @@
   }
 }
 
-button.drag-handle {
-    cursor: grab !important;
+.drag-handle {
+    cursor: grab;
     touch-action: none;
     user-select: none;
 }
-button.drag-handle:active {
-    cursor: grabbing !important;
+.drag-handle:active {
+    cursor: grabbing;
 }

css/tickets_kanban.css

@@ -1,41 +1,83 @@
+/* General Popover Styling */
 .popover {
     max-width: 600px;
 }
+
+/* Kanban Board Container */
 #kanban-board {
     display: flex;
-    box-sizing: border-box;
     overflow-x: auto;
+    box-sizing: border-box;
     min-width: 400px;
     height: calc(100vh - 210px);
 }
 
+/* Kanban Column */
 .kanban-column {
-    flex: 1; /* Allows columns to grow equally */
-    margin: 0 10px; /* Space between columns */
+    flex: 1;
     min-width: 300px;
     max-width: 300px;
+    margin: 0 10px;
     background: #f4f4f4;
-    padding: 10px;
     border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
     min-height: calc(100vh - 230px);
     max-height: calc(100vh - 230px);
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 }
 
-.kanban-column div {
-    max-height: calc(100vh - 280px);  /* Set your desired max height */
-    overflow-y: auto;  /* Adds a scrollbar when content exceeds max height */
+/* Column Inner Scrollable Task Area */
+.kanban-status {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 60px;
+    position: relative;
+    padding: 5px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
 }
 
+/* Individual Task Cards */
 .task {
     background: #fff;
     margin: 5px 0;
     padding: 10px;
     border: 1px solid #ddd;
-    user-select: none; /* Prevent text selection */
+    border-radius: 4px;
+    cursor: grab;
+    user-select: none;
 }
 
-.drag-handle-class {
-    touch-action: none;
-    float: right;
+/* Grabbing Cursor State */
+.task:active {
+    cursor: grabbing;
+}
+
+/* Drag Handle (shown on mobile or with class targeting) */
+.drag-handle-class {
+    float: right;
+    touch-action: none;
+    cursor: grab;
+}
+
+/* Placeholder shown in empty columns */
+.empty-placeholder {
+    border: 2px dashed #ccc;
+    background-color: #fcfcfc;
+    color: #999;
+    font-style: italic;
+    padding: 12px;
+    margin: 10px 0;
+    text-align: center;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+/* Sortable drop zone feedback (optional visual cue) */
+.kanban-status.sortable-over {
+    background-color: #eaf6ff;
+    transition: background-color 0.2s ease;
 }