adminator-admin-dashboard 2.7.0

package/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;
+  }
+}