/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {

    /* Container & General */
    /* Container & General */
    #mg-root .container {
        padding: 10px !important;
        width: 100%;
        max-width: 100%;
    }

    /* Customer Info Stacking */
    .customer-info {
        flex-direction: column;
        gap: 15px;
    }

    .customer-info .info-group {
        width: 100%;
        margin-right: 0;
    }

    /* Force Flex Column for Forms */
    #mg-root .form-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #mg-root .input-group,
    #mg-root .customer-info-section .input-group {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        grid-column: auto !important;
        /* Reset Grid Spans */
    }

    /* Reset padding for ALL Customer Info Sections on mobile */
    #mg-root .customer-info-section,
    #mg-root .customer-info-section.order-details {
        padding: 15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Product Header Stacking */
    /* Product Header Stacking */
    #mg-root .product-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
        height: auto !important;
        grid-template-columns: none !important;
        /* Reset if grid was used */
    }

    .product-header .ph-section {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        border-right: none;
        /* Remove separator on mobile */
        padding-right: 0;
    }

    /* Ensure inputs fill width */
    .ph-name input,
    .ph-material button {
        width: 100%;
    }

    /* Table Horizontal Scroll */
    .parts-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #eee;
        border-radius: 8px;
    }

    /* Table Min-Width to force scroll instead of squash */
    #mg-root table {
        min-width: 600px;
    }

    /* Modal Full Width */
    .modal-content {
        width: 95% !important;
        height: 90vh !important;
        max-width: none !important;
        margin: 10px;
    }

    /* Material Grid on Mobile */
    #material-list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    /* Larger Touch Targets for Delete/Add */
    .btn-text-danger {
        padding: 10px 0;
        /* Easier to tap */
    }

    /* Hide specific non-essential desktop flair if needed */
    .header-info-icon {
        display: none;
    }
}