admin UI UX update

Co-authored-by: Copilot <copilot@github.com>

admin_ui/src/styles.css

@@ -116,6 +116,11 @@ select {
 	flex: 1;
 }
 
+input[readonly] {
+	background: #f8fafc;
+	color: #64748b;
+}
+
 button {
 	background: #111827;
 	color: white;
@@ -163,6 +168,83 @@ button.secondary {
 	margin-bottom: 6px;
 }
 
+.route-stops-board {
+	display: grid;
+	gap: 10px;
+	margin: 12px 0 18px;
+	padding: 8px;
+	border-radius: 18px;
+	border: 1px dashed rgba(148, 163, 184, 0.28);
+	background: rgba(255, 255, 255, 0.45);
+}
+
+.route-stops-board.drop-ready {
+	border-color: rgba(79, 70, 229, 0.5);
+	background: rgba(238, 242, 255, 0.9);
+}
+
+.route-stop-item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	background: rgba(248, 250, 252, 0.96);
+	border: 1px solid rgba(148, 163, 184, 0.22);
+	border-radius: 16px;
+	padding: 12px 14px;
+	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
+	cursor: grab;
+}
+
+.route-stop-item.dragging {
+	opacity: 0.72;
+	transform: scale(0.995);
+}
+
+.route-stop-handle {
+	font-size: 1.2rem;
+	line-height: 1;
+	color: #64748b;
+	user-select: none;
+}
+
+.route-stop-content {
+	flex: 1;
+}
+
+.route-stop-content strong {
+	display: block;
+	margin-bottom: 4px;
+}
+
+.route-stop-actions {
+	display: flex;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+.route-stop-actions button {
+	padding: 8px 10px;
+	min-width: 42px;
+}
+
+.available-stops-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 10px;
+	margin: 12px 0 18px;
+}
+
+.available-stop {
+	cursor: grab;
+	user-select: none;
+	transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+.available-stop:hover {
+	transform: translateY(-1px);
+	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
 .muted {
 	color: #64748b;
 	font-size: 0.95rem;