/* Global page wrapper with proper padding */
.page-wrapper {
    width: 100%;
    max-width: 100%; /* Allow full width expansion */
    margin: 0 auto;
    padding: 0 2%; /* 2% padding from screen edges */
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Large screen optimizations */
@media (min-width: 1200px) {
    .page-wrapper {
        padding: 0 3%; /* Slightly more padding on large screens */
    }
}

@media (min-width: 1600px) {
    .page-wrapper {
        padding: 0 5%; /* Even more padding on ultra-wide screens */
        max-width: 1920px; /* Optional: cap at common max resolution */
        margin: 0 auto;
    }
}

/* Ensure body doesn't have horizontal scroll */
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Main content responsiveness */
.main-content,
.content,
.container {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Prevent any element from causing horizontal overflow */
* {
    max-width: 100%;
}

/* Large screen layout system */
@media (min-width: 1200px) {
    /* Base layout for desktop */
    body {
        font-size: 16px;
    }
    
    /* Ensure all containers expand properly */
    .container,
    .container-fluid,
    .content,
    .main-content {
        width: 100%;
        max-width: 100%;
    }
    
    /* Grid system for large screens */
    .row {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
}

@media (min-width: 1920px) {
    /* Ultra-wide screen handling */
    body {
        font-size: 18px; /* Slightly larger text for readability */
    }
    
    /* Center content on very large screens */
    .page-wrapper {
        max-width: 2000px;
        margin: 0 auto;
    }
}

/* Fix for when developer tools are open */
@media screen and (max-width: 1200px) {
    .page-wrapper {
        width: 100%;
        padding: 0 10px;
    }
    
    .fixed-market-stats-bar {
        width: 100%;
        left: 0;
        right: 0;
    }
    
    .market-stats-container {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
    }
}

/* Ensure flexbox containers don't push content */
.fixed-market-stats-bar,
.market-stats-container {
    flex-shrink: 0;
    min-width: 0;
}

/* Responsive padding adjustments */
@media (max-width: 1200px) {
    .page-wrapper {
        padding: 0 3%; /* Slightly more padding on medium screens */
    }
}

@media (max-width: 768px) {
    .page-wrapper {
        padding: 0 4%; /* More padding on smaller screens */
    }
}

@media (max-width: 480px) {
    .page-wrapper {
        padding: 0 10px; /* Fixed padding on very small screens */
    }
}

/* Override container padding and margin */
.container, 
.container-fluid, 
.container-lg, 
.container-md, 
.container-sm, 
.container-xl {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

/* Remove margin-bottom from mb-4 and my-4 */
.mb-4, .my-4 {
    margin-bottom: 0 !important;
}

/* Ensure these overrides take priority */
.container.px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Market stats specific container adjustments */
#fixed-market-stats-bar .container,
#fixed-market-stats-bar .container-fluid {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

/* Ensure market stats container uses full width above 1200px */
@media (min-width: 1201px) {
    .fixed-market-stats-bar {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Simplified approach for fixed bar */
    .fixed-market-stats-bar {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
}

@media (min-width: 1600px) {
    /* Removed problematic negative margins */
}

/* Mobile (max-width: 480px) - Remove borders and make components take 100% width */
@media (max-width: 480px) {
  /* Top performers card modifications */
  .top-performers-card {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }
  
  /* Advertisement space modifications */
  .trading-bot-card,
  .bot-controller-card,
  .ad-container {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }
  
  /* Ensure ad content uses full width */
  .adsbygoogle {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Remove stat-card styling from these specific components */
  .top-performers-card.stat-card,
  .trading-bot-card.stat-card,
  .bot-controller-card.stat-card {
    border-radius: 0 !important;
    border: none !important;
  }
  
  /* Ensure parent containers also take full width */
  .market-stats-container {
    padding: 0 !important;
  }
  
  /* Adjust inner padding for content */
  .performers-container {
    padding: 0 !important;
  }
}