Add logout button, fix metro label positioning

- Add top bar with breadcrumb (left) and user name + logout button (right)
- Move station labels below dots (centered) to prevent line overlap
- Move line labels further above stations
- Increase vertical spacing between metro lines (160px) for label clearance
- Align station x-coordinates for cleaner map layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

resources/js/Components/MetroMap/MetroCanvas.vue

@@ -129,11 +129,11 @@ const renderMap = () => {
             .attr('stroke-linecap', 'round')
             .attr('opacity', 0.7)
 
-        // Line label
+        // Line label — positioned well above the first station
         if (lineNodes.length > 0) {
             g.append('text')
                 .attr('x', lineNodes[0].x - 10)
-                .attr('y', lineNodes[0].y - 25)
+                .attr('y', lineNodes[0].y - 35)
                 .attr('fill', color)
                 .attr('font-family', "'VT323', monospace")
                 .attr('font-size', '16px')
@@ -217,20 +217,22 @@ const renderMap = () => {
         })
         .attr('stroke-width', 2)
 
-    // Station labels
+    // Station labels — positioned below the station dot to avoid line overlap
     nodeGroups.append('text')
-        .attr('x', 18)
-        .attr('y', 5)
+        .attr('x', 0)
+        .attr('y', 28)
+        .attr('text-anchor', 'middle')
         .attr('fill', '#e8e8e8')
         .attr('font-family', "'VT323', monospace")
         .attr('font-size', '14px')
         .text(d => d.name)
 
-    // Status badge
+    // Status badge — below the label
     nodeGroups.filter(d => d.badge)
         .append('text')
-        .attr('x', 18)
-        .attr('y', 20)
+        .attr('x', 0)
+        .attr('y', 42)
+        .attr('text-anchor', 'middle')
         .attr('fill', '#8892b0')
         .attr('font-family', "'IBM Plex Mono', monospace")
         .attr('font-size', '10px')