/* Additional CSS for better mobile sticky header */
@media (max-width: 768px) {
    /* Remove container height restriction, only handle horizontal overflow */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    /* Make the table full width minimum */
    table {
        min-width: 800px; /* This ensures horizontal scroll when needed */
    }

    /* Make thead sticky to viewport when page scrolls */
    table thead {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--bg-primary);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
    }

    /* Ensure all header cells have proper background */
    table thead {
        border-bottom: 2px solid var(--border);
    }

    table thead th {
        background: var(--bg-primary);
    }

    /* First row of headers */
    #mainHeader th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 101;
        background: var(--bg-primary);
    }

    /* Second row of headers - positioned below first row */
    #subHeader th {
        position: -webkit-sticky;
        position: sticky;
        top: 0; /* Will automatically stack below mainHeader */
        z-index: 100;
        background: var(--bg-primary);
    }

    /* Ensure controls don't overlap with sticky header */
    .controls {
        position: relative; /* Remove sticky from controls on mobile */
        margin-bottom: 1rem;
    }
}