/* ============================================
   Global Responsive Fixes for POS Machines
   & Smaller Screen Sizes
   ============================================ */

/* Ensure all tables scroll horizontally on small screens */
.mud-table-container {
    overflow: auto !important;
}

/* Toolbar buttons: wrap on small screens */
.mud-table .mud-toolbar,
.mud-table .mud-toolbar-content,
.mud-card-header .mud-toolbar,
.mud-card-header .mud-toolbar-content {
    flex-wrap: wrap;
    gap: 4px;
}

/* Toolbar button groups inside tables */
.mud-table .mud-toolbar .justify-center,
.mud-table .mud-toolbar .d-flex {
    flex-wrap: wrap;
    gap: 4px;
}

/* Footer switches: wrap on small screens */
.mud-table-foot .mud-table-cell {
    white-space: normal;
}

.mud-table-foot .mud-table-cell > * {
    display: inline-flex;
    flex-wrap: wrap;
}

/* Pager: ensure it doesn't overflow */
.mud-table-pagination {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
}

.mud-table-pagination .mud-table-pagination-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    min-height: auto;
    padding: 4px 8px;
}

/* Filter buttons row (e.g., BatchList) - wrap on small screens */
.mud-stack.mud-stack-row {
    flex-wrap: wrap !important;
}

/* Main content: prevent body overflow, allow scroll */
.mud-main-content {
    overflow-x: auto;
    min-width: 0;
}

.mud-main-content > .mud-container {
    overflow-x: visible;
    padding-left: 8px;
    padding-right: 8px;
}

/* ---- Small screen overrides (POS machines typically < 1024px) ---- */
@media (max-width: 1024px) {
    /* Reduce main content padding */
    .mud-main-content > .mud-container {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Compact toolbar buttons */
    .mud-table .mud-toolbar {
        padding: 4px 8px;
        min-height: auto;
    }

    .mud-table .mud-toolbar .mud-button {
        font-size: 0.75rem;
        padding: 4px 8px;
        min-width: auto;
    }

    /* Compact table cells */
    .mud-table .mud-table-cell {
        padding: 4px 8px;
        font-size: 0.8125rem;
    }

    /* Compact table header */
    .mud-table .mud-table-head .mud-table-cell {
        padding: 6px 8px;
        font-size: 0.8125rem;
    }

    /* Compact action menus */
    .mud-table .mud-menu .mud-button {
        font-size: 0.75rem;
        padding: 2px 8px;
        min-width: auto;
    }

    /* Compact chips */
    .mud-table .mud-chip {
        font-size: 0.7rem;
    }

    /* Compact HeroTitle */
    .mud-text.mb-2[style] {
        font-size: 1.1rem;
    }

    /* Footer switches: smaller */
    .mud-table-foot .mud-switch {
        margin-left: 2px !important;
    }

    /* Pager: compact */
    .mud-table-pagination .mud-table-pagination-toolbar {
        padding: 2px 4px;
    }

    .mud-table-pagination .mud-select {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    /* Even more compact on very small screens */
    .mud-main-content > .mud-container {
        padding-left: 2px;
        padding-right: 2px;
    }

    /* Stack toolbar: search goes full width below buttons */
    .mud-table .mud-toolbar-content {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mud-table .mud-toolbar .mud-input {
        min-width: 150px;
    }

    /* Compact table cells further */
    .mud-table .mud-table-cell {
        padding: 3px 6px;
        font-size: 0.75rem;
    }

    .mud-table .mud-table-head .mud-table-cell {
        padding: 4px 6px;
        font-size: 0.75rem;
    }

    /* Action buttons: icon-only style */
    .mud-table .mud-menu .mud-button {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    /* Ensure drawer doesn't take too much space */
    .mud-drawer {
        width: 200px !important;
    }

    /* AppBar compact */
    .mud-appbar .mud-text-h6 {
        font-size: 0.9rem;
    }
}