feat(ui): add responsive CSS for mobile accessibility

- Add mobile-first responsive CSS to base.html
- Wrap all tables in .table-container for horizontal scrolling on mobile
- Add breakpoints for phones (576px), tablets (768px), desktops (992px, 1200px)
- Improve mobile navigation (vertical stack) and form layouts (full-width)
- Add print styles for clean printing
- Update project_management.html editor for mobile
- Document all changes in docs/RESPONSIVE_CSS.md

No backend or JavaScript changes - pure CSS solution.
For 5 internal technical users, this is simpler and more appropriate than
HTMX or SPA approaches. Solves mobile accessibility issue with minimal changes.

templates/project_management.html

@@ -186,11 +186,28 @@
             border: 1px solid #ddd;
             padding: 8px;
         }
-        
+
+        /* ============================================
+           RESPONSIVE DESIGN FOR PROJECT MANAGEMENT
+           ============================================ */
         @media (max-width: 768px) {
             .editor-row {
                 flex-direction: column;
             }
+            .markdown-editor,
+            .markdown-preview {
+                height: 350px;
+            }
+        }
+        
+        @media (max-width: 480px) {
+            .editor-controls {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            .editor-controls button {
+                width: 100%;
+            }
         }
     </style>
 {% endblock %}