/* ========================================
   SIA e-BMD - Comprehensive Responsive Styles
   Breakpoints: xs(<600), sm(600-959), md(960-1279), lg(1280+)
   ======================================== */

/* ========================================
   Global Responsive Utilities
   ======================================== */

/* Table responsive wrapper - horizontal scroll on mobile */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Make MudTable scrollable on all screen sizes */
.mud-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.mud-table {
    min-width: 600px;
    /* Force horizontal scroll if narrower */
}

/* ========================================
   Mobile-specific Styles (< 600px)
   ======================================== */
@media (max-width: 599.98px) {

    /* Reduce padding on mobile */
    .mud-main-content {
        padding: 8px !important;
    }

    /* Smaller card padding */
    .mud-card-content {
        padding: 12px !important;
    }

    /* MudContainer - reduce margin */
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Full width buttons on mobile */
    .mud-button-group {
        flex-direction: column;
        width: 100%;
    }

    .mud-button-group .mud-button {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Smaller buttons on mobile */
    .mud-button {
        font-size: 0.8rem !important;
    }

    /* Adjust form layout - prevent iOS zoom */
    .mud-input-control input,
    .mud-input-control textarea {
        font-size: 16px !important;
    }

    /* Stack form fields with less padding */
    .mud-grid>.mud-item {
        padding: 4px !important;
    }

    /* Smaller typography */
    .mud-typography-h5 {
        font-size: 1.1rem !important;
    }

    .mud-typography-h6 {
        font-size: 0.95rem !important;
    }

    .mud-typography-body1 {
        font-size: 0.875rem !important;
    }

    .mud-typography-body2 {
        font-size: 0.8rem !important;
    }

    .mud-typography-caption {
        font-size: 0.7rem !important;
    }

    /* Hide breadcrumb on mobile */
    .mud-breadcrumbs {
        display: none !important;
    }

    /* Smaller table header */
    .mud-table-head .mud-table-cell {
        font-size: 0.75rem !important;
        padding: 8px 4px !important;
    }

    /* Smaller table cells */
    .mud-table-body .mud-table-cell {
        font-size: 0.75rem !important;
        padding: 6px 4px !important;
    }

    /* MudChip smaller on mobile */
    .mud-chip {
        font-size: 0.7rem !important;
        height: 22px !important;
    }

    /* Icon buttons smaller */
    .mud-icon-button {
        padding: 6px !important;
    }

    /* Dialog full width on mobile */
    .mud-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
        width: 100% !important;
    }

    .mud-dialog-content {
        padding: 12px !important;
    }

    .mud-dialog-actions {
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Drawer overlay mode enhancements */
    .mud-drawer--open {
        z-index: 1300 !important;
    }

    .mud-overlay {
        z-index: 1299 !important;
    }

    /* Pager - smaller */
    .mud-table-pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* Avatar smaller */
    .mud-avatar.mud-avatar-medium {
        width: 32px !important;
        height: 32px !important;
    }

    /* Alert - compact */
    .mud-alert {
        padding: 8px !important;
    }
}

/* ========================================
   Tablet-specific Styles (600px - 959px)
   ======================================== */
@media (min-width: 600px) and (max-width: 959.98px) {
    .mud-main-content {
        padding: 12px !important;
    }

    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Table - slightly smaller */
    .mud-table-head .mud-table-cell,
    .mud-table-body .mud-table-cell {
        font-size: 0.85rem !important;
        padding: 8px !important;
    }

    /* Dialog - 90% width max */
    .mud-dialog {
        max-width: 90% !important;
    }
}

/* ========================================
   Chat Widget Responsive
   ======================================== */
@media (max-width: 599.98px) {

    /* FAB position adjustment */
    .mud-fab {
        bottom: 16px !important;
        right: 16px !important;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {

    .mud-appbar,
    .mud-drawer,
    .mud-fab,
    .chat-widget,
    .mud-dialog-container,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .mud-table {
        min-width: auto !important;
    }

    .mud-table-cell {
        border: 1px solid #ddd !important;
    }
}

/* ========================================
   Utility Classes
   ======================================== */

/* Hide on mobile */
@media (max-width: 599.98px) {

    .hide-on-mobile,
    .d-none-xs {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 600px) and (max-width: 959.98px) {

    .hide-on-tablet,
    .d-none-sm {
        display: none !important;
    }
}

/* Full width on mobile */
@media (max-width: 599.98px) {
    .w-100-xs {
        width: 100% !important;
    }
}