/* NUCLEAR OVERFLOW FIX - Mobile Sticky Headers
 * Loaded LAST to override all other CSS files
 * Container-based scrolling with almost full-screen height
 * Headers stick to TOP of container (not viewport)
 */

@media (max-width: 900px) {
    /* Body can have default overflow - allow page bounce for pull-to-refresh */
    body.app-page {
        overflow-y: auto !important;
    }
    
    /* Container allows normal behavior */
    .stream-command-container {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Table container: LARGE HEIGHT with both scroll directions - BASE */
    .table-container {
        max-height: calc(100vh - 180px) !important; /* Almost full screen: viewport - navbar(60px) - filters(120px) */
        overflow-x: auto !important;
        overflow-y: auto !important; /* Container scroll enables sticky headers */
        /* iOS overscroll fix - prevent bounce ONLY on table, not page */
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Override ALL JavaScript-added classes - Force large container on everything */
    .table-container.scrollable,
    .table-container.performance-mode,
    .table-container[class*="mode"],
    .table-container[class*="scroll"] {
        max-height: calc(100vh - 180px) !important;
        overflow-y: auto !important;
    }
    
    /* Prevent filters from scrolling with table */
    .filters-section {
        overflow-x: hidden !important;
    }
}