/*
 * Mobile tuning for AG Grid tables.
 * Applies to grids declared with className="ag-theme-alpine responsive-grid".
 */

/* Header text wraps instead of being clipped (pairs with autoHeaderHeight). */
.responsive-grid .ag-header-cell-label {
    white-space: normal;
    line-height: 1.2;
}

@media only screen and (max-width: 768px) {
    .responsive-grid {
        /* Overrides the inline height so tables get more of the small screen. */
        height: 68vh !important;
        --ag-font-size: 12px;
        --ag-cell-horizontal-padding: 8px;
        --ag-icon-size: 16px;
    }

    .responsive-grid .ag-body-horizontal-scroll-viewport {
        -webkit-overflow-scrolling: touch;
    }

    /* Sort/filter affordances are hover-revealed on desktop; touch has no hover. */
    .responsive-grid .ag-header-cell-menu-button,
    .responsive-grid .ag-header-icon {
        opacity: 1;
    }

    .responsive-grid .ag-paging-panel {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 16px;
        padding: 8px;
    }

    .responsive-grid .ag-paging-row-summary-panel {
        display: none;
    }

    .responsive-grid .ag-paging-button {
        min-width: 36px;
        min-height: 36px;
        margin: 0 2px;
    }

    /* Filter popups default to a fixed width that overflows narrow screens. */
    .ag-popup .ag-filter,
    .ag-popup .ag-menu {
        max-width: 90vw;
    }
}