Major UI/UX improvements and help system implementation

✨ New Features:
- Implemented comprehensive help/documentation system with Markdown support
- Added floating help buttons throughout the application
- Created modular CSS architecture for better maintainability
- Added theme-aware help pages (light/dark mode support)

🎨 UI/UX Improvements:
- Implemented 25%/75% card layout consistency across printing module pages
- Fixed barcode display issues (removed black rectangles, proper barcode patterns)
- Enhanced print method selection with horizontal layout (space-saving)
- Added floating back button in help pages
- Improved form controls styling (radio buttons, dropdowns)

🔧 Technical Enhancements:
- Modularized CSS: Created print_module.css with 779 lines of specialized styles
- Enhanced base.css with floating button components and dark mode support
- Updated routes.py with help system endpoints and Markdown processing
- Fixed JsBarcode integration with proper CDN fallback
- Removed conflicting inline styles from templates

📚 Documentation:
- Created dashboard.md with comprehensive user guide
- Added help viewer template with theme synchronization
- Set up documentation image system with proper Flask static serving
- Implemented docs/images/ folder structure

🐛 Bug Fixes:
- Fixed barcode positioning issues (horizontal/vertical alignment)
- Resolved CSS conflicts between inline styles and modular CSS
- Fixed radio button oval display issues
- Removed borders from barcode frames while preserving label info borders
- Fixed theme synchronization between main app and help pages

📱 Responsive Design:
- Applied consistent 25%/75% layout across print_module, print_lost_labels, upload_data, view_orders
- Added responsive breakpoints for tablet (30%/70%) and mobile (stacked) layouts
- Improved mobile-friendly form layouts and button sizing

The application now features a professional, consistent UI with comprehensive help system and improved printing module functionality.

py_app/app/static/css/base.css

@@ -146,4 +146,111 @@ body.dark-mode header {
 
 body.dark-mode .user-info {
     color: #ccc;
+}
+
+/* ==========================================================================
+   FLOATING BUTTONS
+   ========================================================================== */
+
+/* Floating Help Button */
+.floating-help-btn {
+    position: fixed;
+    top: 80px; /* Position below the header */
+    right: 20px;
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #17a2b8, #138496);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.floating-help-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
+    background: linear-gradient(135deg, #138496, #0f6674);
+}
+
+.floating-help-btn a {
+    color: white;
+    text-decoration: none;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.floating-help-btn a:hover {
+    color: white;
+    text-decoration: none;
+}
+
+/* Floating Back Button */
+.floating-back-btn {
+    position: fixed;
+    top: 80px; /* Position below the header */
+    left: 20px;
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6c757d, #545b62);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.floating-back-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
+    background: linear-gradient(135deg, #545b62, #495057);
+}
+
+.floating-back-btn a,
+.floating-back-btn button {
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+.floating-back-btn a:hover,
+.floating-back-btn button:hover {
+    color: white;
+    text-decoration: none;
+}
+
+/* Dark mode styles for floating buttons */
+body.dark-mode .floating-help-btn {
+    background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
+}
+
+body.dark-mode .floating-help-btn:hover {
+    background: linear-gradient(135deg, #0aa2c0, #087990);
+}
+
+body.dark-mode .floating-back-btn {
+    background: linear-gradient(135deg, #495057, #343a40);
+}
+
+body.dark-mode .floating-back-btn:hover {
+    background: linear-gradient(135deg, #343a40, #212529);
 }