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>

templates/admin_organization.html

@@ -1180,6 +1180,158 @@
         flex-direction: column;
     }
 }
+
+/* Dark mode support for team components */
+[data-theme="dark"] .view-btn {
+    background: var(--bg-secondary);
+    border-color: var(--border-primary);
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .view-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+[data-theme="dark"] .view-btn.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+[data-theme="dark"] .team-card {
+    background: var(--bg-secondary);
+    border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .team-card:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .team-header {
+    background: var(--bg-tertiary);
+    border-bottom-color: var(--border-primary);
+}
+
+[data-theme="dark"] .team-name {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .team-description {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .team-stats {
+    border-bottom-color: var(--border-primary);
+}
+
+[data-theme="dark"] .team-stat {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .member-item:hover {
+    background: var(--bg-hover);
+}
+
+[data-theme="dark"] .member-name {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .member-role {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .more-members {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .empty-members {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .unassigned-section {
+    background: var(--bg-tertiary);
+}
+
+[data-theme="dark"] .section-title {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .unassigned-user {
+    background: var(--bg-secondary);
+    border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .user-name {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .user-email {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .users-table-container {
+    background: var(--bg-secondary);
+}
+
+[data-theme="dark"] .users-table tbody tr:hover {
+    background: var(--bg-hover);
+}
+
+[data-theme="dark"] .users-table td {
+    border-bottom-color: var(--border-primary);
+}
+
+[data-theme="dark"] .form-control {
+    background-color: var(--bg-tertiary);
+    border-color: var(--border-primary);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .form-control:focus {
+    background-color: var(--bg-secondary);
+    border-color: var(--primary-color);
+}
+
+[data-theme="dark"] .form-hint {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .modal-content {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .modal-header {
+    border-bottom-color: var(--border-primary);
+}
+
+[data-theme="dark"] .modal-title {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .modal-close {
+    color: var(--text-secondary);
+    background: transparent;
+}
+
+[data-theme="dark"] .modal-close:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .modal-footer {
+    border-top-color: var(--border-primary);
+}
+
+[data-theme="dark"] .empty-state {
+    color: var(--text-secondary);
+}
+
+[data-theme="dark"] .empty-state h3 {
+    color: var(--text-primary);
+}
 </style>
 
 <script>

templates/invitations/list.html

@@ -191,9 +191,9 @@
 
 <style>
 .invitations-container {
-    max-width: 1200px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 1rem;
 }
 
 /* Header styles - reuse from other pages */

templates/invitations/send.html

@@ -122,9 +122,9 @@
 
 <style>
 .invitation-send-container {
-    max-width: 1200px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 1rem;
 }
 
 .content-wrapper {

templates/layout.html

@@ -30,6 +30,15 @@
     <meta name="twitter:image" content="{{ url_for('static', filename='uploads/branding/' + g.branding.logo_filename, _external=True) }}">
     {% endif %}
 
+    <!-- Prevent flash of incorrect theme -->
+    <script>
+        // Apply saved theme immediately
+        (function() {
+            const savedTheme = localStorage.getItem('timetrack-theme') || 'light';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+        })();
+    </script>
+
     <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/hover-standards.css') }}">
@@ -37,6 +46,7 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile-forms.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile-bottom-nav.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/tablet-optimized.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
 
     <!-- PWA Support -->
@@ -335,6 +345,7 @@
     </nav>
     {% endif %}
 
+    <script src="{{ url_for('static', filename='js/theme-switcher.js') }}"></script>
     <script src="{{ url_for('static', filename='js/script.js') }}"></script>
     <script src="{{ url_for('static', filename='js/sidebar.js') }}"></script>
     <script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>

templates/profile.html

@@ -310,7 +310,7 @@
 .profile-container {
     max-width: 1400px;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 1rem;
 }
 
 /* Page Header */