Add comprehensive dark mode support with UI consistency fixes

This commit introduces a complete dark mode implementation across the entire application,
along with various UI consistency improvements and mobile responsiveness fixes.

Dark Mode Implementation:
- Added new dark-mode.css with comprehensive CSS variable system
- Implemented theme switcher with localStorage persistence
- Created dark mode color palette optimized for readability
- Added smooth transitions between light and dark themes

Component-Specific Dark Mode Styling:
- Headers: Added glowing gradient effects with animations (pulse, shimmer)
- Tables: Unified table styling across all views with proper dark mode support
- Forms: Updated all form controls, inputs, and buttons for dark mode
- Cards: Fixed white backgrounds in project cards, stat cards, and activity items
- Navigation: Enhanced sidebar and mobile navigation dark mode styling
- Modals: Added dark mode support for all modal dialogs including task modal
- Charts: Updated chart colors for dark mode visibility

UI Consistency Improvements:
- Standardized container padding (1rem) across all pages
- Unified page widths (regular: 1400px, admin: 1600px)
- Fixed mobile bottom navigation to only show on devices ≤768px
- Resolved page header positioning inconsistencies
- Improved text contrast ratios for better accessibility

Table Consolidation:
- Created tables-consolidated.css for unified table styling
- Removed duplicate table styles across components
- Standardized table headers, borders, and hover states
- Added responsive table behavior for mobile devices

Mobile Improvements:
- Fixed splash screen viewport coverage
- Enhanced mobile menu accessibility
- Improved touch targets for mobile interactions
- Added proper mobile-specific dark mode adjustments

Technical Details:
- CSS variables for easy theme customization
- Proper specificity management with [data-theme="dark"] selectors
- Performance optimized with minimal repaints
- Browser compatibility for modern browsers

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

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

static/css/auth.css

@@ -579,4 +579,120 @@ textarea.form-control {
     align-items: center;
     height: 48px; /* Match input height */
     top: 0;
+}
+
+/* Dark Mode Styles for Auth Pages */
+[data-theme="dark"] body.auth-page {
+    background: linear-gradient(135deg, #2d3561 0%, #3b2451 100%);
+}
+
+[data-theme="dark"] .auth-container {
+    background: var(--bg-card);
+    color: var(--text-primary);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+[data-theme="dark"] .auth-header h1 {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .auth-header p {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .form-group label {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .form-control {
+    background-color: var(--bg-input);
+    border-color: var(--border-primary);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .form-control:focus {
+    background-color: var(--bg-input);
+    border-color: var(--primary-color);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 0.2rem rgba(122, 141, 245, 0.25);
+}
+
+[data-theme="dark"] .form-control::placeholder {
+    color: var(--text-tertiary);
+}
+
+[data-theme="dark"] .input-icon i {
+    color: var(--text-tertiary);
+}
+
+[data-theme="dark"] .auth-divider {
+    color: var(--text-tertiary);
+}
+
+[data-theme="dark"] .auth-divider::before,
+[data-theme="dark"] .auth-divider::after {
+    background-color: var(--border-primary);
+}
+
+[data-theme="dark"] .auth-footer {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .auth-footer a {
+    color: var(--primary-color);
+}
+
+[data-theme="dark"] .form-text {
+    color: var(--text-tertiary);
+}
+
+[data-theme="dark"] .progress-step-number {
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .progress-step.active .progress-step-number {
+    background: var(--primary-color);
+    color: white;
+}
+
+[data-theme="dark"] .progress-step-label {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .invite-info {
+    background-color: var(--bg-secondary);
+    border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .invite-info strong {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .company-info-card {
+    background-color: var(--bg-secondary);
+    border-color: var(--primary-color);
+}
+
+[data-theme="dark"] .password-strength-bar {
+    background-color: var(--bg-tertiary);
+}
+
+[data-theme="dark"] .password-requirements li {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .password-requirements li.valid {
+    color: var(--success-color);
+}
+
+[data-theme="dark"] .social-buttons .btn-outline-dark {
+    background-color: transparent;
+    color: var(--text-primary);
+    border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .social-buttons .btn-outline-dark:hover {
+    background-color: var(--bg-hover);
+    border-color: var(--border-hover);
 }