feat(dashboard): implement responsive header with tab scrolling and overflow menus

Add comprehensive responsive header system with Google-quality UX:

Tab Navigation:
- Add TabScrollManager for horizontal scrolling tabs
- Left/Right navigation arrows appear when scrollable
- Edge fade indicators show more content exists
- Smooth scroll behavior with momentum
- Progressive sizing: full → icon+name → icon-only
- Automatic scroll position tracking

Button Overflow System:
- Add HeaderOverflowManager with ResizeObserver
- Three responsive modes based on container width:
  * Full mode (>900px): all buttons visible
  * Overflow mode (500-900px): priority + "More" (⋮) menu
  * Compact mode (<500px): priority + hamburger (☰) menu
- Priority buttons (Lock + Edit) always visible
- Smooth transitions between modes

Dropdown Menu:
- Professional slide-down animation
- Full keyboard navigation (arrows, Home, End, Escape)
- Click-outside-to-close behavior
- ARIA attributes for accessibility
- Focus management and trap
- Auto-refresh on edit mode changes
- High z-index (10003) ensures visibility above all UI

Cross-Tab Widget Dragging:
- Add collision detection for widget placement
- Implement moveWidgetToTab() with collision avoidance
- Find available positions in target tab automatically
- Update dragDrop.js to detect tab hover
- Visual feedback with tab highlight on hover
- Proper widget positioning after cross-tab move

Additional Features:
- Sort Tab button for current-tab-only auto-layout
- Mobile optimizations with compact buttons
- Responsive breakpoints at 768px and 480px
- Hardware-accelerated animations
- Touch-friendly 44px minimum targets

Files changed:
- New: tabScrollManager.js, headerOverflowManager.js
- Modified: dashboardTemplate.html, dashboardIntegration.js
- Modified: dashboardManager.js, dragDrop.js, style.css
- Modified: editModeManager.js (lock state default)

src/systems/dashboard/dashboardTemplate.html

@@ -3,48 +3,67 @@
     <!-- Dashboard Header Controls -->
     <div class="rpg-dashboard-header">
         <div class="rpg-dashboard-header-left">
-            <!-- Tab Navigation (will be populated by TabManager) -->
-            <div id="rpg-dashboard-tabs" class="rpg-dashboard-tabs"></div>
+            <!-- Tab Navigation Wrapper (with scroll controls) -->
+            <div class="rpg-tab-nav-wrapper">
+                <!-- Tabs container (will be populated by TabManager) -->
+                <div id="rpg-dashboard-tabs" class="rpg-dashboard-tabs"></div>
+            </div>
         </div>
 
-        <div class="rpg-dashboard-header-right">
-            <!-- Reset Layout Button -->
-            <button id="rpg-dashboard-reset-layout" class="rpg-dashboard-btn rpg-reset-layout-btn" title="Reset to Default Layout">
-                <i class="fa-solid fa-rotate-left"></i>
+        <div class="rpg-dashboard-header-right" id="rpg-dashboard-header-right">
+            <!-- Priority buttons (always visible) -->
+            <button id="rpg-dashboard-lock-widgets" class="rpg-dashboard-btn rpg-lock-widgets-btn rpg-priority-btn" title="Unlock Widgets" aria-label="Lock/Unlock widgets">
+                <i class="fa-solid fa-lock"></i>
             </button>
 
-            <!-- Auto-Layout Button -->
-            <button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn" title="Auto-Arrange Widgets">
-                <i class="fa-solid fa-table-cells-large"></i>
-            </button>
-
-            <!-- Lock/Unlock Button (always visible) -->
-            <button id="rpg-dashboard-lock-widgets" class="rpg-dashboard-btn rpg-lock-widgets-btn" title="Lock Widgets">
-                <i class="fa-solid fa-lock-open"></i>
-            </button>
-
-            <!-- Edit Widget Mode Toggle (hidden in edit mode) -->
-            <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Enter Edit Widget Mode">
+            <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn rpg-priority-btn" title="Enter Edit Widget Mode" aria-label="Edit mode">
                 <i class="fa-solid fa-pen-to-square"></i>
             </button>
 
