/* Mobile-First Responsive Utilities */

/* Mobile-friendly spacing */
@media (max-width: 768px) {
    /* Reduce main content padding on mobile */
    .mud-main-content {
        padding: 12px !important;
    }

    .mud-grid-item {
        padding-top: 8px !important;
    }
    /* Reduce container padding on mobile */
    .mud-container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Make cards more compact on mobile */
    .mud-card {
        margin-bottom: 12px;
    }

    .mud-card-header {
        padding: 12px !important;
    }

    .mud-card-actions {
        padding: 8px 12px !important;
    }

    /* Make tables scroll horizontally */
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce table padding on mobile */
    .mud-table-cell {
        padding: 8px 4px !important;
    }

    /* Make expansion panels more touch-friendly */
    .mud-expand-panel-header {
        min-height: 56px !important;
        padding: 12px !important;
    }

    /* Make chips wrap properly */
    .mud-chip-set {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Make dialogs full-screen on mobile */
    .mud-dialog-root {
        margin: 0 !important;
        max-height: 100dvh !important;
    }

    .mud-dialog {
        max-width: 100vw !important;
        margin: 0 !important;
    }

    /* Better form spacing on mobile */
    .mud-input {
        margin-bottom: 12px;
    }

    /* Make tabs scrollable on mobile */
    .mud-tabs .mud-tabs-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1280px) {
    .mud-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Better spacing for stacks on mobile */
@media (max-width: 768px) {
    .mud-stack-row {
        flex-wrap: wrap;
        gap: 8px !important;
    }
}

/* Better pagination on mobile */
@media (max-width: 768px) {
    .mud-pagination {
        font-size: 0.875rem;
    }

    .mud-pagination-item {
        min-width: 36px !important;
        height: 36px !important;
    }
}