Major footer/navbar changes on mobile

src/assets/scripts/app.js

@@ -1,6 +1,6 @@
 /**
  * Modern Adminator Application
- * Main application entry point - replaces jQuery-based initialization
+ * Main application entry point with enhanced mobile support
  */
 
 import bootstrap from 'bootstrap';
@@ -24,7 +24,6 @@ import './vectorMaps';
 import './chat';
 import './email';
 import './googleMaps';
-import './utils';
 
 class AdminatorApp {
   constructor() {
@@ -43,7 +42,7 @@ class AdminatorApp {
   init() {
     if (this.isInitialized) return;
     
-    console.log('🚀 Initializing Adminator App (Modern Version)');
+    console.log('🚀 Initializing Adminator App (Mobile Optimized)');
     
     try {
       // Initialize core components
@@ -52,6 +51,7 @@ class AdminatorApp {
       this.initDataTables();
       this.initDatePickers();
       this.initTheme();
+      this.initMobileEnhancements();
       
       // Setup global event listeners
       this.setupGlobalEvents();
@@ -201,97 +201,107 @@ class AdminatorApp {
               try {
                 picker.showPicker();
               } catch (e) {
-                // Fallback for browsers that don't support showPicker
                 console.log('📅 Date picker opened via icon click');
               }
             }
           });
-          
-          // Also make the entire icon container clickable
-          const iconContainer = inputGroup.querySelector('.input-group-text');
-          if (iconContainer) {
-            iconContainer.style.cursor = 'pointer';
-            DOM.on(iconContainer, 'click', (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              picker.focus();
-              if (picker.showPicker && typeof picker.showPicker === 'function') {
-                try {
-                  picker.showPicker();
-                } catch (e) {
-                  console.log('📅 Date picker opened via icon container click');
-                }
-              }
-            });
-          }
         }
       }
     });
