/**
 * MOBILE OVERFLOW FIX - Universal Solution
 * Prevents horizontal scroll and content cutoff on iOS/Android
 * Apply to all site pages
 */

/* Base overflow prevention */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* Container constraints */
body {
    box-sizing: border-box;
}

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

/* Mobile-specific fixes */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Prevent panes from overflowing without changing their width */
    .dashboard-grid {
        overflow-x: hidden !important;
    }
    
    .left-pane, .right-pane {
        overflow-x: hidden !important;
    }
    
    .user-profile-pane, .ranking-card, .card, .pane {
        box-sizing: border-box !important;
    }
    
    #rankingComponent {
        box-sizing: border-box !important;
    }
    
    /* Prevent images from causing overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Prevent pre/code blocks from overflow */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }
    
    /* Ensure tables don't overflow */
    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
    
    /* Ensure all content respects boundaries */
    * {
        box-sizing: border-box !important;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: none;
    }
}

/* Android-specific fixes */
@media (hover: none) and (pointer: coarse) {
    body {
        -webkit-tap-highlight-color: transparent;
    }
}