/* ============================================
   HORIZONTAL SCROLL FIX - FINAL
   Applied October 6, 2025
   Eliminates ALL horizontal scrolling and overlap issues
   ============================================ */

/* ============================================
   1. GLOBAL OVERFLOW PREVENTION
   ============================================ */

/* Prevent horizontal scroll on body and html */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* ============================================
   2. CONTAINER FIXES
   ============================================ */

/* Ensure all containers fit within viewport */
.container,
.main-nav .container,
.dashboard-main .container,
.community-main .container,
.racing-main .container,
.parts-main .container,
[class*="-main"] .container {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding-left: clamp(8px, 2vw, var(--space-lg)) !important;
  padding-right: clamp(8px, 2vw, var(--space-lg)) !important;
}

/* ============================================
   3. MAIN CONTENT AREAS
   ============================================ */

/* Prevent main areas from overflowing */
main,
[class*="-main"] {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* ============================================
   4. NAVIGATION FIXES
   ============================================ */

/* Navigation must never cause horizontal scroll */
.main-nav {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.nav-content {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.nav-links {
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

/* Hide any scrollbars on nav links */
.nav-links::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Mobile menu */
@media (max-width: 768px) {
  .nav-links {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ============================================
   5. TAB NAVIGATION FIXES
   ============================================ */

/* Absolutely no scrolling on tabs */
.tab-navigation,
.community-tabs,
.racing-tabs,
.parts-tabs,
[class*="-tabs"] {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* Force tabs to fit */
.tab-btn {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

/* ============================================
   6. GRID AND FLEXBOX FIXES
   ============================================ */

/* Prevent grids from overflowing */
[class*="-grid"],
[class*="grid-"] {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Flex containers */
[class*="flex"] {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================
   7. CARD AND CONTENT FIXES
   ============================================ */

/* Cards must fit */
.card,
[class*="-card"] {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Content sections */
.tab-content,
[class*="-content"] {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================
   8. FORM AND INPUT FIXES
   ============================================ */

/* Forms must fit */
form,
.form {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Inputs */
input,
textarea,
select,
button {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================
   9. IMAGE AND MEDIA FIXES
   ============================================ */

/* Images never overflow */
img,
svg,
video,
canvas {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* ============================================
   10. TABLE FIXES
   ============================================ */

/* Tables with horizontal scroll container */
table {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.table-container,
[class*="table-"] {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important; /* Tables can scroll */
  overflow-y: visible !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ============================================
   11. MODAL FIXES
   ============================================ */

/* Modals must fit */
.modal,
[class*="modal-"] {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

.modal-content {
  max-width: calc(100vw - 32px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================
   12. HEADER FIXES
   ============================================ */

/* Page headers */
.dashboard-header,
.community-header,
.racing-header,
.parts-header,
.marketplace-header,
[class*="-header"] {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================
   13. FOOTER FIXES
   ============================================ */

/* Footer must fit */
footer,
.footer,
[class*="footer-"] {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================
   14. SPECIFIC MOBILE FIXES
   ============================================ */

@media (max-width: 768px) {
  /* Reduce padding on small screens */
  .container {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }

  /* Ensure everything fits */
  * {
    max-width: 100vw !important;
  }

  /* Tabs extra tight */
  .tab-navigation,
  .community-tabs,
  .racing-tabs,
  .parts-tabs {
    gap: 2px !important;
  }

  .tab-btn {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
  }

  .tab-navigation,
  .community-tabs,
  .racing-tabs,
  .parts-tabs {
    gap: 1px !important;
  }

  .tab-btn {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: clamp(9px, 2.5vw, 11px) !important;
  }
}

@media (max-width: 360px) {
  .container {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .tab-navigation,
  .community-tabs,
  .racing-tabs,
  .parts-tabs {
    gap: 0 !important;
  }

  .tab-btn {
    padding: 4px 1px !important;
    font-size: 9px !important;
  }
}

/* ============================================
   15. OVERRIDE PROBLEMATIC STYLES
   ============================================ */

/* Override any overflow-x: auto */
.tab-navigation,
.community-tabs,
.racing-tabs,
.parts-tabs,
.dashboard-main,
.community-main,
.racing-main,
.parts-main {
  overflow-x: hidden !important;
}

/* Remove scrollbars from tabs */
.tab-navigation::-webkit-scrollbar,
.community-tabs::-webkit-scrollbar,
.racing-tabs::-webkit-scrollbar,
.parts-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============================================
   16. PREVENT POSITION ABSOLUTE OVERFLOW
   ============================================ */

/* Position absolute elements must stay in bounds */
[style*="position: absolute"],
[style*="position:absolute"] {
  max-width: 100% !important;
}

/* ============================================
   17. PREVENT TRANSFORM OVERFLOW
   ============================================ */

/* Elements with transforms must not overflow */
[style*="transform"],
[class*="transform"] {
  overflow: hidden !important;
}

/* ============================================
   18. WIDE CONTENT HANDLING
   ============================================ */

/* Pre-formatted text */
pre,
code {
  max-width: 100% !important;
  overflow-x: auto !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  box-sizing: border-box !important;
}

/* Long words */
p,
span,
div,
a,
button,
label {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
}

/* ============================================
   19. DEBUGGING AIDS
   ============================================ */

/* Uncomment to visualize overflow issues */
/*
* {
  outline: 1px solid rgba(255, 0, 0, 0.2) !important;
}

*:hover {
  outline: 2px solid rgba(255, 0, 0, 0.8) !important;
}
*/

/* ============================================
   20. NUCLEAR OPTION - FORCE FIT
   ============================================ */

/* Last resort - force everything to fit */
@media (max-width: 768px) {
  * {
    max-width: 100vw !important;
  }

  *:not(html):not(body) {
    max-width: 100% !important;
  }
}

/* ============================================
   21. SPECIFIC COMPONENT FIXES
   ============================================ */

/* Dashboard vehicles grid */
.vehicles-grid {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, 280px), 1fr)
  ) !important;
}

/* Forum and thread lists */
.forum-list,
.thread-list {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Game modes grid */
.game-modes-grid {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, 250px), 1fr)
  ) !important;
}

/* Parts search results */
.parts-results {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Marketplace listings */
.marketplace-grid {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, 260px), 1fr)
  ) !important;
}

/* ============================================
   22. VIEWPORT META TAG ENFORCEMENT
   ============================================ */

/* Ensure mobile viewport is respected */
@viewport {
  width: device-width;
  zoom: 1;
  min-zoom: 1;
  max-zoom: 3;
}

/* ============================================
   23. PRINT STYLES
   ============================================ */

@media print {
  * {
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* ============================================
   24. HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
  /* Ensure borders don't cause overflow */
  * {
    box-sizing: border-box !important;
  }
}

/* ============================================
   25. RTL SUPPORT
   ============================================ */

[dir="rtl"] .container,
[dir="rtl"] .nav-content {
  padding-left: clamp(8px, 2vw, var(--space-lg)) !important;
  padding-right: clamp(8px, 2vw, var(--space-lg)) !important;
}