/*
    Responsive visibility utilities for FluentDataGrid columns.

    Usage:
        <TemplateColumn Class="hidden-xs hidden-sm" ...>

    Breakpoints (matching common Bootstrap-style conventions):
        xs: < 576px
        sm: 576px - 767.98px
        md: 768px - 991.98px
        lg: 992px - 1199.98px
        xl: >= 1200px

    Each "hidden-{breakpoint}" class hides the column only while the
    viewport is within that specific breakpoint's range. Combine multiple
    classes (e.g. "hidden-xs hidden-sm") to hide a column across several
    breakpoints at once.
*/

/* xs: < 576px */
@media (max-width: 575.98px) {
    .hidden-xs {
        display: none !important;
    }
}

/* sm: 576px - 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm {
        display: none !important;
    }
}

/* md: 768px - 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md {
        display: none !important;
    }
}

/* lg: 992px - 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-lg {
        display: none !important;
    }
}

/* xl: >= 1200px */
@media (min-width: 1200px) {
    .hidden-xl {
        display: none !important;
    }
}