-    
-    // Add date validation
-    [...startDatePickers, ...endDatePickers].forEach(picker => {
-      DOM.on(picker, 'change', (event) => {
-        const isValid = DateUtils.form.validateDateInput(event.target.value);
-        if (!isValid) {
-          event.target.classList.add('is-invalid');
-          console.warn('Invalid date format:', event.target.value);
-        } else {
-          event.target.classList.remove('is-invalid');
-          console.log('Valid date selected:', DateUtils.formatters.shortDate(event.target.value));
-        }
-      });
-      
-      // Add focus/blur handlers for better UX
-      DOM.on(picker, 'focus', () => {
-        picker.classList.add('focus');
-      });
-      
-      DOM.on(picker, 'blur', () => {
-        picker.classList.remove('focus');
-      });
-    });
   }
 
   /**
-   * Initialize theme
+   * Initialize theme system with toggle
    */
   initTheme() {
+    console.log('🌙 Initializing theme system');
+    
+    // Initialize theme system first
     Theme.init();
-
-    // inject toggle switch if missing
-    const navRight = document.querySelector('.nav-right');
-    if (navRight && !document.getElementById('theme-toggle')) {
+    
+    // Inject theme toggle if missing - with retry mechanism
+    setTimeout(() => {
+      const navRight = DOM.select('.nav-right');
+      console.log('🔍 nav-right found:', !!navRight);
+      console.log('🔍 navRight element:', navRight);
+      console.log('🔍 theme-toggle exists:', DOM.exists('#theme-toggle'));
+      console.log('🔍 All nav-right li elements:', navRight ? navRight.querySelectorAll('li').length : 0);
+      
+      // Debug the DOM structure
+      if (navRight) {
+        console.log('🔍 navRight children:', Array.from(navRight.children).map(child => ({
+          tagName: child.tagName,
+          className: child.className,
+          id: child.id
+        })));
+      }
+      
+      if (navRight && !DOM.exists('#theme-toggle')) {
       const li = document.createElement('li');
       li.className = 'theme-toggle d-flex ai-c';
       li.innerHTML = `
         <div class="form-check form-switch d-flex ai-c" style="margin: 0; padding: 0;">
           <label class="form-check-label me-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-right: 8px;">
-            <i class="ti-sun" style="margin-right: 4px;"></i>Light
+            <i class="ti-sun" style="margin-right: 4px;"></i><span class="theme-label">Light</span>
           </label>
           <input class="form-check-input" type="checkbox" id="theme-toggle" style="margin: 0;">
           <label class="form-check-label ms-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-left: 8px;">
-            Dark<i class="ti-moon" style="margin-left: 4px;"></i>
+            <span class="theme-label">Dark</span><i class="ti-moon" style="margin-left: 4px;"></i>
           </label>
         </div>
       `;
-      navRight.insertBefore(li, navRight.firstElementChild);
-
-      const toggleInput = li.querySelector('#theme-toggle');
-
-      const updateSwitch = () => {
-        toggleInput.checked = Theme.current() === 'dark';
-      };
-      updateSwitch();
-
-      toggleInput.addEventListener('change', (e) => {
-        Theme.apply(e.target.checked ? 'dark' : 'light');
-      });
+      
+      // Insert before user dropdown (last item) - safer approach
+      const lastItem = navRight.querySelector('li:last-child');
+      console.log('🔍 lastItem found:', !!lastItem);
+      console.log('🔍 lastItem parent:', lastItem ? lastItem.parentNode : null);
+      console.log('🔍 navRight:', navRight);
+      
+      if (lastItem && lastItem.parentNode === navRight) {
+        navRight.insertBefore(li, lastItem);
+        console.log('✅ Theme toggle inserted before last item');
+      } else {
+        navRight.appendChild(li);
+        console.log('✅ Theme toggle appended to nav-right (safer approach)');
+      }
+      
+      // Add toggle functionality
+      const toggle = DOM.select('#theme-toggle');
+      if (toggle) {
+        // Set initial state
+        const currentTheme = Theme.current();
+        toggle.checked = currentTheme === 'dark';
+        
+        DOM.on(toggle, 'change', () => {
+          Theme.apply(toggle.checked ? 'dark' : 'light');
+        });
+        
+        // Listen for theme changes from other sources
+        window.addEventListener('adminator:themeChanged', (event) => {
+          toggle.checked = event.detail.theme === 'dark';
+          
+          // Update charts when theme changes
+          const charts = this.components.get('charts');
+          if (charts) charts.redrawCharts();
+        });
+      }
+      } else {
+        console.log('❌ No nav-right found or theme-toggle already exists');
+      }
+    }, 100); // Wait 100ms for DOM to be fully ready
+  }
 
-      window.addEventListener('adminator:themeChanged', () => {
-        updateSwitch();
-        const charts = this.components.get('charts');
-        if (charts) charts.redrawCharts();
-      });
+  /**
+   * Initialize mobile-specific enhancements
+   */
+  initMobileEnhancements() {
+    console.log('📱 Initializing mobile enhancements');
+    this.enhanceMobileDropdowns();
+    this.enhanceMobileSearch();
+    
+    // Prevent horizontal scroll on mobile
+    if (this.isMobile()) {
+      document.body.style.overflowX = 'hidden';
     }
   }
 
@@ -299,55 +309,312 @@ class AdminatorApp {
    * Setup global event listeners
    */
   setupGlobalEvents() {
-    // Global resize handler
-    let resizeTimer;
-    window.addEventListener('resize', () => {
-      clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(() => {
-        this.handleResize();
-      }, 150);
-    });
-
-    // Global click handler for dynamic content
-    document.addEventListener('click', (e) => {
-      this.handleGlobalClick(e);
+    // Global click handler
+    DOM.on(document, 'click', (event) => this.handleGlobalClick(event));
+    
+    // Window resize handler with debouncing
+    let resizeTimeout;
+    DOM.on(window, 'resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => this.handleResize(), 250);
     });
-
-    // Custom event for masonry recalculation
-    window.EVENT = new Event('resize');
+    
+    console.log('🌐 Global event listeners set up');
   }
 
   /**
-   * Handle window resize
+   * Handle window resize events
    */
   handleResize() {
-    // Notify charts to resize
-    const charts = this.components.get('charts');
-    if (charts) {
-      charts.redrawCharts();
+    console.log('📐 Window resized, updating mobile features');
+    
+    // Close all mobile-specific overlays when switching to desktop
+    if (!this.isMobile()) {
+      document.body.style.overflow = '';
+      document.body.style.overflowX = '';
+      
+      // Close dropdowns
+      const dropdowns = DOM.selectAll('.nav-right .dropdown');
+      dropdowns.forEach(dropdown => {
+        dropdown.classList.remove('show');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        if (menu) menu.classList.remove('show');
+      });
+      
+      // Close search
+      const searchBox = DOM.select('.search-box');
+      const searchInput = DOM.select('.search-input');
+      if (searchBox && searchInput) {
+        searchBox.classList.remove('active');
+        searchInput.classList.remove('active');
+      }
+    } else {
+      // Re-enable mobile overflow protection
+      document.body.style.overflowX = 'hidden';
     }
-
-    // Dispatch resize event for other components
-    window.dispatchEvent(new CustomEvent('adminator:resize'));
+    
+    // Re-apply mobile enhancements
+    this.enhanceMobileDropdowns();
+    this.enhanceMobileSearch();
   }
 
   /**
-   * Handle global clicks
+   * Handle global click events
    */
   handleGlobalClick(event) {
-    // Handle any global click events here
-    // This can be used for analytics, debugging, etc.
+    // Close mobile dropdowns when clicking outside
+    if (!event.target.closest('.dropdown')) {
+      const dropdowns = DOM.selectAll('.nav-right .dropdown');
+      dropdowns.forEach(dropdown => {
+        dropdown.classList.remove('show');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        if (menu) menu.classList.remove('show');
+      });
+      document.body.style.overflow = '';
+    }
+
+    // Close search when clicking outside
+    if (!event.target.closest('.search-box') && !event.target.closest('.search-input')) {
+      const searchBox = DOM.select('.search-box');
+      const searchInput = DOM.select('.search-input');
+      if (searchBox && searchInput) {
+        searchBox.classList.remove('active');
+        searchInput.classList.remove('active');
+        document.body.style.overflow = '';
+        document.body.classList.remove('mobile-menu-open');
+      }
+    }
+  }
+
+  /**
+   * Check if we're on a mobile device
+   */
+  isMobile() {
+    return window.innerWidth <= 768;
   }
 
   /**
-   * Get component instance
+   * Enhanced mobile dropdown handling with improved email layout
+   */
+  enhanceMobileDropdowns() {
+    if (!this.isMobile()) return;
+
+    const dropdowns = DOM.selectAll('.nav-right .dropdown');
+    
+    dropdowns.forEach(dropdown => {
+      const toggle = dropdown.querySelector('.dropdown-toggle');
+      const menu = dropdown.querySelector('.dropdown-menu');
+      
+      if (toggle && menu) {
+        // Remove existing listeners to prevent duplicates
+        const newToggle = toggle.cloneNode(true);
+        toggle.replaceWith(newToggle);
+        
+        // Add click functionality for mobile dropdowns
+        DOM.on(newToggle, 'click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          
+          // Close search if open
+          const searchBox = DOM.select('.search-box');
+          const searchInput = DOM.select('.search-input');
+          if (searchBox && searchInput) {
+            searchBox.classList.remove('active');
+            searchInput.classList.remove('active');
+          }
+          
+          // Close other dropdowns first
+          dropdowns.forEach(otherDropdown => {
+            if (otherDropdown !== dropdown) {
+              otherDropdown.classList.remove('show');
+              const otherMenu = otherDropdown.querySelector('.dropdown-menu');
+              if (otherMenu) otherMenu.classList.remove('show');
+            }
+          });
+          
+          // Toggle current dropdown
+          const isOpen = dropdown.classList.contains('show');
+          if (isOpen) {
+            dropdown.classList.remove('show');
+            menu.classList.remove('show');
+            document.body.style.overflow = '';
+            document.body.classList.remove('mobile-menu-open');
+          } else {
+            dropdown.classList.add('show');
+            menu.classList.add('show');
+            document.body.style.overflow = 'hidden';
+            document.body.classList.add('mobile-menu-open');
+          }
+        });
+
+        // Enhanced mobile close button functionality
+        DOM.on(menu, 'click', (e) => {
+          // Check if clicked on the close area (::before pseudo-element area)
+          const rect = menu.getBoundingClientRect();
+          const clickY = e.clientY - rect.top;
+          
+          // If clicked in top 50px (close button area)
+          if (clickY <= 50) {
+            dropdown.classList.remove('show');
+            menu.classList.remove('show');
+            document.body.style.overflow = '';
+            document.body.classList.remove('mobile-menu-open');
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        });
+      }
+    });
+
+    // Close dropdowns on escape key
+    DOM.on(document, 'keydown', (e) => {
+      if (e.key === 'Escape') {
+        dropdowns.forEach(dropdown => {
+          dropdown.classList.remove('show');
+          const menu = dropdown.querySelector('.dropdown-menu');
+          if (menu) menu.classList.remove('show');
+        });
+        document.body.style.overflow = '';
+        document.body.classList.remove('mobile-menu-open');
+      }
+    });
+  }
+
+      /**
+     * Enhanced mobile search handling - Full-width search bar
+     */
+    enhanceMobileSearch() {
+      const searchBox = DOM.select('.search-box');
+      const searchInput = DOM.select('.search-input');
+      
+      if (searchBox && searchInput) {
+        const searchToggle = searchBox.querySelector('a');
+        const searchField = searchInput.querySelector('input');
+        
+        if (searchToggle && searchField) {
+          console.log('🔍 Setting up full-width search functionality');
+          
+          // Remove existing listeners to prevent duplication
+          const newSearchToggle = searchToggle.cloneNode(true);
+          searchToggle.replaceWith(newSearchToggle);
+          
+          DOM.on(newSearchToggle, 'click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            console.log('🔍 Full-width search toggle clicked');
+            
+            // Close any open dropdowns first
+            const dropdowns = DOM.selectAll('.nav-right .dropdown');
+            dropdowns.forEach(dropdown => {
+              dropdown.classList.remove('show');
+              const menu = dropdown.querySelector('.dropdown-menu');
+              if (menu) menu.classList.remove('show');
+            });
+            
+            // Toggle search state
+            const isActive = searchInput.classList.contains('active');
+            const searchIcon = newSearchToggle.querySelector('i');
+            
+            if (isActive) {
+              // Close search
+              searchInput.classList.remove('active');
+              document.body.classList.remove('search-open');
+              
+              // Change icon back to search
+              if (searchIcon) {
+                searchIcon.className = 'ti-search';
+              }
+              
+              // Clear input
+              if (searchField) {
+                searchField.value = '';
+                searchField.blur();
+              }
+              
+              console.log('🔍 Full-width search closed');
+            } else {
+              // Open search
+              searchInput.classList.add('active');
+              document.body.classList.add('search-open');
+              
+              // Change icon to close
+              if (searchIcon) {
+                searchIcon.className = 'ti-close';
+              }
+              
+              // Focus the input after a short delay
+              setTimeout(() => {
+                if (searchField) {
+                  searchField.focus();
+                  console.log('🔍 Search field focused');
+                }
+              }, 100);
+              
+              console.log('🔍 Full-width search opened');
+            }
+          });
+          
+          // Close search on escape
+          DOM.on(document, 'keydown', (e) => {
+            if (e.key === 'Escape' && searchInput.classList.contains('active')) {
+              searchInput.classList.remove('active');
+              document.body.classList.remove('search-open');
+              
+              // Reset icon
+              const searchIcon = newSearchToggle.querySelector('i');
+              if (searchIcon) {
+                searchIcon.className = 'ti-search';
+              }
+              
+              // Clear input
+              if (searchField) {
+                searchField.value = '';
+                searchField.blur();
+              }
+              
+              console.log('🔍 Full-width search closed via escape');
+            }
+          });
+          
+          // Handle search input
+          DOM.on(searchField, 'keypress', (e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              const query = searchField.value.trim();
+              if (query) {
+                console.log('🔍 Search query:', query);
+                // Implement your search logic here
+                
+                // For demo, close search after "searching"
+                searchInput.classList.remove('active');
+                document.body.classList.remove('search-open');
+                
+                const searchIcon = newSearchToggle.querySelector('i');
+                if (searchIcon) {
+                  searchIcon.className = 'ti-search';
+                }
+                
+                searchField.value = '';
+                searchField.blur();
+              }
+            }
+          });
+          
+          console.log('🔍 Full-width search functionality initialized');
+        }
+      }
+    }
+
+  /**
+   * Get a component by name
    */
   getComponent(name) {
     return this.components.get(name);
   }
 
   /**
-   * Check if app is initialized
+   * Check if app is ready
    */
   isReady() {
     return this.isInitialized;
@@ -357,45 +624,42 @@ class AdminatorApp {
    * Destroy the application
    */
   destroy() {
+    console.log('🗑️ Destroying Adminator App');
+    
     // Destroy all components
     this.components.forEach((component, name) => {
       if (typeof component.destroy === 'function') {
         component.destroy();
       }
+      console.log(`🗑️ ${name} component destroyed`);
     });
     
     this.components.clear();
     this.isInitialized = false;
-    
-    console.log('🧹 Adminator App destroyed');
   }
 
   /**
-   * Refresh all components (useful for dynamic content)
+   * Refresh/reinitialize the application
    */
   refresh() {
     console.log('🔄 Refreshing Adminator App');
     
-    // Refresh sidebar active links
-    const sidebar = this.components.get('sidebar');
-    if (sidebar) {
-      sidebar.refreshActiveLink();
-    }
-
-    // Reinitialize charts if needed
-    const charts = this.components.get('charts');
-    if (charts) {
-      charts.redrawCharts();
+    if (this.isInitialized) {
+      this.destroy();
     }
+    
+    setTimeout(() => {
+      this.init();
+    }, 100);
   }
-
-
 }
 
-// Create global app instance
+// Initialize the application
+console.log('📱 Starting Adminator (Mobile Optimized)');
 const app = new AdminatorApp();
 
-// Export for external access
+// Make app globally available for debugging
 window.AdminatorApp = app;
 
+// Export for module usage
 export default app; 

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @use 'spec/index' as *;
 @use 'vendor/index' as *;
 @import "utils/theme.css";
+@import "utils/mobile.scss";
 
 body {
   background: var(--c-bkg-body);
@@ -83,6 +84,118 @@ body {
         }
       }
     }
+
+    // Mobile theme toggle adjustments
+    @media (max-width: 991px) {
+      padding: 0 6px;
+      height: 65px;
+
+      .form-check {
+        .form-check-label {
+          font-size: 10px;
+          
+          &:first-child {
+            margin-right: 4px;
+          }
+          
+          &:last-child {
+            margin-left: 4px;
+          }
+        }
+
+        .form-check-input {
+          width: 2rem;
+          height: 1rem;
+        }
+      }
+    }
+
+    // Very small mobile adjustments
+    @media (max-width: 480px) {
+      padding: 0 4px;
+
+      .form-check {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        
+        .form-check-label {
+          font-size: 8px;
+          margin: 1px 0;
+          white-space: nowrap;
+          
+          i {
+            margin: 0 2px;
+          }
+        }
+
+        .form-check-input {
+          width: 1.5rem;
+          height: 0.8rem;
+          margin: 2px 0;
+        }
+      }
+    }
+  }
+}
+
+// Mobile dropdown menu improvements
+@media (max-width: 767px) {
+  .header {
+    .nav-right {
+      .dropdown-menu {
+        position: fixed !important;
+        top: 65px !important;
+        left: 5px !important;
+        right: 5px !important;
+        width: auto !important;
+        max-width: none !important;
+        min-width: auto !important;
+        transform: none !important;
+        z-index: 1050;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        max-height: calc(100vh - 85px);
+        overflow-y: auto;
+      }
+
+      .notifications .dropdown-menu {
+        max-height: calc(100vh - 85px);
+        overflow-y: auto;
+      }
+    }
+  }
+}
+
+// Mobile search input overlay
+@media (max-width: 480px) {
+  .header {
+    .search-input {
+      &.active {
+        position: absolute;
+        top: 65px;
+        left: 0;
+        right: 0;
+        background: var(--c-bkg-card);
+        border-top: 1px solid var(--c-border);
+        padding: 10px;
+        z-index: 999;
+
+        input {
+          margin-top: 0;
+          width: 100%;
+          padding: 10px;
+          border: 1px solid var(--c-border);
+          border-radius: 4px;
+          background: var(--c-bkg-card);
+          color: var(--c-text-base);
+
+          &::placeholder {
+            color: var(--c-text-muted);
+          }
+        }
+      }
+    }
   }
 }
 

src/assets/styles/spec/components/pageContainer.scss

@@ -10,15 +10,20 @@
 // + @Main Content
 // + @Full Container
 // + @Collapsed State
+// + @Mobile Layout Fixes
 
 // ---------------------------------------------------------
-// @Page Container
+// @Page Container - MODERN LAYOUT APPROACH
 // ---------------------------------------------------------
 
 .page-container {
   min-height: 100vh;
   padding-left: $offscreen-size;
   transition: all 0.2s ease;
+  
+  // Modern flexbox layout to prevent footer overlap
+  display: flex;
+  flex-direction: column;
 
   @include between($breakpoint-md, $breakpoint-xl) {
     padding-left: $collapsed-size;
@@ -30,16 +35,30 @@
 }
 
 // ---------------------------------------------------------
-// @Main Content
+// @Main Content - FLEXIBLE LAYOUT
 // ---------------------------------------------------------
 
 .main-content {
   padding: 85px 20px 20px;
-  min-height: calc(100vh - 61px);
+  
+  // Flex-grow to push footer to bottom
+  flex: 1 0 auto;
+  min-height: 0; // Allow flex shrinking
+  
+  // Ensure content doesn't overflow
+  overflow-x: hidden;
 
   @include to($breakpoint-md) {
     padding: 85px 5px 5px;
   }
+
+  @include to($breakpoint-sm) {
+    padding: 85px 10px 30px; // Extra bottom padding on mobile
+  }
+  
+  @include to(400px) {
+    padding: 85px 5px 40px; // Even more bottom padding on tiny screens
+  }
 }
 
 .remain-height {
@@ -68,6 +87,142 @@
   }
 }
 
+// ---------------------------------------------------------
+// @Mobile Layout Fixes - AGGRESSIVE FOOTER SOLUTION
+// ---------------------------------------------------------
+
+// Footer - completely redesigned for mobile
+footer {
+  // Flex-shrink: 0 to prevent compression
+  flex: 0 0 auto;
+  
+  // Positioning
+  position: relative;
+  z-index: 1;
+  
+  // Styling
+  margin-top: auto;
+  padding: 20px;
+  text-align: center;
+  border-top: 1px solid var(--c-border);
+  background: var(--c-bkg-card);
+  color: var(--c-text-muted);
+  font-size: 12px;
+  line-height: 1.4;
+  
+  // Prevent any potential overflow
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+
+  // Tablet footer adjustments
+  @include to($breakpoint-md) {
+    padding: 18px 15px;
+    font-size: 11px;
+  }
+
+  // Mobile footer adjustments
+  @include to($breakpoint-sm) {
+    padding: 15px 10px;
+    font-size: 10px;
+    line-height: 1.3;
+    
+    span {
+      display: inline-block;
+      max-width: 100%;
+      
+      a {
+        color: var(--c-primary);
+        text-decoration: none;
+        word-break: break-word;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  // Tiny screen footer adjustments
+  @include to(400px) {
+    padding: 12px 8px;
+    font-size: 9px;
+    line-height: 1.2;
+    
+    span {
+      display: block;
+      
+      // Break long text on new lines for readability
+      &::after {
+        content: "";
+        display: block;
+        height: 2px;
+      }
+    }
+  }
+}
+
+// Ensure body and html take full height for flex layout
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+// Global mobile overflow prevention
+@include to($breakpoint-sm) {
+  body {
+    overflow-x: hidden;
+  }
+  
+  // Prevent any element from causing horizontal scroll
+  * {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+// Additional mobile content spacing
+@include to($breakpoint-sm) {
+  .page-container {
+    .main-content {
+      // Extra margin-bottom to ensure footer never overlaps
+      margin-bottom: 20px;
+      
+      // Responsive content adjustments
+      .row {
+        margin-left: 0;
+        margin-right: 0;
+      }
+      
+      .col-md-6, .col-md-3, .col-md-12 {
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
+  }
+}
+
+// Emergency footer overlap prevention
+@include to(480px) {
+  .page-container {
+    // Force minimum height that accounts for content
+    min-height: calc(100vh - 80px);
+    
+    .main-content {
+      // Ensure there's always space for footer
+      padding-bottom: 60px !important;
+      margin-bottom: 20px !important;
+    }
+  }
+  
+  footer {
+    // Stick to bottom on very small screens
+    position: relative;
+    margin-top: auto;
+    clear: both;
+  }
+}
+
 // ---------------------------------------------------------
 // @Collapsed State
 // ---------------------------------------------------------

src/assets/styles/spec/components/topbar.scss

@@ -10,6 +10,7 @@
 
 // + @Topbar
 // + @Collapsed State
+// + @Mobile Responsive Fixes
 
 // ---------------------------------------------------------
 // @Topbar
@@ -195,6 +196,244 @@
   }
 }
 
+// ---------------------------------------------------------
+// @Mobile Responsive Fixes - AGGRESSIVE APPROACH
+// ---------------------------------------------------------
+
+// Tablet mobile fixes (768px to 991px)
+@include to($breakpoint-md) {
+  .header {
+    .header-container {
+      padding: 0 10px;
+      
+      .nav-left {
+        margin-left: 5px;
+
+        > li > a {
+          padding: 0 8px !important;
+        }
+      }
+
+      .nav-right {
+        margin-right: 5px;
+
+        > li {
+          > a {
+            padding: 0 8px !important;
+            
+            // Hide text in user dropdown on tablet
+            .peer:last-child {
+              display: none;
+            }
+          }
+        }
+
+        // Make theme toggle more compact
+        .theme-toggle {
+          padding: 0 5px !important;
+          
+          .form-check-label {
+            font-size: 9px !important;
+            margin: 0 3px !important;
+          }
+          
+          .form-check-input {
+            width: 1.8rem !important;
+            height: 1rem !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Small mobile phones (576px to 767px)
+@include to($breakpoint-sm) {
+  .header {
+    .header-container {
+      height: auto;
+      min-height: $header-height;
+      padding: 0 5px;
+
+      .nav-left {
+        margin-left: 2px;
+
+        > li > a {
+          padding: 0 5px !important;
+        }
+
+        // Hide search toggle on small mobile - make it icon only when active
+        .search-box:not(.active) {
+          display: none;
+        }
+      }
+
+      .nav-right {
+        margin-right: 2px;
+
+        > li {
+          > a {
+            padding: 0 4px !important;
+            
+            // Hide all text content, keep only icons
+            span {
+              display: none;
+            }
+            
+            .peer:last-child {
+              display: none;
+            }
+          }
+        }
+
+        // Ultra-compact theme toggle
+        .theme-toggle {
+          padding: 0 3px !important;
+          
+          .form-check {
+            flex-direction: column;
+            align-items: center;
+            
+            .form-check-label {
+              font-size: 7px !important;
+              margin: 0 !important;
+              line-height: 1 !important;
+              
+              span {
+                display: none !important;
+              }
+            }
+            
+            .form-check-input {
+              width: 1.5rem !important;
+              height: 0.8rem !important;
+              margin: 1px 0 !important;
+            }
+          }
+        }
+      }
+
+      // Full-screen mobile dropdowns
+      .nav-right .dropdown-menu {
+        position: fixed !important;
+        top: $header-height !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100vw !important;
+        height: calc(100vh - #{$header-height}) !important;
+        max-width: none !important;
+        min-width: auto !important;
+        transform: none !important;
+        border-radius: 0 !important;
+        z-index: 9999;
+        overflow-y: auto;
+        
+        // Close button for mobile dropdowns
+        &::before {
+          content: "✕ Close";
+          position: sticky;
+          top: 0;
+          display: block;
+          background: var(--c-primary);
+          color: white;
+          text-align: center;
+          padding: 10px;
+          cursor: pointer;
+          font-weight: bold;
+          z-index: 10000;
+        }
+      }
+    }
+  }
+}
+
+// Extra small mobile phones (less than 576px)
+@include to(480px) {
+  .header {
+    .header-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      padding: 0 2px;
+
+      .nav-left {
+        flex: 0 0 auto;
+        margin: 0;
+        
+        > li {
+          float: none;
+          display: inline-block;
+          
+          > a {
+            padding: 0 3px !important;
+            font-size: 14px !important;
+          }
+        }
+
+        // Search overlay for tiny screens
+        .search-input.active {
+          position: fixed;
+          top: $header-height;
+          left: 0;
+          right: 0;
+          background: var(--c-bkg-card);
+          border-top: 1px solid var(--c-border);
+          padding: 15px;
+          z-index: 9998;
+          
+          input {
+            width: 100%;
+            padding: 12px;
+            font-size: 16px;
+            border: 1px solid var(--c-border);
+            border-radius: 6px;
+            background: var(--c-bkg-card);
+            color: var(--c-text-base);
+            margin-top: 0;
+            
+            &::placeholder {
+              color: var(--c-text-muted);
+            }
+          }
+        }
+      }
+
+      .nav-right {
+        flex: 0 0 auto;
+        margin: 0;
+        
+        > li {
+          float: none;
+          display: inline-block;
+          
+          > a {
+            padding: 0 2px !important;
+            font-size: 12px !important;
+          }
+        }
+
+        // Minimal theme toggle
+        .theme-toggle {
+          padding: 0 1px !important;
+          
+          .form-check {
+            .form-check-label {
+              display: none !important;
+            }
+            
+            .form-check-input {
+              width: 1.2rem !important;
+              height: 0.7rem !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 // ---------------------------------------------------------
 // @Collapsed State
 // ---------------------------------------------------------
@@ -212,3 +451,5 @@
     }
   }
 }
+
+

src/assets/styles/utils/mobile.scss

@@ -0,0 +1,954 @@
+// Mobile Utility Classes and Fixes
+// This file contains mobile-specific utility classes and responsive fixes
+
+// Mobile text utilities - Only hide theme labels on very small screens
+@media (max-width: 480px) {
+  .theme-toggle .form-check-label {
+    display: none !important;
+  }
+  
+  .theme-toggle {
+    padding: 0 6px !important;
+    height: 60px !important; // Match header height
+    justify-content: center !important;
+    min-height: 60px !important;
+    
+    .form-check {
+      height: 100% !important;
+      
+      .form-check-label {
+        font-size: 11px !important; // Slightly smaller for very small screens
+        font-weight: 500 !important;
+        
+        i {
+          font-size: 14px !important; // Still reasonable for tiny screens
+        }
+      }
+      
+      .form-check-input {
+        margin: 0 6px !important;
+        width: 38px !important; // Bigger than before but not huge for tiny screens
+        height: 22px !important; // Bigger than before but not huge for tiny screens  
+        border-radius: 11px !important;
+        border-width: 2px !important;
+      }
+    }
+  }
+  
+  // Very small screen adjustments
+  .d-none-xs {
+    display: none !important;
+  }
+  
+  .fs-xs {
+    font-size: 10px !important;
+  }
+  
+  .p-xs {
+    padding: 5px !important;
+  }
+  
+  .m-xs {
+    margin: 5px !important;
+  }
+}
+
+// Mobile dropdown improvements
+@media (max-width: 767px) {
+  .dropdown-menu {
+    // Ensure all dropdowns are mobile-friendly
+    &.show {
+      position: fixed !important;
+      top: 65px !important;
+      left: 5px !important;
+      right: 5px !important;
+      width: auto !important;
+      transform: none !important;
+      z-index: 1050;
+      max-height: calc(100vh - 85px);
+      overflow-y: auto;
+    }
+  }
+  
+  // Mobile notification improvements
+  .notifications .dropdown-menu {
+    .scrollable {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+  }
+}
+
+// Mobile header compact mode
+@media (max-width: 991px) {
+  .header .nav-right > li > a {
+    padding: 0 6px !important;
+  }
+  
+  .header .nav-left > li > a {
+    padding: 0 8px !important;
+  }
+}
+
+// Ultra-compact mode for very small screens
+@media (max-width: 480px) {
+  .header .nav-right > li > a {
+    padding: 0 4px !important;
+    font-size: 14px !important;
+  }
+  
+  .header .nav-left > li > a {
+    padding: 0 6px !important;
+  }
+  
+  // Hide search on very small screens when not active
+  .search-box:not(.active) {
+    display: none !important;
+  }
+}
+
+// Mobile-specific spacing utilities
+.mobile-compact {
+  @media (max-width: 767px) {
+    padding: 5px !important;
+    margin: 2px !important;
+  }
+}
+
+.mobile-hidden {
+  @media (max-width: 767px) {
+    display: none !important;
+  }
+}
+
+.mobile-only {
+  display: none !important;
+  
+  @media (max-width: 767px) {
+    display: block !important;
+  }
+}
+
+// Prevent horizontal scroll on mobile
+.mobile-no-scroll {
+  @media (max-width: 767px) {
+    overflow-x: hidden !important;
+  }
+}
+
+// COMPREHENSIVE Mobile Header Fixes
+// Better layout, bigger icons, full-width search, and desktop fixes
+
+// =============================================================================
+// DESKTOP FIXES - Remove top spacing issue
+// =============================================================================
+
+@media screen and (min-width: 768px) {
+  .header {
+    margin-top: 0 !important;
+    top: 0 !important;
+  }
+  
+  .page-container {
+    padding-top: 61px !important; // Standard header height + 1px border
+  }
+  
+  .main-content {
+    margin-top: 0 !important;
+    padding-top: 20px !important;
+  }
+  
+  // DESKTOP THEME TOGGLE - Make sure it's fully visible
+  .theme-toggle {
+    display: flex !important;
+    align-items: center !important;
+    height: 65px !important;
+    padding: 0 15px !important;
+
+    .form-check {
+      margin: 0 !important;
+      display: flex !important;
+      align-items: center !important;
+      
+      .form-check-label {
+        color: var(--c-text-muted) !important;
+        font-size: 11px !important;
+        font-weight: 500 !important;
+        text-transform: uppercase !important;
+        letter-spacing: 0.5px !important;
+        display: inline !important;
+        
+        i {
+          font-size: 12px !important;
+        }
+      }
+
+      .form-check-input {
+        width: 2.5rem !important;
+        height: 1.25rem !important;
+        background-color: var(--c-border) !important;
+        border: 1px solid var(--c-border) !important;
+        cursor: pointer !important;
+        margin: 0 8px !important;
+        
+        &:checked {
+          background-color: var(--c-primary) !important;
+          border-color: var(--c-primary) !important;
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--c-primary) 25%, transparent) !important;
+          border-color: var(--c-primary) !important;
+        }
+      }
+    }
+  }
+}
+
+// =============================================================================
+// HEADER NAVIGATION MOBILE FIXES - ENHANCED LAYOUT
+// =============================================================================
+
+// Mobile header fixes with improved spacing and layout
+@media screen and (max-width: 767px) {
+  
+  // Force header to be fixed and proper height
+  .header {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    z-index: 1000 !important;
+    width: 100% !important;
+    height: auto !important;
+    min-height: 60px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    margin-top: 0 !important; // Ensure no top margin on mobile
+  }
+
+  // Header container - IMPROVED EDGE-TO-EDGE LAYOUT
+  .header .header-container {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    flex-wrap: nowrap !important;
+    padding: 8px 8px !important; // Reduced side padding for more space
+    height: auto !important;
+    min-height: 60px !important;
+    max-height: 60px !important;
+    overflow: visible !important;
+    gap: 12px !important; // Larger gap to push items apart
+  }
+
+  // LEFT SECTION: Logo + Hamburger + Search - PUSHED MORE LEFT
+  .header .nav-left {
+    display: flex !important;
+    align-items: center !important;
+    flex: 1 1 auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    max-width: 65% !important; // Increased width
+    gap: 4px !important; // Tighter spacing between left items
+    justify-content: flex-start !important; // Push to left edge
+    
+    // Logo first - positioned at far left
+    &::before {
+      content: "A" !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      width: 32px !important;
+      height: 32px !important;
+      background: #007bff !important;
+      color: white !important;
+      border-radius: 6px !important;
+      font-weight: bold !important;
+      font-size: 18px !important;
+      flex-shrink: 0 !important;
+      order: -1 !important;
+      margin-right: 6px !important; // Small margin to separate from hamburger
+    }
+    
+    > li {
+      display: inline-flex !important;
+      align-items: center !important;
+      margin: 0 !important;
+      float: none !important;
+      
+      > a {
+        padding: 8px 6px !important; // Reduced padding for tighter spacing
+        margin: 0 !important;
+        min-height: auto !important;
+        line-height: 1 !important;
+        display: flex !important;
+        align-items: center !important;
+        border-radius: 4px !important;
+        
+        i {
+          font-size: 20px !important;
+          margin: 0 !important;
+        }
+        
+        // Hover state for better UX
+        &:hover {
+          background: rgba(0, 0, 0, 0.05) !important;
+        }
+      }
+      
+      // Sidebar toggle (hamburger)
+      &:first-child > a {
+        padding: 8px 6px !important;
+        
+        i {
+          font-size: 22px !important;
+        }
+      }
+      
+      // Search toggle
+      &.search-box > a {
+        padding: 8px 6px !important;
+        
+        i {
+          font-size: 20px !important;
+        }
+      }
+    }
+    
+    // FULL-WIDTH SEARCH BAR - CLEANER DESIGN
+    .search-input {
+      display: none !important; // Hidden by default
+      position: fixed !important; // Fixed positioning for full control
+      top: 60px !important; // Right below header
+      left: 0 !important;
+      right: 0 !important;
+      background: var(--c-bkg-card) !important;
+      border-bottom: 1px solid var(--c-border) !important;
+      padding: 15px 20px !important; // More padding for better appearance
+      z-index: 9999 !important;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; // Subtle shadow
+      
+      &.active {
+        display: block !important;
+      }
+      
+      input {
+        width: 100% !important;
+        padding: 12px 16px !important; // Better padding
+        font-size: 16px !important;
+        border: 1px solid var(--c-border) !important;
+        border-radius: 8px !important; // Rounded corners
+        background: var(--c-bkg-body) !important;
+        color: var(--c-text-base) !important;
+        margin: 0 !important;
+        outline: none !important;
+        
+        &::placeholder {
+          color: var(--c-text-muted) !important;
+        }
+        
+        &:focus {
+          outline: none !important;
+          border-color: var(--c-primary) !important;
+          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
+        }
+      }
+    }
+  }
+
+  // RIGHT SECTION: Notifications + Messages + Theme Toggle + Profile - PERFECT ALIGNMENT
+  .header .nav-right {
+    display: flex !important;
+    align-items: center !important;
+    flex: 0 0 auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    float: none !important;
+    flex-wrap: nowrap !important;
+    gap: 4px !important; // Consistent spacing
+    justify-content: flex-end !important; // Push to right edge
+    height: 60px !important; // Match header height exactly
+    
+    > li {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      float: none !important;
+      flex: 0 0 auto !important;
+      position: relative !important;
+      height: 60px !important; // Force exact height for all items
+      min-height: 60px !important; // Ensure minimum height
+      
+      > a {
+        padding: 0 !important; // NO padding for perfect alignment
+        margin: 0 !important;
+        width: 44px !important; // Fixed width for all nav items
+        height: 44px !important; // Fixed height for all nav items
+        line-height: 1 !important;
+        display: flex !important;
+        align-items: center !important; // Perfect vertical centering
+        justify-content: center !important; // Perfect horizontal centering
+        position: relative !important;
+        border-radius: 50% !important; // Circular touch targets
+        background: transparent !important;
+        transition: all 0.2s ease !important; // Smooth transitions
+        
+        i {
+          font-size: 20px !important; // Consistent icon size for all nav items
+          margin: 0 !important;
+          display: block !important;
+          line-height: 1 !important;
+          text-align: center !important;
+        }
+        
+        // Hide text content, keep only icons
+        span:not(.counter) {
+          display: none !important;
+        }
+        
+        // Hide user avatar text
+        .peer:last-child {
+          display: none !important;
+        }
+        
+        // Hover state - subtle and theme-consistent
+        &:hover {
+          background: var(--c-grey-100) !important;
+          transform: scale(1.05) !important;
+          transition: all 0.2s ease !important;
+        }
+      }
+      
+      // User dropdown - special styling for avatar
+      &:last-child > a {
+        .peer {
+          &:first-child {
+            margin-right: 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          }
+          
+          img {
+            width: 36px !important;
+            height: 36px !important;
+            max-width: 36px !important;
+            max-height: 36px !important;
+            border-radius: 50% !important;
+            object-fit: cover !important;
+          }
+        }
+      }
+    }
+    
+    // NOTIFICATION COUNTERS - CORRECTLY ANCHORED
+    > li {
+      position: relative !important; // This is the anchor
+
+      .counter {
+        position: absolute !important;
+        top: 10px !important;
+        right: 10px !important;
+        z-index: 10 !important;
+        
+        // The design of the counter itself is inherited
+      }
+    }
+    
+    // Theme toggle - perfectly aligned with other nav icons
+    .theme-toggle {
+      padding: 0 !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      height: 60px !important; // Match header height exactly
+      min-height: 60px !important; // Force exact height
+      width: 44px !important; // Same width as other nav items
+      
+      .form-check {
+        margin: 0 !important;
+        padding: 0 !important;
+        align-items: center !important;
+        justify-content: center !important;
+        display: flex !important;
+        height: 44px !important; // Same height as other nav items
+        width: 44px !important; // Same width as other nav items
+        border-radius: 50% !important; // Match other nav items
+        position: relative !important;
+        
+        .form-check-label {
+          display: none !important; // Hide labels on mobile for consistency
+        }
+        
+        .form-check-input {
+          width: 28px !important; // Smaller switch to fit in circular area
+          height: 16px !important; // Smaller switch to fit in circular area  
+          margin: 0 !important; // No margin for perfect centering
+          flex-shrink: 0 !important;
+          border-radius: 8px !important; // Proportional border radius
+          border-width: 1px !important; // Standard border
+          position: absolute !important;
+          top: 50% !important;
+          left: 50% !important;
+          transform: translate(-50%, -50%) !important; // Perfect centering
+        }
+        
+        // Hover state to match other nav items
+        &:hover {
+          background: var(--c-grey-100) !important;
+          transform: scale(1.05) !important;
+          transition: all 0.2s ease !important;
+        }
+      }
+    }
+  }
+
+  // Full-screen mobile dropdowns
+  .header .nav-right .dropdown-menu {
+    position: fixed !important;
+    top: 60px !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: calc(100vh - 60px) !important;
+    max-width: none !important;
+    min-width: auto !important;
+    transform: none !important;
+    border-radius: 0 !important;
+    z-index: 9999 !important;
+    overflow-y: auto !important;
+    border: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    
+    // Mobile close button
+    &::before {
+      content: "✕ Close" !important;
+      position: sticky !important;
+      top: 0 !important;
+      display: block !important;
+      background: var(--c-primary) !important;
+      color: white !important;
+      text-align: center !important;
+      padding: 15px !important;
+      cursor: pointer !important;
+      font-weight: bold !important;
+      z-index: 10000 !important;
+      font-size: 16px !important;
+    }
+    
+    // UNIFIED EMAIL/NOTIFICATION MOBILE LAYOUT
+    .peers {
+      padding: 15px 20px !important;
+      flex-wrap: wrap !important;
+      align-items: flex-start !important;
+      
+      .peer {
+        max-width: 100% !important;
+        
+        img {
+          width: 40px !important;
+          height: 40px !important;
+          margin-right: 12px !important;
+          flex-shrink: 0 !important;
+        }
+        
+        &.peer-greed {
+          flex: 1 !important;
+          min-width: 0 !important;
+          
+          // NOTIFICATIONS STYLE - Direct content (span > fw-500 + c-grey-600, then p > small)
+          > span {
+            display: block !important;
+            margin-bottom: 4px !important;
+            
+            .fw-500 {
+              font-size: 14px !important;
+              font-weight: 600 !important;
+              margin: 0 !important;
+              color: var(--c-text-base) !important;
+              display: inline !important;
+            }
+            
+            .c-grey-600 {
+              font-size: 13px !important;
+              color: var(--c-text-muted) !important;
+              line-height: 1.4 !important;
+              display: inline !important;
+            }
+          }
+          
+          > p {
+            margin: 0 !important;
+            
+            small {
+              font-size: 12px !important;
+              color: var(--c-text-muted) !important;
+            }
+          }
+          
+          // EMAILS STYLE - Match notifications exactly 
+          > div {
+            // Completely restructure emails to match notification layout
+            display: block !important;
+            
+            .peers {
+              display: inline !important; // Make name and action on same line
+              margin: 0 !important;
+              
+              .peer {
+                &:first-child {
+                  // Name section
+                  p {
+                    font-size: 14px !important;
+                    font-weight: 600 !important;
+                    margin: 0 !important;
+                    color: var(--c-text-base) !important;
+                    display: inline !important;
+                  }
+                  
+                  // Add action text after name
+                  &::after {
+                    content: " sent you a message" !important;
+                    font-size: 13px !important;
+                    color: var(--c-text-muted) !important;
+                    font-weight: normal !important;
+                  }
+                }
+                
+                &:last-child {
+                  // Move timestamp to its own line below (like notifications)
+                  display: block !important;
+                  margin-top: 2px !important;
+                  
+                  small {
+                    font-size: 12px !important;
+                    color: var(--c-text-muted) !important;
+                    display: block !important;
+                  }
+                }
+              }
+            }
+            
+            // Hide the email preview text completely to match notifications
+            > .c-grey-600,
+            .c-grey-600.fsz-sm {
+              display: none !important;
+            }
+          }
+        }
+      }
+    }
+    
+    // Header items in dropdown
+    .pX-20 {
+      padding-left: 20px !important;
+      padding-right: 20px !important;
+      
+      .fw-600 {
+        font-size: 16px !important;
+        font-weight: 600 !important;
+      }
+    }
+    
+    // Footer links in dropdown
+    .ta-c {
+      padding: 15px 20px !important;
+      
+      a {
+        font-size: 14px !important;
+        font-weight: 500 !important;
+      }
+    }
+  }
+}
+
+// Extra small screens - refined adjustments
+@media screen and (max-width: 479px) {
+  .header .header-container {
+    padding: 8px 5px !important; // Even less padding for tiny screens
+    gap: 8px !important;
+  }
+  
+  .header .nav-left {
+    max-width: 60% !important;
+    gap: 2px !important; // Even tighter spacing
+    
+    &::before {
+      width: 28px !important;
+      height: 28px !important;
+      font-size: 16px !important;
+      margin-right: 4px !important;
+    }
+    
+    > li > a {
+      padding: 8px 4px !important;
+      
+      i {
+        font-size: 18px !important;
+      }
+    }
+  }
+  
+  .header .nav-right {
+    gap: 1px !important; // Minimal spacing
+    
+    > li > a {
+      padding: 8px 4px !important;
+      
+      i {
+        font-size: 18px !important; // Slightly smaller for tiny screens
+      }
+    }
+    
+    .theme-toggle .form-check-input {
+      width: 28px !important;
+      height: 16px !important;
+    }
+  }
+  
+  // Full-width search bar on tiny screens
+  .header .nav-left .search-input {
+    padding: 12px 15px !important;
+    
+    input {
+      padding: 10px 12px !important;
+      font-size: 16px !important; // Prevent zoom on iOS
+    }
+  }
+}
+
+// =============================================================================
+// FOOTER OVERLAP FIXES - MAINTAINING PREVIOUS FIXES
+// =============================================================================
+
+// Global layout fixes
+html, body {
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow-x: hidden !important;
+}
+
+// Page container - force flexbox layout
+.page-container {
+  display: flex !important;
+  flex-direction: column !important;
+  min-height: 100vh !important;
+  margin: 0 !important;
+  padding-top: 60px !important;
+}
+
+// Main content - flexible
+.main-content {
+  flex: 1 0 auto !important;
+  padding: 20px 10px 40px !important;
+  margin: 0 !important;
+  min-height: 0 !important;
+  overflow-x: hidden !important;
+}
+
+// Footer - fixed to bottom
+footer {
+  flex: 0 0 auto !important;
+  margin-top: auto !important;
+  padding: 15px 10px !important;
+  background: var(--c-bkg-card) !important;
+  border-top: 1px solid var(--c-border) !important;
+  text-align: center !important;
+  font-size: 11px !important;
+  line-height: 1.3 !important;
+  z-index: 10 !important;
+  position: relative !important;
+  width: 100% !important;
+  clear: both !important;
+  
+  // CRITICAL: Override lh-0 class that causes overlap
+  &.lh-0 {
+    line-height: 1.3 !important; // Force proper line height
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .page-container {
+    padding-left: 0 !important;
+    min-height: 100vh !important; // Ensure full height
+    position: relative !important; // Ensure positioning context
+  }
+  
+  .main-content {
+    padding: 15px 8px 60px !important; // Increased bottom padding for footer space
+    margin-bottom: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  
+      footer {
+      position: relative !important; // Ensure footer stays in flow
+      width: 100% !important;
+      padding: 15px 10px !important; // Increased padding for better spacing
+      font-size: 11px !important; // Slightly larger for readability
+      line-height: 1.4 !important; // Better line height for mobile
+      background: var(--c-bkg-card) !important;
+      border-top: 1px solid var(--c-border) !important;
+      margin-top: auto !important;
+      box-sizing: border-box !important;
+      
+      // CRITICAL MOBILE FIXES: Override all conflicting utility classes
+      &.lh-0 {
+        line-height: 1.4 !important; // Override line-height: 0 that causes overlap
+      }
+      
+      &.p-30 {
+        padding: 15px 10px !important; // Override desktop padding
+      }
+      
+      &.fsz-sm {
+        font-size: 11px !important; // Ensure readable font size on mobile
+      }
+    
+    span {
+      display: block !important; // Force block for better wrapping
+      word-wrap: break-word !important;
+      max-width: 100% !important;
+      text-align: center !important;
+      line-height: 1.4 !important;
+      
+      // Handle long text better
+      hyphens: auto !important;
+      word-break: break-word !important;
+      
+      a {
+        color: var(--c-primary) !important;
+        text-decoration: none !important;
+        display: inline !important; // Keep link inline within text
+        
+        &:hover {
+          text-decoration: underline !important;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 479px) {
+  .main-content {
+    padding: 10px 8px 50px !important; // Adequate bottom space for footer
+  }
+  
+      footer {
+      padding: 12px 8px !important;
+      font-size: 10px !important;
+      line-height: 1.5 !important; // Better readability on small screens
+      
+      // Override utility classes for small screens
+      &.lh-0 {
+        line-height: 1.5 !important; // Override line-height: 0
+      }
+      
+      &.p-30 {
+        padding: 12px 8px !important; // Override desktop padding
+      }
+      
+      &.fsz-sm {
+        font-size: 10px !important; // Ensure readable font size
+      }
+      
+      span {
+        display: block !important;
+        margin: 0 !important; // Remove extra margins
+        padding: 0 !important;
+        text-align: center !important;
+        
+        // Split long copyright text into multiple lines if needed
+        word-spacing: normal !important;
+        letter-spacing: normal !important;
+        
+        // Ensure links are readable
+        a {
+          display: inline !important;
+          white-space: nowrap !important; // Keep "Colorlib" as one word
+        }
+      }
+    }
+}
+
+// Additional mobile footer fixes
+@media screen and (max-width: 360px) {
+  footer {
+    font-size: 9px !important;
+    padding: 10px 5px !important;
+    
+    // Override utility classes for extra small screens  
+    &.lh-0 {
+      line-height: 1.6 !important; // Even better line height for tiny screens
+    }
+    
+    &.p-30 {
+      padding: 10px 5px !important; // Override desktop padding
+    }
+    
+    &.fsz-sm {
+      font-size: 9px !important; // Readable font size for tiny screens
+    }
+    
+    span {
+      line-height: 1.6 !important; // Ensure good readability
+      
+      // For very small screens, ensure text doesn't overlap
+      word-break: break-word !important;
+      overflow-wrap: break-word !important;
+      
+      // Ensure links are readable
+      a {
+        font-weight: bold !important;
+        color: var(--c-primary) !important;
+      }
+    }
+  }
+}
+
+// =============================================================================
+// UTILITY CLASSES FOR MOBILE
+// =============================================================================
+
+// Prevent body scroll when mobile menus are open
+body.mobile-menu-open {
+  overflow: hidden !important;
+  position: fixed !important;
+  width: 100% !important;
+}
+
+// Emergency fixes for any remaining issues
+@media screen and (max-width: 767px) {
+  // Ensure dropdowns don't break layout
+  .dropdown-menu.show {
+    position: fixed !important;
+  }
+  
+  // Prevent content overflow
+  .row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  
+  [class*="col-"] {
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+  }
+  
+  // Hide on mobile utility
+  .d-none-mobile {
+    display: none !important;
+  }
+  
+  // Force no horizontal scroll
+  * {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+}