-            <!-- Done Button (shown in edit mode) -->
-            <button id="rpg-dashboard-done-edit" class="rpg-dashboard-btn rpg-done-edit-btn" style="display: none;" title="Exit Edit Widget Mode">
-                <i class="fa-solid fa-check"></i>
+            <!-- Full mode buttons (hidden on overflow) -->
+            <button id="rpg-dashboard-reset-layout" class="rpg-dashboard-btn rpg-reset-layout-btn rpg-overflow-btn" title="Reset to Default Layout" aria-label="Reset layout">
+                <i class="fa-solid fa-rotate-left"></i>
             </button>
 
-            <!-- Add Widget Button (shown in edit mode, icon only) -->
-            <button id="rpg-dashboard-add-widget" class="rpg-dashboard-btn rpg-add-widget-btn" style="display: none;" title="Add Widget">
+            <button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn rpg-overflow-btn" title="Auto-Arrange All Widgets" aria-label="Auto-arrange all">
+                <i class="fa-solid fa-table-cells-large"></i>
+            </button>
+
+            <button id="rpg-dashboard-sort-tab" class="rpg-dashboard-btn rpg-sort-tab-btn rpg-overflow-btn" title="Sort Current Tab" aria-label="Sort tab">
+                <i class="fa-solid fa-arrow-down-short-wide"></i>
+            </button>
+
+            <button id="rpg-dashboard-add-widget" class="rpg-dashboard-btn rpg-add-widget-btn rpg-overflow-btn" style="display: none;" title="Add Widget" aria-label="Add widget">
                 <i class="fa-solid fa-plus"></i>
             </button>
 
-            <!-- Export/Import Layout Buttons (shown in edit mode) -->
-            <button id="rpg-dashboard-export-layout" class="rpg-dashboard-btn rpg-export-btn" style="display: none;" title="Export Layout">
+            <button id="rpg-dashboard-export-layout" class="rpg-dashboard-btn rpg-export-btn rpg-overflow-btn" style="display: none;" title="Export Layout" aria-label="Export layout">
                 <i class="fa-solid fa-download"></i>
             </button>
-            <button id="rpg-dashboard-import-layout" class="rpg-dashboard-btn rpg-import-btn" style="display: none;" title="Import Layout">
+
+            <button id="rpg-dashboard-import-layout" class="rpg-dashboard-btn rpg-import-btn rpg-overflow-btn" style="display: none;" title="Import Layout" aria-label="Import layout">
                 <i class="fa-solid fa-upload"></i>
             </button>
+
+            <button id="rpg-dashboard-done-edit" class="rpg-dashboard-btn rpg-done-edit-btn rpg-overflow-btn" style="display: none;" title="Exit Edit Widget Mode" aria-label="Done editing">
+                <i class="fa-solid fa-check"></i>
+            </button>
+
+            <!-- Overflow Menu Button (⋮) - shown in overflow mode -->
+            <button id="rpg-dashboard-overflow-menu" class="rpg-dashboard-btn rpg-overflow-menu-btn" style="display: none;" title="More Options" aria-label="More options" aria-haspopup="true" aria-expanded="false">
+                <i class="fa-solid fa-ellipsis-vertical"></i>
+            </button>
+
+            <!-- Hamburger Menu Button (☰) - shown in compact mode -->
+            <button id="rpg-dashboard-hamburger-menu" class="rpg-dashboard-btn rpg-hamburger-menu-btn" style="display: none;" title="Menu" aria-label="Menu" aria-haspopup="true" aria-expanded="false">
+                <i class="fa-solid fa-bars"></i>
+            </button>
+
+            <!-- Dropdown Menu (populated dynamically) -->
+            <div id="rpg-dashboard-dropdown-menu" class="rpg-dropdown-menu" role="menu" style="display: none;">
+                <!-- Menu items added dynamically -->
+            </div>
+
             <input type="file" id="rpg-dashboard-import-file" accept=".json" style="display: none;" />
         </div>
     </div>