/* Copyright (c) FlexOps, LLC. All rights reserved. */
/* Responsive data grid styles for mobile devices. */

/* 768px matches theme.css and custom.css; the prior 767px left a 1px dead-zone
   at exactly 768px where this grid's mobile rules were off but the rest were on. */
@media (max-width: 768px) {
    .data-grid .rz-cell,
    .data-grid .rz-grid-table td {
        font-size: var(--text-sm);
        padding: var(--flexops-space-2) var(--flexops-space-3);
    }

    /* No header-size override here any more: --rz-grid-header-font-size is already
       --text-xs for every viewport (flexops-radzen-overrides.css §1), so a mobile
       rule restating it would only be a second place to keep in sync. If phones ever
       need their own size, set that VARIABLE here — never the label's font-size,
       which reaches the th but not the .rz-column-title that holds the text. */

    .data-grid .rz-hide-mobile {
        display: none !important;
    }

    .data-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-grid .rz-cell .rz-stack {
        flex-wrap: wrap;
    }
}

/* Improve touch targets on all mobile/tablet */
@media (pointer: coarse) {
    .data-grid .rz-button {
        min-height: 36px;
        min-width: 36px;
    }

    .data-grid .rz-cell-data {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}