Refactor and enhance export functionality with Team Hours support

- Fix missing import statements for CSV/Excel export functionality
- Refactor export code into modular helper functions for better maintainability
- Add comprehensive Team Hours export feature with CSV and Excel support
- Enhance export UI styling with modern gradients and hover effects
- Add role-based access control for team export functionality
- Include date range filtering and team leader inclusion options
- Add proper error handling and user feedback for export operations
- Update dependencies to include pandas and xlsxwriter
- Fix JavaScript scope issues for export button functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/css/style.css

@@ -708,29 +708,146 @@ input[type="time"]::-webkit-datetime-edit {
     align-items: center;
     gap: 5px;
 }
-=======
+
+/* Export Page Styling */
 .export-options {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 2rem;
     margin: 2rem 0;
 }
 
 .export-section {
-    background-color: #f9f9f9;
-    padding: 1.5rem;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e9ecef;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.export-section:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }
 
 .export-section h3 {
     color: #4CAF50;
     margin-top: 0;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
+    font-size: 1.3rem;
+    font-weight: 600;
+    border-bottom: 2px solid #4CAF50;
+    padding-bottom: 0.5rem;
 }
 
 .quick-export-buttons {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0.5rem;
+    gap: 0.75rem;
+    margin-top: 1rem;
+}
+
+.quick-export-buttons .btn {
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    font-weight: 500;
+}
+
+.quick-export-buttons .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
+}
+
+.export-button-container {
+    text-align: center;
+    margin: 2rem 0;
+}
+
+.export-button-container .btn {
+    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+    color: white;
+    padding: 1rem 2rem;
+    font-size: 1.1rem;
+    border-radius: 8px;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.2s ease;
+    font-weight: 600;
+    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
+}
+
+.export-button-container .btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
+    background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
+}
+
+/* Custom date range form styling */
+.export-section .form-group {
+    margin-bottom: 1rem;
+}
+
+.export-section .form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #333;
+}
+
+.export-section .form-group input,
+.export-section .form-group select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid #e9ecef;
+    border-radius: 6px;
+    font-size: 1rem;
+    transition: border-color 0.2s ease;
+}
+
+.export-section .form-group input:focus,
+.export-section .form-group select:focus {
+    outline: none;
+    border-color: #4CAF50;
+    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
+}
+
+/* Team Hours Export Styling */
+#export-buttons {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    padding: 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e9ecef;
+    margin: 2rem 0;
+    text-align: center;
+}
+
+#export-buttons h4 {
+    color: #4CAF50;
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+#export-buttons .quick-export-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+#export-buttons .quick-export-buttons .btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    font-weight: 500;
+    min-width: 140px;
+}
+
+#export-buttons .quick-export-buttons .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
 }